Delphi
VCL
C++builder

Delphi / C++Builder Starter Edition の VCL で WebBrowser コンポーネントを使う

はじめに

これは Delphi Advent Calendar 2017 の記事...ではありません。本日行われた Sencha RAD Mix Tokyo の中で FireMonkey の TWebBrowser の話があったので便乗記事です (w

本記事は Delphi / C++Builder Starter Edition の VCL で WebBrowser コンポーネントを使う記事となります。

やり方

まず、パーソナリティを Delphi / C++Builder のいずれかにしておく必要があります。よくわからない場合には、[ファイル | 新規作成 | VCL フォームアプリケーション] で、Delphi または C++Builder いずれかの空のプロジェクトを開いておいてください。

Delphi または C++Builder いずれか片方しかインストールしていないのであれば、IDE を起動するだけで OK です。

Delphi の場合

[コンポーネント | コンポーネントのインポート] で ActiveX コントロールの取り込み にチェックを入れて [次へ (N) >>] ボタンを押す。

image.png

リストから Microsoft Internet Controls を探して選択、 [次へ (N) >>] ボタンを押す。

image.png

このまま [次へ (N) >>] ボタンを押す。

image.png

新規パッケージへインストールにチェックを入れて [次へ (N) >>] ボタンを押す。

image.png

パッケージは UAC の影響を受けないところへ保存する。

image.png

以下のように入力して [完了] ボタンを押す。

項目 内容
パッケージ名 (任意のフォルダ)\WebBrowser.dpk
説明 WebBrowser Component

このような警告が出るので [はい] を押す。

image.png

コンポーネントがインストールされる。

image.png

インストールされたコンポーネントはツールパレットの [ActiveX] タブに格納されている。

image.png

インストール直後には [ActiveX] タブが見えないかもしれない。そんな時には慌てず騒がず IDE を再起動してみよう。

C++Builder の場合

[コンポーネント | コンポーネントのインポート] で ActiveX コントロールの取り込み にチェックを入れて [次へ (N) >>] ボタンを押す。

image.png

リストから Microsoft Internet Controls を探して選択、 [次へ (N) >>] ボタンを押す。

image.png

WebBrowser のクラス名を TCppWebBrowser に変更する。

image.png

変更が終わったら [OK] ボタンを押し、元のダイアログの [次へ (N) >>] ボタンを押す。

image.png

パッケージは UAC の影響を受けないところへ保存する。

image.png

以下のように入力して [完了] ボタンを押す。

項目 内容
パッケージ名 (任意のフォルダ)\WebBrowserCpp.cbproj
説明 WebBrowser Component (C++)

このような警告が出るので [はい] を押す。

image.png

コンポーネントがインストールされる。

image.png

インストールされたコンポーネントはツールパレットの [ActiveX] タブに格納されている。

image.png

インストール直後には [ActiveX] タブが見えないかもしれない。そんな時には慌てず騒がず IDE を再起動してみよう。

検証

このようなフォームを作り、ボタンのイベントハンドラに、

image.png

procedure TForm1.Button1Click(Sender: TObject);
begin
  WebBrowser1.Navigate('http://embarcadero.com');
end;

または

__fastcall TForm1::TForm1(TComponent* Owner)
    : TForm(Owner)
{
  Variant URL = "http://embarcadero.com";
  CppWebBrowser1->Navigate(URL);
}

このようなコードで Web ページを表示できる。

image.png

おわりに

実行時に派手にスクリプトエラーが出る件は、デフォルトでは IE コンポーネントが古いバージョンで実行されるからだと思われます。IE レンダリング互換性のためのレジストリをいじってみてください。

See Also: