ハイブリッドAndroidアプリの作り方

現在、My365のAndroid版を開発中です。Android版は、Webビューをうまく利用して、開発時間の短縮と、繊細なレイアウトを狙っています。

ハイブリッドアプリ

最近では少し下火になってきましたが、半年くらい前は、「ネイティブアプリかブラウザアプリか」論争みたいなのを耳にすることも多くありました。

結局、アプリの内容次第だと思うのですが、SNS系アプリは折衷の「ハイブリッドアプリ」が有力なのではないかという気がします。

  • Facebook
  • Google+

これらのiPhoneアプリとAndroidアプリを見ると、どうもその画面の中はWebビューでできているようです。

なぜハイブリッドか?

ハイブリッドアプリの利点はいくつかあります。

開発時間が短い

PC向けにサービスを展開してきたチームが、iPhoneアプリやAndroidアプリを作る場合を考えると、Objective-CやJavaで実装するよりも、スクリプト言語で開発した方が早い場合が多いと思います。

画面を動的に書き換えられる

iPhoneのnibファイルや、Androidのアクティビティにレイアウトが記述されている状態では、アプリのアップデートなしにレイアウトの変更はできません。一方、レイアウトをWebビューで表示する方法では、サーバ側のHTMLを書き換えることで、アプリのアップデートなしにレイアウトを変更することができます。

おそらくFacebookやGoogle+が、スマートフォンアプリをハイブリッド構成で作成しているのは、このあたりが狙いだと思います。

細かいレイアウトが可能

スマートフォンの画面レイアウトは、フレームワークにのっとって作るため、あまり細かいことができません。一方、HTMLとCSSは非常に繊細なレイアウトができます。特に過去のノウハウの蓄積や、ライブラリの充実も大きく影響しています。

SNSアプリは、コメントボタン・イイネボタン・投稿時間などなど、色々な情報がフィードに詰め込まれています。だから、スマートフォンのフレームワークにのっとったレイアウトで、これを実現するのはなかなか面倒です。

ハイブリッドアプリのフレームワークPhoneGap

PhoneGapというフレームワークがあります。これは、ほぼHTMLとJavascriptでスマートフォンアプリが記述できるというものです。

http://phonegap.com/

PhoneGapは土台だけがネイティブで、その他の全てはHTMLで記述します。だから、iOSのナビゲーションバーやタブバーもHTMLで模倣することになります。

そういうわけで、AndroidとiOSで全く同じプログラムを流用できます。しかし、本質的には「ネイティブの機能も使えるブラウザアプリ」にすぎないので、ネイティブアプリのサクサク感は損なわれます。

Embedded Web Views

FacebookやGoogle+のアプリは、ナビゲーションバーやタブバーの部分に関してはネイティブのフレームワークを利用しているようです。

こうすることによって、画面遷移自体はネイティブアプリの速度で行えるので、体感的な動作速度が上がります。一方、画面の中にはWebビューを入れるので、上に書いたようなメリットを享受することができます。

どうやってハイブリッドにするの?

Embedded Web Viewsなアプリを作ろうと思うと、Javaで書かれたコードを、WebビューのJavascriptから呼び出せる必要があります。これが一見難しそうで、めちゃくちゃ簡単です。感動します。

Java側に、ネイティブでしかできない機能を呼び出すラッパークラスを作ります。

class JavaScriptObject {
 
	Context context;
 
	JavaScriptObject(Context context) {
		this.context = context;
	}
 
	public void showToast(String message){
		Toast toast = Toast.makeText(context, message,Toast.LENGTH_SHORT);
		toast.show();
	}
 
}

WebViewを作成し、addJavascriptInterfaceで、作成したラッパークラスをJavascriptで呼び出せるようにします。

WebView web = new WebView(this);
setContentView(web);
web.getSettings().setJavaScriptEnabled(true);
web.addJavascriptInterface(new JavaScriptObject(this), "myapi");
web.loadUrl("file:///android_asset/main.html");

これだけのことで、main.htmlのJavascriptのmyapiからは、先ほど定義したメソッドが呼び出せてしまうのです!

window.onload = function(){
    myapi.showToast("Hello World by Toast");
};

Javascriptにこのような記述をすると、確かにトーストが呼び出されました。簡単。すばらしい。

おわりに

というわけで、My365のAndroid版がんばりますので、お楽しみにー。

About katty0324

Leave a Reply

Scroll To Top