「プロに求められる最新Webスキルとは？」セミナー レポート（前編）
2月18日（水）、横浜みなとみらいにてhifive主催のセミナーが行われました。今回はカヤックの中農さんをお招きしてHTML5がどのように実際の開発現場で使われているかを話していただきました。
こちらはそのお話の中から気になるトピックを紹介します。
中農さんの最近のお仕事
プライベートではハードウェアを扱うのにハマっているとのことで、お仕事の中でもOculus RiftやLeapMotionを使ったサービスを作られているとのことです。
例えばOculus Rift × Leapmotionによるライブステージ演出を行うシステムであったり、
声で重機を操作する音声認識サイネージを開発されています。ガジラという重機用アームを知らしめるために作られた体験コンテンツになります。
どちらもWebが関係ないように見えるのですが、実際にはHTML5/Flash/Unity/Node.jsで作られています。Flashにおいてもまだまだ現役で、HTML5に比べてメディアファイルの取り扱いが上手とのことです。Unityにおいては次期バージョンからWebGL書き出しがサポートされるということもあり、今後Web開発を行う方でUnityを利用する人は増えるのではないでしょうか。
中農さん曰く、HTML5/JavaScript/CSSを使うフロントエンドエンジニアは体験を作るのがお仕事であり、HTML5はその表現における最上位レイヤーであるとのことです。カヤックさんにおいてはB2C/B2B、自社サービスのいずれににおいてもHTML5を採用されています。
今回のお話では広義のHTML5（API含め）を取り上げていますが、数多くのAPIがある中、実際に使えるAPIはまだまだ多くないのが実情です。下の白文字のAPIが実際に使われているAPIです。
カヤックさんではHTML5専門部署（HTMLファイ部）があります。専門部署設立前はマークアップ（意匠部）とJavaScript（技術部）に分かれていましたが、昨今の技術はどんどんデザインとプログラミングの敷居がなくなってきており、効率が悪くなってきました。そこで部署を統合し、HTMLファイ部になったとのことです。
カヤックさんの取り扱うプロジェクトはどれも先進的でエッジの効いたものが数多いです。デモはいずれも興味深く、面白いものばかりです。
日経新聞さんの事例
あなた vs 田中電子版というテーマのサービスです。フルFlashライクですが、実際にはHTML/CSSで作られています。
三井住友VISAカードさんの事例
HTML5のCanvasだけで作られています。一昔前であればFlashで行っていたような描画をフルCanvasで行っています。
三井住友VISAカードより、EVA style VISA CARD登場。
リクナビさんの事例
GoProのカメラを6台合わせて全天球カメラとしています。それを一つの動画や写真にすることでマウスドラッグ可能なコンテンツを実現しています。
カヤックさんの事例
自社サイトもチャレンジングな試みが行われています。一番下までスクロールすると、次のページを読み込むようになっています。すべてのページをWeb API化することでスクロールだけでサイトのコンテンツをすべて見られるようになっています。
株式会社キューさんの事例
ペンが持てるようになっていて、図形を描くとその中に動画コンテンツが表示されるようになっています。さらに星形が認識されると背景が星空に変化するというアニメーションが入ります。
Mutations Studioさんの事例
ゲーム会社ということもあり、通常は面白くないフォーム入力をゲーミフィケーション的に面白くした作品です。ぜひ動画をご覧ください。
これまでの事例などで分かる通り、HTML5では表現力が高まっています。カヤックさんにおいてキャンペーン系の仕事は多いので、表現力を高めてインパクトある作品作りが求められているとのこと。かつてはFlashが担っていた分野ですが、今はHTML5/JavaScript/CSS3に移り変わってきているものになります。とはいえ今の現場ではFlashと同等の表現力が求められることが多いとのことです。
表現力において大事なのはCanvas、WebGLになります。Canvasとはビットマップデータを扱う技術で、メリットとしてはインストールがいらない、そしてHTMLとの親和性が高いという点が挙げられます。逆にデメリットとしては実行環境（スマートフォン含め）によって実装が違ったり、クリックイベントがないというのが問題になります。
そこでカヤックさんではCreateJSを採用して開発しています。
CreateJSは優秀なライブラリですが、スマートフォン環境などではパフォーマンスが足りないと感じることも多く、WebGLへの期待が大きくなっています。WebGLは3D表現で有名ですが、2Dも行うことができます。カヤックさんでは早い段階からWebGLに注目し、デモサイトを立ち上げています。
WebGLのサイト（iPhone対応の3Dコンテンツ）つくりませんか？ 面白法人カヤック
多くのWebGLデモを公開したり、メールマガジンなどを通じてWebGLを啓蒙していった中で実現できたプロジェクトがNHK 御嶽山「噴火の証言」という事例です。
このサイトについてこのサイトは、御嶽山災害の生還者が記録した「証言」をアーカイブしたものです。 証言は、右に表示されるタイムラインやマップから見る事ができます。
こちらの御嶽山の描画にWebGLを使っています。国土地理院の山脈標高データを使い、WebGL上に3Dの御嶽山を描画しています。その上にインタビューのデータをマッピングし、時間軸に沿って閲覧できるようになっています。
WebGLは今後のWebにおける表現力を格段に高める可能性があります。ただし問題としてはちょっとした（三角形など）を描画しようと思ってもコード量が多くなります。使おうと思ってすぐに使える代物ではありません。そこでThree.jsのようなライブラリを使って行うのが基本になるとのことです。
Unity5でもWebGL書き出しがサポートされる予定で、これによりプラグイン不要でUnityコンテンツが楽しめるようになります。Mozillaと提携して開発が進められているとのことで、Firefox上でのパフォーマンスは高くなっています。現状のベータ版を試すこともできますが、既存のUnityプロジェクトがすべて対応できるという訳ではないようです。しかし今後に大いに期待がかかるところでしょう。
最後に質疑応答では次のような質問が出ていました。
Q. 大手との仕事の獲得はどうやっているのですか？
A. カヤックには営業はありませんので宣伝はやっていません。なので人づてで仕事を獲得しています。後は実績含め、作品を見てご連絡いただくケースが多くなっています。
Q. 音声認識に使ったライブラリは何でしょうか？
A. Juliusです。Juliusはローカルでしか動かないのでUnityでマイクからの入力を拾ってローカルのサーバに対してWebSocketでデータを送信しています。
Q. メールマガジンは社内だけなのでしょうか？
クライアントさん向けに実案件を紹介していくメールマガジン、その他の方も購読してもらえるメールマガジンを用意しています。
Q. HTML5とFlashを併用した機会があったという話だったが理由はなんでしょうか？
音声の自動ロードができないなど、HTML5では難しい部分をFlashでサポートしています。HTML5だとオーディオスプライトを使った解決法がよく使われます。
カヤック中農さんの資料は下記にて公開されています。カヤックさんのHTML5利用は特に先進的な試みが多数行われていますのでぜひチェックしてください。
hifive開発者ブログ 
コメントは受け付けていません。