0
事例で解説するHTML5アプリ開発のポイントアシアル株式会社 鴨田健次
自己紹介 鴨田 健次(かもた けんじ) ■略歴  アシアル株式会社所属。Webディレクター/Webデザイナー。  主な業務は、プロジェクトリーダーとして、プロジェクトのマネジメントを行う一方、  デザイン業務があればデザイナーとしても活動し、コ...
今回紹介するアプリ   auヘッドライン               テレ朝動画アプリ(公                    ASICS SHOE FINDER  2012年3月リリース                 式)        ...
HTML5アプリの気になるところ  実際のところ、HTML5アプリやハイブリッドアプリで   どのくらいのことができるのか?     ネイティブだけで作る場合との違い  Android/iPhone/iPadで機種依存の問題はないのか? ...
アプリ概要 | auヘッドライン                   KDDI 株式会社・ 株式会社テレビ朝日                   「auヘッドライン」                   アプリ取り放題「auスマートパス」対応...
アプリ更新 | auヘッドライン   アプリ更新申請                                           アプリ更新                                         HTML・CS...
アプリの機能変遷 | auヘッドライン  auニュースEX ver1.0       auニュースEX ver2.0                       auヘッドライン(Android)     (2010年12月)         ...
Android フラグメンテーション | auヘッドライン 対応機種一覧 IS03                 XPERIA acro IS11S          INFOBAR C01             GALAXY SIII P...
UIアニメーション | auヘッドライン スライドメニュー         auヘッドライン       auヘッドライン         (Androidアプリ)   (iPhoneサイト)                          ...
まとめ | auヘッドライン  基本的にはアプリ自体の更新は必要ない     コンテンツの追加、レイアウトの変更などはHTML5/CSS3の更新のみで対応可能         ネイティブ側の変更の時にアプリ更新が必要  iOS対応やWe...
テレ朝動画アプリ(公式)               株式会社テレビ朝日               「テレ朝動画アプリ(公式)」               テレビ朝日がYouTube上で展開している公式動画の視聴に関する          ...
1ソースでマルチデバイス対応 | テレ朝動画アプリ(公式)     Android                   iPhone                    iPad               style.css        ...
データの取得・保存方法 | テレ朝動画アプリ(公式)                             アプリ内にHTML/JavaScript                             コードをあらかじめ仕込んでお    ...
まとめ | テレ朝動画アプリ(公式)  1ソースでAndroid、iPhone、iPadに対応     Android/iPhone、iPadでレイアウト変更を行っている  実際のデータのやりとりはXML、jsonのみ     アプリ内...
ASICS SHOE FINDER                    株式会社アシックス                    「ASICS SHOE FINDER」                    アシックスストアなどで行われている...
まとめ | ASICS SHOE FINDER   すでにあるWebの資産を活用       既存で用意されていたAPIを用いた       デザイン作業を含め、2週間程度の開発期間でリリース   マーケット公開しない店頭アプリ    ...
全体まとめ  実際のところ、HTML5アプリでどのくらいのことができるのか?   BtoBの業務管理系アプリ、BtoCの情報配信系アプリでは、ネイティブと何ら変わらない。   ゲームアプリも時間の問題ではないかと考えている。  Androi...
ご静聴ありがとうございました                 2013/1/7   <18>
Upcoming SlideShare
Loading in...5
×

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

6,315

Published on

