Help us understand the problem. What is going on with this article?

WindowsForm/WPFでBlinkレンダリングエンジンを使用する

More than 1 year has passed since last update.

はじめに

ここ最近いろいろQiitaのとレンジ記事を読んでいると,ReactやNode.jsといったサーバーサイドと,Vue.js等フロントエンド設計もJavascriptを使う機会が増えてきているように感じますね.

ソフトウェア設計でも,UI/UXの設計でWeb系,Python+Django,Bottle,FlaskやRuby on Rails等の技術者が多くなり,また案件もそのようなものが増えているように思います.一方,生粋なVisual StudioでC# Applicationを使用する機会は減少しているようにも感じるコトがあります..

しかし,B to Bの現場においてこういうことはないでしょうか.

業務系アプリなのでブラウザはちょっと・・・

運営事業者が提供するサービスは,コンシューマーが使用するのが前提.囲い込むためには専用アプリを必要とせずにブラウザでいいのかもしれないですね.しかし,客先に収めるシステムの場合はURLが入力できてもダメ.進む,戻る,ブックマークがUIに表示されるのもダメ.これはよくあることです.

つまり・・・ネイティブアプリでなければならない.

Windows Form/ WPFにブラウザコントロール

感のいい人はとっくに気づいているし使っていると思います.C#にはデフォルトでブラウザコントロールが搭載されている.では,コレを使用してWEBアプリケーションを組んでしまえばいいのである.単純な答えですね.

しかしこのコントロール,じつは問題がありまして,実行エンジンはIE11です.Windows標準搭載のコンポーネントを使用します.このコンポーネントにはいくつかの問題が.

Chrome

chrome

IE11

ie11

見比べてもらえればわかると思いますが,一部のChromeのコンポーネントはIE11上では動作しません.(当然)

GoogleのChromeレンダリングエンジンはBlinkを使っており,これはOpera, Vivaldi, Sleipnirでも採用されているため最近では”実績有り”といったところでしょうか.

オマケ

IE11 (互換モード)

ie11to6

こっちは右上のボタンとかも使えない.これがIE5準拠時代のものですね.で,話を戻しますと,IE11をなぜ使わなければならないというところ.

俺達はChromeを使いたいんだ!!!

そう,俺達はChromeで開発をしたいんです.社内でデバッグ時も当然Chrome.F12を叩きデバッグコンソールは出しっぱなしでコーディングを進めたいと思わないですか?

開発をChromeで行うと同時に客先納品もChromeであれば最高.しかしやっぱり,それは叶わぬ夢ですね・・・

OSはわりとWindowsの場合が多いですね.というか,システム納品先の9割はWindowsです.
仮にブラウザが使用できたとしても,VPNを経由するのでChromeのインストールも難しい.しかしIE11であれば,問題はないのですよ.(標準搭載)

しかし,IE11の寿命は・・・?

このように,ブラウザによって大きく使えるものと使えないものが別れてしまっている.納品先によってはこれがネックとなる場合もある上に,ブラウザは自分たちで設定を変えるなど”余計な操作”ができてしまう.

だいたいこの余計な操作が”何もしてないのに動かない”と言われる要因である.

対策

正直,WebでUI/UXを設計するコストなどを考えるとWindowsのネイティブなアプリを作るのは非常に無駄が多いと思うことがあります.ビルドエラーやコンポーネントの使用の制約,DOM操作みたいなのも作り込みは結構たいへん・・・

ブラウザコントロールを搭載すればいいのですが,これにも問題が.以下の画像見てもらえるとわかりますが,デザインが何処かでみたのと同じですね・・・

orig2

俺達はChromeを使いたいんだ!!!(再)

というわけで,Chromeで使えるコンポーネントはないかと探してみたところ・・・

やっぱり有りました.

CEFSharp

実装すると,こんな感じ.

orig

導入は,また別記事にて.

Shino3
まだまだ初級者プログラマ。以前は組み込み系のC言語。電子回路系、マイコン制御がメインだった。 部署異動で主にシステム系でC++、C#、たまにPHP・・・知ってることしか知らないダメンジニア どっちかというとシステム機器の設置と顧客対応メインのSIerかな。 転職して東京で、基幹システムやスマートフォンアプリ、WEBアプリなど 日々知らない技術、知識の世界で四苦八苦
http://shino3.net/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away