現在、My365のAndroid版を開発中です。Android版は、Webビューをうまく利用して、開発時間の短縮と、繊細なレイアウトを狙っています。
ハイブリッドアプリ
最近では少し下火になってきましたが、半年くらい前は、「ネイティブアプリかブラウザアプリか」論争みたいなのを耳にすることも多くありました。
結局、アプリの内容次第だと思うのですが、SNS系アプリは折衷の「ハイブリッドアプリ」が有力なのではないかという気がします。
- 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版がんばりますので、お楽しみにー。
コメント