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

HTML5ハイブリッド
アプリ開発実践編
クロスプラットフォーム開発で
ハマりがちなポイントを解説

アシアル株式会社久保田光則

URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved. 1

自己紹介
• 久保田光則 @anatoo
• アシアル株式会社
• UI&UXデザイナー兼
ソフトウェアエンジニア


会社紹介

• アシアル株式会社
• HTML5、UI&UX、スマートフォン、
PHP、etc...


今回の話

• HTML5で作るハイブリッドアプリっ
て実際どうなの?


ハイブリッドアプリとは

• 通常のアプリと同様にストアから
インストールできる
• 普通のアプリのように見えるが、
中身の部分はHTML5で実装されている


ハイブリッドアプリ
ネイティブアプリハイブリッドアプリ

Objective-C HTML5
JavaScript
or Java CSS

アプリアプリ


どうして注目されているのか?

• iPhoneとAndroid、まじめに両プラッ
トフォームに対応すると大変


AndroidとiOS両対応は大変

• プログラミング言語が違う
• 開発環境が違う
• 開発ノウハウが違う
• 用意されているUIが違う
• 両方できる開発者は希少


そこでハイブリッドアプリ

• HTML5でアプリ開発
• ワンソースでクロスプラットフォーム


いいところ

• ウェブ開発者のノウハウが活かせる
• ワンソースでマルチプラットフォーム
対応 => 開発効率化
• HTML5からネイティブの機能を呼び
出せる


国内国外の事例

• cookpad
• 名刺管理アプリEight
• Wikipedia
• はてなスペース
• LinkedIn
• etc...

ハイブリッドアプリ興隆はこれから

• 2016年には業務向けアプリの
50%がハイブリッドアプリになると
いう予測も。
• 米Gartner調べ


ただし良いことばかりではない

• 何も考えずにハイブリッドアプリを作
ると・・・?


よくありがちな失敗

• なんかショボイアプリになった・・・
• UIがイケてない・・・
• 反応速度が遅い・・・
• なんか落ちる・・・


失敗例: Facebook

• HTML5で作っていたものをネイティブ
へ移行
• 動作が重かったり落ちたりと不評だった
• 「HTML5に賭けたのは失敗」
• by ザッカーバーグCEO


失敗の理由

• スキル・ノウハウの不足
• ウェブサイトと同じように実装している
• HTML5で実装すべきでないところを実
装している
• モバイル特有の事情を考慮していない


失敗パターンを避けるための

• 前提、知識、ノウハウ、話します。


ハイブリッドアプリの作り方


ハイブリッドアプリの作り方

• フレームワークを利用
• PhoneGap
• MonacaFramework
• Triana
• Trigger.io
• もしくは自前で用意


フレームワーク?

• HTML5で記述したものをAndroidや
iOSのアプリとして包んでくれるもの

• JSからネイティブの機能を呼び出すイ
ンターフェイスを提供


フレームワーク?
ハイブリッドアプリ

HTML5

フレームワーク

