読者です 読者をやめる 読者になる 読者になる

PUBLICROOTS

気になったことを紹介していきます!

HTML5でのハイブリッドアプリ

app PhoneGap

 

f:id:publicroots:20140507164852p:plain

今日、Asialとい会社のセミナーに参加した。

主にシステム系の仕事をしている会社で、

2年前くらいに「Monaca - HTML5モバイルアプリ開発プラットフォーム」を

立ち上げている。

僕も1年前くらいから利用させてらっています。

 

バイブリッドアプリの利点は

何と言ってもマルチプラットフォームだ。

WEB技術で、iOS / Android / Windows8 などのアプリの書き出しができる。

そもそも、ネイティブアプリ(Objective-CJava)は、

開発コストがかかりすぎるので、実際形になりにくい。。。

 

HTML5の技術も進歩しているし、

WEB技術とネイティブをつなぐPhoneGapという

フレームワークもあるので、

見た目上はネイティブと変わりないアプリを制作できる。

ネイティブアプリを超える事は不可能ですが、

アプリ内容によっては、ハイブリッドアプリの方が、

コストパフォーマンスは非常にいいと思います。

 

ただ、ネイティブアプリに比べると

ちょっとやぼったいというイメージはあった。

 

その辺も、初めからWebViewの技術を理解した上で

htmlコーディング作業をすれば解消されるようです。

 

今日聞いた解決方法を簡単に書き出しておきます。

〜〜〜〜〜

【描画処理】

・タッチイベント使う tappableやfastclick

cssアニメ使う css transition

zepto.js使う

 ※jqueryは不必要な要素が多く含まれるので使わない

・動作確認は遅い方にあわす。1にandroid、2にiOS

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

 ※レイアウトを計算してからレンダリングしてるから

 解決策

 要素の縦横を固定しておく(position absolutionを多用する)

 transformを使う

chromeインスペクターでリフロー確認

・アニメーション transformを使う

GPU活用する translate3Dを使う

・DOMdocumentfragmentを使う

・onsen UIを使う(ハイブリッド用フレームワーク

 The Answer to PhoneGap UI Development | Onsen UI

〜〜〜〜〜

という感じで考えながら実装すれば、

やぼったさも解消されるそうです。

 

また新たにパートナー制度も始めたようなので

利用するのも良いかも。

 

【追記】

スライドが送られてきたのでシェアします。