1.概要

ウェブビューは、Webブラウザを内部に組み込みことで、WEBサイトを表示することができるコントロールです。以下では、「2.開発の手引き」にて、ウェブビューでよく使う機能にかかわるサンプルプログラムがダウンロードできるほか、「3.パラメーター」では、ウェブビューに設定するパラメーターのリファレンスを記載しています。

2.開発の手引き

この記事では、ウェブビューを使いこなすうえでよく使うパラメーター設定をご紹介します。解説に使用しているサンプルプロジェクトは以下よりダウンロードできますので、ぜひご活用ください。

control_webview.zip

2-1.ウェブビューにサイトを表示する

ウェブビューに初期値のURLを設定し、そのサイトを表示します

2-1-1.ウェブビューに初期値のURLを設定し、サイトを表示させる

コントロールバーの「ウェブビュー」を選択して画面上でドラッグしてウェブビューを配置します。ウェブビューを選択した状態で、プロパティーエリアの「データ」＞「内容」から「文字」にURLを記入します。
ズーム機能の有効化はデフォルトでチェックが入り有効となります。有効となることで、スマートデバイス上で2本指操作によるズームインとズームアウトができるようになります。

2-1-2.リンクをウェブビュー内で表示する

ウェブビューを選択した状態で、プロパティーエリアの「データ」＞「内容」から「LINK画面遷移を外部ブラウザーで表示する」のチェックを外します。この設定はデフォルトでそのようになっています。
ウェブビュー内の記事のリンクをクリックした時に、ウェブビュー内でページ遷移するようになります。

2-1-3.ウェブビュー外からURLを変更してページ遷移をする

テキストボックスに、記入されているURLを読み込み、「URL変更」ボタンを押すことでページ遷移します。
処理設計画面から、新規の処理を作成します。サンプルプロジェクトでは「011_URLを設定し遷移する」として作成しています。
ここでは、「テキスト_URL」に記載されたURLを読み込み、その結果を、ウェブビューに設定しています。

「URL変更」ボタンを選択し、「オブジェクト」＞「動作設定」の「実行処理」に、作成した「011_URLを設定し遷移する」を設定します。こうすることで、遷移するURLを動的に変更することができます。

2-2.リンクを外部ブラウザで表示する

ウェブビューを使いつつ、さらにページ内のリンク記事に対しては、外部ブラウザで表示させることができます。

さらに詳しく　のリンクをクリックすると、ウェブビューではなく、外部ブラウザのGoogle chromeでページが表示されます。

ウェブビューを選択した状態で、プロパティーエリアの「データ」＞「内容」から「LINK画面遷移を外部ブラウザーで表示する」のチェックを付けます。
ウェブビュー内の記事のリンクをクリックした時に、外部ブラウザにページ遷移するようになります。

3.パラメーター

パラメーターを変更することで、簡単にウェブビューの位置や大きさ、表示するWEBサイトなどを設定することができますので、それらを活用して、デザイン性に富んだ、わかりやすい画面を作成してみましょう。

オブジェクト

ウェブビューの基本情報や動作設定は「オブジェクト」から設定します。ウェブビューを非活性にしておくことで、アプリユーザーが特定の操作等をした際にだけ有効になるウェブビューを設置することも可能です。

基本情報

可否

データ

内容

値入力

ウェブビューの表示内容を入力する場合に選択します。

フォーム

表示内容の取得先にフォームで指定しているテーブルを使用する場合に選択します。

テーブル

表示内容の取得先にテーブルを使用する場合に選択します。