2012年4月13日、CROOZ株式会社主催「テックヒルズ2012 #2」がアカデミーヒルズ（六本木ヒルズ内）49階タワーホールにて開催されました。

今回のテーマは「ネイティブアプリ」vs「Webアプリ」と題して、これからのアプリケーション開発のトレンドなどについて、実際に開発されている方々をお招きし、お話しいただきました。

開催形式は3部構成で、第一部が講演、第二部はディスカッション、第三部に懇親会と、盛りだくさんな内容でした。

以下、実際の発表を紹介していきましょう。

jQuery MobileではじめるWebアプリ開発

トップバッターとして、CROOZ株式会社 渡邉 真人さんよりjQuery MobileではじめるWebアプリ開発をテーマにお話がありました。

渡邉さんと言えば、オライリージャパンの『jQuery Mobile』の監訳者の一人としても活躍中です。今回のプレゼンテーションも全てjQuery Mobileで作成されていました。

そもそもjQuery Mobileはタッチデバイス向けのUIフレームワークということもあり、今回の資料も講演の最初から公開されていました。ネットワーク環境さえあれば、会場にいらした方々が（PCであってもスマートフォンであっても）手元で資料が共有できる形で進められるという点でとても新鮮でありました。

内容に関しては、jQuery Mobileの特徴、提供されるプラットフォーム、バージョンなどから、普及状況、開発環境のトレンド、採用事例などの情報から、簡単な利用方法、配置やエフェクトなどを実際に資料にまとめられており、また、そのソースも一緒に確認できる様になっているなど、非常に内容の濃いお話をいただきました。

サンプルアプリケーションとして、twitterのハッシュタグを収集して表示するアプリケーションを公開。このようなものが直感的に高クオリティで作成できる点などにjQuery Mobileの優位点を強調していました。

当日の資料は以下にて公開中です。

jQuery MobileではじめるWebアプリ開発

URL：http://msto.jp/th2/

ExGame/ngCore HTML5開発者が伝える、HTML5でアプリに迫る手法

株式会社ディー・エヌ・エー 紀平 拓男さんの講演は、ExGame/ngCore HTML5開発者が伝える、HTML5でアプリに迫る手法についてのお話です。

紀平さんといえばExGameの開発者としても有名です。

講演の自己紹介では「インストールが大嫌い」という点から、Webアプリケーションの優位点を中心にお話をいただきました。

まず、HTML5で実装したとの紹介から「忍者ロワイヤル」のデモが披露されました。プレゼンの関係上、ブラウザからの操作でしたが、非常に滑らかに動作している点を強調していました。

ただ、Webアプリケーションでは苦手な部分もあります。有利な点、不利な点を含め、代表的なポイントとして以下の点が挙げられていました。

3D

サービスとしてWebアプリケーションを開発する上では、WebGLが一般的に利用しているブラウザではサポートされていなく利用することができない。一方、ネイティブアプリケーションなどでハードウェア資源を最大限に使った3Dアプリケーションは美しい。この点については諦めも大切である。

音楽

特にiPhoneでは音楽の制限が厳しい。ブラウザ上から音楽ファイルを再生する際にiTunesが起動してしまったり、2つの音源を同時に再生する（たとえばクロスフェード再生など）のは現状では厳しい。これらについては制約が外れるのを待ちたい。

速度（※）

主にレンダリングの速度の問題。ネイティブアプリケーションと比べると差がつく。

※ この点に関して、現状では「制限された中で最善」を模索することを提案していました。

互換性

たとえばネイティブの開発言語として、AndroidではJava、iPhoneではObjective-Cなどを採用した場合、当然ながら互換性がない。Adobe AIR、Unityなどで開発すれば互換性が保たれる部分もあるが、Webアプリケーションであれば、キャンバス要素にさえそって開発していれば互換性が保てる部分は大きい。

開発効率

上記の互換性に加え、今までのHTML＋CSS＋JSの延長としてとらえることができ、ノウハウの流用、スキルセットが活用、豊富なライブラリなどがあげられる。また、現状のアプリケーションの大部分がHTML5で作成されているなど、シェアの観点からも有利である。

インストールについて

ユーザ視点から見ても、インストールベースのネイティブアプリケーションの場合、すぐにプレイする事ができない事や、アップデートの度に再ダウンロードなど不利な点が残る。Webアプリケーションの場合そのような心配はない。

一方、開発者視点から見た場合、1つのネイティブアプリケーションをチームで開発する場合などのお作法から来る開発や（バグ修正などの）運用効率、ネイティブ（特にiPhone）アプリケーションの場合、Apple社などのアプリケーション審査期間が読めないという外的要因もある。イベント、プロモーションなどが季節と連動している場合、スケジューリングが難しい。

最後に、Webアプリケーションに抱きがちな以下の疑問点について補足し、講演を締めくくりました。

描画速度

フラッシュと同様

通信環境問題

HTML5はアプリケーションキャッシュがあるので、上手く活用して圏外問題を回避。

データ

ローカルストレージを活用する。

HTML5で作成したサンプルゲーム（iPhone用）

URL：http://nmi.jp/ds

URL：http://nmi.jp/th

紀平さんの作品のgithub

URL：http://github.com/tkihira

最新事例に見る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/