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

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

COPYRIGHT ASIAL CORPORATION. ALL RIGHTS RESERVED.

自己紹介

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

■ 略歴

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

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

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

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

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

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

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

04/13/2023 2


今回紹介するアプリ

au ヘッドライン2012 年 3 月リリース

デバイスAndroid / iPhone(Web)

使用言語JavaScript HTML5 、 PHP

Web アプリ (iOS)ハイブリッド (Android)

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

2012 年 8 月リリース

デバイスAndroid / iPhone / iPad

使用言語HTML5 、 CSS3 、 JavaScript 、 json

ハイブリッド (iOS 、 Android)

ASICS SHOE FINDER2012 年 3 月リリース

デバイスiPad

使用言語HTML5 、 CSS3 、 JavaScript 、 xml

Web アプリ / ハイブリッドアプリ両対応

04/13/2023 3


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

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

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

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

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

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

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

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

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

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

04/13/2023 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 名

04/13/2023 5


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

au ヘッドラインコンテンツ

配信サーバーau Market

au ヘッドライン

アプリ更新申請

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

アップデート通知

アプリアップデート( ユーザー任意 )

アプリ更新

HTML ・ CSS ・ PHP 更新

アプリ起動( 即時反映 )

審査・修正戻し

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

04/13/2023 6


アプリの機能変遷 | au ヘッドライン

au ニュース EX ver1.0(2010 年 12 月 )

au ニュース EX ver2.0(2011 年 9 月 )

au ヘッドライン (Android)(2012 年 3 月 )

画面表示を完全 HTML とし、

WebView 化

設定も HTML で保存( クッキーに保存 )

レイアウトを大幅変更(HTML テンプレート、

CSS 変更で対応 )

TOP ページ：ネイティブ

その他ページ：HTML5

アプリ設定：ネイティブ

ウィジェット：ネイティブ

画面表示：HTML5



au ニュース EX iPhone(2011 年 12 月 )

画面表示アプリ設定：

HTML5

画面表示：HTML5



au ヘッドライン (iPhone)(2012 年 10 月 )

画面表示アプリ設定：

HTML5

04/13/2023 7


Android フラグメンテーション | au ヘッドライン

IS03 Android2.2

REGZA Phone IS04 Android2.2

IS05 Android2.3 Android2.2

SIRIUS α IS06 Android2.2

AQUOS PHONE IS11SH Android2.3.3 Android2.3

AQUOS PHONE IS12SH Android2.3 Android2.3.3

INFOBAR A01 Android2.3 Android2.3.3

G'z One IS11CA Android2.3 Android2.3.3

REGZA Phone IS11T Android2.3.3 Android2.3

MIRACH IS11PT Android2.3.3 Android2.3

XPERIA acro IS11S Android2.3.3

HTC EVO WiMAX ISW11HT Android2.3.3

HTC EVO 3D ISW12HT Android4.0.3

MOTOROLA PHOTON™ISW11M Android2.3.3

Optimus X IS11LG Android4.0.3 Android2.3.3

DIGNO ISW11K Android2.3.3

AQUOS PHONE IS13SH Android2.3.3

ARROWS Z ISW11F Android2.3.3

GALAXY SII WiMAX ISW11SC Android4.0.3 Android2.3.3

MEDIAS BR IS11N Android2.3.3

ARROWS ES ISW12F Android2.3.3

INFOBAR C01 Android2.3.3

AQUOS PHONE IS14SH Android2.3.3

Xperia™ acro HD IS12S Android4.0.3 Android2.3.3

MOTOROLA RAZR™ IS12M Android4.0.3 Android2.3.3

GALAXY SIII Progre SCL21 Android4.0.3

Optimus G LGL21 Android4.0.3

Xperia(TM) VL SOL21 Android4.0.3

G'zOne TYPE-L CAL21 Android4.0.3

DIGNO S KYL21 Android4.0.3

AQUOS PHONE SERIE SHL21 Android4.0.3

ARROWS ef FJL21 Android4.0.3

HTC J butterfly HTL21 Android4.1

HTC J ISW13HT Android4.0.3

AQUOS PHONE SERIEISW16SH Android4.0.3

URBANO PROGRESSO Android4.0.3

AQUOS PHONE SL IS15SH Android4.0.3

ARROWS Z ISW13F Android4.0.3

AQUOS PHONE CL IS17SH Android4.0.3

VEGA PTL21 Android4.0.3

対応機種一覧

AQUOS PAD SHT21 Android4.0.3

04/13/2023 8

全 41 機種に対応(2012 年 12 月現在 )


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

スライドメニュー

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

au ヘッドライン(iPhone サイト )

