Windowsバッチファイルのひな形を生成するジェネレーターを作ってみた
よく、CSSジェネレーターとか、HTMLジェネレーターとか、ボタンジェネレーターとか、アイコンジェネレーターのページを見かけることがあります。特に、アイコンジェネレーターは、急にアイコンが欲しくなった事があり、大変重宝した覚えがあります。インストールレスで手軽に使えることが嬉しかったですね。
そんなジェネレーターを自分で作ってみたいと思いました。簡単なところから、Windowsのバッチファイルのひな形を生成するようなジェネレーターを題材にしました。個人的に、使い捨てになるようなバッチファイルを書く機会が時々あり、ひな形があればいいのにと思っていました。
作成したジェネレーター
作成したジェネレーターは、次のURLで公開しました。名前は「Windowsバッチファイルジェネレーター」です。そのまんまです。
現状では機能が少ないですが、今後、必要に応じて、作り込んで行けばいいかなと思います。コメント欄にご要望頂ければ、対応したいとも考えています。
作成方法
使用した技術は、HTML, CSS, JavaScript, jQuery, Windowsバッチコマンドです。特に難しいことはなく、作る上でのポイントも特になく、淡々と作る感じでした。以下、ざっくりとした作成手順です。
１．Twitter Bootstrapひな形準備
必須ではありませんが、多少見た目を良くするために、Twitter Bootstrapを使いました。次のサイトからダウンロードしました。HTMLのひな形には、「Getting Twitter Bootstrap」ページで取得できる「Starter template」（starter-template.html）を使いました。
ダウンロードしたファイルを、自分の環境に配置して、次のような構成にしました。
winbatchgen/ ├── assets/ │ ├── css/ │ │ ├── bootstrap-responsive.css │ │ ├── bootstrap-responsive.min.css │ │ ├── bootstrap.css │ │ └── bootstrap.min.css │ ├── img/ │ │ ├── glyphicons-halflings.png │ │ └── glyphicons-halflings-white.png │ └── js/ │ ├── bootstrap.js │ ├── bootstrap.min.js │ └── win_batch_gen.js ※とりあえず空ファイルを作成 └── www/ └── win_batch_gen.html ※starter-template.htmlをリネーム
２．画面の見た目を作成
上記１で作成したひな形（win_batch_gen.html）に、必要な部品をコーディングしました。Windowsバッチファイルの生成内容を切り替えるための、テキストボックスやチェックボックス、生成結果のWindowsバッチファイルを表示するテキストエリアです。さらに、win_batch_gen.jsを読み込むための記述を追加しました。
３．画面の動作を作成
win_batch_gen.jsに処理を作成しました。難しいことはありません。Windowsバッチファイルとして扱われることになる、文字列を書き込んでいるだけです。
以上で完成です。
もし、プログラムを見たい場合は、Windowsバッチファイルジェネレーターを表示し、ブラウザ機能でソースを表示して頂ければ、全プログラムを見ることが出来ます。
