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ハイブリッドアプリ開発実践編

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (11)

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

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

More from Monaca

More from Monaca (20)