『【ヒカ☆ラボ】ウェブ技術でiOS/Androidアプリ開発!!~HTML5ハイブリッドアプリ開発[実践]入門~』聞いてきた

イベント詳細

講師

  • アシアル久保田さん
    • HTML5 でハイブリッドアプリ作ってる

今日の流れ

  1. HTMLハイブリッドアプリとはなんぞや
  2. 開発方法
  3. ノウハウ
    • 「執筆本からかいつまんで」

HTML5 ハイブリッドアプリとはなんぞや

  • ネイティブ
  • HTML5
  • ハイブリッド

どちらを使うか

  • ネイティブ
    • 高速、ハイパフォ
  • HTML5
    • 環境依存の低さ、最新性

ハイブリッドの利点

  • 「いいとこどり」らしいよ
  • ストアから配信できるよ
  • クロスプラットフォームによる生産性向上狙えるよ
  • ガワは同じ
  • ウェブ技術を持ち込める
  • ウェブのエコシステムを持ち込める
    • 遺産がいっぱい。ライブラリいっぱい。開発者いっぱい。→エコシステム

しくみ

  • WebView
    • アプリ内に WebView を設定。HTNL5からWebViewを参照

開発方法

フレームワークを利用

  • Apache Cordova
    • PhoneGap(Adobe カスタマイズ)
  • Triaina
  • Trigger.io

フレームワークとは

  • 低レイヤーのOSコードを隠蔽
  • HTML5 を包み込んで、OS とアプリを連携
    • 各ハードウェアのデータ取るには OS 経由しなきゃダメなんだよね

Cordova API

  • 大抵のものはあるよ
  • プラグインできるから好きに拡張もできる

フレームワーク利用のメリット

  • HTML5 だけでできちゃう
  • OSコールが簡単

フレームワークを使わない選択もあるよ

  • 自前で WebView 作り込み
  • 既存の非 HTML5 アプリの一部だけ HTML5 ・・・とか

開発環境の構築

Monaca について

  • セットアップ結構めんどいっしょ?
殺伐としたスレに救世主が!!
   .__
  ヽ|・∀・|ノ
  |__|
    | |
  • ブラウザ上で開発が完結する
  • iOS アプリでも実機確認無料だよ

よくある問題

  • 重い
    • ハードウェアスペックの問題
    • HTML5 自体が重い
  • アプリっぽくならない

 

  • 前者にスポット当てます

クリックイベントを使わない

  • × clickイベント
  • × a要素
  • ○ touchイベント
  • a要素, clickイベントは遅延(300ms)
    • ダブルタップの判定するため
  • tappable や faskclick を使う

CSS アニメーションを使う

  • アニメーションにCSS Transitionを使う
  • Javascriptよりも早い
    • setInterval でやってるのを置き換える

jQuery じゃなくて Zepto.js を使う

  • モバイルに最適化されてないから
  • Zepto.js はモバイルに最適化されている。無駄なコードがない。

動作確認は遅いほうに合わせる

  • WebvView は iOS のほうが圧倒的に早い
  • 動確ベースは遅い方にする。あとから遅いものをチューニングして早くするのは難しい。

なるべくリフローを起こさない

  • DOM ツリーのレイアウト再計算
  • リフローごとに画面全体のレイアウト再計算が走る

何がリフローを引き起こすか

  • 内部テキストの変更、input 要素への入力
  • DOM ツリーの操作
  • width, height, margin, padding, border....などなど

リフローのコストを抑える

  • width, height fix
  • フローベースのレイアウトを避ける
    • position: absolute, fixed を積極的に使う
  • 要素位置や大きさを変えるには transform を使う
    • リフロー起きない

リフローを伴うアニメーションをさせない

  • CSS アニメーションでもリフローはダメ

DOMDocumentFragments を使う

  • for 文で回して DOM ツリーに逐次要素埋めてく・・はまずい
  • DOM フラグメントに要素詰め込んでから、一度だけDOMツリーにはめ込む

自分のまとめ

  • Monaca いいね Monaca
    • ブラウザ上の IDE で開発して、ビルドして、そのままマーケットにアップロードできる。すごすぎる。
    • スマホにデバッガをインストールして、実機確認が出来る体。
      • すごい。
    • その場でアカウント作って、モック作った。
  • まだ HTML5 で書いてないので、もろもろのチューニングノウハウはまだ、生きなそうかな。