6つの現場が語る、
スマホアプリ開発の理想と現実

　2月16〜17日の2日間、東京の目黒雅叙園にて開発者の祭典「Developers Summit 2012」が開催された。「デブサミ」の愛称で知られる同イベントは、2002年より年1回のペースで開催され、今年で10回目を迎えた。

　2日間で行われた並列5トラック、全68セッションのうち、ここではiOS（iPhone／iPad／iPod touch）、Android、Windows Phoneなどスマートフォン／スマートデバイス向けのアプリ開発に関連した6セッションをピックアップして、その様子をレポートする。

1. Yahoo! JAPANのスマホ向けHTML5対応とは
2. HTML5でスマホアプリ開発、ホントのところ
3. UXを壊さずにスマホのプラットフォームごとに最適化
4. スマホ3大OS同時開発は、どこまで可能なのか
5. スマートデバイスの企業向けアプリ開発はどうなる
6. ガラケー⇒スマホアプリ開発における6つのポイント

　また、ソーシャル＆インフラ編は、以下の記事を参照してほしい。

ソーシャルアプリのインフラはNode.jsが主役になるか デブサミまとめレポート（ソーシャル＆インフラ編）　先日のデブサミからソーシャルゲームや大規模サービスを支えるインフラ技術・クラウドに関連した講演の模様をお届け 「Smart ＆ Social」フォーラム 2012/2/21

Yahoo! JAPANのスマホ向けHTML5対応とは

ヤフー 是井真氏

　最初に紹介するのは、ヤフー 是井真氏による講演「ヤフーのHTML5対応」だ。同氏は、Yahoo! JAPANにおいてスマートフォンを中心に進めているHTML5対応について発表した。

　ヤフーでは、「HTML5は、お客さまへより良い情報・価値を提供するための手段」という原則を外れることがないように対応を進めているという。HTML5を利用することが最終目的ではないため、既存の資産を生かしつつ、適材適所でHTML5を適用していくという姿勢である。

　現時点におけるYahoo! JAPANのサービスのHTML5対応は、スマートフォン／スマートデバイスが先行している。その理由としては、PCに比べてWebブラウザが限定されていることからSLA（Service Level Agreement）が維持しやすいことや、下位互換性を考慮する必要性があまりないこと、HTML5の機能を活用できる要件が整っていることなどが挙げられた。もちろん、スマートフォンの爆発的な普及もそれを後押ししている。

　講演では、特に「Yahoo! JAPANトップ」「Yahoo! JAPANサービス」における2つのHTML5対応についての紹介があった。まず、Yahoo! JAPANトップにおいては、下記のポイントに留意してUIを設計しているという。

• 親しまれた既知のデザインを再利用することで直感的に使えるようにする
• デバイスの特性を知る
  • 画面サイズを考慮
• ボタン文言を統一
• タッチジェスチャーを前提にUI配置を考える
• HTML5の主要なテクノロジについて理解しておく
  • できること、できないことを把握

　現在、Yahoo! JAPANトップで利用されている主要なHTML5の機能とそのポイントとしては、次のようなものが挙げられた。共通機能などは「YUI App Framework」として共有・集約しているとのことだ。

• localStorage（ローカルストレージ）
  • 各種履歴や設定の保持に使用
• 構造化データの保持にはJSONを使う
• バイナリデータはBase64化
• タッチイベント
• History API
  • 「戻る」ボタンを利用できる
• サポートしないプラットフォーム向けにはYUI App Frameworkで対応
• GeoLocation API
  • 約24時間ごとに位置情報取得の警告を行う
  • APIで緯度経度から住所に変換
• CSS3
  • CSS Transformで複雑な描画処理をスムーズに行える
  • CSS Gradientで高解像度ディスプレイでも滑らかな表示が可能

　Yahoo! JAPANサービスでは、多数のサービスに対する開発を支援するため、共通の開発支援システムやテンプレートシステムが用意されており、その中でHTML5対応をはじめとするスマートフォン向けのデザインや開発のサポートを進めているという。ここでは、HTML5のマークアップやWeb Storage、CSS3、GeoLocation API、Canvas、オフライン機能などが活用されているとのこと。

　スマートフォン向けの開発では、特に全体として品質を保ちつつ、最新の機能への対応を進めていく必要がある。そこで、スマートフォンの特性を考慮したUI規定の明確化や、実装のためのガイドラインの明確化を行い、全体の品質の確保に務めている。

　また実装に対しては、スニペットなどのツールによるサポートや、実装パーツの共有、社内ポータルによるデバイス情報の共有などによって、開発の効率化を進めている。それに加えて、HTML5をはじめとする新しい技術を使った試作と研究を積極的に行っているとのこと。

