『【ヒカ☆ラボ】ウェブ技術でiOS/Androidアプリ開発!!~HTML5ハイブリッドアプリ開発[実践]入門~』聞いてきた
イベント詳細
- 【ヒカ☆ラボ】ウェブ技術でiOS/Androidアプリ開発!!~HTML5ハイブリッドアプリ開発[実践]入門~
- 2014/02/13(木)19:30~21:30 @ ヒカリエ17F(レバレジーズ株式会社)
- 派遣会社さん主催のイベントでした。こういうのよくあるんだってね(無知)
- こういうイベントで仕事探すというか登録する人が、そこそこいるってことなんかなー?
講師
- アシアル久保田さん
- HTML5 でハイブリッドアプリ作ってる
今日の流れ
- HTMLハイブリッドアプリとはなんぞや
- 開発方法
- ノウハウ
- 「執筆本からかいつまんで」
HTML5 ハイブリッドアプリとはなんぞや
- ネイティブ
- HTML5
- ハイブリッド
どちらを使うか
- ネイティブ
- 高速、ハイパフォ
- HTML5
- 環境依存の低さ、最新性
ハイブリッドの利点
- 「いいとこどり」らしいよ
- ストアから配信できるよ
- クロスプラットフォームによる生産性向上狙えるよ
- ガワは同じ
- HTLで書くか、JAVA, Objective-Cで書くか
- ウェブ技術を持ち込める
- ウェブのエコシステムを持ち込める
- 遺産がいっぱい。ライブラリいっぱい。開発者いっぱい。→エコシステム
しくみ
- WebView
- アプリ内に WebView を設定。HTNL5からWebViewを参照
開発方法
フレームワークを利用
フレームワークとは
- 低レイヤーのOSコードを隠蔽
- HTML5 を包み込んで、OS とアプリを連携
- 各ハードウェアのデータ取るには OS 経由しなきゃダメなんだよね
Cordova API
- 大抵のものはあるよ
- プラグインできるから好きに拡張もできる
フレームワーク利用のメリット
- HTML5 だけでできちゃう
- OSコールが簡単
フレームワークを使わない選択もあるよ
開発環境の構築
Monaca について
- セットアップ結構めんどいっしょ?
殺伐としたスレに救世主が!! .__ ヽ|・∀・|ノ |__| | |
- ブラウザ上で開発が完結する
- iOS アプリでも実機確認無料だよ
よくある問題
- 重い
- ハードウェアスペックの問題
- HTML5 自体が重い
- アプリっぽくならない
- 前者にスポット当てます
クリックイベントを使わない
- × clickイベント
- × a要素
- ○ touchイベント
- a要素, clickイベントは遅延(300ms)
- ダブルタップの判定するため
- tappable や faskclick を使う
CSS アニメーションを使う
- アニメーションにCSS Transitionを使う
- Javascriptよりも早い
- setInterval でやってるのを置き換える
jQuery じゃなくて Zepto.js を使う
- モバイルに最適化されてないから
- Zepto.js はモバイルに最適化されている。無駄なコードがない。
- jQuery 互換
動作確認は遅いほうに合わせる
- WebvView は iOS のほうが圧倒的に早い
- 動確ベースは遅い方にする。あとから遅いものをチューニングして早くするのは難しい。
なるべくリフローを起こさない
- DOM ツリーのレイアウト再計算
- リフローごとに画面全体のレイアウト再計算が走る
何がリフローを引き起こすか
- 内部テキストの変更、input 要素への入力
- DOM ツリーの操作
- width, height, margin, padding, border....などなど
リフローのコストを抑える
- width, height fix
- フローベースのレイアウトを避ける
- position: absolute, fixed を積極的に使う
- 要素位置や大きさを変えるには transform を使う
- リフロー起きない
リフローを伴うアニメーションをさせない
- CSS アニメーションでもリフローはダメ
DOMDocumentFragments を使う
- for 文で回して DOM ツリーに逐次要素埋めてく・・はまずい
- DOM フラグメントに要素詰め込んでから、一度だけDOMツリーにはめ込む