ライブコーディングを補助するためのツール

早いもので、もう 2011 年も終わりですね。

年末年始になると新年会や忘年会、クリスマス・パーティーというように、何かと集まりごとが増え、おのずとライブ・コーディングを披露する機会も多くなってくると思います。

マイクロソフトでは、Visual Studio や Expression Web といった、HTML と JavaScript、およびCSS に対し強力な入力支援機能を持った製品をリリースしておりますので、それらを使用してライブ・コーディングを行うぶんにはそれほど苦労することはないでしょう。

しかし、現在の WebMatrix(※) や、テキストエディターでコーディングを行おうとすると、自力でコードをタイプしていく必要があります。

(※) WebMatrix 2 からは HTML5, CSS, JavaScritp に入力支援機能(インテリセンス)が提供されます。

タイプのスピードが猛烈に早く、技芸と呼べるほどの速度でコードを記述することができるのであれば、観客を退屈させずに済むでしょうが、そういった芸当は誰にでもできるというわけではありません。

また、そういたタイプの達人といえども SVG や Canvas で使用する数値データを、ミスすることなく短時間で記述していくことはほぼ不可能といってよいでしょう。

そういった問題にある程度の解決策を提供すべく、簡単な入力支援用のツールを作成しましたのでシェアさせていただきます。

ちなみに、このツールは、先日「HTML5 プログラミング生放送勉強会 第11回＠大阪」に登壇させていただく際、デモで使用する MebNatrix2 のコードスニペット プラグインが、β 段階のためか、動作しなくなってしまい、同様の機能を持ったツールを、大阪行きの新幹線の中で作成したものに設定機能を追加したものです。

名前は特にありませんが、ここで「スニペットツール」という表記を使用してアプリケーションの機能説明を行いたいと思います。

 

スニペットツールについて

スニペットツールは、アプリケーションのメニューを介して、あらかじめ用意しておいたテキストファイルの内容をクリップボードにコピー、または、任意のアプリケーションのエディター画面に貼り付けを行うものです。

スニペットツールが Window ハンドルを取得することのできるアプリケーションであれば、アプリケーションに対し貼り付けを行うことができます。

Windows ハンドルが取得できない場合は、クリップボードにデータを送ったままにしますので、アプリケーション側で貼り付けを行うことができます。

 

ダウンロードは以下から行ってください。

 

実行ファイルと設定ファイルのみ

ソースコード

(※) Windows 7 上の Visual Studio 2010 + .NET Framework 4.0 で作成していますが、.NET Framework 4.0 固有の機能は使用しておりませんので、ソースを貼りなおせば古い Visual Studio でもコンパイル可能です。

 

インストールの準備

.NET Framework 4.0 がインストールされていることを確認してください。

なお、.NET Framework 4.0 は以下から入手することができます。

 

.NET Framework 4 ダウンロード
https://www.microsoft.com/ja-jp/net/netfx4/download.aspx

 

インストール

snippets.zip を解凍し、以下の 2 つのファイルを同じフォルダーに配置してください。

Snippets.exe
Snippets.exe.config

次に Snippets フォルダをマイドキュメント (Windows 7 では 「ドキュメント」) にコピーします。

Snippets フォルダにはサンプルのスニペット用テキストファイルが含まれています。

以上でインストールは完了です。

アプリケーションを起動するには Snippets.exe をダブルクリックします。

 

スニペットツールを既定の状態で使用してみる

スニペットツールの既定の設定では、テキストファイルの内容をメモ帳に貼り付けを行うように設定されているので、メモ帳 (notepad) を起動します。

その後、Snippets.exe をダブルクリックしてスニペットツールを起動します。

スニペットツールは、起動時に貼り付け先の Window ハンドルを取得しにいくので、アプリケーションを先に起動しておく必要があります。

アプリケーションを後から起動した場合は、後述する設定ダイアログを表示して [OK] ボタンをクリックすることで、貼り付け先アプリケーションを認識させることができます。

スニペットツールが起動したら [★] マークをクリックし、メニュー [1.このアプリケーションについて]を選択してください。

あらかじめ起動しておいたメモ帳に文字列が貼り付けられるのを確認してください。

 

メニューを編集するには

マイドキュメント下の Snippets フォルダにテキストファイルを追加するか、既存のファイルを削除、あるいは編集します。

スニペットツールのメニューに表示されているのは、マイドキュメント下の Snippets フォルダ内にあるテキストファイル名から拡張子を除いたものであり、メニューをクリックして貼り付けられるのは、選択されたファイルの内容になります。

この使用は WebMatrix 2 のコードスニペットプラグインと共通です。

 

設定を変更するには

[★]マークの上で、マウスの右ボタンをクリックし、表示されたコンテキストメニューから [設定] を選択します。

[設定] ダイアログボックスが表示されるので、任意の設定を適宜行います。

① : メニューに表示させるテキストファイルが格納されているフォルダまでのパス
② : アプリケーションに貼り付けを行うかどうかのチェック 
      チェックを外すと、テキストファイルのデータはクリップボードにのみ送られます
③ : ウィンドウハンドルの取得をプロセス名で行うかキャプションで行うかのチェック
      アプリケーションを複数起動している場合、[プロセス名] でウィンドウの検索を行うと、
      一番最初に検出された同じプロセス名のウィンドウに貼り付けを行います。
      貼り付け対象となるウィンドウを明示的に指定したい場合は、[ウィンドウ キャプション] を
      指定します。
④ : 貼り付け対象となるアプリケーションのプロセス名か、ウィンドウキャプションを指定します
     なお、プロセス名を指定する際は、拡張子 (exe) は含めないでください。

 

以上で、スペットツールの説明は完了です。

機能の追加やデバッグ等は、ソースをダウンロードして各自自由に行っていただければと思います。

それでは皆様、また来年。

良いお年を。

 

 

Comments

• Anonymous
  December 26, 2011
  5段落目と9段落目をそれぞれJavaScript、WebMatrixに直しましょう♪

• Anonymous
  January 04, 2012
  The comment has been removed