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

Webエリア

Webエリアは、静的および動的な HTMLページ、ファイル、ピクチャー、JavaScript などの様々な Webコンテンツをフォーム中で表示することのできるオブジェクトです。 The rendering engine of the web area depends on the execution platform of the application and the selected rendering engine option.

同じフォーム内に複数の Webエリアを配置できます。 Note, however, that the use of web areas must follow several rules.

Several dedicated standard actions, numerous language commands as well as generic and specific form events allow the developer to control the functioning of web areas. 特別な変数を使用して、エリアと 4D環境間で情報を交換することも可能です。

特有のプロパティ​

割り当てられる変数​

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

  • URL --to control the URL displayed by the web area
  • Progression -- to control the loading percentage of the page displayed in the web area.

As of 4D v19 R5, the Progression variable is no longer updated in Web Areas using the Windows system rendering engine.

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

You can choose between two rendering engines for the web area, depending on the specifics of your application.

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

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

When the Access 4D methods property is selected, you can call 4D methods from a web area.

注記
  • This property is only available if the web area uses the embedded web rendering engine.
  • このオプションは 4Dコードの実行を許可するため、セキュリティ上の理由から、アプリケーションによって生成されたページなど、信頼できるページに対してのみ有効にするべきです。

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

The 4D embedded web rendering engine supplies the area with a JavaScript object named $4d that you can associate with any 4D project method using the "." object notation.

For example, to call the HelloWorld 4D method, you just execute the following statement:

$4d.HelloWorld();

JavaScript is case sensitive so it is important to note that the object is named $4d (with a lowercase "d").

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

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

  • param1...paramN: You can pass as many parameters as you need to the 4D method. これらの引数は、JavaScript にサポートされている型であればどんなものでも渡せます (文字列、数値、配列、オブジェクト)。

  • function(result): Function to pass as last argument. この "コールバック" 関数は、4Dメソッドが実行を終えると同時に呼び出されます。 It receives the result parameter.

  • result: Execution result of the 4D method. 戻り値は JavaScript でサポートされている型 (文字列、数値、配列、オブジェクト) のいずれかになります。

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

例題 1​

Given a 4D project method named today that does not receive parameters and returns the current date as a string.

4D code of today method:

 #DECLARE : Text
 return String(Current date;System date long)

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

$4d.today()

The 4D method does not receive any parameters but it does return the result to the callback function called by 4D after the execution of the method. Webエリアによってロードされた HTMLページ内にこの日付を表示します。

HTMLページのコードです:

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

例題 2​

The 4D project method calcSum receives parameters and returns their sum:

4D code of calcSum method:

 #DECLARE (... : Real) -> $sum : Real 
  // receives n Real type parameters
  // and returns a Real
 var $i; $n : Integer
 $n:=Count parameters
 For($i;1;$n)
    $0:=$0+${$i}
 End for

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

$4d.calcSum(33, 45, 75, 102.5, 7, function(theSum)
    {
        var result = theSum // result is 262.5
    });

標準アクション​

Four specific standard actions are available for managing web areas automatically: Open Back URL, Open Forward URL, Refresh Current URL and Stop Loading URL. ボタンやメニューコマンドにこれらのアクションを割り当てることで、基本の Webインターフェースを素早く実装できます。 These actions are described in Standard actions.

フォームイベント​

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

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

Webエリアのルール​

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

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

  • Edit menu commands: When the web area has the focus, the Edit menu commands can be used to carry out actions such as copy, paste, select all, etc., according to the selection.
  • Context menu: It is possible to use the standard context menu of the system with the web area. Display of the context menu can be controlled using the WA SET PREFERENCE command.
  • Drag and drop: The user can drag and drop text, pictures and documents within the web area or between a web area and the 4D form objects, according to the 4D object properties. セキュリティ上の理由から、ファイルまたは URL のドラッグ＆ドロップによって Webエリアのコンテンツを変更することは、デフォルトで禁止されています。 In this case, the cursor displays a "forbidden" icon . You have to use the WA SET PREFERENCE(*;"warea";WA enable URL drop;True) statement to display a "drop" icon and generate the On Window Opening Denied event. In this event, you can call the WA OPEN URL command or set the URL variable in response to a user drop.

