京都のスマートフォン・アンドロイドアプリ開発会社のサイトです！

TIPS

当社アプリに関するお知らせや開発裏話を綴ります。

HTML5 コンテンツをアプリに同梱し、WebView で表示する方法

HTML5 コンテンツをアプリに同梱し、表示させる場合、WebView を用いて表示することができる。
まず、レイアウトに WebView を追加する。

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >
    <WebView
        android:id="@+id/webView1"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</LinearLayout>

読み込む HTML5 コンテンツを assets ディレクトリ以下に配置し、レイアウトを読み込む Activity にて、loadUrl を実行する。その際、assets ディレクトリを示すURI が

file:///android_assets/

になる。

    public void onCreate(Bundle savedInstanceState) 
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
 
        webview = (WebView )findViewById(R.id.webView1);
        webview.getSettings().setJavaScriptEnabled(true);  // javascript を有効
        webview.setVerticalScrollbarOverlay(true);         // 右10pxの余白を消す
        webview.loadUrl("file:///android_asset/index.html");
    }