Tizenアプリを開発したときにふと思ったことをまとめる「Tizen小ネタ」シリーズ。
最初の1回目はAndroidアプリ、iPhoneアプリでおなじみ、スマホアプリをショボく見せる諸悪の根源(:-p)であるWebView。WebViewと似たようなことをTizenアプリでやりたい場合について説明したいと思います。
WebViewはアプリ画面の中に配置することで任意のHTMLを表示できるコンポーネントです。みなさんもアプリで利用したことがあるかと思います。というか、割にWebViewに依存しているアプリも多いのでは??
TizenにはWebViewのようなコンポーネントは存在しません。そりゃ、そうですよね。アプリの記述言語はHTML5なんですから、ある意味WebViewの上で動いているようなもんです。
つまり、「TizenでWebView使いたい!!」=「HTMLコンテンツ内で他サイトのHTMLコンテンツを表示したい!!」になるので、iframeを使えばできそうです。
Tizen SDKのSingle-Page Applicationを改造して試してみましょう。
Single-Page Applicationのプロジェクトを作り、index.htmlのコンテンツ領域(divタグのdata-role属性がcontentとなっているところ)の末尾に以下の行を追加してみてください。
<iframe src="http://www.techfirm.co.jp/" style="width: 100%; height: 450px;"></iframe>
このアプリをWebSimulatorで実行すると、以下のような画面になり、アプリ画面内にTechfirmのWebサイトが表示されます。
とりあえず、Webページをただ表示するだけだったらさほど苦労はしません。iframeタグを書けば実現できるという面ではAndroidアプリやiPhoneアプリよりラクです。
ただ、このままじゃ、ちょっと微妙です。例えば、読み込み終わるまではダイアログ出しときたい…等々。いろいろあると思います。
ちょっとどこまで出来るのか試してみます。
まずは読み込み完了のイベント取得から。
これはjQueryのreadyイベントを使えば簡単に実装できそうです。
先程追加したiframeタグにid属性を追加(tech_frameというidにしました)、main.jsでreadyイベントにイベントハンドラをしかけます。
$('#tech_frame').ready(function() {
alert('load complete');
});
これを実行すると…
こんな感じにiframeのデータがロードされた時点でalertダイアログが出せます。
基本的にはjQuery Mobileで利用できるイベントは利用できるので、いろいろ試してみてはいかがでしょうか。
