windows_同一プロセス内のメッセージボックスを変更してみる

windowsの環境でsetWindowHookExを使って同一プロセス内のメッセージボックス表示の処理をhookし内容を変更できるようにしたいと思います。別のソフトでのメッセージボックス表示内容を変更できるようになったら面白そうですが、まずは同一プロセス内のメッセージボックスに対して変更できるようになりたいと思います。

プロジェクトはvisual c++で作成します。
MsgBoxをhookする部分のファイルはいかのようになりました。

windows_LowLevelKeyboardProcでキーボード入力をフックしてコードを変更してみる

Windows環境 LowLevelKeyboardProcで入力されたキーコードを変更する

LowLevelKeyboardProcはwindows環境でsetWindowsHookEx関数と併用してキーボード入力があったときに呼び出されるコールバック関数になります。アクティブなウィンドウがなにかにかかわらずコールバックで呼び出されるので、これを利用して入力されたキーコードを変更するいたずらを実行してみたいと思います。

visual c++のフォームプロジェクトを作成して、以下の手順で修正します。

webpack入門_hot-module-replacement

前回はwebpack-devserverで開発ができるようになりました、今回はwebpack-devserverでの開発中にhot-module-replacementでファイルの修正を検出してhot reloadできるようにしたいと思います。

webpack.config.jsには以下の修正を加えます。
- devServerにhot: trueの項目の追加
- pluginsにmnew webpack.HotModuleReplacementPlugin()を追加

webpack入門_開発サーバ

前回はbiuldしてhtmlファイルを出力できるようになりました。今回は開発用サーバを使って毎回ビルドしないでも修正内容を確認できるようにしたいと思います。

公式のドキュメントでは開発用にwebpackをwatchモードで起動したり、webpack-dev-server,webpack-dev-midlewareを使うとありますが、webpack-dev-serverがこの中では一番高機能なのでこれを試してみたいと思います。webpack-dev-serverの後継としてwebpack-serverが出ていますが、まだ情報も少なさそうなのでまずはwebpack-dev-serverに慣れていみたいと思います。

webpack入門_html-webpack-plugin

前回に引き続き、今回はbuildでhtmlを出力できるようにしたいと思います。使用するライブラリはhtml-webpack-pluginでbuildの時に必要になるものなので以下のコマンドを実行します。

npm install --save-dev html-webpack-plugin

それからwebpack.config.jsにhtml-webpack-plugin関連の内容を追加します。

webpack入門_asset management

前回に引き続き今回はassetファイルを扱いたいと思います。

cssファイルの読み込み

以下のコマンドでcssファイルを読み込めるようにします。

npm install --save-dev style-loader css-loader

以前は--save-devではなく--saveを利用しましたが、--save-devは開発時に必要になるテスト用ライブラリやlinter,ファイルのローダーなどで--saveはビルド後の生成物に含める必要があるライブラリを指定します。
それからwebpack.config.jsのrulesを修正し、以下のようにします。

webpack入門_Getting Started

このところのjavascriptは発展が著しくECMAscript6が出たりAngularやReact,vueといったフレームワークが登場しています。新規の開発であればこれらの導入を検討しても良さそうですがビルドツールなどの環境整備の情報がまとまっていなかったりしてその分敷居が高くなっているような気がします。
最近はVue.jsが人気のようですがクライアントツールであるvue-cliを使った開発環境の構築が容易であったりしてその分敷居が低くなっているのにも助けられているように思っています。
今回は代表的なビルドツールであるwebpackの公式ドキュメントを触りながら試してみたいと思います。

事前にnodeとnpmはインストールしておく必要があります。