1. 事例で解説するHTML5アプリ開発のポイント
アシアル株式会社 鴨田健次

2. 自己紹介
鴨田 健次(かもた けんじ)
■略歴
アシアル株式会社所属。Webディレクター/Webデザイナー。
主な業務は、プロジェクトリーダーとして、プロジェクトのマネジメントを行う一方、
デザイン業務があればデザイナーとしても活動し、コーダーとしてHTMLテンプレートを作成するこ
ともあります。
■今まで関わった主なHTML5関連プロジェクト
ＫＤＤＩ 株式会社・ 株式会社テレビ朝日 「auヘッドライン」
アプリ取り放題「auスマートパス」対応のニュース配信アプリ
株式会社テレビ朝日「テレ朝動画アプリ(公式)」
テレビ朝日が公式に提供しているYouTube動画を簡単に検索・視聴できるアプリ
株式会社アシックス 「iPadアプリ 『ASICS SHOE FINDER』」
上記アシックスストアでの分析サービスと連携し、ユーザーの特性に合わせたシューズを探し出すア
プリ。
株式会社アシックス「ゲイトアナリシス・ソフトウェア開発」
ランニング中の様子をカメラで撮影し、リアルタイムで分析するシステム
その他、スマートフォンアプリ、PC向けサイト多数。
2013/1/7 2

