;

しんみゆ.com

群馬県高崎市在住の夫婦で日記というか、つぶやきブログしてます:しんみゆ.com

html5カンファレンス 2013 – 実践的なモバイルHTML5テクニック

実践的なモバイルHTML5テクニック

実践的なモバイルHTML5テクニック メモ
参加した中では、この方の説明が一番面白かった!

講義の方は、dnaで働いてる人です。
モバイルブラウザで、現状できることを話して行く。
ネイティブアプリが全盛期。
ネイティブアプリの開発が大変楽になっている。
ープクロスラットフォーム

webアプリの利点と欠点
利点
ーインストールが不要
ーあらゆるブラウザ搭載機端末からurlのみで起動できる
ーリアルタイムアップデートが可能

欠点
ー実行速度が遅い
ー互換性がない
ー3D、音楽などのハードウエアに密接した処理が辛い

欠点が多いに目立つ
ー作るのに
コストがかかって大変。

ネイティブアプリでは実現できないメリットを活用したい。

現在の最先端webアプリのデメリットを地道に潰す

モバイルアプリをネイティブアプリに近づければwebアプリならではメリットを活用したアプリを作る。

◆Androidの互換性問題
Androidは、メーカーがある程度自由にソースをいじれる
ブラウザのベンチマークスコアは、重要な差別化要因
各ベンダーがブラウザのソースコードに手を加えて最適化
結果として、端末の数だけ独自ブラウザがある
Androidの開発は、IE6より大変

◆html5でリッチな表現を作る時の2つのやり方
canvas
css

◆利点
canvas
ー互換性のバグを踏みにくい
ー細かい最適化を自力で頑張れる

css
ーデザイナーが慣れ親しんできた形式
ーブラウザの高速化対策の恩恵を受けられることが多い

ちょっとしたアプリを作るのであればcssが適している。
ーデザイナー思考のツール
ーcss自体の豊富な機能
ーブラウザのコントロールに委ねることができる

作り込んだアプリの場合はcanvasの方が優れている

◆canvasテクニック
オンメモリcanvas
何度も絵画に利用する部分をメモリに退避し、それを絵画に利用する。

canvasに絵画を絵画する際に、小数点の位置に絵画しない。
ーアンチエイジングがかかることもあるので、にじむ
ー絵画スピードが遅い

拡大と縮小をせずに絵画する。
ー拡大縮小は時間がかかる、メモリに余裕があれば、拡大後縮小後の画像を用意する。

同じ図形をパスを駆使して絵画する場合、絵画用のデータを毎回解析せず、最初に文字列として関数を形成し、それを関数化することでオーバーヘッドを削減できる。
コードを自動生成することで、バース等に必要な余計なコストを削除する

◆GPUを意識した高速化
GPUキャッシュに絵画する画像が乗るように意識する
どうすればキャッシュに乗るのかは、ブラウザの状況次第。
一定の時間の間にブラウザに使われる画像を意識し、GPUにどのようにキャッシュが乗るかを想像する

◆canvasにはGPUキャッシュに乗ることがないので、canvasをimgタグに変換する。
ーtoDataURL APIを利用してcanvasをimgに変換してキャッシュに乗るようにしてやる。

◆互換性の問題解決
ブラウザの気持ちを考える
ー内部でどのような問題が起こってるか考える。
ー全体からコメントアウトして試す

%d人のブロガーが「いいね」をつけました。

ページトップ