HTML5 これまでと、これから
12/17(土)に東京理科大学の大学院特別講義で、外部講師として「HTML5 これまでと、これから」というタイトルで話をしてきた。
スライドはこちら。いつもどおり、Chromeでしか動作確認をしていない。
最初に「ウェブの進化」をとりあげながら、WebやHTMLの歴史を紹介した。このあたりの話、読むのも聞くのも好きなんですよ。個人的に。
W3CやHTMLやWHATWGの話をして、HTML5の話をした。広義のHTML5と、狭義のHTML5、様々な仕様について。
そのあとはいろいろなサンプルを紹介した。
最初は、スライド自体について説明した。html5slidesはHTML5でマークアップしていくことで、スライドを作れる。これを見せながらHTML5のタグの説明や、ChromeのDevToolsを使ったデバッグ方法を紹介した。
CSS3から、Media Queriesを紹介した。動きがあってわかりやすいかなと思って。こちらのリンクを開いて、ブラウザの横幅を変えるとレイアウトが変わる。最後の Hello Fisher - UX Design はけっこう面白い。
少しくらいは自分で作ったサンプルも紹介しないとね、ということでWebFontsのサンプルを。draw textボタンで文字列が表示され、rotateボタンを押した後にdraw textボタンを押すと、ちょっと文字列が回転している。WebFontsがいろいろな所で使えることや、Canvasの簡単な説明をした。
WebGLのサンプル。3Dやグラフィックカードを使った表現について話した。
これ自体は、オフラインとオンラインを検知するだけのサンプル。それでもWebアプリケーションがどんどんネイティブアプリケーションに近づき、オフラインに対応したアプリケーションを実装するうえで、とても大事なAPIだと思う。
音声認識のサンプル。MacBookとかなら、スピーチボタンを押して喋れば認識してくれる。こんなことがブラウザでできる。
タブを表示しているときだけ動画が再生される。これもアプリケーションというものを考えると大切な機能だと思う。
いろいろな要素をフルスクリーンにするAPI。ビデオをフルスクリーンにすることはよくある。でもこのAPIではさまざまな要素をフルスクリーンにできる。
Audio系のサンプルをいくつか。最初は「2001年宇宙の旅」のHAL9000のようなサンプル。音を解析して、Canvasで表現している。音源を再生するだけではなく、音源を加工したり解析したりできることを話した。
HTML5でターミナルを模したサンプル。helpで使えるコマンドが表示される。ファイルのドラッグアンドドロップにも対応しているし、3dとタイプすると3D表示される。普通のターミナルが、こんな感じになったら面白い。
