ハイブリッドアプリの習作

アプリ自体はWebアプリだけれど、ネイティブアプリの中にWebViewを突っ込んでそのWebアプリを表示（つまりネィティブアプリの中にはViewもLogicもほとんどない）して配布自体はネィティブアプリというものをハイブリッドアプリと称するそうです。

このアプリの利点はちゃんと調べていませんが、Webアプリに対してWebViewを通していろいろ操作で来たり、ブラウザで表示していて戻るボタンとかURL欄をどうにかしたいとかブラウザの外観にしたくなかったりとか、ブックマークしてもらうんじゃなくてアプリインストールしてアイコンをメニューに表示したいとかまあいろいろありそうです。

欠点としては当然WebViewの中で表示しているWebアプリが主体なので、まあ、Webアプリの制限は若干緩和されるけれど基本はWebアプリでできることしかできないと思うくらいが爾来踏まなくてよさそうな気がします。まあ、具体的な地雷がなんなのかまでは深追いしてませんが。

で、ちょっとXamarinで作ってみました。これだけでも大変でした。

ということで、Hallo Worldはやらずに

「はじめてのXamarinアプリ」

始まるよ！

私の周りだと「古いAndroidは特にサポートしなくていいじゃないかな？」的な雰囲気もあるので「Ice Cream Sandwich」なアプリとして作成します。このテンプレートを使うとAPIレベル15、Android 4.0.3に相当します。

初期状態のプロジェクト構成は次のような形になります。

Resources\Layoutの中に、いわゆるViewが入ります。形式はAXMLというやつでXAMLよりも正直しょぼいです。

Activity1.csが画面に対するコードビハインドを記述しているところになります。

なんとなくしっくりこないので、ちょっと名前を変えてみましょう。ついでに場所なんかも変えてみたりして。

なんとなく普通のC#アプリっぽくなりましたよね？

あと、設定しなくても動作しますが、プロジェクトのプロパティで[Android Manifest]の[Application name]あたりも設定しておきましょう。

それではMain.axmlに画面デザインをしてみましょう。テンプレートから作成された直後にはボタンが１つだけある画面になっています。

まずはボタンを削除してWebViewを張り付けてみましょう。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">
    <WebView
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:id="@+id/LocalWebView" />
</LinearLayout>

もちろんコントロールについてはプロパティウィンドウにプロパティが表示されます。

ただし、プロパティとメソッドが分かれていなくて１リストに両方混在しています。このあたりは改善して欲しいですね。

最後にコードビハインド側に表示するWebアプリのURLを設定してみましょう。ここが意外と情報が少ないのと、公式オンラインヘルプが分かりづらかった部分になります。

using Android.App;
using Android.OS;
using Android.Views;
using Android.Webkit;

namespace AndroidHybridSample
{
    [Activity(Label = "AndroidHybridSample", MainLauncher = true, Icon = "@drawable/icon")]
    public class Main : Activity
    {
        protected override void OnCreate(Bundle bundle)
        {
            base.OnCreate(bundle);

            RequestWindowFeature(WindowFeatures.NoTitle);
            SetContentView(Resource.Layout.Main);

            WebView localWebView = FindViewById(Resource.Id.LocalWebView);
            localWebView.SetWebViewClient(new CustomWebViewClient());
            localWebView.LoadUrl("http://hatsune.hatenablog.jp/");
            localWebView.Settings.LoadWithOverviewMode = true;
            localWebView.Settings.UseWideViewPort = true;
            localWebView.Settings.JavaScriptEnabled = true;
        }
        private class CustomWebViewClient : WebViewClient
        {
            public override bool ShouldOverrideUrlLoading(WebView view, string url)
            {
                view.LoadUrl(url);
                return true;
            }
        }
    }
}