Drag and drop features described above are not supported in web areas using the macOS system rendering engine.

サブフォーム​

ウィンドウの再描画機構に関わる理由から、サブフォームに 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ページの情報の、コードとフローを解析します。

To display the Web inspector, you can either execute the WA OPEN WEB INSPECTOR command, or use the context menu of the web area.

  • Execute the WA OPEN WEB INSPECTOR command
    This command can be used directly with onscreen (form object) and offscreen web areas.

  • Use the web area context menu
    This feature can only be used with onscreen web areas and requires that the following conditions are met:

    • the context menu for the web area is enabled
    • インスペクターの使用が、以下の宣言を用いて明示的に有効化されている:
    	WA SET PREFERENCE(*;"WA";WA enable Web inspector;True)

With Windows system rendering engine, a change in this preference requires a navigation action in the area (for example, a page refresh) to be taken into account.

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

When you have done the settings as described above, you then have new options such as Inspect Element in the context menu of the area. この項目を選択すると、Webインスペクターウィンドウが表示されます。

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

プロパティ一覧​

Border Line Style - Bottom - Class - Context Menu - Height - Horizontal Sizing - Left - Method - Object Name - Progression - Right - Top - Type - URL - Use embedded Web rendering engine - Variable or Expression - Vertical Sizing - Visibilty - Width

4DCEFParameters.json​

The 4DCEFParameters.json is a configuration file that allows customization of CEF parameters to manage the behavior of web areas within 4D applications.

Default switches are provided, but you can override them by using a custom 4DCEFParameters.json file.

In the development phase (using 4D application), create a 4DCEFParameters.json file at the following location:

  • Windows: Users\[userName]\AppData\Roaming\4D\4DCEFParameters.json
  • macOS: $HOME/Library/Application Support/4D/4DCEFParameters.json

Before building a final application, add the custom 4DCEFParameters.json file to the Resources folder of the project.

警告

Adding a custom 4DCEFParameters.json file can fundamentally impact all 4D embedded web areas, including 4D View Pro areas. It is the developer's responsibility to ensure that the custom switches do not destabilize the 4D application.

The 4DCEFParameters.json file format is as the following:


{
  "switches":{
     "key":value
  },
  "macOS":{
    "switches": {
     "key":value
    }
  },
  "windows": {
    "switches": {
     "key":value
    }
  }
}

The 4DCEFParameters.json file structure contains:

  • switches: a list of CEF switches and their corresponding values applied for both macOS and Windows.
  • macOS.switches: macOS-specific CEF switches.
  • windows.switches: Windows-specific CEF switches.

The switches in the custom file take precedence. In case of duplication of switches within the same file, the switches defined in the platform-specific subsection ("macOS.switches" or "windows.switches") are given priority and used for configuration.

注

The list of supported switches is constantly evolving and is managed by the CEF development team. For information about available switches, you need to refer to the CEF developer community.

例題​

デフォルトファイル​

The default 4DCEFParameters.json file contains the following switches:

{
  "switches":{
     "enable-media-stream":true,
     "enable-print-preview":true
  },
  "macOS":{
    "switches": {
      "use-mock-keychain": true
    }
  },
  "windows": {
    "switches": {
      "disable-features": "WinUseBrowserSpellChecker"
    }
  }
}

Example of disabling default Switch​

{
  "switches": {
    "disable-javascript": true,
    "disable-web-security": true
  }
}

Example for Autoplay​

{
  "switches":{
     "autoplay-policy": "no-user-gesture-required"
  }
}

参照​

Specify your own parameters to initialize the embedded web area (blog post)