Chromiumブラウザコンポーネントを使ってみよう

HTML5ベースのデスクトップアプリの開発に当たり、Google Chromeのレンダリングエンジンが使われたブラウザコンポーネント「Chromium Embedded Framework (CEF)」を勉強したので、その知識を披露したいと思います。

まずはこちらのサイトより「cef_binary_3.1650.1562_windows32.7z」をダウンロード。

ソリューションファイル(.sln)を開いてプロジェクトをビルドする。「std::maxが見つからない」というエラーが発生するようであれば、「cef_win.h」に「#include <algorithm>」を追加。ビルドが通れば「libcef_dll_wrapper.lib」が作成される。

新規に任意の名前のプロジェクトを作成。

プロジェクトに、「cef_binary」の「include」フォルダ以下のファイルを追加。

メインプログラムを入力。[simple_hander.h][simple_handler.cpp][simple_app.h][simple_app.cpp]はチュートリアルをそのまま拝借。
main.cpp 
#include <windows.h>
#include <assert.h>

#include <string>
#include <list>

#include "include/cef_app.h"
#include "include/cef_client.h"

#include "simple_app.h"

int APIENTRY wWinMain(HINSTANCE hInstance,
	HINSTANCE hPrevInstance,
	LPTSTR    lpCmdLine,
	int       nCmdShow) {
	UNREFERENCED_PARAMETER(hPrevInstance);
	UNREFERENCED_PARAMETER(lpCmdLine);

	// Provide CEF with command-line arguments.
	CefMainArgs main_args(hInstance);

	// SimpleApp implements application-level callbacks. It will create the first
	// browser instance in OnContextInitialized() after CEF has initialized.
	CefRefPtr<SimpleApp> app(new SimpleApp);

	// CEF applications have multiple sub-processes (render, plugin, GPU, etc)
	// that share the same executable. This function checks the command-line and,
	// if this is a sub-process, executes the appropriate logic.
	int exit_code = CefExecuteProcess(main_args, app.get());
	if (exit_code >= 0) {
		// The sub-process has completed so return here.
		return exit_code;
	}

	// Specify CEF global settings here.
	CefSettings settings;

	// Initialize CEF.
	CefInitialize(main_args, settings, app.get());

	// Run the CEF message loop. This will block until CefQuitMessageLoop() is
	// called.
	CefRunMessageLoop();

	// Shut down CEF.
	CefShutdown();

	return 0;
}
プロジェクトのプロパティーを開き、「リンカー→入力」に「libcef.lib」と先ほどビルドした「libcef_dll_wrapper.lib」を指定。必要に応じて「C/C++コード生成→ランタイムライブラリ」を「マルチスレッド(MT)」などに変更。

実行ファイルが生成されたフォルダに「cef_binary」にあるこれらのファイルをコピーする。 
localesフォルダ
cef.pak
d3dcompiler_43.dll
d3dcompiler_46.dll
devtools_resources.pak(デバッグ用)
ffmpegsumo.dll
icudt.dll
libcef.dll
libEGL.dll
libGLESv2.dll

プログラムとファイル構成に問題がなければ実行ウィンドウにGoogleのサイトが表示されます。
Internet Explorerコンポーネントに比べて便利なのはGoogle Chromeのリモートデバッガを利用できるところ。[main.cpp]に[settings.remote_debugging_port = 8088;]を追加し、Chromeのアドレスバーに「localhost:8088」と入力すれば、要素やスクリプトの確認ができるようになります。
2014/04/17
[ 目次 ]