Windowsバッチファイルのひな形を生成するジェネレーターを作ってみた

よく、CSSジェネレーターとか、HTMLジェネレーターとか、ボタンジェネレーターとか、アイコンジェネレーターのページを見かけることがあります。特に、アイコンジェネレーターは、急にアイコンが欲しくなった事があり、大変重宝した覚えがあります。インストールレスで手軽に使えることが嬉しかったですね。

そんなジェネレーターを自分で作ってみたいと思いました。簡単なところから、Windowsのバッチファイルのひな形を生成するようなジェネレーターを題材にしました。個人的に、使い捨てになるようなバッチファイルを書く機会が時々あり、ひな形があればいいのにと思っていました。

作成したジェネレーター

作成したジェネレーターは、次のURLで公開しました。名前は「Windowsバッチファイルジェネレーター」です。そのまんまです。

現状では機能が少ないですが、今後、必要に応じて、作り込んで行けばいいかなと思います。コメント欄にご要望頂ければ、対応したいとも考えています。

Windowsバッチファイルジェネレーター

作成方法

使用した技術は、HTML, CSS, JavaScript, jQuery, Windowsバッチコマンドです。特に難しいことはなく、作る上でのポイントも特になく、淡々と作る感じでした。以下、ざっくりとした作成手順です。

１．Twitter Bootstrapひな形準備
必須ではありませんが、多少見た目を良くするために、Twitter Bootstrapを使いました。次のサイトからダウンロードしました。HTMLのひな形には、「Getting Twitter Bootstrap」ページで取得できる「Starter template」（starter-template.html）を使いました。

Twitter Bootstrap

ダウンロードしたファイルを、自分の環境に配置して、次のような構成にしました。

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バッチファイルジェネレーターを表示し、ブラウザ機能でソースを表示して頂ければ、全プログラムを見ることが出来ます。