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つのファイルをプロジェクトへ追加します。

  1. プロジェクト内へTinyMceフォルダを作成
  2. 表示用HTMLファイルをtinymce.htmlで追加
  3. 日本語ローカライズファイルをlangsフォルダを作成し、ja.jsとして追加

f:id:kz1114inazuma:20190724084044p:plain
ソリューションエクスプローラ

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. 表示の確認

 デバッグモードで開始し、表示を確認します。

f:id:kz1114inazuma:20190724084745p:plain
TinyMCEを表示

C#:webBrowserコントロールの代替にChromiumベースのコントロールを使う

webBrowserコントロールの終焉

 WPFは使ったことがないので、Windows Formに限った話です。

 C#に同梱されているwebBrowserコントロールは、ベースがIE7です。Windowsレジストリを変更することで、IE11をエミュレートすることはできますが、最近はIE11でさえ対象ブラウザから切り捨てられています。

 そのため、最新のCSSjavascriptを使ったページでは、表示や動作に問題が出ます。

Chromiumベースのコントロール

 Chromiumは、Google Chromeオープンソース版であり、あのMicrosoft社でさえ、次期Microsoft Edgeは、Chromiumベースにすると表明しています(Microsoft EdgeYoutubeを表示すると遅くなったりなど、意地悪されたらしい--噂--)。

 本家のMicrosoft社からも、新しいBrowserコントロールのお知らせもあります。

 また、Microsoft EdgeベースのwebBrowserコントロールもありますが、配布先がWindows10 1803以降でないと動作しないため、それ以前のWindowsだと使えません。

 現時点(2019/07/23)で現実的な解は、ChromiumベースのwebBrowserコントロールであると考えています。Windows Form用、WPF用ともに用意されていますし、nugetパッケージで配布されているため、導入も簡単です。

cefSharpのインストール

 まずは、新規プロジェクトを作成し、「nugetパッケージの管理」から以下をインストールします。

f:id:kz1114inazuma:20190723075614p:plain
cefSharp nuget


 上記をインストールすることで、32bit用、64bit用ともがインストールされます。


f:id:kz1114inazuma:20190723075644p:plain
cefSharp nuget after install

32bit/64bit CPUに対応させる

 cefSharp 51からは、32bit/64bitのどちらのWindowsに対しても、読み込むchrmiunを変更することで対処できるようになりました。

 ただ、そのためには、
 一度プロジェクトを閉じ、プロジェクトフォルダ/プロジェクト名.csprojに以下を追加します。

 最初の<PropertyGroup>の最後に

<CefSharpAnyCpuSupport>true</CefSharpAnyCpuSupport>

を追加します。

f:id:kz1114inazuma:20190724081910p:plain
csprojファイルを変更


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();
        }
    }

f:id:kz1114inazuma:20190723092140p:plain
sample cefSharp Yahoo!Japan

Mac Book Pro 2016 環境設定

Mac Book Pro 2016 + マルチディスプレイ

 狙っていたのですが、

  

  • Mac Book Proがフルモデルチェンジした
  • プロジェクトが完了した

ので、頼み込んで決済を通してもらった。


 購入いただいたのは、

  Mac Book Pro 15 Core i7 2.6GHz 1TB Radeon 460(4GB)

 これを以下の環境で使うようにしました。
f:id:kz1114inazuma:20170124100419j:plain

ハマったところ

CalDigitのUSB Type-c Dockには、

  • 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キーボードでの日本語入力の切替

 MacWindowsとも操作を同じにしたいので、


 Mac
  Ctrl をコマンド
  Commad をオプション
  CapsLock をコントロール

  に、「システム環境設定」→「キーボード」→ 「装飾キー」で入れ換えました。


  これで、今までのWindowsと同じようにキーボード上の表記で

  「Ctrl+C」でコピー
  「Ctrul+V」で貼付

  のショートカットが使えます。



 日本語切替は、

  ⌘英かな

 をインストールすることで、スペースキーの左横Altキーで「英数」、スペースキーの右横Altキーで「かな」の切替ができます。

 今までは、Alt+チルダでのトグル方式だったので、入力後に気づいて再度切替をしていました。

 これは非常に便利になりました。



 Windows

  上記の「⌘英かな」を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側も本日、新環境に移行します。

