Making of 名残の秋

紅葉ももう終わりかけ、京都の醍醐寺に出かけiPhoneで撮った写真が思いの外綺麗だったので、フルスクリーンのスライドショーに、できれば1枚毎に写真をズームインしたり、凝ったつくりにしてみようと思い立ちました。それもスマホでも楽しめるようにレスポンシブにしたいです。ようはJR東海のそうだ京都行こうみたいなものができるのではと考えた訳です。

Edge Animate

最初にトライしたのはEdge Animate、これでBGMも組み込んでみようと考えました。このブログのヘッダー部分の電車のアニメはこのEdge Animateで作っています。現在の標準的なデスクトップのスクリーンの横幅1920pxとスマホの320pxで電車が初期位置で消えないようにするには結構工夫が必要でした。

写真のスライドショーをフルスクリーンでレスポンシブにしようとすると、電車のように原寸で移動させるとほんの一部しか見えなくなるので、ステージに併せて縮小することになります。この時、横幅だけじゃなくてどうしても縦寸が問題になってきます。横幅の変化に応じて画像を縮小すると、縦長のステージでは大きな空白ができたり、ステージから外れてしまいます。

色々トライし、スクリプトで解決できないか、と先人の工夫を色々検索してみたのですが、どうやらこの辺はEdge Animateのイマイチなところでもあるようで、今後のバージョンアップでの解決を期待することにして、他の方法を考えることにしました。

動画のスライドショー

思いついたのがPremiere Proで動画にしてしまう方法です。YouTubeにアップしてしまえば、フルスクリーンでレスポンシブという条件は満たすはずです。Edge AnimteやFlash同様Premiere Proではタイムラインで静止画を組み込み、モーションを付けることができます。音源もさすがにMy Favorite Thingsのフリー素材は入手できなかったものの、それっぽいのを探しだして組み込んでみました。

エフェクトやトランジションの設定も上手く行って、メディアに書き出し、YouTubeの基本であるはずのH.264コーデックで出力、エンコードされたファイルを開いてみると、バッチリです。ところが、YouTubeにアップロードした動画を開いてみると絵が汚い。色が滲んでいて輪郭もぼやけています。どうもYouTubeのエンコードで思いっきり劣化させられているみたいです。できるだけ解像度をあげたり、mpegやaviにエンコードし直してアップしてもほとんど変わらず、あきらめました。

せっかくなので、小さいサイズで貼っておきますが、拡大しないで見て欲しいです。

CSS3のスライドショー

で、また検索しまくっていたらこんなサイトを見つけました。CSS3のスクリプトです。早速組み込んでみたらバッチリ、JSファイルも使っていますが、moderniz.customというクロスブラウザ対応のスクリプトだけです。スライドしているのはspan要素の背景に設定した画像です。CSSのanimationプロパティでここまでできるとは思いませんでした。

もひとつスゴイのが画像の:after擬似要素でスライド画像に網掛けしていることです。2pxの1/4の黒い透過画像で全体に網掛けしています。これで画像を拡大しても画像がとてもなめらかで、かつ上品に見えるようになります。この発想はなかったです。

せっかくなので、DrupalのImageFieldをスライドになるようにしていました。ThemeKeyモジュールを入れて、このコンテンツだけ、ごくごくシンプルなテーマを適用するようにして、PHPでImageFieldの要素を取り出して上述のspan要素の背景にしています。これで他のスライドショーも簡単に作れるのと、Viewsで他のコンテンツと一括して扱えるので、ひとつのブログコンテンツとして作成しています。

こうしてできたのが名残の秋です。スマホの縦向き、横向きもバッチリです。音はここでは割愛、できればこれを流しながら、見ていただけると嬉しいです。（CSS3非対応なのでIE9以下はNG）

最近、ウェブサイトはシステムやデザイン以上にやはりコンテンツ、ということを強く感じています。文章力ということも大きな要素ですが、ビジュアル素材の見せ方もコンテンツの重要な要素なってくると思います。

上手く行かなかったものの動画でのスライドショー制作やEdge Animateの工夫も今後に活かせそうです。