バージョン: 19

Webエリア

Webエリアは、静的および動的な HTMLページ、ファイル、ピクチャー、JavaScript などの様々な Webコンテンツをフォーム中で表示することのできるオブジェクトです。 Webエリアの描画エンジンは、アプリケーションの実行プラットフォームおよび埋め込みWebレンダリングエンジンを使用オプションの設定状態により異なります。

同じフォーム内に複数の Webエリアを配置できます。しかしながら、Webエリアの挿入にはいくつかの制約がつく事に注意して下さい。

いくつかの専用の標準アクション、多数のランゲージコマンド、そして汎用および専用のフォームイベントを使用して、Webエリアの動作を制御することができます。特別な変数を使用して、エリアと 4D環境間で情報を交換することも可能です。

Webエリアにおける Webプラグインおよび Javaアプレットの使用は推奨されていません。これらは、とくにイベント管理レベルにおいて 4D の動作を不安定にさせる可能性があります。

特有のプロパティ

割り当てられる変数

Webエリアには 2つの特別な変数が自動で割り当てられます:

URL -- Webエリアに表示されている URL の管理に使用します。
進捗状況変数 -- Webエリアにロード中のページのパーセンテージを知るために使用します。

Webレンダリングエンジン

Webエリアでは、2つの描画エンジンうちから使用するものを選択することができます。

"埋め込みWebレンダリングエンジンを使用" プロパティを選択している場合、"4Dメソッドコールを許可" プロパティが選択可能になります。

4Dメソッドコールを許可

4Dメソッドコールを許可プロパティを選択している場合、Webエリアから 4Dメソッドを呼び出すことができます。

注記

この機能は Webエリアが埋め込みWebレンダリングエンジンを使用している場合に限り、使用可能です。
このオプションは 4Dコードの実行を許可するため、セキュリティ上の理由から、アプリケーションによって生成されたページなど、信頼できるページに対してのみ有効にするべきです。

$4dオブジェクトの使用

4Dの埋め込みWebレンダリングエンジンは、$4d という JavaScriptオブジェクトをエリアに提供します。$4dオブジェクトと "." (ドット) オブジェクト記法を使用することによって、任意の 4Dプロジェクトメソッドを呼び出すことができます。

たとえば、HelloWorld という 4Dメソッドを呼び出す場合には、以下の宣言を実行します:

$4d.HelloWorld();

JavaScript は大文字小文字を区別するため、オブジェクトの名前は $4d (dは小文字) であることに注意が必要です。

4Dメソッドへの呼び出しのシンタックスは以下のようになります:

$4d.4DMethodName(param1,paramN,function(result){})

param1...paramN: 4Dメソッドに対して必要なだけ引数を渡すことができます。これらの引数は、JavaScript にサポートされている型であればどんなものでも渡せます (文字列、数値、配列、オブジェクト)。
function(result): 最後の引数として渡される関数です。この "コールバック" 関数は、4Dメソッドが実行を終えると同時に呼び出されます。この関数は result 引数を受け取ります:
result: "$0" 式に返される、4Dメソッド実行の戻り値です。戻り値は JavaScript でサポートされている型 (文字列、数値、配列、オブジェクト) のいずれかになります。 C_OBJECT コマンドを使用して、オブジェクトを返すことができます。

デフォルトとして、4Dは UTF-8 文字コードで動作しています。 (アクセントが付いた文字などの) 拡張文字を含むテキストを返す場合には、Webエリアで表示されるページの文字コードが UTF-8 に宣言されていることを確認してください。文字コードが UTF-8 でない場合、文字が正しく表示されない可能性があります。この場合、以下の 1行を HTMLページに追加して文字コードを宣言してください:
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

例題 1

today という名の 4Dプロジェクトメソッドがあり、そのメソッドは引数を受け付けず、カレントの日付を文字列として返す場合について考えてみます。

today メソッドの 4Dコードです:

 C_TEXT($0)
 $0:=String(Current date;System date long)

Webエリアでは、 4Dメソッドは以下のシンタックスで呼び出し可能です:

$4d.today()

この 4Dメソッドは引数を受け取りませんが、メソッドの実行後に $0 の値を、4Dによって呼び出されるコールバック関数へと返します。 Webエリアによってロードされた HTMLページ内にこの日付を表示します。

HTMLページのコードです:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 <script type="text/javascript">
$4d.today(function(dollarZero)
{
    var curDate = dollarZero;
    document.getElementById("mydiv").innerHTML=curDate;
});
</script>
</head>
<body>今日は: <div id="mydiv"></div>
</body>
</html>

例題 2

calcSum という 4Dプロジェクトメソッドがあり、そのメソッドが (``$1...$n) という引数を受け取り、その合計を $0 に返すという場合について考えます。

calcSum メソッドの 4Dコードです:

 C_REAL(${1}) // n個の実数型引数を受け取ります
 C_REAL($0) // 実数の値を返します
 C_LONGINT($i;$n)
 $n:=Count parameters
 For($i;1;$n)
    $0:=$0+${$i}
 End for

Webエリア内で実行される JavaScript コードです:

$4d.calcSum(33, 45, 75, 102.5, 7, function(dollarZero)
    {
        var result = dollarZero // 結果は 262.5 です
    });

標準アクション