ハードウェアの構成は、昨年と同じです。

f:id:kz1114inazuma:20141122084856p:plain


米国西海岸時間の11時過ぎまで、App StoreではYosemiteが表示されていたのですが、11時30分前に見ると、「El Capitan」が来ていました。


早速、ダウンロード。


ダウンロードが完了すると、インストールが始まるので、インストールプログラムを終了させる。


で、USBドライブをMac Miniに刺して、フォーマット。
f:id:kz1114inazuma:20151001114951p:plain

ターミナル上で、インストールメディアを作成。
f:id:kz1114inazuma:20151001120025p:plain


コマンドは、

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のキー配列は、f:id:kz1114inazuma:20151002115919p:plain

これで、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

ブラウザ

  Firefox
  Chrome
  Safariは、入ってる

Cloud

Dropbox
Evernote
OneDrive
Microsoft Remote Desktop

エディタ

  Sublime Text3
  Atom
  Visual Studio Code

Office

  Office2016 Mac版はAccessがない。

Macを100倍便利にするユーティリティ

  BetterTouchTool
Alfred2
Bartender
1Password

IDE

XCode 7


ここまでは、インストールできた。


ただ、Adobe Creative Cloudが、ダウンロード30%くらいから進まない。
何か問題あるのでしょうか?


これから使い込んでいきます。


とりあえず、人柱報告です。


[2015/10/3]

Adobeからは、El Capitanへのアップグレードを待てとアナウンスが出ています。

Audition CC and OSX 10.11 (El Capitan)

PC間でのアプリ設定の同期

誰も使用していなかったVAIOにWindows10をインストール出来たので、社内で占有宣言を行った。

そうなると社内だけでも

と、3台を使用している。

それぞれに同じような常用アプリがあるので、設定が同期できれば非常に使いやすくなる。


で、早速設定を同期。

ブラウザ

Chrome

 これは、Googleアカウントを使えば拡張機能やBookmarkまで簡単に同期できる。


 ただ、拡張機能の設定は同期できないので、DropboxにSyncフォルダを作成して、Chrome/拡張機能名フォルダへ設定を書き出す。


 設定の書き出せない拡張機能は、Windows
C:\Users\ユーザ名\AppData\Local\Google\Chrome\User Data\Default\Extensions
 にあるフォルダを、ひとつづつ開けて、バージョン番号などから推理して、Dropboxへコピーした。

Firefox

FirefoxにはSyncと言う仕組みが提供されているので、アカウントを作成して、同期。

 AddOnやテーマも同期できた。

 テーマなどの有効可は個別に必要。

エディタ

Sublime Text

Syncing - Package Control

を参考にDropboxを使って同期。

Packageだけではなく、ユーザ設定なども同期。

Atom

webmem.hatenablog.com

こちらで完璧。

FTP

Filezilla

ファイルメニューにある設定のエキスポート、インポートで同期。

プロジェクト

Gitレポジトリからの同期でOK。


これで、Macを含む3台のPCで同じ使い勝手を実現出来て幸せになれた。

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さん曰く


www.gizmodo.jp


で、このVaioについては、Windows10のDriverが出るみこみはないようです。



まあ、

・ヒマつぶしだし、
・最悪、どうにもならない場合はWindows7に戻す。

つもりで、トライしてみた。

1.インストールメディア作成

Windows 10

で、USBのインストールメディアを作成した。

2.キーの取得

クリーンインストールの場合、インストール中にキーの入力が必要だったので、
MSNDのサブスクリプションのページにアクセスして、Windows10のキーを取得した。

3.インストール

USBをVaioに刺して、ブート。
SSDをフォーマットして、クリーンインストール

大して時間がかからず、完了。

4.Windows10でブート。

ほとんどのハードウェアが問題無く動作してる・・・・・・