3. 今回紹介するアプリ
auヘッドライン テレ朝動画アプリ(公 ASICS SHOE FINDER
2012年3月リリース 式) 2012年3月リリース
2012年8月リリース
デバイス デバイス
Android / iPhone(Web) デバイス iPad
Android / iPhone / iPad
使用言語 使用言語
JavaScript HTML5、PHP 使用言語 HTML5、CSS3、
HTML5、CSS3、 JavaScript、xml
Webアプリ (iOS) JavaScript、json
ハイブリッド(Android) Webアプリ/ハイブリッドアプリ両対応
ハイブリッド (iOS、
2013/1/7 3

4. HTML5アプリの気になるところ
 実際のところ、HTML5アプリやハイブリッドアプリで
どのくらいのことができるのか？
 ネイティブだけで作る場合との違い
 Android/iPhone/iPadで機種依存の問題はないのか？
 特にAndroidにおけるフラグメンテーション(断片化)
 App Storeや各キャリアのマーケットへの申請は通過するのか？
 注意すべき事があるのか？
 ユーザーインターフェースがネイティブに劣るのではないか？
 主にアニメーションに関して
2013/1/7 4

5. アプリ概要 | auヘッドライン
ＫＤＤＩ 株式会社・ 株式会社テレビ朝日
「auヘッドライン」
アプリ取り放題「auスマートパス」対応のニュース配信アプリ。
KDDIのフラグシップアプリの一つ。
前身アプリ「auニュースEX」は、KDDIのスマートフォンに
プリインストールされていた。
現アプリも、プリインストールされているauウィジェット(ニュース)が
「auヘッドライン」に対応しており、ニュース系アプリランキングでは、
常に1位を獲得、全カテゴリランキングでも上位に入っている。
対応機種：
au Androidスマートフォン全機種(Android OS2.2以上)
au iPhone 4S/5(iOS 5.0以上)
作業範囲：
要件定義、基本設計、詳細設計、開発、テスト、
運用、インフラ設計、インフラ構築
テクノロジー：Java、PHP、JavaScript、HTML5、CSS3
開発期間：3ヶ月(Android) 1.5ヶ月(iPhone)
開発体制：3名
2013/1/7 5

6. アプリ更新 | auヘッドライン
アプリ更新申請 アプリ更新
HTML・CSS・PHP更新
審査・修正戻し
アップデート通知
auヘッドライン
au Market アプリ起動 コンテンツ
(即時反映) 配信サーバー
アプリアップデート
(ユーザー任意)
審査通過・マーケット公開
auヘッドライン
(早くても申請から数日)
3ヶ月に1回程度のペース 1ヶ月に1回程度のペース
2013/1/7 6

7. アプリの機能変遷 | auヘッドライン
auニュースEX ver1.0 auニュースEX ver2.0 auヘッドライン(Android)
(2010年12月) (2011年9月) (2012年3月)
TOPページ：
ネイティブ 画面表示： 画面表示：
その他ページ： HTML5 HTML5
HTML5 レイアウトを大幅変更
アプリ設定： アプリ設定： (HTMLテンプレート、 アプリ設定：
ネイティブ ネイティブ CSS変更で対応) ネイティブ
ウィジェット： ウィジェット： ウィジェット：
ネイティブ ネイティブ ネイティブ
画面表示を auニュースEX iPhone auヘッドライン(iPhone)
完全HTMLとし、 (2011年12月) (2012年10月)
WebView化
画面表示 画面表示
アプリ設定： アプリ設定：
設定もHTMLで保存 HTML5 HTML5
(クッキーに保存)
2013/1/7 7

8. Android フラグメンテーション | auヘッドライン
対応機種一覧
IS03 XPERIA acro IS11S INFOBAR C01 GALAXY SIII Progre SCL21
Android2.2 Android2.3.3 Android2.3.3 Android4.0.3
REGZA Phone IS04 HTC EVO WiMAX ISW11HT AQUOS PHONE IS14SH Optimus G LGL21
Android2.2 Android2.3.3 Android2.3.3 Android4.0.3
IS05 HTC EVO 3D ISW12HT Xperia™ acro HD IS12S Xperia(TM) VL SOL21
Android2.3 Android4.0.3 Android4.0.3 Android4.0.3
Android2.2 Android2.3.3
MOTOROLA PHOTON™ G'zOne TYPE-L CAL21
SIRIUS α IS06 ISW11M MOTOROLA RAZR™ IS12M Android4.0.3
Android2.2 Android2.3.3 Android4.0.3
Android2.3.3 DIGNO S KYL21
AQUOS PHONE IS11SH Optimus X IS11LG Android4.0.3
Android2.3.3 Android4.0.3 HTC J ISW13HT
Android2.3 Android2.3.3 Android4.0.3 AQUOS PHONE SERIE SHL21
Android4.0.3
AQUOS PHONE IS12SH DIGNO ISW11K AQUOS PHONE SERIE
Android2.3 Android2.3.3 ISW16SH ARROWS ef FJL21
Android2.3.3 Android4.0.3 Android4.0.3
AQUOS PHONE IS13SH
INFOBAR A01 Android2.3.3 URBANO PROGRESSO HTC J butterfly HTL21
Android2.3 Android4.0.3 Android4.1
Android2.3.3 ARROWS Z ISW11F
Android2.3.3 AQUOS PHONE SL IS15SH
Android4.0.3 AQUOS PAD SHT21
G'z One IS11CA
Android2.3 GALAXY SII WiMAX ISW11SC Android4.0.3
Android2.3.3 Android4.0.3 ARROWS Z ISW13F
Android2.3.3 Android4.0.3
REGZA Phone IS11T
Android2.3.3 MEDIAS BR IS11N AQUOS PHONE CL IS17SH
Android2.3 Android2.3.3 Android4.0.3
全41機種に対応
MIRACH IS11PT ARROWS ES ISW12F VEGA PTL21 (2012年12月現在)
Android2.3.3 Android2.3.3 Android4.0.3
Android2.3
2013/1/7 8

9. UIアニメーション | auヘッドライン
スライドメニュー
auヘッドライン auヘッドライン
(Androidアプリ) (iPhoneサイト)
2013/1/7 9

10. まとめ | auヘッドライン
 基本的にはアプリ自体の更新は必要ない
 コンテンツの追加、レイアウトの変更などはHTML5/CSS3の更新のみで対応可能
 ネイティブ側の変更の時にアプリ更新が必要
 iOS対応やWebアプリへの展開が容易
 iPhone対応が決定してから、1ヶ月半弱でリリースを行った
 Androidネイティブで実装していることのほとんどはWeb技術でも可能だった
 ネイティブでしかできない、Widgetは除く
 Androidのフラグメンテーション(バージョンによる断片化)を解決
 auのすべてのAndroid端末で実証済み
 これまでの経験では、ネイティブのウィジェットで端末差異が発生
 UIアニメーション(少しであれば)
 Facebookのようなスライドメニュー、アコーディオンメニューは問題ない
2013/1/7 10

11. テレ朝動画アプリ(公式)
株式会社テレビ朝日
「テレ朝動画アプリ(公式)」
テレビ朝日がYouTube上で展開している公式動画の視聴に関する
利便性を向上させるためにリリース。
テレビ朝日の公式動画だけが検索・閲覧できる。
SNS連携やお気に入り動画の登録なども可能。
YouTube Data API、および、独自のオススメ動画・公式チャンネルAPI
を使用して、データのやりとりを行っている。
対応機種：
Android(OS2.2以上)、iPhone (iOS 5.0以上)、iPad (iOS 5.0以上)
作業範囲：
要件定義、基本設計、詳細設計、開発、テスト、リリース
テクノロジー：Monaca、HTML5、CSS3、 JavaScript
開発期間：2ヶ月
開発体制：2名
2013/1/7 11

12. 1ソースでマルチデバイス対応 | テレ朝動画アプリ(公式)
Android iPhone iPad
style.css 端末種類に応じて style2.css
CSSを切り替え
recommend.html HTMLやJavaScriptは
同じソースコード
2013/1/7 12

13. データの取得・保存方法 | テレ朝動画アプリ(公式)
アプリ内にHTML/JavaScript
コードをあらかじめ仕込んでお
き、データはサーバーから取得
し表示する
HTML5 テンプレート
動画情報
xml YouTube Data
API
データ取得はJSON
やXMLを利用して表
示速度を最適化
お気に入り
おすすめ・
公式チャンネル情報
テレ朝動画アプリ
管理サーバー
localstorage json
アプリ設定
は、端末内
データベース
に保存
2013/1/7 13

14. まとめ | テレ朝動画アプリ(公式)
 1ソースでAndroid、iPhone、iPadに対応
 Android/iPhone、iPadでレイアウト変更を行っている
 実際のデータのやりとりはXML、jsonのみ
 アプリ内にHTMLテンプレートが存在するため、動作も軽快
 データの保存も可能
 HTML5のローカルストレージを活用
 アジャイル開発に向いている
 モックアップがそのままアプリになり、修正確認も即時実機で可能
 ヘッダー・フッター固定メニュー
 Android2.2、iOS 5.0以上が必要
 App Store(iTunes Connect)申請
 一度の戻りもなく、申請から2週間弱で公開
 ハイブリッドアプリであることが却下される理由にはならない
2013/1/7 14

15. ASICS SHOE FINDER
株式会社アシックス
「ASICS SHOE FINDER」
アシックスストアなどで行われている足形計
測サービス「STATIC FOOT ID」、走行計測
サービス「DYNAMIC FOOT ID」の測定結果
から、目的に合わせ、自動的におすすめのラ
ンニングシューズを抽出し、測定結果と共に
レポートを表示するアプリケーション。
対応機種：
iPad (iOS 5.0以上)
作業範囲：詳細設計、開発、テスト
テクノロジー：
Monaca、HTML5、CSS3、JavaScript
開発期間：2週間
開発体制：2名
2013/1/7 15

16. まとめ | ASICS SHOE FINDER
 すでにあるWebの資産を活用
 既存で用意されていたAPIを用いた
 デザイン作業を含め、2週間程度の開発期間でリリース
 マーケット公開しない店頭アプリ
 iOS Developer Enterprise Program (年間参加費 ¥24,800)
 社内配布向けで、ワイヤレスでアプリ更新可能
 個人利用であれば、iOS Developer Program(年間参加費 ¥8,400)
 アプリ更新をiTunesから行うことができる
 画面遷移アニメーション
 iOS限定であれば、各種フレームワークのアニメーション機能を使用可能
 jQuery MobileなどのMobile用jQueryフレームワークも豊富
2013/1/7 16

17. 全体まとめ
 実際のところ、HTML5アプリでどのくらいのことができるのか？
BtoBの業務管理系アプリ、BtoCの情報配信系アプリでは、ネイティブと何ら変わらない。
ゲームアプリも時間の問題ではないかと考えている。
 Android/iPhone/iPadで機種依存の問題はないのか？
設計・開発がしっかりしていれば、特に問題は見あたらない。
マルチプラットフォームでやるのであれば、HTML5が有利ではないか。
 App Storeや各キャリアのマーケットへの申請は通過するのか？
全く問題ない。
ハイブリッドアプリであるという理由で申請は通らないことはない。
 ユーザーインターフェースがネイティブに劣るのではないか？
iPhone、iPadでは特に問題はない。
ただしAndroidはアニメーション表示が不得意であるため、気をつける必要がある。
2013/1/7 17

18. ご静聴ありがとうございました
2013/1/7 <18>