女子小学生と××したい

Webフロントエンド界のゴミクソメンヘラであり続けたい

たぶん世界最年少のクリエイティブディレクターと一緒にお仕事をしました

お久しぶりです。
デザイナーの佐藤ねじさんからサイト制作のお話をいただきましたシリーズです。

たぶん世界最年少のクリエイティブディレクター

と言っても簡単なLPだけだったので今回は1時間程度でしたが。
ねじさんの息子さん(1歳)にクリエイティブディレクターをしてもらい、グラフィックから文言、リンク先管理などを全てやらせてみたらどうなるか、というものでした。
つくづくねじさんの「誰もいない土俵を探す」発想には毎度毎度驚かされます。
それと、今回すごく息子さんのライフログ的な意味合いが強いと思うんですが、クレジット乗せてもらって申し訳ないなぁとか思った。
断っておくべきだったろうか
あとこのクレジット、知らない人が見ると家族か何かだと思ってしまうんじゃないだろか。苗字一緒だし

あ、動画がすごくほっこりします。やばいです。ほっこり。
クリエイティブディレクターが自由過ぎて。

で、えーと、技術的な話はそんなにないんですが

1.背景に動画敷いたら素敵な表現になった

今回、キャプション部分(8a16df449dda796b0f57a9a2ff6f2b38.png)と、外側のコンテナ部分(0f403ef08b3f883c195c3749c5195570.png)に透過が仕込まれています。
さらに、ねじさんからの要望で、サイトに置いてあるyoutube動画と同様のものをその背景に敷いたら不思議な表現になりそう、との話をうかがってやってみたら、正に新しい、素敵な表現になってびっくりしました。
これを上手く応用すると、同様な一枚の画像の背景で上手い感じに動画を仕込めば、画像は一枚で、DOM操作をしなくても複数の見え方ができる、ということができたり、もしかしたらブラウン管テレビみたいなことができるんじゃねーかなーと思いました。

2.youtube player APIはスマホ対応していない?

1.に書いた演出は、実はPCでしか見ることができません。
経緯を話しますと、背景に敷いている動画はyoutubeが提供している通常の埋め込みではなく、前回佐藤フィルターで使ったyoutube player APIから動画を呼び出して埋め込んでいます。
youtube player APIを採用した理由として、背景の動画は音を鳴らしたくないという要望があったからで、通常の埋め込みパラメータの中にはvolumeやmuteといったものがありません。というわけで、youtube player APIを使い、onYouTubePlayerReadyのタイミングでplayer.mute();しているというわけです。
で、こっからはちゃんと調べてないんですが、youtube player APIで呼び出す動画は基本的にAS3のもので、flash非対応ブラウザにはHTML5のものを埋め込むわけ「ではない」可能性があります。
実際今回、出来上がったサイトをiPhoneから見てみたら、背景の動画は再生されず、かつonYouTubePlayerReadyも呼ばれていませんでした。
公式のドキュメントを読んで追記しますが、現時点ではyoutube player APIはスマホ未対応の可能性があります

3.youtube player APIによる埋め込みを行うとパラメータが一部無視される?

なんか長くなってきたからざっくり書こう
背景の動画、ループさせるという要望だったのでembedのパラメータにloop=1を仕込んだんですが、これが何故か無視されていました。他のも無視される可能性あります。ということで今回は

player.addEventListener('onStateChange','handleLoopVideo');

function handleLoopVideo(){
    // 0は'終了'を示す
    if(player.getPlayerState()===0){
        player.playVideo();
    }
}

として、playerの状態変化時にイベントハンドラを貼り、再生終了だったらまた頭出し再生する、という処理を追加しましたとさ、という話です。

結局長くなってしまいましたが今回も色々と学びの多い制作でした。ねじさん、ねじさんの息子さん、ありがとうございました!