Webエリアを自動で管理するために、4つの特別な自動アクション (openBackURL、openForwardURL、refreshCurrentURL、そして stopLoadingURL) を使用できます。ボタンやメニューコマンドにこれらのアクションを割り当てることで、基本の Webインターフェースを素早く実装できます。これらのアクションについては標準アクションで説明しています。

フォームイベント

特定のフォームイベントは、Webエリアをプログラミングで管理するこを目的としています。すなわち、リンクの起動に関連しています:

更に、Webエリアは以下の汎用フォームイベントをサポートしています:

Webエリアのルール

ユーザーインターフェース

フォームが実行されると、他のフォームエリアとの対話を可能にする、標準のブラウザーインタフェース機能が Web エリア内で利用可能になります。

編集メニューコマンド: Webエリアにフォーカスがあるとき、編集メニューコマンドを使用してコピーやペースト、すべてを選択などのアクションを選択に応じて実行できます。
コンテキストメニュー: Webエリアで、システム標準のコンテキストメニューを使用できます。コンテキストメニューの表示は、WA SET PREFERENCE コマンドを使用することで管理可能です。
ドラッグ＆ドロップ: 4D のオブジェクトプロパティに基づき、ユーザーは Webエリア内で、または Webエリアと 4Dフォームオブジェクト間で、テキストやピクチャー、ドキュメントをドラッグ＆ドロップできます。セキュリティ上の理由から、ファイルまたは URL のドラッグ＆ドロップによって Webエリアのコンテンツを変更することは、デフォルトで禁止されています。この場合、カーソルは "禁止" アイコンを表示します。エリアへのファイルや URL のドロップを許可するには、WA SET PREFERENCE コマンドを使用して明示的にドロップを許可する必要があります。

サブフォーム

ウィンドウの再描画機構に関わる理由から、サブフォームに Webエリアを挿入する場合には以下の制約がつきます:

サブフォームをスクロール可能にしてはいけません。
Webエリアのサイズがサブフォームのサイズを超えてはいけません。

他のフォームオブジェクトの上や下に Webエリアを重ねることはサポートされていません。

Webエリアと Webサーバーのコンフリクト (Windows)

Windows においては、Webエリアから、同じ 4Dアプリケーションで起動中の Webサーバーへのアクセスはお勧めできません。これをおこなうとコンフリクトが発生し、アプリケーションがフリーズすることがあります。もちろん、リモートの 4D から 4D Server の Webサーバーにアクセスすることはできます。自身の Webサーバーにアクセスできないということです。

プロトコルの挿入 (macOS)

macOS 上の Webエリアで、プログラムにより処理される URL は、プロトコルで開始されていなければなりません。つまり、"www.mysite.com" ではな、"http://www.mysite.com" 文字列を渡さなければならないということです。

Webインスペクターへのアクセス

オフスクリーンの Webエリアや、フォームのWeb エリア内において、Webインスペクターを見たり使用したりすることができます。 Webインスペクターは、埋め込みWebエンジンによって提供されているデバッガーです。 Webページの情報の、コードとフローを解析します。

Webインスペクターの表示

Webインスペクターを表示させるには、WA OPEN WEB INSPECTOR コマンドを実行するか、 Webエリアのコンテキストメニューを使用します。

WA OPEN WEB INSPECTOR コマンドの実行
このコマンドはスクリーン上 (フォームオブジェクト) の、またはオフスクリーンの Webエリアに対して直接使用することができます。オフスクリーンの Webエリアの場合、そのエリアは埋め込みWebレンダリングエンジンを使用している必要があります (Webインスペクターはこの設定でのみ利用可能です)。
Webエリアコンテキストメニューの使用
この機能はオンスクリーンの Webエリアでのみ使用することができ、以下の条件を満たしている必要があります:
- エリアに対して "埋め込みWebレンダリングエンジンを使用" プロパティが選択されている。
- エリアに対してコンテキストメニューが有効化されている。
- インスペクターの使用が、以下の宣言を用いて明示的に有効化されている:

 WA SET PREFERENCE(*;"WA";WA enable Web inspector;True)

詳細は WA SET PREFERENCE コマンドの説明を参照してください。

Webインスペクターの使用

上記のとおり設定を完了すると、エリア内のコンテキストメニュー内に 要素を調査 という新しいオプションが追加されているはずです: この項目を選択すると、Webインスペクターウィンドウが表示されます。

この Webインスペクターは、埋め込みWebレンダリングエンジンに含まれています。このデバッガーの機能の詳細に関しては、Webレンダリングエンジンにより提供されているドキュメントを参照してください。

プロパティ一覧

タイプ - オブジェクト名 - 変数あるいは式 - CSSクラス - 左 - 上 - 右 - 下 - 幅 - 高さ - 横方向サイズ変更 - 縦方向サイズ変更 - コンテキストメニュー - 表示状態 - 境界線スタイル - メソッド - 進捗状況変数 - URL - 埋め込みWebレンダリングエンジンを使用

特有のプロパティ​

割り当てられる変数​

Webレンダリングエンジン​

4Dメソッドコールを許可​

$4dオブジェクトの使用​

例題 1​

例題 2​

標準アクション​

フォームイベント​

Webエリアのルール​

ユーザーインターフェース​

サブフォーム​

Webエリアと Webサーバーのコンフリクト (Windows)​

プロトコルの挿入 (macOS)​

Webインスペクターへのアクセス​

Webインスペクターの表示​

Webインスペクターの使用​

プロパティ一覧​