中津川篤司Twitter1Facebook1はてブ1Pocket3LINEWebサイトがレスポンシブデザインになったり、JavaScriptを駆使した高度なWebアプリケーションのようになっていくと、そのままアプリとしてみても遜色なくなってきます。Webサイトをアプリ化したいというニーズが出てきます。APIを作って通信するのが良いですが、今回はMonacaのInAppBrowserを使って簡易的にアプリ化する方法を紹介します。InAppBrowserの使い方InAppBrowserはアプリ内に別ブラウザを表示するプラグインです。Monacaアプリに組み込まれたプラグインなので、誰でも利用できます。使い方としては次のようになります。'OPTIONS');URLは表示するURLを指定します。指定するのが良いでしょう。'location=no,presentationstyle=fullscreen,toolbar=no');これだけで次のような表示になります。開発中の工夫これで完了なのですが、アプリの開発中には再読み込みしたいということがあると思います。InAppBrowserで全画面表示にしているとMonacaデバッガーのボタンも見えなくなってしまいます。元々のMonacaアプリのWebViewからInAppBrowserは閉じられるのですが、その逆はできません。InAppBrowserに方法がありました。InAppBrowserには独自のJavaScriptを流し込めます。ファイルを指定することができるはずなのですが、うまくいかないので、代わりにコードを直接指定することにします。OverflowInAppBrowserのloadstopイベントを使って読み込み完了を検知します。その上で、Ajaxを使ってアプリ内のJavaScriptファイルを取得します。その内容をInAppBrowserのexecuteScriptを使って実行します。data});:});});myscript.jsですが、次のようになります。最初にlocalStorageを初期化しています。このlocalStorageを使って、WebViewとInAppBrowserで情報のやり取りをします。true);});そして、bodyタグに対してCloseというラベルを追加しています。このラベルを押した時のイベントとして、localStorageのwindow_closeというキーをtrueにします。親のWebViewでは、setIntervalを使ってInAppBrowserのlocalStorageを定期的に監視します。値がtrueになったら、InAppBrowserを閉じます。2000);今回はjQueryを使っているので$オブジェクトを使っていますが、他のライブラリの場合はそれぞれ読み替えてください。親ウィンドウのスクリプトは次のようになります。false);</script>これを実際に動かすと次のようになります。アプリが立ち上がったタイミングで外部のURLが表示されます。右下にあるCloseというラベルをタップすると、ウィンドウが閉じるという流れです。実際のアプリとして出す際には閉じるアクションは不要だと思うので、デバッグ用のフラグを設けて表示を制御すると良いのではないでしょうか。Docsをご覧ください。中津川篤司プログラマ、エンジニアとしていくつかの企業で働き、28歳のときに独立。2004年、まだ情報が少なかったオープンソースソフトの技術ブログ『MOONGIFT』を開設し、毎日情報を発信している。2013年に法人化、ビジネスとエンジニアを結ぶエバンジェリスト業「DevRel」活動をスタートした。Monacaでバックグラウンド処理を実行する(iOS)関連記事2017年5月31日Monacaでマッシュアップ。