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

# はじめに

これは [Delphi Advent Calendar 2017](https://qiita.com/advent-calendar/2017/delphi) の記事...ではありません。本日行われた [Sencha RAD Mix Tokyo](http://forms.embarcadero.com/sencha-rad-mix) の中で 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](https://qiita-image-store.s3.amazonaws.com/0/21785/247bb8eb-b3b7-1ef2-0949-ce22f27ee4f4.png)

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

![image.png](https://qiita-image-store.s3.amazonaws.com/0/21785/fa9e94d6-46eb-e208-4676-32c8cc3c843d.png)

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

![image.png](https://qiita-image-store.s3.amazonaws.com/0/21785/4269ed3c-53fe-1713-d563-9664e2e930ba.png)

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

![image.png](https://qiita-image-store.s3.amazonaws.com/0/21785/6c0b6f28-5dc6-60c2-a94c-297b5f58ee65.png)

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

![image.png](https://qiita-image-store.s3.amazonaws.com/0/21785/3ef2f237-616a-e5c5-e497-944038419bfb.png)

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

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

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

![image.png](https://qiita-image-store.s3.amazonaws.com/0/21785/7ee46249-18e5-5540-23e2-f56c337ec672.png)

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

![image.png](https://qiita-image-store.s3.amazonaws.com/0/21785/80f3a038-d57e-3f95-38cb-fe8fe5b779eb.png)

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

![image.png](https://qiita-image-store.s3.amazonaws.com/0/21785/32817ded-e7cc-41c5-d5b0-4f5b8018e753.png)

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



## C++Builder の場合

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

![image.png](https://qiita-image-store.s3.amazonaws.com/0/21785/247bb8eb-b3b7-1ef2-0949-ce22f27ee4f4.png)

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

![image.png](https://qiita-image-store.s3.amazonaws.com/0/21785/fa9e94d6-46eb-e208-4676-32c8cc3c843d.png)

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

![image.png](https://qiita-image-store.s3.amazonaws.com/0/21785/4269ed3c-53fe-1713-d563-9664e2e930ba.png)

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

![image.png](https://qiita-image-store.s3.amazonaws.com/0/21785/f26a8b4c-af83-bd9b-b9c8-33fde980223b.png)

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

![image.png](https://qiita-image-store.s3.amazonaws.com/0/21785/bbefe47a-b4ad-348d-21f0-4ada1bfd0afd.png)


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

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

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

![image.png](https://qiita-image-store.s3.amazonaws.com/0/21785/e039f54e-b2b7-f3e3-6f2c-5ef409ac285c.png)

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

![image.png](https://qiita-image-store.s3.amazonaws.com/0/21785/97f670ed-1979-8e13-fa0c-f983d41467cd.png)

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

![image.png](https://qiita-image-store.s3.amazonaws.com/0/21785/6d9586bf-e797-9d83-2707-c017f46e3884.png)

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

## 検証

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

![image.png](https://qiita-image-store.s3.amazonaws.com/0/21785/65da3557-49e8-c82b-3794-7a129c60b848.png)

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

または

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

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

![image.png](https://qiita-image-store.s3.amazonaws.com/0/21785/72b17c3a-d344-441b-86c4-35ab14683c15.png)


# おわりに

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

**See Also:**

 - [TWebBrowser (IE コンポーネント) と互換モード (Delphi Forum)](https://ht-deko.com/delphiforum/?vasthtmlaction=viewtopic&t=1109.0)
 - [944_Google の検索結果ページを連続表示 (Mr.XRAY)](http://mrxray.on.coocan.jp/Delphi/plSamples/944_plGooleSearch.htm#07)
 - [Delphi / C++Builder Starter Edition (無償版)](https://www.embarcadero.com/jp/free-tools)