html launcher
TRANSCRIPT
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が組み込まれていないので自作
• グリッド表示も作ってみた
ダウンロード
おわり