アプリカンブログ

HTML5でiOS/Androidアプリが開発できるプラットフォーム、アプリカンのブログです。

アプリカンアプリの中でWeViewを立ち上げるには

iOSやAndroidアプリを作っている時に頻繁に変わる内容であったり、外部のWebサービスを表示したいといった場合にはWebViewを使ってHTMLコンテンツを表示することがあります。アプリカンはHTML5/JavaScriptを使ってWebアプリケーションを開発します。その意味では元々WebViewが使われている状態と言えます。

しかしアプリカンの中でも外部サービスを表示したり、別なHTMLコンテンツを表示したいと思うことがあります。そんな時に使えるのがアプリ内でWebViewを呼び出す機能です。

呼び出し方は2つ

アプリカンアプリの中からWebViewを呼び出す場合、やり方は2つあります。一つはリンク、もう一つはJavaScriptを使う方法です。リンクの場合は次のように書きます。

<a href="index2.html?launch_webview=yes">新しいWebViewで開きます</a><br />

この ?launch_webview=yes がポイントになります。この例ではアプリ内のコンテンツを指定していますが、外部URLを指定することもできます。

JavaScriptの場合は次のように指定します。

location.href='index2.html?launch_webview=yes'

こちらもlocation.hrefを指定する以外は同じパラメータになります。

ツールバーを非表示にする

新しいWebViewが立ち上がった場合も、画面下にツールバーが表示されます。それを次のように指定することで非表示にできます。

<a href="index2.html?launch_webview=yes_without_toolbar">新しいWebViewで開きます(ツールバー非表示)</a><br />

パラメータに yes_without_toolbar を指定すれば、ツールバーは表示されません。

アニメーションを使う

WebViewを表示する際にアニメーションを指定することができます。

<a href="index2.html?launch_webview=yes_without_toolbar&transition_style=flip">回転して表示</a><br />
<a href="index2.html?launch_webview=yes_without_toolbar&transition_style=curl">ページをめくるように表示</a><br />
<a href="index2.html?launch_webview=yes_without_toolbar&transition_style=cross">フェードイン/アウト</a><br />

下からせり上がってくるcover(デフォルト)、回転するflip、ページがめくれるcurlそしてフェードイン、フェードアウトのcrossとなっています。

WebViewを閉じる

表示されたWebViewを閉じる場合は、

<a href="?close_webview=yes">閉じる</a>

を実行します。なお、新しく開いたWebView側でもアプリカンのオブジェクトは利用可能です。ただし上記のリンクを設置することを考えると、外部の任意のサイトを表示するのには向きません。ローカルのHTMLか、自分たちでコントロールできるWebサイトに限った方が良いでしょう。

閉じられたのを関知する

上記のWebViewが閉じられたのをアプリ側で関知するイベントがあります。

applican.addLaunchWebviewCloseEventListener(myCallback);
function myCallback(){
  alert("WebViewが閉じられました");
}

applican.addLaunchWebviewCloseEventListener にコールバックして欲しい関数を渡しておくことで閉じられたのをキャッチすることができます。

これらを実装したデモがこちらです。

f:id:moongift:20150615172417g:plain


アプリカンと外部のWebサービスを連携させたり、アプリ内のコンテンツとはまた違う画面を出したい時に使ってみてください。

アプリカン | アプリ開発支援プラットフォーム