投稿日:

webMエンコード方法、及びvideoタグの書き方

googleがchromeでのh.264のサポートを打ち切ると発表いたしました。
今後、chromeが推し進めるコーデックは、webMになると考えられます。

そこで早速、webMのエンコード方法を調べてみました。

以前紹介した、『Miro Video Converter』というソフトで問題なくできるようです。
Formats（エンコード）の項目に、「webM(VP8)」 というのが選べます。

webMビデオサンプルページ

videoタグの書き方は下記のようになります。

-----------------
<video controls autoplay>
<source src="./sample_webM.webm" type='video/webm; codecs="vorbis,vp8"'>
</video>
-----------------

投稿日:

マッシュアップアワード6で受賞いたしました。

『 レコメガール 』 が、マッシュアップアワード6で、サイブリッジ賞、サントリービジネスエキスパート賞、TokyoArtBeat賞の3賞を受賞しました。感想くださった方々、ツイッターでRTしてくださった方々、はてぶしてくださった方々など、本当にありがとうございました。

MashupAwards6 レコメガール 作品説明ページ

マッシュアップアワード6 レコメガールで、3賞受賞させていただきました。

今回は、summerwindさんといっしょに作らせていただきました。特に動画と画像の合成部分は、わずか１日ほどで基本となるものを作ってくださり、スピード感のある、いい意味で緊張した関係で開発をすすめることができたと思います。さすがでした。
自分は、デザインや表面のマークアップ、細かい動きのjsなど、見た目周りを中心に担当しました。

動画と画像の合成部分の作り方を簡単にいうと、AfterEffects CS4からバンドルされているMochaというソフトを使い、１フレームごとの動画を解析し、そのデータを元にAPIで引っ張ってきた画像をHTML5のcanvas上で合成しています。
（近いうちに、AEPで詳しい作り方を書きます）

個人的な反省点としては、コンテンツとしての厚みが足りなかったと思います。
HTML5でできているという技術的な点を抜かしてしまうと、薄いコンテンツに感じてしまい、もう１，２段、深い意味と厚みを持たせたコンテンツにできたかなと思いました。

今回、感じたことや反省点を、次回作るものに生かしていこうと思います。
受賞でき、とてもうれしかったです。
常日頃、お世話になっているみなさまのおかげです。本当にありがとうございました。

投稿日:

firefox用HTML5ビデオサンプル（ogg Theora書き出し方法）

firefox用のビデオコーデック、ogg Theoraへのエンコード方法です。

AdobeのCS5以降では、普通に書き出しできると思いますが、持っていない方は、下記のフリーソフトでできます。

Miro Video Converter
やり方は、ファイルを選んで、Formats（エンコード）を、Theoraに設定して、『Convert!』ボタンを押すだけです。

html5のvideoタグは、下記のように書きます。
コーデックがいろいろあるので、typeからcodecsまで記入しないと見れないブラウザもありました。
サンプルページも用意しました。

-----------------
<video controls autoplay>
<source src="./sample_ogg.ogv" type='video/ogg; codecs="theora, vorbis"'>
</video>
-----------------

ogg Theora ビデオサンプル

ちなみに、上記のフリーソフトでやると、拡張子がogvになりますが、これはoggの動画の拡張子になります。
（oggは、コーデックの名称でなくコンテナの名称になります。コーデックは、Theoraです。wikipediaなどで詳しく説明されています。）

投稿日:

HTML5でできたサイトのアクセス内容

2週間ほど前、『FlashとHTML5と…』 という、主にHTML5で書かれたサイトを作りました。

ありがたいことに、ツイッターで多くRTしてくださったり、ホッテントリに入ったりと、多くのアクセスをいただきました。

時間もたって落ち着いてきたので、HTML5と名のつくサイトに、「どれくらいの人がくるのか？」　「くる人のブラウザの比率は？」　「ホッテントリに入るとどれくらいの人が来るのか？」　などを、お礼の変わりにご報告したいと思います。

まずは、アクセス数周りから。

図.アクセス数と訪問者の参照元
FlashとHTML5と…　訪問者の参照元

図にも書いてありますが、UUは5000件ほどでした。
6、7年前、当時日本で有名だったらランキングサイトReadme!で２位になったことがありまして、そのときは一日１５万ほどのアクセスがあったのですが、インターネットの人口も増えた今、はてぶのトップ（下のほうだけど）で、UU5000件は、想像よりは少なかったです。
（もちろん、特定の分野の人にしか興味がないサイトなので、当たり前なのかもしれませんが）

ホッテントリからの訪問者は800人ほどのようです。最高で、総合ホッテントリの上から30番目くらいでした。

図.訪問者のブラウザと OS
FlashとHTML5と…　訪問者のブラウザ比率

ブラウザ比率　IEは10%、はてぶだからかFirefoxが一番多かったです。
chromeも多いですが、Firefoxで一度見た人が、chromeに変えてみているのでカウントされてしまっているのもあるのかなと思っています。

気になったのが、iPhoneからのアクセスが1割近くあるということですね。実際に、周りのエンジニア寄りな人からも、「iPhoneだと見れなかった」と言葉いただいたので、技術的なサイトを作る際は、スマートフォン対応は、必須に近いかなと思いました。

まとめ

サービスではなくコンテンツなので、あまり参考にならないデータかもしれません。

内容が内容だけに、ブラウザ比率などは一般の数字とちょっと違うデータになりました。
最初、IEの比率は、5%ほどだったのですが、日を追うごとに少しずつ増えていき、いまでは10%近くになっています。これは、最初エンジニア寄りの人から情報がくだっていって、普通のユーザにも情報が少しは届いていったかなと考えました。

最後に、参考にさせていただいたclockmakerさんのブログの 『Flashだとここまでできる! HTML5とFlashの機能比較』 からリンクを貼っていただきました。ありがとうございました。

遅いお礼になってしまいますが、RTやリプライくださった方、はてぶに入れてくださった方、コメントくださった方、本当にありがとうございました。

投稿日:

HTML5のaudioをjavascriptで再生する方法

HTML5のサイト内で、音楽の切り替えをするとき、jQueryのappendToを使って下記のようのしていたのですが、safariなどで音が2重に聞こえてしまったりと、不具合がありました。
------------------------
$('<audio src="./sound/en/html5en_05.mp3" volume="0.1" autoplay></audio>').appendTo('body');
------------------------

HTML5のタグ追加ではなく、Javascriptから直接HTML5のaudio要素を操作するには、下記のようにすることで操作できます。
jsから操作することで、safariなどで2重に聞こえてしまう不具合は解消されました。
------------------------
var html5_audio;
html5_audio = new Audio("./sound/en/html5en_05.mp3");
html5_audio.play(); //再生
html5_audio.pause(); //ストップ
------------------------

ループの設定などは下記のようにします。
------------------------
html5_audio.loop = "true";
------------------------

投稿日:

css3 -webkit-animationの実行回数

html5関連のメモです。
css3のwebkitアニメーションで、再生回数を制限したいときは、-webkit-animation-iteration-count　を設定すればできます。
繰り返したくないときは、下記のように1を設定すれば大丈夫です。

-webkit-animation-iteration-count: 1;

無制限にループさせたいときは、下記のようにinfiniteと設定。

-webkit-animation-iteration-count: infinite;