事例で解説するハイブリッドアプリ開発のポイント

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

自己紹介

鴨田健次(かもたけんじ)

■略歴

アシアル株式会社所属。Webディレクター/Webデザイナー。
主な業務は、プロジェクトリーダーとして、プロジェクトのマネジメントを行う一方、
デザイン業務があればデザイナーとしても活動し、コーダーとしてHTMLテンプレートを作成するこ
ともあります。

■今まで関わった主なHTML5関連プロジェクト

ＫＤＤＩ株式会社・株式会社テレビ朝日「auヘッドライン」
アプリ取り放題「auスマートパス」対応のニュース配信アプリ

株式会社テレビ朝日「テレ朝動画アプリ(公式)」
テレビ朝日が公式に提供しているYouTube動画を簡単に検索・視聴できるアプリ

株式会社アシックス「iPadアプリ『ASICS SHOE FINDER』」
上記アシックスストアでの分析サービスと連携し、ユーザーの特性に合わせたシューズを探し出すア
プリ。

株式会社アシックス「ゲイトアナリシス・ソフトウェア開発」
ランニング中の様子をカメラで撮影し、リアルタイムで分析するシステム

その他、スマートフォンアプリ、PC向けサイト多数。

2013/1/7 2

今回紹介するアプリ

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

HTML5アプリの気になるところ

 実際のところ、HTML5アプリやハイブリッドアプリで

どのくらいのことができるのか？

 ネイティブだけで作る場合との違い

 Android/iPhone/iPadで機種依存の問題はないのか？

 特にAndroidにおけるフラグメンテーション(断片化)

 App Storeや各キャリアのマーケットへの申請は通過するのか？

 注意すべき事があるのか？

 ユーザーインターフェースがネイティブに劣るのではないか？

 主にアニメーションに関して

2013/1/7 4

アプリ概要 | 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

アプリ更新 | auヘッドライン

アプリ更新申請アプリ更新

HTML・CSS・PHP更新
審査・修正戻し

アップデート通知
auヘッドライン
au Market アプリ起動コンテンツ
(即時反映) 配信サーバー
アプリアップデート
(ユーザー任意)

審査通過・マーケット公開
auヘッドライン
(早くても申請から数日)

3ヶ月に1回程度のペース 1ヶ月に1回程度のペース

2013/1/7 6

アプリの機能変遷 | 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

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

IS05 HTC EVO 3D ISW12HT Xperia™ acro HD IS12S Xperia(TM) VL SOL21
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

UIアニメーション | auヘッドライン

スライドメニュー

auヘッドライン auヘッドライン
(Androidアプリ) (iPhoneサイト)

2013/1/7 9

まとめ | auヘッドライン

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

2013/1/7 10

テレ朝動画アプリ(公式)

株式会社テレビ朝日
「テレ朝動画アプリ(公式)」

テレビ朝日が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

1ソースでマルチデバイス対応 | テレ朝動画アプリ(公式)

Android iPhone iPad

style.css 端末種類に応じて style2.css
CSSを切り替え

recommend.html HTMLやJavaScriptは
同じソースコード
2013/1/7 12

データの取得・保存方法 | テレ朝動画アプリ(公式)

アプリ内にHTML/JavaScript
コードをあらかじめ仕込んでお
き、データはサーバーから取得
し表示する
HTML5 テンプレート

動画情報

xml YouTube Data
API

データ取得はJSON
やXMLを利用して表
示速度を最適化
お気に入り

おすすめ・
公式チャンネル情報
テレ朝動画アプリ
管理サーバー
localstorage json

アプリ設定
は、端末内
データベース
に保存
2013/1/7 13

まとめ | テレ朝動画アプリ(公式)

 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

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

まとめ | 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

全体まとめ

 実際のところ、HTML5アプリでどのくらいのことができるのか？

BtoBの業務管理系アプリ、BtoCの情報配信系アプリでは、ネイティブと何ら変わらない。
ゲームアプリも時間の問題ではないかと考えている。

 Android/iPhone/iPadで機種依存の問題はないのか？

設計・開発がしっかりしていれば、特に問題は見あたらない。
マルチプラットフォームでやるのであれば、HTML5が有利ではないか。

 App Storeや各キャリアのマーケットへの申請は通過するのか？

全く問題ない。
ハイブリッドアプリであるという理由で申請は通らないことはない。

 ユーザーインターフェースがネイティブに劣るのではないか？

iPhone、iPadでは特に問題はない。
ただしAndroidはアニメーション表示が不得意であるため、気をつける必要がある。

2013/1/7 17

ご静聴ありがとうございました

2013/1/7 <18>

事例で解説するハイブリッドアプリ開発のポイント

More Related Content

What's hot

Similar to 事例で解説するハイブリッドアプリ開発のポイント

More from Monaca

事例で解説するハイブリッドアプリ開発のポイント