Denen blog

株式会社電縁の社員によるブログです。

C#でChromiumベースのブラウザを作る!

こんにちは、イノベーションオフィスの吉田です。

早速ですが、 Windows アプリを作るときは大体 C# で作っているのですが、WebView を使おうとすると IE ベースになるのが残念だと思っていました。

そう、CefSharp を知るまでは。

 

と言うわけで、今日は C#Chromium ベースの WebView が利用できる CefSharp というライブラリをご紹介したいと思います。

github.com

と、GitHub のリンクを貼ったものの、実は Visual Studio では非常に簡単に導入する方法が有ります。

それは NuGet を使う方法です。

programchan.com

詳しくは上記サイトを参照いただければと思いますが、簡単に説明します。

  1. NuGet パッケージの管理画面を立ち上げる
    (ツール ⇒ NuGet パッケージ マネージャー ⇒ ソリューションの NuGet パッケージの管理)

    f:id:yasuaki-sakai:20180918180715p:plain

  2. 「参照」タブを選択する

    f:id:yasuaki-sakai:20180918180743p:plain

  3. キーワード検索する
    f:id:yasuaki-sakai:20180918180828p:plain

  4. 必要なパッケージをインストールする

    f:id:yasuaki-sakai:20180918181538p:plain

ざっとこんな感じです。

で、今回は CefSharp のインストールなのですが、詳しくは以下のサイトもご覧下さい。

qiita.com

インストールの際の注意点としては以下の通りです。

  •  .NET Framework 4.5.2 以上を利用する
  • プラットフォームを x86 か x64 にしておく
  • CefSharp.Common 以外にプロジェクトに合ったパッケージ(WPF なら CefSharp.Wpf)をインストールする

これで後は使うだけです。

 

ただ、デザイナから使うことは出来ない?ようなので、ウィンドウのコンストラクタで追加してあげる必要があります。

今回は Grid に myGrid という名前をつけて追加しています。

        private CefSharp.Wpf.ChromiumWebBrowser webContent;

        public MainWindow()
        {
            InitializeComponent();

            webContent = new CefSharp.Wpf.ChromiumWebBrowser();
            webContent.Address = "http://localhost/";

            myGrid.Children.Add(webContent);
        }

簡単ですね!

ちなみに既存の WebBrowser コントロールとはメソッド等だいぶ違うのでお気を付けください。

一例として、画面の再読み込みの際には以下のようにします。

            CefSharp.WebBrowserExtensions.Reload(webContent, true);

 

リファレンスもまとまっているのでご参考にしていただければと思います。

http://cefsharp.github.io/api/67.0.0/html/R_Project_Documentation.htm

 

あ、最後に1つだけ。

video タグで h264 ベースの動画(mp4など)は残念ながら再生できません。

なので動画を流したい時は webm を利用する必要がありますのでそちらもご注意ください。

 

それでは!

 

書いた人:イノベーションオフィス 室長 吉田

f:id:yasuaki-sakai:20171204190702j:plain