モバイルOS(iOS, Android


フレームワークの選定ポイント

• ネイティブの機能をJSから使うか?
• 具体的にどんなネイティブの機能を使うか?
• 信頼出来ないHTMLを読み込むか?

今回はPhoneGapの場合をお話します


PhoneGap

• 最もメジャーなハイブリッドアプリフレー
ムワーク


PhoneGapがやってくれること
HTML5から呼び出せるネイティブAPIの提供。

• ファイルストレージ
• カメラ、コンパス、加速度センサー
• コンタクトリスト
• 位置情報取得
• ネットワーク


その他プラグイン
プラグイン導入で、その他の機能も使える

• Bluetooth通信
• Androidのインテント
• ChildBrowser - アプリ内ブラウザ
• 日付選択UI
• GPS、NFC、SMS、Bonjour、etc...


さらに

自分でPhoneGapプラグインを実装すると、

• 重たい処理はネイティブで書く
• 特定の画面はネイティブで書く


開発方針


どちらにまず合わせる?

• AndroidよりもiOSのほうがはるかに動きが滑
らか&軽い
• まずは、Androidでまともに動くことを確認し
てiOSでも確認する
• 逆だと、Androidで重すぎて使い物にならな
くなる事態が発生する

何をどっちで実装する?
• HTML5は万能ではない
• パフォーマンス上無理っぽい所も。

• どんなものをHTML5で実装できる?
• どんなものをネイティブで実装する?


これを判断するために

• あらかじめHTML5が不得意な部分を
検証&理解しておく
• 不得意な部分はネイティブで実装して
補う


長短
高度なグラフィック処
理、リアルタイム処開発速度、学習コス
理、端末性能を活かト、クロスプラット
す、メモリ節約、OS フォーム性
最新機能

ネイティブ ⃝ ×
HTML5 × ⃝


両方の長所をうまく活用する

• なんでもHTML5でやるのではない

• HTML5とネイティブの短所を上手く
補いあう形にする


実際に開発する際のノウハウ


前準備は終わり

• ここからは、実装する際の細かいノウ
ハウを話していきます


デバッグ

• Firebugみたいなインスペクタを
モバイルで使うには?


iOSの場合

• Safariのリモートインスペクターを
利用する


Androidの場合

• weinreを利用する

アニメーション

• JavaScriptで直接アニメーションする
と大変遅い
• CSSアニメーションを使う


CSSアニメーションのやり方

• dom.style.webkitAnimation
• dom.style.webkitTransition
• dom.style.webkitTransform
アニメーション関連のプロパティを

JavaScriptから操作する


注意点: iOSでは

• iOSでは、webkitTransformスタイル
に、translate2dやtranslateXなどを使う
とちらつくので、translate3dを使う


アニメーションにはGPUを活用

• 大切
• 描画の速さ・滑らかさが段違い
• 以下の呪文を使うとGPUでの描画が有効に
• -webkit-transform-style: preserve-3d;


GPUが効いてるかどうか確かめる
• iOSの場合
• GPUオーバードローのオプションを
付けてiOSシミュレータ起動
• Androidの場合
• 開発者向けオプションで「GPU
オーバードローを有効にする」がつ
いている端末を利用


例

$ export CA_COLOR_OPAQUE=1
$ open (iOS simulaterのパス)


ツールバーをネイティブにする

• ツールバーやタブバーなどはネイティブ
• 中身のみHTML5で記述する

• 簡単にアプリっぽくなる


例
ネイティブ

HTML5

ネイティブ


遷移アニメーションはネイティブで

• 画面を遷移する際のアニメーションにも
ネイティブを使うとアプリらしくなる

• CSSアニメーションでやると
まだ若干重たい


MonacaFrameworkを使う

• PhoneGapを拡張したフレームワーク
• ネイティブのUIをJSで制御
• オープンソース
• http://github.com/monaca

viewportを利用する

• モバイルでのHTML5特有の概念
• どの端末でも同じような見た目にするの
に必要

<meta name="viewport"
content="width=device-width, initial-scale=1,
user-scalable=no">


タップイベントの扱い
• モバイルでJavaScriptからclickイベントを利用
すると、200ms程度の遅延が発生
• Aタグでも同様なので使わないようにする

• tappable.jsのようなタップイベントを検知でき
るライブラリを使う
https://github.com/cheeaun/tappable


tappable.jsがやること
• モバイルだと、タッチを扱うための
イベントが発行される
• touchstart, touchmove, touchend
• tappable.jsではこれを補足してタッ
プを関知


jQueryの代わりにzepto.jsを使う

• jQueryのAPIと互換性を持つ
• モバイル用に最適化


画面の傾きを取る

• window.orientation
• その時の画面の傾きが入る


画面の傾きを検知する

• window.orientationをsetIntervalで監視
する
• orientationChangeイベントは
ポータビリティが低い

JS/CSSは圧縮しておく

• CSSはYUI Compressor等使う
• JSはUgilifyJS等使う

• 圧縮して起動を早くする


気をつけるバグ

• orientationの扱い
• Android4でcssのorientationがおかしい
• Android4系でassetsから512回読み込
みで落ちるバグ
• 開発してみて初めて遭遇するバグ


セキュリティ

• XSSには気をつける
• ネイティブの機能を呼び出せるため
• iframeで信頼出来ないURLを呼び出す
際も気をつける


まとめ


ハイブリッドアプリは銀の弾丸ではない

• レスポンスの遅いアプリができあがる
• よく落ちる不安定なアプリが出来上がる
• 開発効率が却って悪くなる

このような失敗パターンを避けるには?


実装の切り分け
• 何をHTML5で実装するべきか?
• 何をネイティブで実装するべきか?

• ネイティブとHTML5の欠点を補い合
うようにする
• HTML5だけでやらない

モバイル特有のノウハウを理解する

• PCには無い事情を把握する
• viewport, タッチイベント, orientation

• 貧弱なスペックでもなるべく軽く
• GPUを活用, CSSアニメーション, リソースの節約

• 各OSのバグを把握する


お知らせ


ブース紹介

• B-13でブースを出しています
• 話した技術やノウハウはMonacaで使
われています。


エンジニア、デザイナー募集中！

• アシアル株式会社では、エンジニアやデザ
イナーを募集しています。
• 気になる人は僕かブースにいる人に声かけ
てください。

ご清聴ありがとうございました


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

More Related Content

What's hot

Viewers also liked

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

More from Monaca