Movatterモバイル変換

講師紹介大学2年生の時にアシアル株式会社を設立、そのまま代表取締役社長として今に至る。もともと小学生の時にパソコンを触ったことがきっかけで、生きている時間の大半をプログラミングして過ごす。東京大FB: massie.massie.massieTwitter: @massie 学工学部を卒業、アシアルの事業に忙しくなったため同大学院を中退。代表取締役社長として対外的な活動を行いつつ、各プロジェクトではコーディングやマネジメントなども担当。 URL : http://www.asial.co.jp/ │ Copyright © 2012 Asial Corporation. All Rights Reserved. │ 2012/7/2 ｜ 2

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

複数プラットフォーム対応が課題に 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

エンジニアの必要スキルも増える一方技術の進歩にフロントとバックエンドより効率的なキャッチアップ技術の両方を理解開発手法の選択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

アシアルWebサイトの特徴• サイトリニューアルにあわせて、HTML5でいちから開発を開始。• HTML5/CSS3/JavaScriptによるアニメーションをふんだんに使用• Webフォントを用いてテキスト化を検討。• モバイル版はレスポンシブレイアウトを採用することで、様々な画面サイズと解像度に対応。 URL : http://www.asial.co.jp/ │ Copyright © 2012 Asial Corporation. All Rights Reserved. │ 2012/7/2 ｜ 9

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

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

Webフォントについて• サーバーからフォントデータをダウンロードし、描画する仕組み。• Webフォントを使うことで、インストールされていない高品質なフォントも表示できる。インターネット経由でダウンロードサーバー上のフォントデータブラウザ上に描画 URL : http://www.asial.co.jp/ │ Copyright © 2012 Asial Corporation. All Rights Reserved. │ 2012/7/2 ｜ 12

Webフォントを用いた課題① フォントの表示品質が低い• ブラウザによっては、表示が想定した品質にならなかった。• フォント品質の問題ではなく、ブラウザ内臓のレンダリングエンジンの問題。② フォントデータが重く、表示にタイムラグが発生する• フォントプラス（webfont.fontplus.jp）の場合、動的コンテンツを表示したい場合は後から使用文字をダウンロードするため、さらにタイムラグの要因となる。• ただしデータのキャッシュがライセンス上禁止されているため、特に日本語フォントをストレスなく表示することは困難。 URL : http://www.asial.co.jp/ │ Copyright © 2012 Asial Corporation. All Rights Reserved. │ 2012/7/2 ｜ 13

非対応ブラウザへの配慮 • 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

レスポンシブレイアウト • 画面幅に応じてCSSを選択 • HTML5とJavaScriptは同一にすることで、メンテナンス性が向上 • 今週中にリリースいたします（実際の弊社Webサイトにて） URL : http://www.asial.co.jp/ │ Copyright © 2012 Asial Corporation. All Rights Reserved. │ 2012/7/2 ｜ 16

Monacaプラットフォーム• HTML5向けスマートフォン向け開発プラットフォーム• JavaScriptライブラリとしてExt.JS 4を活用• ファイルアップロードやライブプレビューの部分でHTML5を活用 URL : http://www.asial.co.jp/ │ Copyright © 2012 Asial Corporation. All Rights Reserved. │ 2012/7/2 ｜ 17

HTML5を用いたファイルアップロード機能• HTML5のFileReaderを用いて、ドラッグ＆ドロップでファイルアップロードを実現• 複数ファイルのアップロードが可能• ディレクトリのアップロードには非対応（Chromeであれば可能） URL : http://www.asial.co.jp/ │ Copyright © 2012 Asial Corporation. All Rights Reserved. │ 2012/7/2 ｜ 18

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

ネイティブ？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

ネイティブアプリとHTML5 Webアプリの比較 HTML5 ネイティブ実装  学習曲線が低い  端末性能をフルに活用  最大のデベロッパーコミュニティ  スムーズな画面遷移メリット  豊富なエコシステム  プッシュ通信・高度なネットワーク  オープンな業界標準  アプリマーケットでの販売  Webブラウザが中心  高い学習コストデメリット  低い拡張性  OSごとに異なる言語・FW  スムーズな画面遷移が苦手  制作日数の増加 URL : http://www.asial.co.jp/ │ Copyright © 2012 Asial Corporation. All Rights Reserved. │ 2012/7/2 ｜ 22

技術マップ高速化・リッチな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

事例: 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

名刺管理 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

本アプリの内部構造本アプリは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

ハイブリッド型アプリ開発で得たノウハウ（抜粋）• 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

ネイティブと比べた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

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

構築経験をオープンに: Monacaプラットフォーム• HTML5とネイティブを組み合わせたハイブリッドアプリ開発向けプラットフォーム• クラウド上にすべての機能を統合し、だれでもアプリ開発ができる環境を提供• 開発したアプリはApp StoreやGoogle Playなどの各種マーケットへの公開が可能対応ブラウザ対応デバイス対応OS URL : http://www.asial.co.jp/ │ Copyright © 2012 Asial Corporation. All Rights Reserved. │ 2012/7/2 ｜ 34

Monacaの制作環境ボタン一発で現在のアプリをAndroid/iOS ネイティブ形式に変換HTML5/CSS/JavaScriptを用いた画面設計＋ロジック記述実際のアプリの動きがブラウザ内で再現デバッガーで動かした際の JavaScriptエラーなどがログとして出力 URL : http://www.asial.co.jp/ │ Copyright © 2012 Asial Corporation. All Rights Reserved. │ 2012/7/2 ｜ 35

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

Movatterモバイル変換

Change Language

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

Embed presentation

Recommended

More Related Content

What's hot

Viewers also liked

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

More from Monaca

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