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

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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

23,411

Published on

0 Comments
94 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
23,411
On Slideshare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
174
Comments
0
Likes
94
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

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

×