動いていないのは、

  • Blue tooth
  • NVIDIAのVideoドライバー


それ以外は、

  • 内蔵のカメラ
  • 指紋認証センサ
  • タッチパッド
  • SDカードスロット
  • Intelの内蔵GPUで1600x900表示
  • イーサーネット
  • USB

など、問題なく動作した。


「Windows10、スゲー!!」

5.デバイスマネージャー

・黄色い三角のビックリマークがついているのは、

  • ディスプレイアダプタ
  • ほかのデバイス
    • 基本システムデバイス
    • 不明なデバイス

の3つだけ。


 Videoドライバーは、nVIDIAと分かっているので、他の2つを右クリックして[プロパティ]-[詳細]-[ハードウェアID]で調べて見た。

基本システムデバイスは、

PCI\VEN_1180&DEV_E230&SUBSYS_905A104D&REV_00

で、RicohのMemory Stick用だと判明。Memory Stick持っていないのでパス。

不明なデバイスは、

ACPI\SNY5001\4&17D680D6&0

で、「SNY5001 is the 'Sony Notebook Control Driver' which is part of the driver called "SFEP" - Sony Firmware Extension Parser.」らしい。


この2つについては、Sonyのサポートページから、Winodow7 64bit用Driverをダウンロードしてインストールしてみたが、ダメでした。

6.nVIDIA

内蔵GPUよりは、性能が良いと思うので、Google先生に聞いてみた。

すると、先人がいらっしゃいました。

tonojie.hatenadiary.jp

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
ブラウザ

ディフォルトは、Egeのままで、

クラウド関連

One Driveは入っていたので、

エディタ
開発関連
IDE
  • Visula Studio 2015
  • Eclipse
  • PhpStorm
  • Pycharm
メディア再生
ターミナル
  • RLogin
  • Cmder
圧縮・解凍
  • WinRAR


すべて問題無く動作しています。


最後に大失敗

Windowsと言えども、弄れるところは、いじりたい。

起動時のロック画面の背景は、設定から変更できる。
ただ、ログオン画面の背景が設定のどこにもない。


Google先生に聞いてみると、この画面はハードコードしているようで
Windows7のときのようなレジストリの書換ではムリなようです。

英語のサイトにしか情報がなかったのですが、

github.com

を使えとありました。


Githubにソースがあったので、クローンを作成してVSで開いてみました。
ざっと見たところ、やはりレジストリの書換だけでは対処できないようです。


VaioにVS2015をインストールする前だったので、コンパイルしてVaioに渡すのはメンドウと思い、
バイナリをダウンロードして、実行してみました。

使いたい画像ファイルを指定して、OKボタンをクリックするだけなので、簡単に終わりました。、


再起動すると、

 ロック画面が1秒ほど出て、
 ブラックアウト、
 すぐにロック画面が出て、
 また、ブラックアウト

を繰り返します。


日本語版とは、書き換える位置が違うのでしょうか?


仕方ないので、インストールUSBを刺して再起動後、
[コンピューターを修復する]-[トラブルシューティング]-[システムの復元]
を試して見ました。

nVIDIAのドライバーをインストールする前に、Windows10が自動で復元用のイメージを作成してくれていたようで、その時点まで戻ることができました。


日本語版を使っている人は、絶対に使わないように・・・・!


まとめ

以前だと、新しいWindowsが出ると、それまで使っていたPCにインストールすると性能不足で使えなかった。

CPU、Videoカードやストレージのスピードなど、4~5年前のPCはリプレース対象でしかなかった。
でも、今回は、5年前のNotePCが、何のストレスもなく使えている。

ムーアの法則も限界か・・・・

いまさら聞けない「log4net」の使い方

新人君も4ヶ月近く当社での経験を積んだので、成長の証にLog4netをプロジェクトへ導入する手順を書かせた。



ソリューションへNugetを使って、Packageをインストール

メニューの
 ツール > Nugetパッケージ マネージャー > ソリューションのNugetパッケージ管理

から、オンラインで「log4net」を検索して、該当プロジェクトへインストールする。

