本日は渋谷ヒカリエにてMicrosoft MVPでもある山崎大助さんの「DEMOを見て感じるHTML5！！～そして時代に必要なスキルも教えちゃいます！！～」セミナーへ参加させて頂きました。さて、HTML5を利用する上でのスキルというのはどのようなものでしょうか？HTML5そのものが広い範囲の技術をサポートしています。その切り口になればと思います。
本日のアジェンダは下記の通りですが本題意外は特に記述する内容ではないので省略します。
- 開催者説明/紹介等
- 軽く概要、基礎知識 講演 DEMOを見て感じるHTML5
- 質疑応答
- 懇親会
軽く概要、基礎知識 講演 DEMOを見て感じるHTML5
前置き
日本でHTML5の勉強会はいっぱいあるがクリエイター目線から見たHMTL5のお話を展開されました。このセミナーの目標は
- え！こんなことできるの？
- 面白い
- やってみたい
- もっと勉強したい
- この機能つかてみたい
ということです。
山崎さんの自己紹介ですが、山崎さんは別の業界（アパレル）からスタートしたようです。心臓を悪くしてパソコンを購入しIT業界では13年のキャリアがあるそうです（IT業界はより過酷だと思うのですが）。行動が自分を変える、気がついたときに始めるというのが大事なことのようです。
夢に近づくために行動ができているかですが、夢は「意志・行動」で叶えるそうです。多くの企業に面接したそうですが連敗続きだったそうです。
ネットワークグループという部署でFlushを触る機会があり「面白い！」という感覚があったそうです。そこでもっとすごいものを作りたいという意志からより技術習得に励んでいったそうです。iPad上でHTML5アプリを作成し出版社にお話を持ちかけ、結果ですが日経ソフトウェアで掲載されたそうです。その読者がレスポンシブデザインの出版を持ちかけたそうです。
さて、お話の前置きはこのくらいで本題に入ります。
本題
HTML5.0は2014年に正式勧告になります。これに間に合わなかった技術はHTML5.1で取り込まれます。HTMLは情報を流すだけのテクノロジーではありません。アプリケーションになります。
HTML5 APIはほとんどのブラウザで取り込められてます。残念なのやはりIEでしょう。IEはあまりHTML5に積極的でないように思えます。ただIE10以降に関しては機能が取り込まれています。エンタープライズではIEを利用することが多いと思いますがこのIEのHTML5サポートによりあまり活用されないのではということが危惧されます。
HTML5では音声に関するAPIが提供されていないということです。正確にはTransrator APIの部分のことです。ここでのデモで利用されているアーキテクチャは
このTransrator APIはBing 翻訳で利用されているAPIです。そしてWebSpeech APIですが、現時点ではChromeのみのサポートです。このAPIはしゃべった内容がテキストで書かれます。実際のデモは、山崎さんがしゃべった言葉をテキストに書き出し、それを翻訳し音源を使い英語でしゃべるという流れです。まとめると
- しゃべる
- しゃべった内容をテキスト書き出し
- 日本語から英語へ翻訳
- 書き出した英語を発音
というアプリケーションです。JavaScriptとHTML5のAPI+αでここまでアプリケーションが作成できるというは、HTML5が情報を流すためのものではなくアプリケーションとしての役割を果たしています。
Web Storageを使い「自分の辞書」も作成されているます。Web Storageは5M制限があるものの情報をローカルに保持できるというのは今までにないWebアプリケーションであると思います。こういった「機能」は無理に使うというのではなく使うべき用途があれば使うという典型という良い例だと思います。
Impress.jsはCSS3を活用したオープンソース（ライセンスMIT）のプレゼンテーションJavaScriptライブラリです。「最大の特徴は派手でイケイケなスライド。始めてみた人は必ず見入ること間違いありません。シンプルなスライドやページをめくるような動作をするものもありますが、impress.jsは他のスライドライブラリとはまったくの別物といえるでしょう。」というのが
HTML5アプリ作ろうぜ！（1）：impress.jsでド派手なスライドをつくろうぜ！ (1/3) - ＠IT
に記載されていますので一読すると良いと思います。flushのような画面がCSS3で表現可能ですし、奥行きの概念を取り込むことができます。CSS3の可能性が感じられるデモでした。まだまだゲームではHTML5よりもflushが使われているのは事実です。しかし今後もブラウザの性能向上が続きますのでゲームでも本格的に使われるかもしれません。私自分はエンタープライズの人間ですのでその評価は不明です。
画像処理ですが画像をブラウザに読み込ませそこに文字を書き込みます。今まではphp等サーバサイドで処理を行うことで可能でしたが現在はブラウザでこの処理を行うことができます。サーバを使わずにブラウザだけで画像処理ができます。つまり
- ぼかし
- シャープ
- 白黒
- セピア
- 縦横反転
ができます。そのライブラリが
Pixastic: JavaScript Image Processing Library
です。PixasticはJavaScriptで画像にぼかしをかけたり、トリミングや明るさ・コントラストの調整など様々な加工を行うことができるライブラリです。
今回はデモ中心のプレゼンテーションでした。
最後に
山崎さんの講演をお聞きするのは２回目になります。１回目はCreator Meetupで登壇をご一緒させて頂いたときです。
HTML5特に今回はCSS3の可能性についてのお話が中心でした。以前のCSSにくらべできることが多くなっています。業務アプリケーションでも今まではイメージで表現されていたものflushで表現されていたものがCSS3でできるようになりました。このためデザイナーがやるべき作業が多くなっています。プログラミングスキルも必要になってきます。
一方プログラマですがデザインスキルが必要になってきています。CSS3のコーティングという意味でデザイナーとプログラマのの距離が近くなっているということです。