　最後に、是井氏は現時点のHTML5には、次のような課題が残されていると指摘した。

• 各種ベンダプレフィックスやW3C仕様策定の遅さといった標準化への問題
• ローカルストレージやクライアント処理増加によるセキュリティ不安
• 既存の資産やノウハウをどう活用するか
• 技術者やデザイナの不足

　そのうえでヤフーでは、今後も「ユーザーの生活をより豊かに便利に価値あるものへと推進する」という同社の目的に向けた実現手法として、HTML5を活用していくことをあらためて強調した。

■ 関連リンク

• 2012/02/16 デブサミ2012【16-D-3】ヤフーのHTML5対応 #devsumiD

HTML5でスマホアプリ開発、ホントのところ

ディー・エヌ・エー CTO室 紀平拓男氏

　ディー・エヌ・エー CTO室 紀平拓男氏の講演「スマートフォンにおけるHTML5実装の最先端」では、スマートデバイスにおけるHTML5関連技術の状況が紹介された。スマートデバイスにおけるHTML5関連技術はネイティブアプリに匹敵する状況まで習熟してきているという。

　まず紀平氏は、HTML5のCanvas要素に言及。JavaScriptのAPI経由で任意のドット描画が可能になったことに触れ、Flashで開発されたゲームとCanvas要素を活用して開発されたゲームのデモを示し、遜色ないレベルに到達していることが紹介された。デモを見る限り、違いを見つける方が困難だったといえる。

　また、 ApplicationCacheやlocalStorageなどの機能を取り上げ、アプリ開発に重要となる機能が用意されている点も紹介された。

　かといって、HTML5がパーフェクトな代替技術かといえば現状はそうでもなく、いくつかの弱点があることも指摘。特に「3D、音楽、速度といった内容で弱い面がある」と紀平氏。

　まず3Dについて、スマートデバイスではOpenGLが利用できないという。OpenGLをHTML5で活用するためのWebGLはFirefox for mobileのみがサポートしており、広く利用できる状況にはない。

　音楽はタイミング調整が極めてシビアであるうえに、同時に音が鳴らせないなどなにかと制限がきつい状況にある。

　また、そもそも描画速度が遅かったり、JavaScriptの実行そのものが遅かったり、ネイティブアプリにはかなわない面があるという。

　紀平氏からは実際の開発経験から、開発のポイントなども紹介された。CanvasレンダリングはiPhone／iOS 4の方がAndroidよりも遅いため、iPhone／iOS 4で快適に動作するように開発するようにしているという。

　特に、iOS 4はdrawImageが遅く、キャッシュを活用するなどして、いかにdrawImageの回数を減らすかが重要になるというアドバイスもあった。なおiOS 5では、この問題は解決しているという。

　また、処理の関係から「Canvasの上にさらにDOM要素を載せるといったことはしない方が良い」（紀平氏）といったアドバイスもあった。

　CSS3は基本的にGPUサポートで実行されるため、サクサク動作するが、同時に動作する物体が増えると急激に重くなること、AndroidではWebブラウザやデバイスごとに互換性問題が出ること、アニメーションなどに問題があるという点についても言及があった。1枚もののアニメーションで同時に動くものが少ない場合には、CSS3が活用できるが、それ以外のケースではCanvasの方が効果的という説明もあった。

　紀平氏からはJavaScriptの速度に関する開発経験も発表が行われた。evalやクロージャを頻繁に生成している場合には、JITが逆に動作を重くすることがあるが、この問題はツールレベルで検出しやすいため対処が容易だという。

　どちらかというと、JavaScript最大の遅さ原因はGC（ガベージコレクション）にあると指摘されていた。GC対策に万能薬は存在せず、よく知られた手法を確実に適用していくことで改善できるという。

　また、発展形として、把握しにくい実機におけるメモリ使用量の確認方法なども紹介があった。開発経験上、1回のJavaScript処理におけるメモリ使用量は100Mbytes以内になるようにすると問題が発生しにくいという。

■ 関連リンク

• 2012/02/17 デブサミ2012【17-A-3】スマートフォンにおけるHTML5実装の最先端 #devsumiA

The forefront of html5 implementation

View more presentations from DeNA_devsumi

1-2-3

Index

デブサミまとめレポート（スマホアプリ開発編） Page1 Yahoo! JAPANのスマホ向けHTML5対応とは HTML5でスマホアプリ開発、ホントのところ   Page2 UXを壊さずにスマホのプラットフォームごとに最適化 スマホ3大OS同時開発は、どこまで可能なのか   Page3 スマートデバイスの企業向けアプリ開発はどうなる ガラケー⇒スマホアプリ開発における6つのポイント その他のスマホアプリ開発に関する講演資料のまとめ

Smart＆Social フォーラム トップページへ