#設定ファイルをAssemblyInfo.csへ記述

該当プロジェクトの
 Properties > AssemblyInfo.csを開いて

//Log4Net設定ファイルを指定
[assembly: log4net.Config.XmlConfigurator(ConfigFile = "./設定ファイル名.xml", Watch = true)]

プログラム開始時に、Log4netの設定ファイルの読込ませる

該当プロジェクトのProgram.csに

//アプリケーションのグローバル変数設定
string logFolderName = ログ書込用フォルダのPath;
Environment.SetEnvironmentVariable("グローバル変数名", logFolderName);

//Log4net設定ファイルを読込
//設定ファイルは、AssembleInfo.csへ記述済み
XmlConfigurator.Configure();

Log4netの設定ファイルを作成

AssemblyInfo.csに記述したPathへ、設定ファイルを作成する。

設定
 appender ログを出力するモジュール相当 用意されているタイプを設定
・コンソール
  ・ファイル
 など。

   appenderへ
    ・layout
・File名(Path含む)
    ・日付フォーマット
    ・ファイル切替
   などを設定

<?xml version="1.0" encoding="utf-8" ?>
<configuration>
  <log4net>
    <!-- コンソール出力用 (VS 上 [出力] ウインドウへの出力) -->
    <appender name="ConsoleAppender" type="log4net.Appender.ConsoleAppender">
      <!-- 出力文字列のフォーマット -->
      <layout type="log4net.Layout.PatternLayout">
        <param name="ConversionPattern" value="@%-5level&gt;&gt; %message%newline" />
      </layout>
    </appender>

    <!-- 通常ログ:単一ファイル出力 -->
    <appender name="InfoLogDailyAppender" type="log4net.Appender.RollingFileAppender">
      <!-- ファイル名は日付ごと グローバル変数名で設定したフォルダのLogs¥Info_yyyyMMdd.logで出力-->
      <param name="File" value="${グローバル変数名}\Logs\Info_" />
      <param name="DatePattern" value='yyyyMMdd".log"' />
      <param name="RollingStyle" value="date" />
      <param name="StaticLogFileName" value="false" />

      <AppendToFile value="true" />

      <filter type="log4net.Filter.LevelRangeFilter">
        <param name="LevelMax" value="Error" />
        <param name="LevelMin" value="Trace" />
      </filter>

      <layout type="log4net.Layout.PatternLayout">
        <ConversionPattern value="%date [%-5level] - %message%n" />
      </layout>
    </appender>

    <!-- エラーログ:分割ファイル出力 -->
    <appender name="ErrorLogDailyAppender" type="log4net.Appender.RollingFileAppender">
      <!-- ファイル名は日付ごと -->
      <param name="File" value="${グローバル変数名}\Logs\Error_" />
      <param name="DatePattern" value='yyyyMMdd".log"' />
      <param name="RollingStyle" value="date" />
      <param name="StaticLogFileName" value="false" />

      <param name="AppendToFile" value="true" />

      <filter type="log4net.Filter.LevelRangeFilter">
        <param name="LevelMax" value="FATAL" />
        <param name="LevelMin" value="Warn" />
      </filter>

      <param name="MaximumFileSize" value="10MB" />
      <param name="MaxSizeRollBackups" value="10" />

      <layout type="log4net.Layout.PatternLayout">
        <ConversionPattern value="%date [%-5level] %class %method - %message%n" />
      </layout>
    </appender>

    <root>
      <!-- 使用する Appender -->
      <appender-ref ref="ConsoleAppender" />
      <appender-ref ref="InfoLogDailyAppender" />
      <appender-ref ref="ErrorLogDailyAppender" />
    </root>

  </log4net>
</configuration>

以上で設定は完了。

Logを出力

クラスに

//log4net
private static readonly log4net.ILog logger = log4net.LogManager.GetLogger( System.Reflection.MethodBase.GetCurrentMethod().DeclaringType);


ログ出力したいところで

 logger.Info("XXX完了");
 logger.Error("XXXX発生");


で、それぞれ、Info、Errorログが出力される。