#4561

可動部分の試行錯誤


web制作 ゲームのプレイ日記


最近あとで読むサービスの『Pocket』に貯まっている未読の数が大変なことになっていて、
一時期「なるべく常時300は超えないようにしよう」と心がけていたつもりなのに
いつの間にか630を超えていました。
で、久々に未読記事を片っ端から片付けていったら、
ひょんなことからあとで読むマークを付けておいたHTML5のVIDEOタグに関する記事に目がいき、
試しにXAMPPで表示してみたら画像を表示するかのように簡単に実装でき、
これを特設サイトに組み入れたら面白いんじゃないか、と思いついてしまったせいで、
今日は連休の計画も棚に上げておよそ8時間半、久々にサイト更新系作業に没頭していました。
構想としては最近おしゃれなサイトでよく見る全画面背景動画を
例のピクミンチャレンジモード大会のトップページに組み込むというもの。

HTML5のVideoタグは動画再生制御のためにJavaScriptと連携できるよう設計されているため、
先人の知恵をアレンジして、JavaScriptで10秒動画を次々にシャッフル再生するようにしました。
大まかな外観はすぐに出来上がったのですが、苦戦したポイントがいくつか。
まず、動画自体は背景としては指定できないのでCSSでbackground-sizeの指定ができないため、
普通にブロック要素に対して Width:100% とすると
実際の表示と動画のアスペクト比が合わなかった場合に余白が表示されてしまいます。
これは延々思い悩んで最終的にjQueryのリサイズプロパティを使って、
実際のウィンドウのアスペクト比のうち小さい方を無視するように計算することで凌ぎました。

あとは携帯版対応の問題。正直これで一度匙を投げかけました。
iOSは基本的にはautoplayに対応していないらしく、
試しにページを表示してみると動画のPosterがDisplayプロパティを無視して表示してしまう……。
今回の案は連続再生のために2本目以降をDisplay:noneで待機させておく仕組みだったので、
ここに不具合が出ると待機動画の数だけずらっと再生待ちブロックが並んでしまうと。
じゃあ携帯版での動画再生は諦めてサムネイルのスライドショーにしよう、
と思って深夜から試行錯誤していたら、
今度は右側に意図しない空白が現れるiOS特有の不具合と遭遇し、
これのせいで背景スライドショーが右側にもはみ出て表示されてしまうという。
8時間半の激闘は03時過ぎに眠気の限界に達し、最終的には公開できませんでした。
更新作業自体は楽しい作業なので良いのですが、
こういう環境毎の表示の差異を吸収する作業はなかなかしんどさがありますね……。
明日でなんとか公開まで漕ぎ着ければいいのですが。

余談ですが昨日やっていた『ポケットモンスター X』スーパーマルチの進撃は、
今日でいよいよ初の50戦目に挑戦か、と思いきや48戦目でまさかの敗北でした。
パーティ4匹のうち2匹がでんきに弱かったところを、
ライコウを含むでんきタイプばかりのポケモンをぶつけられてなすすべもなく。
40戦目までの対でんきパーティ戦はそれでもゴリ押しでなんとかなっていたのですが、
準伝説級となるとちゃんと対策が見えていないと厳しいみたいです。

コメントを残す