Published in: Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
6,315
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
14
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

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

  1. 1. 事例で解説するHTML5アプリ開発のポイントアシアル株式会社 鴨田健次
  2. 2. 自己紹介 鴨田 健次(かもた けんじ) ■略歴 アシアル株式会社所属。Webディレクター/Webデザイナー。 主な業務は、プロジェクトリーダーとして、プロジェクトのマネジメントを行う一方、 デザイン業務があればデザイナーとしても活動し、コーダーとしてHTMLテンプレートを作成するこ ともあります。 ■今まで関わった主なHTML5関連プロジェクト KDDI 株式会社・ 株式会社テレビ朝日 「auヘッドライン」 アプリ取り放題「auスマートパス」対応のニュース配信アプリ 株式会社テレビ朝日「テレ朝動画アプリ(公式)」 テレビ朝日が公式に提供しているYouTube動画を簡単に検索・視聴できるアプリ 株式会社アシックス 「iPadアプリ 『ASICS SHOE FINDER』」 上記アシックスストアでの分析サービスと連携し、ユーザーの特性に合わせたシューズを探し出すア プリ。 株式会社アシックス「ゲイトアナリシス・ソフトウェア開発」 ランニング中の様子をカメラで撮影し、リアルタイムで分析するシステム その他、スマートフォンアプリ、PC向けサイト多数。 2013/1/7 2
  3. 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. 4. HTML5アプリの気になるところ  実際のところ、HTML5アプリやハイブリッドアプリで どのくらいのことができるのか?  ネイティブだけで作る場合との違い  Android/iPhone/iPadで機種依存の問題はないのか?  特にAndroidにおけるフラグメンテーション(断片化)  App Storeや各キャリアのマーケットへの申請は通過するのか?  注意すべき事があるのか?  ユーザーインターフェースがネイティブに劣るのではないか?  主にアニメーションに関して 2013/1/7 4
  5. 5. アプリ概要 | auヘッドライン KDDI 株式会社・ 株式会社テレビ朝日 「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. 6. アプリ更新 | auヘッドライン アプリ更新申請 アプリ更新 HTML・CSS・PHP更新 審査・修正戻し アップデート通知 auヘッドライン au Market アプリ起動 コンテンツ (即時反映) 配信サーバー アプリアップデート (ユーザー任意) 審査通過・マーケット公開 auヘッドライン (早くても申請から数日) 3ヶ月に1回程度のペース 1ヶ月に1回程度のペース 2013/1/7 6
  7. 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. 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™ GzOne 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 Gz 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. 9. UIアニメーション | auヘッドライン スライドメニュー auヘッドライン auヘッドライン (Androidアプリ) (iPhoneサイト) 2013/1/7 9
  10. 10. まとめ | auヘッドライン  基本的にはアプリ自体の更新は必要ない  コンテンツの追加、レイアウトの変更などはHTML5/CSS3の更新のみで対応可能  ネイティブ側の変更の時にアプリ更新が必要  iOS対応やWebアプリへの展開が容易  iPhone対応が決定してから、1ヶ月半弱でリリースを行った  Androidネイティブで実装していることのほとんどはWeb技術でも可能だった  ネイティブでしかできない、Widgetは除く  Androidのフラグメンテーション(バージョンによる断片化)を解決  auのすべてのAndroid端末で実証済み  これまでの経験では、ネイティブのウィジェットで端末差異が発生  UIアニメーション(少しであれば)  Facebookのようなスライドメニュー、アコーディオンメニューは問題ない 2013/1/7 10
  11. 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. 12. 1ソースでマルチデバイス対応 | テレ朝動画アプリ(公式) Android iPhone iPad style.css 端末種類に応じて style2.css CSSを切り替え recommend.html HTMLやJavaScriptは 同じソースコード 2013/1/7 12
  13. 13. データの取得・保存方法 | テレ朝動画アプリ(公式) アプリ内にHTML/JavaScript コードをあらかじめ仕込んでお き、データはサーバーから取得 し表示する HTML5 テンプレート 動画情報 xml YouTube Data API データ取得はJSON やXMLを利用して表 示速度を最適化 お気に入り おすすめ・ 公式チャンネル情報 テレ朝動画アプリ 管理サーバー localstorage jsonアプリ設定は、端末内データベースに保存 2013/1/7 13
  14. 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. 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. 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. 17. 全体まとめ  実際のところ、HTML5アプリでどのくらいのことができるのか? BtoBの業務管理系アプリ、BtoCの情報配信系アプリでは、ネイティブと何ら変わらない。 ゲームアプリも時間の問題ではないかと考えている。  Android/iPhone/iPadで機種依存の問題はないのか? 設計・開発がしっかりしていれば、特に問題は見あたらない。 マルチプラットフォームでやるのであれば、HTML5が有利ではないか。  App Storeや各キャリアのマーケットへの申請は通過するのか? 全く問題ない。 ハイブリッドアプリであるという理由で申請は通らないことはない。  ユーザーインターフェースがネイティブに劣るのではないか? iPhone、iPadでは特に問題はない。 ただしAndroidはアニメーション表示が不得意であるため、気をつける必要がある。 2013/1/7 17
  18. 18. ご静聴ありがとうございました 2013/1/7 <18>
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×