満足させるハイブリッドアプリを
作るための実践テクニック

Masahiro Tanaka / Asial Corp.

自己紹介

アシアル株式会社の代表取締役

Monacaのプロダクトマネージャー

fb / @massie

趣味: 鉄道模型と飛行機

今日のテーマ

  • ハイブリッドアプリを知る
  • テクニックを知る
  • 開発・デバッグ手法を知る

ハイブリッドアプリとは？

Web技術(WebView)を用いるネイティブ形式のアプリ。

JavaScriptでネイティブアプリを作る開発手法の１つ。

PhoneGapとCordova

  • ハイブリッドアプリ開発フレームワーク
  • ApacheプロジェクトによるOSS版：Cordova
  • Adobeによる製品版：PhoneGapとしてリリース

Cordova = PhoneGap と捉えてOK

PhoneGapの仕組み

①カメラやファイル操作などのAPIを拡張する
②単体パッケージとしてアプリを動作させる

Webアプリと異なる点

  • ファイルはローカルに配置、オフライン対応
  • ネイティブ機能をJavaScript APIで実装可能
  • 特定のブラウザーエンジン上で実行

Packaged Web Apps

HTML5仕様で定義される、パッケージ型アプリ。

≒ ハイブリッドアプリ。

新しいプラットフォーム

HTML5ネイティブなプラットフォームの登場

  • Tizen
  • Firefox OS
  • Chrome Packaged Apps
    • Chrome OS
    • Chrome Apps for Windows, Mac, Linux
    • Chrome Packaged Apps for iOS, Android

あんなこともこんなことも。
そう、HTML5ならね。

なぜハイブリッドアプリ？

  • オフライン対応
  • ネイティブAPIの呼び出し、機能拡張
  • パッケージマネージャーを通じた配布
  • オートアップデート

実践テクニック ①

ルック＆フィール

デモ

http://www.iui-js.org/

不気味の谷現象

選択肢は２つ

１．ネイティブに極力近づける

２．自己ワールドを展開する

方法1: ネイティブに近づける

  1. HTML5、CSS3、JavaScriptで模倣する

    デモ: https://github.com/c2prods/Project-Tyson

  2. ネイティブUIコンポーネントを使う

方法2: 独自ワールドを展開する

Learn Hindi Free

×
Onsen UI Exfm Rormix

ハイブリッドアプリのUXを向上する

ビューポート制御

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

タップ時の300msの遅延: fastclick.jsで解決

ハイブリッドアプリを作成するときにいつも書くようにしているCSSプロパティいくつか！

  • -webkit-user-select: none;

    ドキュメントの文字を選択できなくする

  • -webkit-tap-highlight-color: rgba(0, 0, 0, 0);

    タップ時のリンク要素の枠を非表示にする

  • -webkit-touch-callout: none;

    リンク長押し時のメニューを非表示にする

  • -webkit-overflow-scrolling: touch;

    慣性スクロールを適用する（バグあり）

  • -webkit-transform: translateZ(0);

    レイヤーを作成しGPU合成をONに

HTMLの特性を理解する

強み

  • 自由なレイアウト
  • 回り込みなどのテキスト処理
  • CSS3を使った簡単・豊富なエフェクト

弱み

  • 大量のデータ処理
  • マルチスレッド、バックグラウンドタスク
  • 3D描画、インタラクティブなコンテンツ

実践テクニック ②

高速化

Critical Rendering Path

読み込み～描画までの順序、ボトルネックを知る。

https://docs.google.com/presentation/d/1IRHyU7_crIiCjl0Gvue0WY3eY_eYvFQvSfwQouW9368/present

シングルページ と マルチページ

例: jQuery Mobileで複数ページを定義する例




  

  	
ヘッダー

  

  

  	
1ページ目のコンテンツ

  	
次のページを表示 bar

  

  

  	
フッター

  







  

  	
ヘッダー

  

  

  	
2ページ目のコンテンツ

  	
最初のページへ

  

  

  	
フッター

JSによる再描画

JS → スタイル/レイアウト → 描画 → 合成

消したいコンテンツ


<script>
// 再レイアウト処理が実行するため遅い
document.getElementById("hideme").style.display="none;";

// Composite（合成）のみ実行
document.getElementById("hideme").style.opacity="0";
</script>

極力レイアウト（リフロー）処理を避ける

HWアクセラレーション

  • Androidの場合ネイティブコードで切り替え
    ただしAndroid 4以降で有効。バグあり。
  • GPUが使われるCSSアニメーションを活用
  • famo.usのような描画ライブラリを使用

他にも...

  • レイヤーテクニック: translateZ(0)
  • requestAnimationFrameを使う
  • Recalculate Style Storm


地道な改良を続ける...

実践テクニック ③

開発とデバッグ

開発ツール

ローカル開発 コマンドライン クラウド型開発
Xcode、Eclipse Cordovaコマンド Monacaや アプリカン
ネイティブ開発にハイブリッド機能を組み込む gruntなどのJSツールやエディタを利用できる ローカルにインストールすることなく開発を開始できる

デバッグ方法

デバッグ対象のOSバージョンなどの状況に応じて使い分け

  • ブラウザで表示してデバッグ
  • リモートデバッグツール
  • Weinre / jsHybuggerなどの外部ツール

Mobile SafariのWebインスペクタ

USBで接続されたiOSに、PCのSafariからリモートデバッグ

  • Windowsでは接続不可
  • Mobile Safariかデバッグビルドされたアプリに対応

Chrome Remote Debugging

USBで接続されたAndroid版Chromeに、PCのChromeからリモートデバッグ

  • Android 4.4からWebViewでもデバッグ可能に

Weinre

node.jsで作られたリモートインスペクター

デモ: http://debug.phonegap.com

ソース: https://github.com/apache/cordova-weinre

jsHybugger

Androidの標準WebViewにJSデバッグ機能を追加

デモ: https://www.jshybugger.com/

※有償サービス

ライブリロード

コードの変更を検知して自動的にブラウザーを再読込

最後に

  • 知識を増やす
  • 原因を知る
  • 経験を積む

＋
共有する

一緒にHTML5アプリ開発を盛り上げていきましょう！

ありがとうございました。

スライドのURL:
http://monaca.github.io/slides/2013-html5conf/

HTML5カンファレンス2013