メインコンテンツまでスキップ
バージョン: 20 R7 BETA

Webエリア

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

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

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

特有のプロパティ​

割り当てられる変数​

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

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

4D v19 R5 以降、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 引数を受け取ります:

  • 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エリアのコンテンツを変更することは、デフォルトで禁止されています。 この場合、カーソルは "禁止" アイコン を表示します。 "ドロップ" アイコンを表示し、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エリアでのみ使用することができ、以下の条件を満たしている必要があります:

    • エリアに対して コンテキストメニュー が有効化されている。
    • インスペクターの使用が、以下の宣言を用いて明示的に有効化されている:
        WA SET PREFERENCE(*;"WA";WA enable Web inspector;True)

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

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

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

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

プロパティ一覧​

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