開発事例に学ぶHtml5アプリのポイント

4,874 views

Published on

開発事例に学ぶHtml5アプリのポイント

  1. 1. 開発事例に学ぶHTML5アプリのポイント アシアル株式会社 代表取締役社長 田中正裕URL : http://www.asial.co.jp/ │ Copyright © 2012 Asial Corporation. All Rights Reserved. │ 2012/7/2 | 1
  2. 2. 講師紹介 大学2年生の時にアシアル株式会社を設立、そのまま代表取締 役社長として今に至る。 もともと小学生の時にパソコンを触ったことがきっかけで、 生きている時間の大半をプログラミングして過ごす。東京大FB: massie.massie.massieTwitter: @massie 学工学部を卒業、アシアルの事業に忙しくなったため同大学 院を中退。 代表取締役社長として対外的な活動を行いつつ、各プロジェ クトではコーディングやマネジメントなども担当。 URL : http://www.asial.co.jp/ │ Copyright © 2012 Asial Corporation. All Rights Reserved. │ 2012/7/2 | 2
  3. 3. HTML5再まとめ• HTML5は現在広く普及しているHTML4に新しい機能を取り込んだもの。• HTML5で制作したとしても、新機能を用いない限りHTML4と同様。• PCではIE6~8のHTML5対応が十分でないため、まだ普及していない。対 して、スマートフォン向けブラウザではHTML5が利用可能。• まだW3Cによる策定段階であり、今後仕様が変更される可能性がある。 (今使えているのは、各ブラウザーが先行して対応しているため) URL : http://www.asial.co.jp/ │ Copyright © 2012 Asial Corporation. All Rights Reserved. │ 2012/7/2 | 3
  4. 4. HTML5はウェブの共通プラットフォーム URL : http://www.asial.co.jp/ │ Copyright © 2012 Asial Corporation. All Rights Reserved. │ 2012/7/2 | 4
  5. 5. 複数プラットフォーム対応が課題に iOS、Android、Webアプリ、バックエンドと 様々なテクノロジーを組み合わせる必要がある。 Androidアプリ Webアプリ バックエンド iOSアプリ (PC・モバイル) アプリ言語 Objecive-C Java HTML5/JavaScript PHP/Ruby/Javaフレームワーク Cocoa Touch Android FW AJAX, Flashなど さまざま特徴 カメラやセンサーなどを活用可能 ブラウザ上で動作 サーバー側で動作 URL : http://www.asial.co.jp/ │ Copyright © 2012 Asial Corporation. All Rights Reserved. │ 2012/7/2 | 5
  6. 6. エンジニアの必要スキルも増える一方技術の進歩に フロントとバックエンド より効率的なキャッチアップ 技術の両方を理解 開発手法の選択Obj-C言語の HTML5/JS/CSS人気度グラフ出典: www.tiobe.com PHP/Ruby/Python URL : http://www.asial.co.jp/ │ Copyright © 2012 Asial Corporation. All Rights Reserved. │ 2012/7/2 | 6
  7. 7. HTML5を用いることで、全プラットフォームを対象にできる サーバーから アプリを配信 URL : http://www.asial.co.jp/ │ Copyright © 2012 Asial Corporation. All Rights Reserved. │ 2012/7/2 | 7
  8. 8. PC向けHTML5事例 URL : http://www.asial.co.jp/ │ Copyright © 2012 Asial Corporation. All Rights Reserved. │ 2012/7/2 | 8
  9. 9. アシアルWebサイトの特徴• サイトリニューアルにあわせて、HTML5で いちから開発を開始。• HTML5/CSS3/JavaScriptによる アニメーションをふんだんに使用• Webフォントを用いてテキスト化を検討。• モバイル版はレスポンシブレイアウトを採用することで、様々な画面サイズと解像 度に対応。 URL : http://www.asial.co.jp/ │ Copyright © 2012 Asial Corporation. All Rights Reserved. │ 2012/7/2 | 9
  10. 10. HTML5制作にあたって 【HTML5を用いた制作】 • HTML5向けのコーディング自体は、特に苦労する事は なかった。 • asideやsection等のタグが用意されたことで、文書の 構造化が進んだ。 【CSS3を用いた制作】 • サイトの随所にて、CSS3の機能を活用しながらUXを 高めた。 • CSSアニメーションについては、ブラウザ依存も含め て苦労が多かった。 【JavaScriptを用いた制作】 • 既存のライブラリをそのまま活用できた(jQuery等)。 • historyのpushStateを用いてAJAXを用いた履歴対応 (http://www.asial.co.jp/works/) URL : http://www.asial.co.jp/ │ Copyright © 2012 Asial Corporation. All Rights Reserved. │ 2012/7/2 | 10
  11. 11. CSS3アニメーションにおける課題• CSSアニメーションを直接記述した場合、動的コンテンツの対応が難しい。 – 今回はjQueryをセレクターとして用いてCSSアニメーションを直接記述する方針とした。• いくつか残るブラウザ依存 – ベンダープリフィックス(webkit-やmozilla-等)の対応のため、Modernizrを活用 – iPadではGPUを生かすために3D系のプロパティを使用 – Firefoxのアニメーション解釈にバグ – CSSマーキーはOperaとSafariのみ対応 URL : http://www.asial.co.jp/ │ Copyright © 2012 Asial Corporation. All Rights Reserved. │ 2012/7/2 | 11
  12. 12. Webフォントについて• サーバーからフォントデータをダウンロードし、描画する仕組み。• Webフォントを使うことで、インストールされていない高品質なフォントも表示で きる。 インターネット経由 でダウンロード サーバー上の フォントデータ ブラウザ上に描画 URL : http://www.asial.co.jp/ │ Copyright © 2012 Asial Corporation. All Rights Reserved. │ 2012/7/2 | 12
  13. 13. Webフォントを用いた課題① フォントの表示品質が低い• ブラウザによっては、表示が想定した品質にならなかった。• フォント品質の問題ではなく、ブラウザ内臓のレンダリングエンジンの問題。② フォントデータが重く、表示にタイムラグが発生する• フォントプラス(webfont.fontplus.jp)の場合、動的コンテンツを表示したい場合は 後から使用文字をダウンロードするため、さらにタイムラグの要因となる。• ただしデータのキャッシュがライセンス上禁止されているため、特に日本語フォン トをストレスなく表示することは困難。 URL : http://www.asial.co.jp/ │ Copyright © 2012 Asial Corporation. All Rights Reserved. │ 2012/7/2 | 13
  14. 14. ウェブフォントを用いた際の表示 Mac Chrome Win Chrome Win Firefox Win IE9 URL : http://www.asial.co.jp/ │ Copyright © 2012 Asial Corporation. All Rights Reserved. │ 2012/7/2 | 14
  15. 15. 非対応ブラウザへの配慮 • HTML5に非対応のブラウザについては、左図 のように警告メッセージを表示 • 現在のWebサイト訪問者のうちHTML5非対応 ブラウザの割合は8% ブラウザ バージョン 1 Chrome 19.0.1084.56 26.58% 2 Internet Explorer 8 13.95% 3 Internet Explorer 9 12.85% 4 Firefox 13.0.1 9.96% 5 Firefox 12 6.98% 6 Chrome 19.0.1084.52 4.37% 7 Firefox 13 4.28% 8 Internet Explorer 7 2.39% 9 Safari 534.57.2 3.09% 10 Internet Explorer 6 1.67% その他 13.8% URL : http://www.asial.co.jp/ │ Copyright © 2012 Asial Corporation. All Rights Reserved. │ 2012/7/2 | 15
  16. 16. レスポンシブレイアウト • 画面幅に応じてCSSを選択 • HTML5とJavaScriptは同一にす ることで、メンテナンス性が向 上 • 今週中にリリースいたします (実際の弊社Webサイトにて) URL : http://www.asial.co.jp/ │ Copyright © 2012 Asial Corporation. All Rights Reserved. │ 2012/7/2 | 16
  17. 17. Monacaプラットフォーム• HTML5向けスマートフォン向け開発プラットフォーム• JavaScriptライブラリとしてExt.JS 4を活用• ファイルアップロードやライブプレビューの部分でHTML5を活用 URL : http://www.asial.co.jp/ │ Copyright © 2012 Asial Corporation. All Rights Reserved. │ 2012/7/2 | 17
  18. 18. HTML5を用いたファイルアップロード機能• HTML5のFileReaderを用いて、ドラッグ& ドロップでファイルアップロードを実現• 複数ファイルのアップロードが可能• ディレクトリのアップロードには非対応 (Chromeであれば可能) URL : http://www.asial.co.jp/ │ Copyright © 2012 Asial Corporation. All Rights Reserved. │ 2012/7/2 | 18
  19. 19. HTML5のチーム構成検討HTML5の開発ノウハウが十分ではないため、インタラクション部分を担当するUX(ユーザーエクスペリエンス)エンジニアと、サーバーサイドエンジニアの担当を分けて実装を進めた。 PM兼 ビジュアルデザイナー プロダクト マネージャー ビジュアル デザイン補佐 Obj-C/Java サーバーサイドエ UXエンジニア エンジニア ンジニア UX サーバーサイド ビジュアル エンジニア エンジニア エンジニア補佐 デザイナー アシアルWebサイト Monaca URL : http://www.asial.co.jp/ │ Copyright © 2012 Asial Corporation. All Rights Reserved. │ 2012/7/2 | 19
  20. 20. モバイル向けHTML5事例 URL : http://www.asial.co.jp/ │ Copyright © 2012 Asial Corporation. All Rights Reserved. │ 2012/7/2 | 20
  21. 21. ネイティブ?HTML5?特にモバイルアプリ開発の際に、iPhoneとAndroidの2バージョンを作成するコスト負担の大きさからHTML5を選択するケースが増えている • アプリはブラウザ上で動作 • アプリはOS上で直接動作 • クライアント言語はHTML5/JavaScript • クライアント言語はOSにより異なる Java Objective-C ネイティブアプリ Webアプリ URL : http://www.asial.co.jp/ │ Copyright © 2012 Asial Corporation. All Rights Reserved. │ 2012/7/2 | 21
  22. 22. ネイティブアプリとHTML5 Webアプリの比較 HTML5 ネイティブ実装  学習曲線が低い  端末性能をフルに活用  最大のデベロッパーコミュニティ  スムーズな画面遷移メリット  豊富なエコシステム  プッシュ通信・高度なネットワーク  オープンな業界標準  アプリマーケットでの販売  Webブラウザが中心  高い学習コストデメリット  低い拡張性  OSごとに異なる言語・FW  スムーズな画面遷移が苦手  制作日数の増加 URL : http://www.asial.co.jp/ │ Copyright © 2012 Asial Corporation. All Rights Reserved. │ 2012/7/2 | 22
  23. 23. モバイルアプリは作り方に種類がある モバイルアプリ ネイティブ ハイブリッド Webサイト アプリ アプリ (Webアプリ) monacaJAVA Objective-C C# / VB URL : http://www.asial.co.jp/ │ Copyright © 2012 Asial Corporation. All Rights Reserved. │ 2012/7/2 | 23
  24. 24. HTML5以外の選択肢 CORONA SDK URL : http://www.asial.co.jp/ │ Copyright © 2012 Asial Corporation. All Rights Reserved. │ 2012/7/2 | 24
  25. 25. 技術マップ高速化・リッチなUIのためには、ハードウェアレイヤーに近い技術を選択する必要がある。その場合、クロスプラットフォーム性が低下する デザイナーフレンドリー 学習コスト低 HTML5 Monacaハードウェア クロス指向 プラットフォーム Unity CORONA Titanium Java Obj-C エンジニアリング指向 URL : http://www.asial.co.jp/ │ Copyright © 2012 Asial Corporation. All Rights Reserved. │ 2012/7/2 | 25
  26. 26. 事例: au one ニュースEXハイブリッドアプリとして構築• コンテンツはすべてHTML5で配信• プッシュ通信やキャッシュ機能などは、ネイティブ機能を活用KDDI社のAndroid端末にプリインストール• 端末により挙動が異なる「フラグメンテーション」問題の解決が主目的であった• Webアプリとして、iPhone版もリリース(内部のロジックは同じ) Webサーバー アプリ内部処理 HTML5で配信 内蔵 アプリに最適化 HTML5 データ ブラウザ ベース プッシュ通信 URL : http://www.asial.co.jp/ │ Copyright © 2012 Asial Corporation. All Rights Reserved. │ 2012/7/2 | 26
  27. 27. 名刺管理 Eightアプリ • iPhoneとAndroid(※今後リリース予定)に対応し たクロスプラットフォームアプリ • HTML5+PhoneGapで構築 • 無料でアカウント登録できますので、是非ダウン ロードしてお試しください →App Storeにて「名刺管理 Eight」で検索 URL : http://www.asial.co.jp/ │ Copyright © 2012 Asial Corporation. All Rights Reserved. │ 2012/7/2 | 27
  28. 28. ハイブリッド型開発の特徴本アプリではHTML5とネイティブ機能の両方を活用 ツールバー (ネイティブ) アプリ内部 (HTML5/JS) アクションシート (ネイティブ) URL : http://www.asial.co.jp/ │ Copyright © 2012 Asial Corporation. All Rights Reserved. │ 2012/7/2 | 28
  29. 29. 本アプリの内部構造本アプリはHTML5/JavaScript/CSS3ですべての処理が完結。ただし、画面遷移やツールバーの表示部分 画面表示を担当に、独自開発のネイティブコンポーネント表示モジュールを使用。 HTML5/CSS3それにより、スムーズな画面遷移を実現。 Zepto.js ビジネスロジック を記述 JavaScript WebViewとネイティブ間を通信 画面の遷移や ツールバー/ PhoneGap フッターを制御 PGプラグイン JSON形式で ネイティブ 通信 コンポーネン ト WebView Monacaフレームワーク ローカル ストレージ HTML5とネイティ サーバーAPI ブ部分の連携 アプリ本体 オフライン用 データを格納 URL : http://www.asial.co.jp/ │ Copyright © 2012 Asial Corporation. All Rights Reserved. │ 2012/7/2 | 29
  30. 30. ハイブリッド型アプリ開発で得たノウハウ(抜粋)• HTML5の制約 – ネイティブモジュールを組み合わせることで、ほぼすべて解決可能 – とはいえ、実際にはカメラ以外でネイティブを頼る部分は特になかった• 機種依存問題 – 最新のCSS3機能については、iPhoneとAndroidの差異が大きい 例)3Dアニメーション機能はAndroidには無いなど – 基本的に最新バージョンのOSの方がクセが少ない – HTML5やJavaScriptで機種依存問題は基本的に発生しない。CSS3については、まだ不安定 な部分もあり。• ユーザーエクスペリエンス – position:fixedがフルに使えないiOS4系とAndroidでは対応に苦労 →そのためネイティブでツールバー等を表示するプラグインを自社開発 – HTML5だけだと画面遷移がモッサリする可能性が高い – 用いるCSS3のプロパティによりスムーズさが大きく異なる事もある URL : http://www.asial.co.jp/ │ Copyright © 2012 Asial Corporation. All Rights Reserved. │ 2012/7/2 | 30
  31. 31. ネイティブと比べたHTML5の優位性 【クロスプラットフォーム】• HTML5/JavaScriptの割合が高いほど、クロスプラットフォーム性が高い。• 必要に応じてネイティブで機能を用意すれば、ネイティブと比べた遜色はない。【向いていないアプリ】• リアルタイム処理が要求されるアプリ• 独自のユーザーインターフェースを搭載したいアプリ 例:3Dゲームやバックグラウンドで実行するアプリなど【フラグメンテーション問題】• 特にAndroidでは、ネイティブアプリのフラグメンテーション問題は深刻 ネイティブで作成すると、未対応関数や想定外の挙動により強制終了してしまう• HTML5アプリはCSS3解釈を除いて、大きく問題になることは少ない 強制終了が発生することは非常に稀。CSS定義やHTMLタグを工夫することで回避可能。 URL : http://www.asial.co.jp/ │ Copyright © 2012 Asial Corporation. All Rights Reserved. │ 2012/7/2 | 31
  32. 32. HTML5アプリ開発の成功秘訣• iOSとAndroidの両方に対応した画面UI設計 – クロスプラットフォームのアプリ開発では、ネイティブアプリのUIをiPhoneとAndroidのど ちらに合わせるべきか、事前判断が必要 – 一部のHTML5との互換性のないウィジェット(ドラムピッカー等)は別の方法で代替• さまざまな種類のデバイスへの対応 – 画面サイズ(縦横比)が異なる端末への対応が厄介 – 画面デザインの段階で、正方~16:9までの端末サイズを想定しておく必要あり• サポートOSの決定 – OSバージョンごとに細かいHTML5の実装仕様やバグがある状況 – 特にAndroidでは、開発におけるリファレンス端末を選定する – 最新のOS・端末に向けて開発リソースを集中する URL : http://www.asial.co.jp/ │ Copyright © 2012 Asial Corporation. All Rights Reserved. │ 2012/7/2 | 32
  33. 33. Monacaプラットフォームの紹介 URL : http://www.asial.co.jp/ │ Copyright © 2012 Asial Corporation. All Rights Reserved. │ 2012/7/2 | 33
  34. 34. 構築経験をオープンに: Monacaプラットフォーム• HTML5とネイティブを組み合わせたハイブリッドアプリ開発向けプラットフォーム• クラウド上にすべての機能を統合し、だれでもアプリ開発ができる環境を提供• 開発したアプリはApp StoreやGoogle Playなどの各種マーケットへの公開が可能 対応ブラウザ 対応デバイス 対応OS URL : http://www.asial.co.jp/ │ Copyright © 2012 Asial Corporation. All Rights Reserved. │ 2012/7/2 | 34
  35. 35. Monacaの制作環境 ボタン一発で現在のアプリをAndroid/iOS ネイティブ形式に変換HTML5/CSS/JavaScriptを用いた画面設計+ロジック記述 実際のアプリの動きがブラウザ内で再現 デバッガーで動かした際の JavaScriptエラーなどがログとして出力 URL : http://www.asial.co.jp/ │ Copyright © 2012 Asial Corporation. All Rights Reserved. │ 2012/7/2 | 35
  36. 36. Monacaの特徴Webアプリ制作のように、コード&デバッグが可能です IDEでコード編集 すぐにデバッガで動作確認 URL : http://www.asial.co.jp/ │ Copyright © 2012 Asial Corporation. All Rights Reserved. │ 2012/7/2 | 36
  37. 37. MonacaロードマップMonacaのコンセプトである「誰でも簡単にアプリ開発ができること」を見据え、機能実装に励んで参ります。正式リリースにつきましても、下記のリリース時期を照らし合わせて公表いたします。• ネイティブUIの統合 – 先ほど説明したネイティブUIコンポーネントについて、Monaca IDEにてレイアウトができ る機能をリリースします(超近日中)。• 独自ネイティブモジュールの開発 – Objective-CやJavaで作成されたモジュールをMonacaアプリに取り込めるような仕組みを実 装予定です。 URL : http://www.asial.co.jp/ │ Copyright © 2012 Asial Corporation. All Rights Reserved. │ 2012/7/2 | 37
  38. 38. ご清聴ありがとうございました URL : http://www.asial.co.jp/ │ Copyright © 2012 Asial Corporation. All Rights Reserved. │ 2012/7/2 | 38

×