◆ WPF に CEF で web 画面を並べて表示した

朝はてブを覗いてみたらこのページが話題になってました

http://mzp.hatenablog.com/entry/2017/04/30/190752


チャットツールの Slack をチャンネルを並べて一度に見えるようにしてるツールです
便利そう と思って github を見てみたら

for macOS

でした

Windows じゃ使えない……

WebView を並べるだけでいい らしいので私も作ってみました

iframe はダメだった

最初は単純に iframe 並べて完成 なんじゃない??

と期待してたのですが iframe は禁止になっていたのでダメでした

WPF

WPF なら Grid 分割が簡単で GridSplitter で幅調整を好きにできるから向いてそう

ということで WPF で作りました


途中で思ったのが

WPF だと WebBrowser コントロール って IE じゃん
しかもデフォは確か IE7


さすがにそれは嫌なので CEF 使いました

Chromium Embedded Framework

なので Chromium です

わりと Chrome Extension 作ってるのに近い感じでしたが Chrome Extension の機能と同等なのがなかったり使い方があまり情報なかったり割りと大変でした

と言っても表示するだけなら
xmlns:wpf="clr-namespace:CefSharp.Wpf;assembly=CefSharp.Wpf"

↑を最初のネームスペースに追加して
<wpf:ChromiumWebBrowser Address="https://****.slack.com/" />

↑をブラウザ表示したいところに追加するだけ

それとは別にアプリ全体で初期化も必要です
public App()
{
    var settings = new CefSettings()
    {
        Locale = "ja",
        //By default CefSharp will use an in-memory cache, you need to specify a Cache Folder to persist data
        // CachePath = Path.Combine(Environment.GetFolderPath(Environment.SpecialFolder.LocalApplicationData), "CefSharp\\Cache")

    };

    //Perform dependency check to make sure all relevant resources are in our output directory.
    Cef.Initialize(settings, performDependencyCheck: true, browserProcessHandler: null);
}

コメントはサンプルからコピペしてきたままです

あとは ページロード時に CSS を埋め込んで余計なものを消すだけ
なのですが この辺に時間かかってなんだかんだ 3 時間くらいはかかった気がします


完成したのはこんな感じ

slackwpf


画面分割は byobu のキーバインドに合わせて

Ctrl-F2 で横に分割
Shift-F2 で縦に分割
Ctrl-F6 でフォーカス中を削除

にしました

あと Chrome らしく

F12 で devtools

と言う機能も入れてみたり

見た目はいい感じですが やっぱり WebView 並べるのは重いですね