04/13/2023 9


まとめ | au ヘッドライン

基本的にはアプリ自体の更新は必要ないコンテンツの追加、レイアウトの変更などは HTML5/CSS3 の更新のみで対応可能

ネイティブ側の変更の時にアプリ更新が必要 iOS 対応や Web アプリへの展開が容易

iPhone 対応が決定してから、 1 ヶ月半弱でリリースを行った Android ネイティブで実装していることのほとんどは Web 技術でも可能だった

ネイティブでしかできない、 Widget は除く Android のフラグメンテーション ( バージョンによる断片化 ) を解決

au のすべての Android 端末で実証済みこれまでの経験では、ネイティブのウィジェットで端末差異が発生

UI アニメーション ( 少しであれば )

Facebook のようなスライドメニュー、アコーディオンメニューは問題ない

04/13/2023 10


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

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

テレビ朝日が YouTube 上で展開している公式動画の視聴に関する利便性を向上させるためにリリース。

テレビ朝日の公式動画だけが検索・閲覧できる。SNS 連携やお気に入り動画の登録なども可能。

YouTube Data API 、および、独自のオススメ動画・公式チャンネル APIを使用して、データのやりとりを行っている。

対応機種：Android(OS2.2 以上 ) 、 iPhone (iOS 5.0 以上 ) 、 iPad (iOS 5.0 以上 )

作業範囲：要件定義、基本設計、詳細設計、開発、テスト、リリース

テクノロジー： Monaca 、 HTML5 、 CSS3 、 JavaScript開発期間： 2 ヶ月開発体制： 2 名

04/13/2023 11


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

Android iPhone iPad

style.css style2.css

recommend.html

04/13/2023 12

端末種類に応じてCSS を切り替え

HTML や JavaScript は同じソースコード


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

YouTube DataAPI

テレ朝動画アプリ管理サーバー

xml

動画情報

json

おすすめ・公式チャンネル情報

localstorage

お気に入り

HTML5 テンプレート

04/13/2023 13

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

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

アプリ設定は、端末内データベースに保存


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

1 ソースで Android 、 iPhone 、 iPad に対応

Android/iPhone 、 iPad でレイアウト変更を行っている

実際のデータのやりとりは XML 、 json のみ

アプリ内に HTML テンプレートが存在するため、動作も軽快

データの保存も可能

HTML5 のローカルストレージを活用

アジャイル開発に向いている

モックアップがそのままアプリになり、修正確認も即時実機で可能

ヘッダー・フッター固定メニュー

Android2.2 、 iOS 5.0 以上が必要

App Store(iTunes Connect) 申請

一度の戻りもなく、申請から 2週間弱で公開

ハイブリッドアプリであることが却下される理由にはならない

04/13/2023 14


ASICS SHOE FINDER

株式会社アシックス「 ASICS SHOE FINDER 」

アシックスストアなどで行われている足形計測サービス「 STATIC FOOT ID 」、走行計測サービス「 DYNAMIC FOOT ID 」の測定結果から、目的に合わせ、自動的におすすめのランニングシューズを抽出し、測定結果と共にレポートを表示するアプリケーション。

対応機種：iPad (iOS 5.0 以上 )

作業範囲：詳細設計、開発、テスト

テクノロジー：Monaca 、 HTML5 、 CSS3 、 JavaScript

開発期間： 2週間開発体制： 2 名

04/13/2023 15


まとめ | ASICS SHOE FINDER

すでにある Web の資産を活用

既存で用意されていた API を用いた

デザイン作業を含め、 2週間程度の開発期間でリリース

マーケット公開しない店頭アプリ

iOS Developer Enterprise Program ( 年間参加費 ¥24,800)

社内配布向けで、ワイヤレスでアプリ更新可能

個人利用であれば、 iOS Developer Program( 年間参加費 ¥8,400)

アプリ更新を iTunes から行うことができる

画面遷移アニメーション

iOS限定であれば、各種フレームワークのアニメーション機能を使用可能

jQuery Mobile などの Mobile 用 jQuery フレームワークも豊富

04/13/2023 16


全体まとめ

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

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

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

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

BtoB の業務管理系アプリ、 BtoC の情報配信系アプリでは、ネイティブと何ら変わらない。

ゲームアプリも時間の問題ではないかと考えている。

設計・開発がしっかりしていれば、特に問題は見あたらない。

マルチプラットフォームでやるのであれば、 HTML5 が有利ではないか。

全く問題ない。

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

iPhone 、 iPad では特に問題はない。

ただし Android はアニメーション表示が不得意であるため、気をつける必要がある。

04/13/2023 17

04/13/2023

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

<18>

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

Technology