Webエリア

Webエリアは、静的および動的な HTMLページ、ファイル、ピクチャー、JavaScript などの様々な Webコンテンツをフォーム中で表示することのできるオブジェクトです。 Web エリアのレンダリングエンジンは、アプリケーションの実行プラットフォームと選択したレンダリングエンジンオプション に応じて変化します。

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

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

特有のプロパティ

割り当てられる変数

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

• URL --Web エリアが表示するURL をコントロールします。
• Progression -- Web エリア内に表示されているページのロード率をコントロールします。

4D 19 R5 以降、Progression 変数は、Windows のシステムレンダリングエンジン を使用しているWeb エリアにおいては更新されなくなりました。

Webレンダリングエンジン

アプリケーションの使用に応じて、Web エリアでは2つのレンダリングエンジン からどちらを使用するかを選択することができます。

"埋め込みWebレンダリングエンジンを使用" プロパティを選択している場合、"4Dメソッドコールを許可" プロパティが選択可能になり、また、macOS と Windows 上の動作が同様であるようにできます。 Webエリアがインターネットに接続されている場合には、最新のセキュリティアップデートの恩恵を受けられるため、システムレンダリングエンジンを選択することが推奨されます。

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 引数を受け取ります。この "コールバック" 関数は、4Dメソッドが実行を終えると同時に呼び出されます。この関数は result 引数を受け取ります。

• result: Execution result of the 4D method, returned in the "$0" expression. 戻り値は JavaScript でサポートされている型 (文字列、数値、配列、オブジェクト) のいずれかになります。 You can use the C_OBJECT command to return the objects.

デフォルトとして、4Dは UTF-8 文字コードで動作しています。(アクセントが付いた文字などの) 拡張文字を含むテキストを返す場合には、Webエリアで表示されるページの文字コードが UTF-8 に宣言されていることを確認してください。この場合、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>Today is: <div id="mydiv"></div>
</body>
</html>

例題 2

The 4D project method calcSum receives parameters ($1...$n) and returns their sum in $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つの特別な自動アクションを使用できます: Open Back URL、 Open Forward URL、 Refresh Current URL そしてStop Loading URL です。ボタンやメニューコマンドにこれらのアクションを割り当てることで、基本の Webインターフェースを素早く実装できます。これらのアクションは、標準アクション のページに詳細な説明があります。

フォームイベント

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

• On Begin URL Loading
• On URL Resource Loading
• On End URL Loading
• On URL Loading Error
• On URL Filtering
• On Open External Link
• On Window Opening Denied

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

• On Load
• On Unload
• On Getting Focus
• On Losing Focus

Webエリアのルール

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

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

• 編集メニューコマンド: Webエリアにフォーカスがあるとき、編集 メニューコマンドを使用してコピーやペースト、すべてを選択などのアクションを選択に応じて実行できます。
• コンテキストメニュー: Web エリアでは、システムの標準のコンテキストメニュー を使用することができます。 Display of the context menu can be controlled using the WA SET PREFERENCE command.
• ドラッグ＆ドロップ: 4D のオブジェクトプロパティに基づき、ユーザーは Webエリア内で、または Webエリアと 4Dフォームオブジェクト間で、テキストやピクチャー、ドキュメントをドラッグ＆ドロップできます。セキュリティ上の理由から、ファイルまたは URL のドラッグ＆ドロップによって Webエリアのコンテンツを変更することは、デフォルトで禁止されています。この場合、カーソルは"禁止"アイコン を表示します。"ドロップ" アイコンを表示し、On Window Opening Denied イベントを発生させるには、WA SET PREFERENCE(*;"warea";WA enable URL drop;True) 文を使う必要があります。このイベントにおいては、WA OPEN URL コマンドを呼び出すか、またはURL 変数 を設定することでユーザードロップに対応することができます。

上記のドラッグ&ドロップ機能はmacOS のシステムレンダリングエンジン を使用したWeb エリアではサポートされていません。

サブフォーム

ウィンドウの再描画機構に関わる理由から、サブフォームに 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インスペクターを表示させるには、WA OPEN WEB INSPECTOR コマンドを実行するか、 Webエリアのコンテキストメニューを使用します。

• WA OPEN WEB INSPECTOR コマンドを実行する
  このコマンドは、オンスクリーンのWeb エリア(フォームオブジェクト)とオフスクリーンのWeb エリアでも直接使用することができます。

• Web エリアのコンテキストメニューを使用する
  この機能はオンスクリーンのWeb エリアでのみ使用することができ、以下の条件を満たしている必要があります:

  • Web エリアにおいてコンテキストメニュー が有効化されている
  • インスペクターの使用が、以下の宣言を用いて明示的に有効化されている:

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

Windows のシステムレンダリングエンジン の場合にこの環境設定を変更すると、変更を反映するのにエリア内でのナビゲーション操作 (たとえば、ページの更新など) が必要です。

For more information, refer to the description of the WA SET PREFERENCE command.

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

このデバッガーの機能の詳細に関しては、Webレンダリングエンジンにより提供されているドキュメントを参照してください。

プロパティ一覧

タイプ - オブジェクト名 - 変数あるいは式 - CSSクラス - 左 - 上 - 右 - 下 - 幅 - 高さ - 横方向サイズ変更 - 縦方向サイズ変更 - コンテキストメニュー - 境界線スタイル - メソッド