Tizen小ネタ: WebViewはどうやって実現する??

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で利用できるイベントは利用できるので、いろいろ試してみてはいかがでしょうか。

 

tetsuo

tetsuo の紹介

こう見えてテックファームの開発チームのえらい人。
カテゴリー: Tizen タグ: , パーマリンク

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です