cefSharpでWYSIWYGのHTMLエディタ
Windows FormにChromiumベースのコントロールを組み込むことができましたので、ローカルファイルの読込を行ってみます。
ただ、表示して終わりでは面白くないので、オープンソースのHTMLエディタであるTinyMCEを表示してみます。
TinyMCEの本体のjavascriptは、CDNで提供されているものを使用しています。
1. 表示するためのローカルファイル、日本語ローカライズファイルの用意
ローカライズファイル
TinyMCE本家から日本語ローカライズファイルをダウンロードします。
表示用HTMLファイル
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <title>tinyMCE WYSIWYG Editor</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/5.0.12/tinymce.min.js"></script> <!-- Script functions to expose tinyMCE internals that get called from code using InvokeScript method. --> <script type="text/javascript"> function GetContent() { return tinyMCE.get('tinyMceEditor').getContent(); } function SetContent(htmlContent) { tinyMCE.get('tinyMceEditor').setContent(htmlContent); } </script> <!-- Taken from the tinyMCE examples found on http://tinymce.moxiecode.com/examples/full.php --> <!-- TinyMCE --> <script type="text/javascript"> tinymce.init({ selector: 'textarea', height: 400, plugins: [ 'advlist autolink lists link image charmap print preview hr anchor pagebreak', 'searchreplace visualblocks visualchars code fullscreen', 'insertdatetime media nonbreaking save table directionality', 'emoticons paste' ], toolbar1: 'insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image media | fontsizeselect | forecolor backcolor emoticons | code' , image_advtab: true, paste_data_images: true, relative_urls: false, convert_urls: false, language: 'ja', language_url: 'langs/ja.js', fontsize_formats: '8pt 10pt 12pt 14pt 18pt 24pt 36pt', setup: function (ed) { ed.on('init', function () { this.getDoc().body.style.fontSize = '14px'; }); }, extended_valid_elements: 'script[language|type|src],iframe[src|style|width|height|scrolling|marginwidth|marginheight|frameborder]' }); </script> <!-- /TinyMCE --> </head> <body> <form method="post"> <!-- Gets replaced with TinyMCE, remember HTML in a textarea should be encoded --> <textarea name="tinyMceEditor" style="width:100%; height: 100%;"></textarea> </form> </body> </html>
2. プロジェクトへ上記ファイルを追加
これらの2つのファイルをプロジェクトへ追加します。
- プロジェクト内へTinyMceフォルダを作成
- 表示用HTMLファイルをtinymce.htmlで追加
- 日本語ローカライズファイルをlangsフォルダを作成し、ja.jsとして追加
3. Form1へ表示
ローカルファイルを読み込み、ブラウザへ渡します。javascriptのエラーなどの確認のため、Devツールも開きます。
public partial class Form1 : Form { private ChromiumWebBrowser _chromeBrowser; public Form1() { InitializeComponent(); InitializeChromium(); } public void InitializeChromium() { String page = string.Format(@"{0}\TinyMce\tinymce.html", Application.StartupPath); _chromeBrowser = new ChromiumWebBrowser(page); this.Controls.Add(_chromeBrowser); _chromeBrowser.Dock = DockStyle.Fill; // イベントハンドラを追加 _chromeBrowser.IsBrowserInitializedChanged += OnIsBrowserInitializedChanged; } private void Form1_FormClosing(object sender, FormClosingEventArgs e) { Cef.Shutdown(); } private void OnIsBrowserInitializedChanged(object sender, IsBrowserInitializedChangedEventArgs e) { if (e.IsBrowserInitialized) { _chromeBrowser.ShowDevTools(); } } }
4. 表示の確認
デバッグモードで開始し、表示を確認します。
C#:webBrowserコントロールの代替にChromiumベースのコントロールを使う
webBrowserコントロールの終焉
WPFは使ったことがないので、Windows Formに限った話です。
C#に同梱されているwebBrowserコントロールは、ベースがIE7です。Windowsのレジストリを変更することで、IE11をエミュレートすることはできますが、最近はIE11でさえ対象ブラウザから切り捨てられています。
そのため、最新のCSS、javascriptを使ったページでは、表示や動作に問題が出ます。
Chromiumベースのコントロール
Chromiumは、Google Chromeのオープンソース版であり、あのMicrosoft社でさえ、次期Microsoft Edgeは、Chromiumベースにすると表明しています(Microsoft EdgeでYoutubeを表示すると遅くなったりなど、意地悪されたらしい--噂--)。
本家のMicrosoft社からも、新しいBrowserコントロールのお知らせもあります。
また、Microsoft EdgeベースのwebBrowserコントロールもありますが、配布先がWindows10 1803以降でないと動作しないため、それ以前のWindowsだと使えません。
現時点(2019/07/23)で現実的な解は、ChromiumベースのwebBrowserコントロールであると考えています。Windows Form用、WPF用ともに用意されていますし、nugetパッケージで配布されているため、導入も簡単です。
cefSharpのインストール
まずは、新規プロジェクトを作成し、「nugetパッケージの管理」から以下をインストールします。
上記をインストールすることで、32bit用、64bit用ともがインストールされます。
32bit/64bit CPUに対応させる
cefSharp 51からは、32bit/64bitのどちらのWindowsに対しても、読み込むchrmiunを変更することで対処できるようになりました。
ただ、そのためには、
一度プロジェクトを閉じ、プロジェクトフォルダ/プロジェクト名.csprojに以下を追加します。
最初の<PropertyGroup>の最後に
<CefSharpAnyCpuSupport>true</CefSharpAnyCpuSupport>
を追加します。
cefSharpブラウザコントロールの初期化
プログラム開始時に、32/64bitを判断し読み込むバイナリーのパスを指定します。アプリケーションの開始は、Form1の表示となります。
static class Program { /// <summary> /// アプリケーションのメイン エントリ ポイントです。 /// </summary> [STAThread] static void Main() { //2重起動をチェック //Mutexクラスの作成 Mutex mutex = new Mutex(false, "AppName"); //ミューテックスの所有権を要求する if (mutex.WaitOne(0, false) == false) { //すでに起動していると判断して終了 MessageBox.Show("多重起動はできません。", "確認", MessageBoxButtons.OK, MessageBoxIcon.Warning); return; } Application.EnableVisualStyles(); Application.SetCompatibleTextRenderingDefault(false); AppDomain.CurrentDomain.AssemblyResolve += Resolver; LoadApp(); //ミューテックスを解放する mutex.ReleaseMutex(); } [MethodImpl(MethodImplOptions.NoInlining)] private static void LoadApp() { var settings = new CefSettings(); // Set BrowserSubProcessPath based on app bitness at runtime settings.BrowserSubprocessPath = Path.Combine(AppDomain.CurrentDomain.SetupInformation.ApplicationBase, Environment.Is64BitProcess ? "x64" : "x86", "CefSharp.BrowserSubprocess.exe"); // Make sure your set performDependencyCheck false Cef.Initialize(settings, performDependencyCheck: false, browserProcessHandler: null); Application.Run(new Form1()); } // Will attempt to load missing assembly from either x86 or x64 private static Assembly Resolver(object sender, ResolveEventArgs args) { if (args.Name.StartsWith("CefSharp")) { string assemblyName = args.Name.Split(new[] {','}, 2)[0] + ".dll"; string archSpecificPath = Path.Combine(AppDomain.CurrentDomain.SetupInformation.ApplicationBase, Environment.Is64BitProcess ? "x64" : "x86", assemblyName); return File.Exists(archSpecificPath) ? Assembly.LoadFile(archSpecificPath) : null; } return null; } }
Form1表示
Form1を表示する際に、FormにcefSharpブラウザコントロールを追加し最大化。その後、Yahoo!Japanのトップページを表示します。
public partial class Form1 : Form { private ChromiumWebBrowser _chromeBrowser; public Form1() { InitializeComponent(); InitializeChromium(); } public void InitializeChromium() { _chromeBrowser = new ChromiumWebBrowser("https://www.yahoo.co.jp/"); this.Controls.Add(_chromeBrowser); _chromeBrowser.Dock = DockStyle.Fill; } private void Form1_FormClosing(object sender, FormClosingEventArgs e) { Cef.Shutdown(); } }
Mac Book Pro 2016 環境設定
Mac Book Pro 2016 + マルチディスプレイ
狙っていたのですが、
- Mac Book Proがフルモデルチェンジした
- プロジェクトが完了した
ので、頼み込んで決済を通してもらった。
購入いただいたのは、
Mac Book Pro 15 Core i7 2.6GHz 1TB Radeon 460(4GB)
これを以下の環境で使うようにしました。
ハマったところ
CalDigitのUSB Type-c Dockには、
- HDMIポート
- Displayポート
- USB 3.1 Type Aが3つ
- USB Type-cが1つ
- ヘッドホン端子
- マイク入力端子
- Mac Book Proとの接続用のUSB Type-C
があります。
当然、外部ディスプレイをDockに接続すれば良いと考えて接続しましたが、CalDigitのHDMIポート、Displayポートは、ミラーリングしかサポートしていません。
CalDigitのサイトのFAQには、USB Type-C1本ではミラーリングしかサポートできないのはMac Bookの仕様のようにあります。
このFAQを見つけるまでは、設定が悪いのだと思い込み、いろいろな設定を試しました。
最終的には、USB Type-C <--> HDMIの変換ケーブルを2つ用意して、Mac Book Proから直接外部ディスプレイに接続しました。
4Kの出力も問題ありません。
ハマったところ2
Windows10が必要なため、Bootcampアシスタントを使用して、SSDの半分はWindows10に割り振りインストールしました。
BootcampアシスタントのWifiドライバーでは接続できず調べたところ、
Here's what I did to get my MacBook to connect to an 802.11n 5ghz network:
Open device manager and right click -> properties on the Broadcom network adapter
Select the "Advanced" tab
Select the "Bandwidth Capability" item in the list
change the value to "11a/b/g:20mhz"
を見つけ、この通りに設定すると接続できました。
2017年1月21日時点では、新しいドライバーが配布されていたので直っているかもしれません。
Windows10でのクラムシェルでの使用
Windowsに切り替えてディスプレイの設定を行い、Mac Bookのディスプレイを閉じたところ
「スリープ」
してしまいました。
Windowsの電源管理で、電源に接続している場合「カバーを閉じたときの動作選択」で「何もしない」を選択するとクラムシェルで使えます。
USキーボードでの日本語入力の切替
Mac
Ctrl をコマンド
Commad をオプション
CapsLock をコントロール
に、「システム環境設定」→「キーボード」→ 「装飾キー」で入れ換えました。
これで、今までのWindowsと同じようにキーボード上の表記で
「Ctrl+C」でコピー
「Ctrul+V」で貼付
のショートカットが使えます。
日本語切替は、
をインストールすることで、スペースキーの左横Altキーで「英数」、スペースキーの右横Altキーで「かな」の切替ができます。
今までは、Alt+チルダでのトグル方式だったので、入力後に気づいて再度切替をしていました。
これは非常に便利になりました。
上記の「⌘英かな」をWindowsで使えるアプリがありました。
Altの空打ちで日本語入力(IME)を切り替えるツールを作った
www.karakaram.com
で、同じ操作で「英数」「かな」の切替が出来るようになりました。
現時点での問題点
外部ディスプレイを接続した状態でMacを起動しても外部ディスプレイを認識してくれません。
USB Type-Cを抜き差しすると、ようやく見つけてくれます。
ひとつのディスプレイは縦置きなので毎回設定しないといけません。
[追記]
Sierra 10.12.3にアップデートしてからは、USB Type-Cの抜き差しだけで、縦、橫、壁紙の設定が出来るようになりました。
以上、誰かの参考になれば幸いです。
El Capitanが出たのでクリーンインストール
[2015/10/3 追記あり]
本日、Mac OS X El Capitanがリリースされたので、クリーンインストールしました。
以前のYosemiteを導入してから、Windowsプロジェクトでの作業以外は、ずっとMacで作業しています。
8月の中旬に、Windows8.1を、Windows10+VS2015環境に移行したので、Mac側も本日、新環境に移行します。
ハードウェアの構成は、昨年と同じです。
米国西海岸時間の11時過ぎまで、App StoreではYosemiteが表示されていたのですが、11時30分前に見ると、「El Capitan」が来ていました。
早速、ダウンロード。
ダウンロードが完了すると、インストールが始まるので、インストールプログラムを終了させる。
で、USBドライブをMac Miniに刺して、フォーマット。
ターミナル上で、インストールメディアを作成。
コマンドは、
sudo /Applications/Install\ OS\ X\ El\ Capitan.app/Contents/Resources/createinstallmedia --volume /Volume/USBに付けた名前 --applicationpath /Applications/Install\ OS\ X\ El\ Capitan.app --nointeraction
です。
使用しているキーボードが「Realforce U86」なので、OptionキーならぬALTキーを押して再起動します。
ご存じの画面が出ますので、ここでDiskUtilityを選択して、メインのSSDをフォーマットします。
フォーマット完了後、El Capitanのインストールを行いました。
さすがに、Hardwareが全てApple製なので、問題無くインストールは完了しました。
ここからは、カスタマイズの始まり。
ちなみにRealforce U86のキー配列は、
これで、CtrlとCapsLockを入れ換えています。
Macに接続すると、
Mac Command → Windowsキー
Mac Ctrl → Ctrl
Mac Option → ALT
と、なります。
目的
・Windowsの操作が身に染みついているので、コピペなどは、Ctrl+Cなどで行いたい。
・入力時の日本語・英語切替を、右ALT+バッククォートで行いたい。
手段
・Seilを使用して、Mac Command ←→ Mac Ctrlを入れ換えます。
これで、WindowsPCと同じように、Ctrl+C、Ctrl+V、Ctrl+Xが使えます。
ただし、Terminalで走っているコマンドを止める場合は、Windowsキー+C
となりますが、これは我慢。
・Karabinerを使って、左ALT+バッククォートを、Mac Command+Spaceへ変換する。
使っているprivate.xmlは以下です。
<?xml version="1.0"?> <root> <item> <name>Switch JA to EN(ALT+Backquote(`) to Command + space</name> <identifier>option.private.switch.JA_to_EN</identifier> <autogen> __KeyToKey__ KeyCode::BACKQUOTE, ModifierFlag::OPTION_L, KeyCode::SPACE, ModifierFlag::COMMAND_L </autogen> </item> </root>
結果
Karabinerで、左ALT+バッククォート==> Mac Command+Spaceへ上手く変換できたが、なんとSpotLightが起動する。
仕方ないので、システム環境設定 > キーボード > ショートカットで、Spotlightを選択して、コマンド+スペースのチェックをハズしました。
AlfredのALT+Spaceで、十分Spotlightの替わりになるので問題はありません。
後は、ATOKインストール後に、入力ソースを「ひらがな」「英字」にすると、左ALT+バッククォートで、日本語・英語の切替ができました。
アプリケーション
セキュリティソフト
ESET Cyber Security Pro
日本語入力
ATOK 2016
エディタ
Sublime Text3
Atom
Visual Studio Code
Macを100倍便利にするユーティリティ
BetterTouchTool
Alfred2
Bartender
1Password
IDE
XCode 7
ここまでは、インストールできた。
ただ、Adobe Creative Cloudが、ダウンロード30%くらいから進まない。
何か問題あるのでしょうか?
これから使い込んでいきます。
とりあえず、人柱報告です。
[2015/10/3]
Adobeからは、El Capitanへのアップグレードを待てとアナウンスが出ています。
PC間でのアプリ設定の同期
誰も使用していなかったVAIOにWindows10をインストール出来たので、社内で占有宣言を行った。
そうなると社内だけでも
と、3台を使用している。
それぞれに同じような常用アプリがあるので、設定が同期できれば非常に使いやすくなる。
で、早速設定を同期。
ブラウザ
エディタ
5年前のVAIOにWindows10をインストールして現役復帰
Windows10が正式にリリースされたので、テストマシンにクリーンインストールしてみた。
特に何の問題も発生せず、すんなりと動いた。
ただ、実際に、使い込んでみるヒマはないので、
夏休みに遊んでみようと思い立った。
なんせ、夏休みなのに、ヒマ && 出かける気力なし && お金なしなので、
Windows10でヒマつぶしと考え、社内に放置されていた5年前のVaioを借りて休みに突入した。
2010年購入のVaio Z(VPCZ11)のスペックは、
- 128GBのSSD2つをRaid0構成で256GB
- 8GB Memory
- DVD Drive
(当時1600x900の画面は美しかった)
- Blue tooth
- SDカードスロット
- Merory Stick
- 内蔵カメラ
で、5年前だと相当先進的。
今だと、普通????
ドライバーがあるか調べてみたが、
別会社になったとは言え、Sonyさん曰く
で、このVaioについては、Windows10のDriverが出るみこみはないようです。
まあ、
・ヒマつぶしだし、
・最悪、どうにもならない場合はWindows7に戻す。
つもりで、トライしてみた。
2.キーの取得
クリーンインストールの場合、インストール中にキーの入力が必要だったので、
MSNDのサブスクリプションのページにアクセスして、Windows10のキーを取得した。
4.Windows10でブート。
ほとんどのハードウェアが問題無く動作してる・・・・・・
動いていないのは、
- Blue tooth
- NVIDIAのVideoドライバー
それ以外は、
- 内蔵のカメラ
など、問題なく動作した。
「Windows10、スゲー!!」
5.デバイスマネージャー
・黄色い三角のビックリマークがついているのは、
- ディスプレイアダプタ
- Microsoft標準ドライバ
- ほかのデバイス
- 基本システムデバイス
- 不明なデバイス
の3つだけ。
Videoドライバーは、nVIDIAと分かっているので、他の2つを右クリックして[プロパティ]-[詳細]-[ハードウェアID]で調べて見た。
6.nVIDIA
内蔵GPUよりは、性能が良いと思うので、Google先生に聞いてみた。
すると、先人がいらっしゃいました。
VAIO Z VPCZ1 のグラフィクス機能を Optimus Technology を用いて動かす。 | みむらの手記手帳
書いてある通りにやると、無事に「NVIDIA GeForce GT 330M」を認識しました。
いろいろと調べていただいて、本当にありがとうございます。
7.Blue tooth
Sonyのサポートページから、「 VAIO® Peripherals Metadata Update 」をインストールして、いろいろとやっていると、いつの間にかデバイスマネージャーの頭に例の、Bマークが出ていました。
設定のデバイスの追加で、Blue tooth ヘッドホンを探してみると、繋がりました。
以上で、使うハードウェアは全て認識されて、誰も触っていない5年前のVaioが甦りました。
Windows10のインストールが完了したので、必要なアプリケーションをインストールしてみました。
インストールしたアプリケーション
セキュリティソフト
- ESET Smart Security
日本語入力
- ATOK2015
エディタ
- Visual Studio Code
- Atom
- Sublime Text3
メディア再生
ターミナル
- RLogin
- Cmder
圧縮・解凍
- WinRAR
すべて問題無く動作しています。
最後に大失敗
Windowsと言えども、弄れるところは、いじりたい。
起動時のロック画面の背景は、設定から変更できる。
ただ、ログオン画面の背景が設定のどこにもない。
Google先生に聞いてみると、この画面はハードコードしているようで
Windows7のときのようなレジストリの書換ではムリなようです。
英語のサイトにしか情報がなかったのですが、
を使えとありました。
Githubにソースがあったので、クローンを作成してVSで開いてみました。
ざっと見たところ、やはりレジストリの書換だけでは対処できないようです。
VaioにVS2015をインストールする前だったので、コンパイルしてVaioに渡すのはメンドウと思い、
バイナリをダウンロードして、実行してみました。
使いたい画像ファイルを指定して、OKボタンをクリックするだけなので、簡単に終わりました。、
再起動すると、
ロック画面が1秒ほど出て、
ブラックアウト、
すぐにロック画面が出て、
また、ブラックアウト
を繰り返します。
日本語版とは、書き換える位置が違うのでしょうか?
仕方ないので、インストールUSBを刺して再起動後、
[コンピューターを修復する]-[トラブルシューティング]-[システムの復元]
を試して見ました。
nVIDIAのドライバーをインストールする前に、Windows10が自動で復元用のイメージを作成してくれていたようで、その時点まで戻ることができました。
日本語版を使っている人は、絶対に使わないように・・・・!