最新事例に見るHTML5でつくるアプリの可能性

株式会社カヤックの比留間 和也さんより，最新事例に見るHTML5で作るアプリの可能性をテーマにお話しいただきました。

ご自身の経験として，2年前はマークアップメインのサイトが中心で，動きのあるサイト制作はほとんどなかったのが，現在は同じような広告，キャンペーンのサイトであっても，イラストなどのクオリティもさることながら，動きのあるサイトを制作する機会が多くなったと言います。さらにiPadの登場もあり，Flashなどの依頼は少なくなる傾向にあり，はじめからHTML5で作る案件が多くなってきている，と動向のトレンドを分析していました。

実際にどのようにリッチ化してきているか，Flashを利用していない（HTML5ベースの）直近の広告（キャンペーン）サイトなどを通じてデモしていただきました。

iPhoneをターゲットにした事例では，広告の他に簡単なゲームも入っており，ユーザのちょっとした遊び心をつかんできています。また，主にPC向けのクリスマス時のキャンペーンではデザインのクオリティが非常に高く，同様にちょっとしたゲーム要素を盛り込んでいました。このあたりは，ゲームだから，広告だからといってクオリティに差はなくなってきているということです。

「広告」とWebアプリの可能性としては以下の利点を重視しており，現時点では非常に相性が良いとのことでした。

• インストール不要
• ブラウザのみの互換性
• アップデートが楽
• シェアリング（口コミ）がやりやすい

最後に「広告は一期一会」と述べ，広告やキャンペーンサイトを見てもらうためにダウンロードしてインストールを行うなどの手間はユーザの印象がネガティブであるとまとめていました。

またおまけデモとして，スマートフォンがコントローラーになるサンプルのデモを行っていただきました。このあたりのアイディアはカヤックさんならではと会場でも好評でした。

jsdo.it WebSocket Controller

URL：http://jsdo.it/controller

当日資料：最新事例に見るHTML5でつくるアプリの可能性

URL：http://www.slideshare.net/hirumakazuya/html5-12539670

Native × Web でいいとこどり開発 ～ピグトーク

株式会社サイバーエージェントからは原 一成さんより，「⁠Native × Web でいいとこどり開発 ～ピグトーク」についてお話しいただきました。

最初に，実際にスマートフォン版のアメーバピグをスライドに表示し，どの部分がネイティブアプリケーションなのか，Webアプリケーションかという問いかけから，詳細を1つ1つていねいに説明していただきました。

もともとPC版のアメーバピグはFlashで動いているという現状から，これをスマートフォンへ移行させていくというスタイルで開発が始まりました。

開発当初はピグの洋服を着せるところから始まり，HTML5で作成。パーツは画像数が多くHTTPで取得するには重く，全てJSONでデータ化。次にパーツを奇麗に並べるためにDOM追加するなどして拡大していきました。当時は処理速度についても問題があり，これらはGPUを利用する方向で解決していくなど，手探りの開発が続きました。

さらにスマートフォン版のアメーバピグに対して次々と機能追加の要件が発生，ついにはWebアプリケーションだけでは対応できなくなりつつある状態でした。

そこで，以下のようにネイティブアプリケーション，Webアプリケーションに役割を定義したそうです。

• アプリとして出す以上スムーズさが大切
• Webアプリケーション部分は表示に専念
• ネイティブアプリケーション部分は処理，トランジッションに専念させる

上記のように分担した結果，ハイブリット型のアプリケーションとなって現在に至るとのことでした。

実際にはパフォーマンスを担保するためにWebアプリケーションからネイティブ部分を採用していくなどといった活動は試行錯誤の連続で苦労があったようでが，現在ではそれらを乗り越えたナレッジと，高いクオリティを確保できていることが伺えました。

• 当日講演資料（PDF 3.8Mバイト）

第二部

第二部は司会を引き続きCROOZ小俣氏が担当し，Webアプリケーション側にCROOZ渡邉氏，DeNA紀平氏，ネイティブアプリケーション側にサイバーエージェント原氏，そしてCROOZの大橋 宏章氏を加え，以下のテーマに沿ってディスカッションを行いました。

Web，ネイティブアプリケーション双方でのメリットデメリット

Webアプリケーションは互換性，開発効率，インストール不要という切り口で始まりましたが，ネイティブアプリケーションでもUnityやngCoreなどの変換できる技術があれば，互換性，汎用性を保つことができるといった具合に，ネイティブ側では目的に応じて開発言語，環境を工夫すれば吸収できると意見がありました。

開発効率部分では，HTML5で圧倒的に足りていないのはツール類とし，アドビさんへの期待をしつつも，結局の所，EclipseやXcode，またはそれらの派生で開発を行っている現状であると声が上がりました。

さいごに

今回は，ネイティブアプリケーション vs Webアプリケーションというタイトルで開催されましたが，双方一長一短があるというのを前提とした上で，実際にサービスで稼働しているものや，最新の技術動向など，それぞれの有識者から声を聞くことができ，非常に有意義な会だったと思います。実際，多数の来場者で会場も満員となり，その後の懇親会も非常に盛り上がっていました。

次回は6月開催ということですので，公式サイトなど，ぜひともチェックしていただければと思います。

テクヒルズFacebookファンページ

URL：http://www.facebook.com/motionology

テックヒルズ公式サイト

URL：http://crooz.co.jp/techhills/