npm メモ
npm のコマンドを目的別にまとめています。 npm は gulp にしか使っていません。
コマンドにはエイリアスがたくさんあるので使いやすいものを選びましょう。
npm のコマンドについて調べる
npm-index
パッケージを探す
npm
install
プロジェクトにパッケージをインストール
$ npm install --save-dev package-name
パッケージをインストールし、 package.json に書き出します。 package.json を使うことで同じ環境構築が次から楽になります。
--save-dev を指定すると開発するときに依存するパッケージとして書き出します。替わりに --save を指定すると公開するときに依存するパッケージとして書き出します。例えばソースの圧縮のような開発するときにしか使わないものには --save-dev 、サーバサイドで使うものには --save を指定します。
複数の package-name をスペース区切りで指定してインストールすることもできます。
グローパルにパッケージをインストール
$ npm install -g package-name
-g を指定するとグローバル、何も指定しないとプロジェクトという意味になります。使い分けは、端末から直接コマンドを叩くときはグローバル、プロジェクト内の js から使うときはプロジェクトです。
プロジェクトが依存するパッケージをインストール
$ npm install
package.json 内のパッケージをすべてインストールします。 git clone の直後などに実行します。
ls
プロジェクトにインストールされている一覧
$ npm ls --depth=0
直接インストールした一覧が表示されます。--depth=0 を指定しないと、直接インストールしたパッケージが依存する大量のパッケージが表示されてしまいます。
グローバルにインストールされている一覧
$ npm ls --depth=0 -g
uninstall
プロジェクトからパッケージをアンインストール
$ npm uninstall --save-dev package-name
グローバルからパッケージをアンインストール
$ npm uninstall -g package-name
update
プロジェクトのパッケージをアップデート
$ npm install -g npm-check-updates
パッケージをアップデートしても package.json はアップデートされないようです。そのためコマンドをインストールします。
$ npm update
$ npm-check-updates -u
上記の２行のコマンドを実行すればパッケージと package.json がアップデートされます。一行目はいらないかもしれません。
グローバルのパッケージをアップデート
$ npm update -g
completion, config
$ npm completion
補完が効くようです。 Windows では動かないので試していません。
$ npm config ...
npm の設定が変更できます。デフォルトで使っています。
Fit Win の新しいバージョンを公開しました！
ここでは技術的なことを書きます。 Fit Win の詳細は下記 URL をご覧ください。
Fit Win - ウィンドウを移動・サイズ変更するフリーソフト
開発言語は C#/Slim(HTML5)/Stylus(CSS3)/CoffeeScript(JavaScript) です。ただ本ソフトは Web アプリではありませんし通信もしません。デスクトップアプリなのです。C# のフォーム上に WebBrowser をのっけてその上で HTML5 アプリを動作させています。なぜそんなまわりくどいことをしたのかというと本ソフトがドラッグ＆ドロップを多用したり、複雑な描画を行うリッチ GUI アプリだからです。実際 C# のみで書いた過去のバージョンに比べて、本バージョンのコード行数は３分の２に減っています！適切な言語選択の重要性を痛感しましたね。（ XAML 使えよってツッコミが入りそうですが使ったことないんですよね。 CSS 並の表現力と jQuery 並の DOM 操作力はあるんでしょうか？）
IE12 で HTML5 たくさん実装されないかなー、でもって Windows 7 にもインストールできないかなー。技術的なことって何書いたらいいのかわからないのでコメントいただければ書くやもです。
最後に本ソフトの開発環境である HTML5/CSS3/JavaScript on C# WebBrowser のメリット・デメリットです。
メリット
- デスクトップアプリなのに HTML5/CSS3/JavaScript を使ったリッチ GUI アプリを作れる
- JavaScript でセキュリティ上不可能なことができる
デメリット
- 一般的ではなく、情報が少ない
- C# から JavaScript の関数を呼んだり、 JavaScript から C# のメソッドを呼んだりと見通しが悪い
- WebBrowser のデフォルトの挙動（ショートカットやコンテキストメニュー）の部分的な無効化がバッドノウハウのかたまりになってしまった
マウスカーソルには２つの意味がある
状態を表すマウスカーソル
PC がフリーズしているときの待ちアイコンや、ペイントソフトの鉛筆や消しゴムアイコンのことです。これらのアイコンは PC やソフトの状態に応じて変化し、ユーザがマウスアクションするとどのような効果が起こるのかユーザに伝えます。そのためこれらを適切に設定するとわかりやすくなります。
要素を表すマウスカーソル
マウスポインタがボタンやリンクの上にあると手のアイコンに、テキストエリアの上にあるとキャレットアイコンになります。このような周りと異なるインターフェースを持つ要素の上のマウスカーソルのことです。これらはマウスポインタを要素の上に移動して初めてアイコンがわかります。つまり適当にマウスを振り回してたまたまホバーしたり、リンクの上にたしかに乗っているかを確認するぐらいでしか役に立ちません。
まとめ
C# で SetWindowsHookEx() を使うと Form がフリーズするのをごり押す
C# でマウスグローバルフックを使うと Form がフリーズします。
c# - SetWindowsHookEx and clicking minimize/maximize/close buttons on form freezing - Stack Overflow
C# から直接呼び出しても、 C++ で DLL を作って呼び出してもフリーズしたので C# でグローバルフックを使えるといっても Form との併用はできないのかと思っていましたがごり押しで動いてしまいました。
やり方は fork もどきをして自身のプロセスを２つ起動します。そして１つ目でフォームを作り、2つ目でグローバルフックをするです。１つ目が２つ目を起動するときに自身のハンドルをコマンドライン引数で渡して、２つ目が１つ目と通信したいときにはそのハンドルに PostMessage() します。片方が死んだときにもう片方を殺すのを忘れないでください。
あまりにごり押しなのでコードは載せません。
Undo の設計 - 元に戻す・戻さない操作の違い
例えばテキストエディタに文字を入力してから元に戻すと、入力した文字は消える。しかしテキストエディタでスクロールしてから元に戻しても、スクロールは戻らない。当たり前かな？じゃあコードの折りたたみはどうだろう？答えはどちらもで、 Visual Studio は元に戻るし、 Sublime Text は元に戻らない。つまり Sublime Text でコードを折りたたんだ後で折りたたみを解除しようとしたら、その直前に入力した文字が消えてあわててやり直す（ Ctrl + Y ）ことになる。大変よくない。
これはほんの一例だが元に戻す操作と元に戻さない操作の違いは不明瞭だ。この辺りをネットで調べようと思っても Undo の実装しか引っかからない（それはそれで大事なのだが）。仕方がないので自分で書く。なのでこの辺りに詳しいサイトや書籍をご存知でしたら教えてください。
元に戻す操作と元に戻さない操作の違いが明瞭になると何が嬉しいのか？
ユーザの予想が効く
文字の入力は元に戻りそうだから Ctrl + Z 、スクロールは元に戻らなさそうだから逆スクロール、のような予想の効く操作が増え、とりあえず Ctrl + Z してみて駄目だったら Ctrl + Y するような残念な UI が減る。
Undo は PC 初心者でもわりと使うショートカットなのでユーザ全体の使い勝手が向上する。馬鹿にできない。
開発が楽になる
昨今のリッチなソフトウェアにおいて Undo 機能は必須だが売りにはできない空気のようなものだ。そんなもののために元に戻すか戻さないかで悩まなくてすむ。
あれ？スマホアプリや Web サービス全盛の時代にこの話関係なくない？スマホアプリは関係ないかもしれない。しかし遠い将来、少なくない数の Web サービスが PC Twitter クライアントのようにブラウザ上ではなく OS 上で動くかたちになっているはずだ（なっていてほしい）。Web サービスを使うにはブラウザをアクティブにしてからタブを切り替えるなど２度手間だし、ブラウザに奪われてショートカットも満足に使えないし、うんざりである。Web サービスはどの OS でもどのスマホでも動くクロスプラットフォームだからって安易に量産されすぎだ！開発者の怠慢だ！
元に戻す操作と元に戻さない操作のパターン
ファイルの内容が変更される操作を元に戻せるようにする
先の例だがテキストエディタに文字を入力するとファイルの内容が変更される。しかしスクロールしても見え方（ソフトウェアの状態）が変わるだけでファイルの内容は変更されない。このパターンに従うとコードの折りたたみは元に戻らないことになるが、私は元に戻るほうが便利だと思う。
元に戻すコストが大きい操作もしくは不可逆な操作を元に戻せるようにする
文字列を Backspace 押しっぱなしでガーッと消した後に Ctrl + Z なしに元に戻すのは手間である。またコードの折りたたみも押しやすいショートカットが割り当てられていることは少なく元に戻しづらい。だから元に戻せるようにする。しかし Visual Studio の出力のクリアなどは元に戻せなかったりする。
メインコンテキスト上の操作を元に戻せるようにする
Visual Studio の出力のクリアなどを元に戻せるようにするとひとつ困ったことが起こる。それはエディタ上で Undo するとエディタが元に戻り、出力上で Undo すると出力が元に戻るため、エディタを元に戻したいのに出力上で Undo してしまうことだ。そのためメインコンテキストであるエディタだけ元に戻せるようにし一貫性を保つことでユーザが混乱しなくてすむようにする。しかし別のコンテキスト上のインプットボックスも元に戻せたりする。
ユーザが元に戻したいと思う操作を元に戻せるようにする
ここまで譲歩して都合のよい解釈をしても駄目だ。 Visual Studio の定義へ移動という機能があるがこれは Ctrl + Z では元に戻らない。しかしページ遷移専用の元に戻るとも言うべき前に戻る（ Ctrl + - ）で元に戻る。つまり Ctrl + Z には一定の基準がありそれにあぶれつつも元に戻したい操作には別の元に戻るコマンドを新たに作らないといけないらしい。
すべての操作を元に戻せるようにする
Ctrl + Z を連打することになってしまう。
まとめ
複雑すぎてまとめきれなかった。元に戻す操作か元に戻さない操作か迷っている方の参考なれば嬉しいです。
Windows 10 未満のコマンドプロンプトを Ctrl + V で貼り付け
Windows 10 でコマンドプロンプトが使いやすくなるみたいですね。 Windows 10 ほどではありませんが既存の Windows のコマンドプロンプトを Ctrl + V で貼り付けができるようにし、少しだけ使いやすくする方法を紹介します。
汎用キーバインディング変更ソフトである yamy を使います。
Yet Another Mado tsukai no Yuutsu プロジェクト日本語トップページ - SourceForge.JP
こちらのページからダウンロードして解凍します。インストールは不要ですので yamy.exe を実行します。
次に設定ファイルを作成して、拡張子を .mayu とする適当な名前で保存します。 # 以降の行はコメントになるので、お使いのキーボードに合わせて１行目・２行目いずれかをコメントアウトしてください。
include '109.mayu' # 日本語キーボード # include '104.mayu' # 英語キーボード window CommandPrompt /ConsoleWindowClass/ : Global key C-V = A-Space E P
最後にタスクトレイにある yamy アイコンを右クリックして設定・追加・参照の順にクリックして先ほど作成した設定ファイルを指定します。これで設定は終了です。
実際にコマンドプロンプトを起動して Ctrl + V してみると貼り付けができると思います。
yamy は応用が効き様々なことができるのでおすすめです。
