過去の恥ずかしい記録をまとめました。

デジタル降魔録ＴＯＰページへ

－過去ログは古い順に並んでいます－

２０１４年１月３日（金）９℃（午前８時１７分）　

新年・・・

新年明けましておめでとうございます。

　デジタル降魔録、新春１発目です。

　昨日までアルコール漬けでした。毎年そうですが、今年は実家ではなく自宅で迎えました。
　つまり、一歩も外に出ていないという状態です。

　それでも、ここのページの更新は怠っていません。ちゃんとやることやっていますので……。

　そろそろラノベの発表時期が近づいてきました。どきどきしつつ、今年も無事幕が明けました。
　さてさてどんな年になりますでしょうか……。
　奇跡は起きるのでしょうか……。

　どうぞ、本年もよろしくお願いします。

２０１４年１月１８日（土）８℃（午後４時２７分）　

ｈｔｍｌ５・・・

進む戻る

今年一発目のガネーシャの課題です。
「スマホのブラウザはＦｌａｓｈを見捨てたので、何とかＦｌａｓｈで作った動画をスマホで見れるようにしてくれ」
　という指令がメールでやって来ました。

　そうなんすよね。ｉＰｈｏｎｅにしろＡｎｄｒｏｉｄにしろ。
　Ｆｌａｓｈが映らなくなってしまったんです。
　なんちゅうことしてくれるんでしょね。

　で、どうするか……。
　さいわい垂れ流しのビデオムービーでいいというコトなので、
　Ｆｌａｓｈで作ったモノをＱｉｃｋＴｉｍｅの『Ｍｏｖ』に書き出し、ビデオ画像を作り、それを『ｍｐ４』に変換してサイトにアップすることにしました。

　ビデオ画像を簡単にサイトにアップするには『ｈｔｍｌ５』から装備された『ｖｉｄｅｏ』タグが便利ということで、ｈｔｍｌ５に変更してみました。

＜！ＤＯＣＴＹＰＥＨＴＭＬＰＵＢＬＩＣ・・・・・・＞と始まる、『！ＤＯＣＴＹＰＥ』宣言を……。

＜！ＤＯＣＴＹＰＥｈｔｍｌ＞
　とするだけ。えらい簡単になったもんです。

　──ついでに、
＜ｈｔｍｌ　ｌａｎｇ＝ｊａ””＞
＜ｍｅｔａ　ｃｈａｒｓｅｔ＝”ｓｈｉｆｔ＿ｊｉｓ”＞

この辺の詳しくはhttp://www.htmq.com/html5/003.shtmlさんで書かれています。

　と、下地を作って、あとは『ｖｉｄｅｏ』タグ。

＜ｖｉｄｅｏ　ｓｒｃ＝”ＡＡＡ．ｍｐ４”　ｃｏｎｔｒｏｌｓ＝”ｃｏｎｔｒｏｌｓ”　ｐｒｅｌｏａｄ＝”ｎｏｎｅ”　ｐｏｓｔｅｒ＝”ｐｒｅｐｘ．ｊｐｇ”　ｏｎｃｌｉｃｋ＝”ｔｈｉｓ．ｐｌａｙ（）；”＞
動画を再生するにはvideoタグをサポートしたブラウザ（インターネットエクスプローラ９以上）が必要です。
＜／ｖｉｄｅｏ＞

と書きます。

　これは、AAA.mp4 という動画（ｓｒｃ＝”ＡＡＡ．ｍｐ４”）を、インターフェース付き（ｃｏｎｔｒｏｌｓ＝”ｃｏｎｔｒｏｌｓ”）で、さらに先読みなし（ｐｒｅｌｏａｄ＝”ｎｏｎｅ”）、そしてprepx.jpgというファイル名の画像（ｐｏｓｔｅｒ＝”ｐｒｅｐｘ．ｊｐｇ”）をタップ、あるいはクリックしたら（ｏｎｃｌｉｃｋ＝”ｔｈｉｓ．ｐｌａｙ（）；”）スタートするという記序です。

　ａｕｔｏｐｌａｙ属性を設定しても、Ａｎｄｒｏｉｄでは自動スタートしませんでした。このあたりはスクリプトで対処できるとして……。

　それからｖｉｄｅｏタグに対応していないブラウザで見た場合、
『動画を再生するにはvideoタグをサポートしたブラウザ（インターネットエクスプローラ９以上）が必要です。』
　と表示されます。

もっと詳しくは　http://www.htmq.com/html5/004.shtmlさんで……。

