HTMLで作るAndroidアプリランチャー

maruyama-r

アプリケーション構造

• WebViewとHTML/JavaScript/CSSを連携させる

Linux

Android Framework

WebView

HTML/JavaScript/CSSWebView : カスタマイズ可能なブラウザコンポーネント

JavaScriptからJavaを呼び出す• Java

public class JavaScriptInterface { public String getString(){ return "Hello"; }}....jsInterface = new JavaScriptInterface();webView.addJavascriptInterface(jsInterface, “API”);

• JavaScriptvar msg = API.getString();

JavaからJavaScriptを呼び出す• JavawebView.loadUrl(“javascript:putString(‘Bye’)”);

• JavaScriptfunction putString(msg){ document.write(msg);}

アプリランチャー

何か寂しい・・・(´・ω・｀)

そうか、アイコンが足らない！！

アイコンつけてみました(・∀・)

アプリランチャー（アイコン付き）

お、ランチャーっぽい。

アイコンの表示方法

1. JavaScriptからJavaにアプリのアイコンを要求

2. アプリのアイコンをBitmapで取得

3. BitmapをPNGに変換

4. PNGをBase64でエンコード

5. データURIスキーム用に文字を追加

6. JavaScriptに返す

データURIスキーム

• imgタグのsrc属性に文字列で画像を指定する<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot" />

http://en.wikipedia.org/wiki/Data_URI_scheme

データURIスキームの使いどころ

• データサイズは4/3になってしまう

• 画像を別途HTTPリクエストしなくて良い

• 外部CSSのbackground-imageに指定するとCSSファイルとしてキャッシュされる

工夫した点

• 一度に画像を表示すると重いので、imgのonloadを使って順番に表示

• 画像はSharedPreferencesというAndroidの機能を使ってキャッシュ

• Android2.1まではBase64が組み込まれていないので自作

• グリッド表示も作ってみた

ダウンロード

おわり