HTML5ハイブリッド アプリ開発実践編
Upcoming SlideShare
Loading in...5
×
 

HTML5ハイブリッド アプリ開発実践編

on

  • 24,155 views

 

Statistics

Views

Total Views
24,155
Views on SlideShare
23,910
Embed Views
245

Actions

Likes
84
Downloads
155
Comments
0

6 Embeds 245

https://twitter.com 200
https://cybozulive.com 34
http://www.mitsurugi.pw 8
https://www.rebelmouse.com 1
http://s.deeeki.com 1
https://www.chatwork.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

HTML5ハイブリッド アプリ開発実践編 HTML5ハイブリッド アプリ開発実践編 Presentation Transcript

  • HTML5ハイブリッドアプリ開発実践編クロスプラットフォーム開発でハマりがちなポイントを解説 アシアル株式会社 久保田光則 URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved. 1
  • 自己紹介 • 久保田光則 @anatoo • アシアル株式会社 • UI&UXデザイナー兼 ソフトウェアエンジニア URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved. 2
  • 会社紹介• アシアル株式会社• HTML5、UI&UX、スマートフォン、PHP、etc... URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved. 3
  • 今回の話• HTML5で作るハイブリッドアプリって実際どうなの? URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved. 4
  • ハイブリッドアプリとは• 通常のアプリと同様にストアから インストールできる• 普通のアプリのように見えるが、 中身の部分はHTML5で実装されている URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved. 5
  • ハイブリッドアプリネイティブアプリ ハイブリッドアプリ Objective-C HTML5 JavaScript or Java CSS アプリ アプリ URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved. 6
  • どうして注目されているのか?• iPhoneとAndroid、まじめに両プラッ トフォームに対応すると大変 URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved. 7
  • AndroidとiOS両対応は大変• プログラミング言語が違う• 開発環境が違う• 開発ノウハウが違う• 用意されているUIが違う• 両方できる開発者は希少 URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved. 8
  • そこでハイブリッドアプリ• HTML5でアプリ開発• ワンソースでクロスプラットフォーム URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved. 9
  • いいところ• ウェブ開発者のノウハウが活かせる• ワンソースでマルチプラットフォーム 対応 => 開発効率化• HTML5からネイティブの機能を呼び 出せる URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved. 10
  • 国内国外の事例• cookpad• 名刺管理アプリEight• Wikipedia• はてなスペース• LinkedIn• etc... URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved. 11
  • ハイブリッドアプリ興隆はこれから• 2016年には業務向けアプリの50%がハイブリッドアプリになるという予測も。• 米Gartner調べ URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved. 12
  • ただし良いことばかりではない• 何も考えずにハイブリッドアプリを作ると・・・? URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved. 13
  • よくありがちな失敗• なんかショボイアプリになった・・・• UIがイケてない・・・• 反応速度が遅い・・・• なんか落ちる・・・ URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved. 14
  • 失敗例: Facebook• HTML5で作っていたものをネイティブ へ移行• 動作が重かったり落ちたりと不評だった• 「HTML5に賭けたのは失敗」 • by ザッカーバーグCEO URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved. 15
  • 失敗の理由• スキル・ノウハウの不足• ウェブサイトと同じように実装している• HTML5で実装すべきでないところを実 装している• モバイル特有の事情を考慮していない URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved. 16
  • 失敗パターンを避けるための• 前提、知識、ノウハウ、話します。 URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved. 17
  • ハイブリッドアプリの作り方 URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved. 18
  • ハイブリッドアプリの作り方• フレームワークを利用 • PhoneGap • MonacaFramework • Triana • Trigger.io • もしくは自前で用意 URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved. 19
  • フレームワーク?• HTML5で記述したものをAndroidや iOSのアプリとして包んでくれるもの• JSからネイティブの機能を呼び出すイ ンターフェイスを提供 URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved. 20
  • フレームワーク? ハイブリッドアプリ HTML5 フレームワーク モバイルOS(iOS, Android URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved. 21
  • フレームワークの選定ポイント• ネイティブの機能をJSから使うか? • 具体的にどんなネイティブの機能を使うか?• 信頼出来ないHTMLを読み込むか?今回はPhoneGapの場合をお話します URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved. 22
  • PhoneGap• 最もメジャーなハイブリッドアプリフレームワーク URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved. 23
  • PhoneGapがやってくれることHTML5から呼び出せるネイティブAPIの提供。• ファイルストレージ• カメラ、コンパス、加速度センサー• コンタクトリスト• 位置情報取得• ネットワーク URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved. 24
  • その他プラグイン プラグイン導入で、その他の機能も使える• Bluetooth通信• Androidのインテント• ChildBrowser - アプリ内ブラウザ• 日付選択UI• GPS、NFC、SMS、Bonjour、etc... URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved. 25
  • さらに自分でPhoneGapプラグインを実装すると、• 重たい処理はネイティブで書く• 特定の画面はネイティブで書く URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved. 26
  • 開発方針 URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved. 27
  • どちらにまず合わせる?• AndroidよりもiOSのほうがはるかに動きが滑 らか&軽い• まずは、Androidでまともに動くことを確認し てiOSでも確認する • 逆だと、Androidで重すぎて使い物にならな くなる事態が発生する URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved. 28
  • 何をどっちで実装する?• HTML5は万能ではない • パフォーマンス上無理っぽい所も。• どんなものをHTML5で実装できる?• どんなものをネイティブで実装する? URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved. 29
  • これを判断するために• あらかじめHTML5が不得意な部分を 検証&理解しておく• 不得意な部分はネイティブで実装して 補う URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved. 30
  • 長短 高度なグラフィック処 理、リアルタイム処 開発速度、学習コス 理、端末性能を活か ト、クロスプラット す、メモリ節約、OS フォーム性 最新機能ネイティブ ⃝ ×HTML5 × ⃝ URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved. 31
  • 両方の長所をうまく活用する• なんでもHTML5でやるのではない• HTML5とネイティブの短所を上手く補いあう形にする URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved. 32
  • 実際に開発する際のノウハウ URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved. 33
  • 前準備は終わり• ここからは、実装する際の細かいノウハウを話していきます URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved. 34
  • デバッグ• Firebugみたいなインスペクタをモバイルで使うには? URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved. 35
  • iOSの場合• Safariのリモートインスペクターを利用する URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved. 36
  • Androidの場合• weinreを利用する URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved. 37
  • アニメーション• JavaScriptで直接アニメーションする と大変遅い• CSSアニメーションを使う URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved. 38
  • CSSアニメーションのやり方• dom.style.webkitAnimation• dom.style.webkitTransition• dom.style.webkitTransformアニメーション関連のプロパティをJavaScriptから操作する URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved. 39
  • 注意点: iOSでは• iOSでは、webkitTransformスタイル に、translate2dやtranslateXなどを使う とちらつくので、translate3dを使う URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved. 40
  • アニメーションにはGPUを活用• 大切• 描画の速さ・滑らかさが段違い• 以下の呪文を使うとGPUでの描画が有効に • -webkit-transform-style: preserve-3d; URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved. 41
  • GPUが効いてるかどうか確かめる• iOSの場合 • GPUオーバードローのオプションを 付けてiOSシミュレータ起動• Androidの場合 • 開発者向けオプションで「GPU オーバードローを有効にする」がつ いている端末を利用 URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved. 42
  • 例 $ export CA_COLOR_OPAQUE=1 $ open (iOS simulaterのパス) URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved. 43
  • ツールバーをネイティブにする• ツールバーやタブバーなどはネイティブ• 中身のみHTML5で記述する• 簡単にアプリっぽくなる URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved. 44
  • 例 ネイティブ HTML5 ネイティブ URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved. 45
  • 遷移アニメーションはネイティブで • 画面を遷移する際のアニメーションにも ネイティブを使うとアプリらしくなる • CSSアニメーションでやると まだ若干重たい URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved. 46
  • MonacaFrameworkを使う• PhoneGapを拡張したフレームワーク• ネイティブのUIをJSで制御• オープンソース • http://github.com/monaca URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved. 47
  • viewportを利用する• モバイルでのHTML5特有の概念• どの端末でも同じような見た目にするのに必要 <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved. 48
  • タップイベントの扱い• モバイルでJavaScriptからclickイベントを利用 すると、200ms程度の遅延が発生 • Aタグでも同様なので使わないようにする• tappable.jsのようなタップイベントを検知でき るライブラリを使う https://github.com/cheeaun/tappable URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved. 49
  • tappable.jsがやること • モバイルだと、タッチを扱うための イベントが発行される • touchstart, touchmove, touchend • tappable.jsではこれを補足してタッ プを関知 URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved. 50
  • jQueryの代わりにzepto.jsを使う• jQueryのAPIと互換性を持つ• モバイル用に最適化 URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved. 51
  • 画面の傾きを取る• window.orientation • その時の画面の傾きが入る URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved. 52
  • 画面の傾きを検知する• window.orientationをsetIntervalで監視 する • orientationChangeイベントは ポータビリティが低い URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved. 53
  • JS/CSSは圧縮しておく• CSSはYUI Compressor等使う• JSはUgilifyJS等使う• 圧縮して起動を早くする URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved. 54
  • 気をつけるバグ• orientationの扱い• Android4でcssのorientationがおかしい• Android4系でassetsから512回読み込 みで落ちるバグ• 開発してみて初めて遭遇するバグ URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved. 55
  • セキュリティ• XSSには気をつける • ネイティブの機能を呼び出せるため• iframeで信頼出来ないURLを呼び出す際も気をつける URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved. 56
  • まとめ URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved. 57
  • ハイブリッドアプリは銀の弾丸ではない• レスポンスの遅いアプリができあがる• よく落ちる不安定なアプリが出来上がる• 開発効率が却って悪くなる このような失敗パターンを避けるには? URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved. 58
  • 実装の切り分け• 何をHTML5で実装するべきか?• 何をネイティブで実装するべきか?• ネイティブとHTML5の欠点を補い合 うようにする• HTML5だけでやらない URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved. 59
  • モバイル特有のノウハウを理解する• PCには無い事情を把握する • viewport, タッチイベント, orientation• 貧弱なスペックでもなるべく軽く • GPUを活用, CSSアニメーション, リソースの節約• 各OSのバグを把握する URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved. 60
  • お知らせ URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved. 61
  • ブース紹介• B-13でブースを出しています• 話した技術やノウハウはMonacaで使われています。 URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved. 62
  • エンジニア、デザイナー募集中!• アシアル株式会社では、エンジニアやデザ イナーを募集しています。• 気になる人は僕かブースにいる人に声かけ てください。 URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved. 63
  • ご清聴ありがとうございました URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved. 64