このままだと、画面左端にちっこく映るので、ＣＳＳで画面中央、大きさもなるべくスマホの縦画面にフィットするように、


video	{

	width: 100%;
	height: auto;
}

を付加します。
　ついでに、ｖｉｄｅｏタグをｄｉｖブロックなどで挟んで　ａｌｉｇｎ＝”ｃｅｎｔｅｒ”とやってやれば中央寄せになりました。

　これで、だいたいのスマホの縦画面でフィットしますが、横画面にしたときにフィットしてくれないブラウザがあります。指で調整すれば任意の大きさになるので、それでいいじゃんと言えばこんな楽なことはないですが、たぶんそうは問屋が卸してくれない。
　しかもＡｎｄｒｏｉｄのグーグルのブラウザだと、横にするとサイズ変更ができず。スクロールしか利かないという最悪な状態に。
　ｃｓｓを従来の動画サイズにもどせば……



video	{

	width: 600px;

	height: 800px;

}

　縦画面でも横画面でもサイズ変更は利くようになるけど、画面にフィットしなくなる。

　出たぁ。このわけのわからない挙動。統一性のない動き。もうウンザリ……。
　たぶん自分の知識の無さを棚に上げて、プリプリしているんだろうと思いますが、それにしてもなんなんでしょ。この腑に落ちない気分。
　あ～しんど。

　ただ、スマホのビデオ再生インターフェース（画面下にある再生ボタンや再生バーなど）の右左端にある画面フィットボタンを押せば、縦画面、横画面共に最適な大きさにフィットしてくれるのですが、これを押さずにして欲しいとか、言われるような気がします。

　それとまだ、壁があります。
　最初、スマホの標準ブラウザでは動画がスタートするのに、グーグルのブラウザで見た時と、スマホでなくパソコンで見た時に最初の１画面は見えているのにその先が動かないということがありました。

　この場合サーバの設定に原因があります。
　パソコンのハードディスクに乗っているサイトを見ると動画がちゃんと動くのに、サーバーに載せると動かなくなるという症状で、はっと気づきました。
『.htaccess』ファイルをサーバーに載せなければいけないことを。
　中身は……



AddType video/ogg .ogg .ogv

AddType video/mp4 .mp4

AddType audio/ogg .ogg

AddType application/ogg .ogg .ogv

と書かれたテキストファイルです。
　んが。これも一癖二癖あります。
　テキストファイルなので、最初はファイル名を『htaccess.txt』としてアップすればいいのだろうと思っていて、そのままアップしてみたけれど、な～んも変化無し。
　よく説明を見ると、
『.htaccess』と、『.』から始まったファイル名だということに気づきました。
　ところが、Ｗｉｎｄｏｗｓでは『.』ドットからは始まるファイルは作れません。
　仕方がないので、とりあえず『htaccess.txt』というファイルで拵えて、それをアップしてから『.htaccess』と言う名前に変更したら、起動しました。
　これで、スマホの標準ブラウザ、ぐーぐるのブラウザ。パソコンのｉＥ９以上のブラウザでサイトに張ったムービが見れます。

　これに関しては　http://www.htmq.com/html5/004.shtmlさんで詳しく書かれています……。

　ただし、ＣＳＳで画面サイズにフィットさせると、パソコンの画面を溢れた映像になりますが、今回はパソコンはどうでもいいというコトなので、そのままになっています。

　どちらにしても、また頭が痛いことになってきました。詳しい人がこのサイトを見たら、ほくそ笑んでいるでしょうね。
　縦でも横でも全てのスマホ、ｉＰａｄ類で、常に画面にフィットする動画って、どうやったらいいのでしょうね。

　あぁぁ。頭痛ぇぇ。　ε-(￣ヘ￣)┌ ﾀﾞﾐﾀﾞｺﾘｬ…

２０１４年１月１９日（日）６.５℃（午前１１時９分）　

テスト的に・・・

戻る

　昨日のｍｐ４動画をスマホで見る。のサンプルがどんなもんでっか？
　と、興味をお持ちの方は、こちらのSampleをご覧ください。
　ただし、ｉＥ９以上の方でないとちゃんと映りません。すみませんです。

　とりあえず、



window.onload = function() {
  var pElement = document.getElementById("sample");
  pElement.play();
  pElement.loop = true;
};

というスクリプトも追加して、自動スタート、ループ再生ができないブラウザにも対応させてみましたが、それでも自動再生しない頑固なヤツもあります。

　──もう、知らん！！　ε- (￣､￣A) ﾌｩｰ