読者です 読者をやめる 読者になる 読者になる

kurukuru-papaのブログ

主に、ソフトウェア開発に関連したメモを書き溜めたいと思います。

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

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

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

作成したジェネレーター

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

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

作成方法

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

1.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をリネーム

2.画面の見た目を作成
上記1で作成したひな形(win_batch_gen.html)に、必要な部品をコーディングしました。Windowsバッチファイルの生成内容を切り替えるための、テキストボックスやチェックボックス、生成結果のWindowsバッチファイルを表示するテキストエリアです。さらに、win_batch_gen.jsを読み込むための記述を追加しました。

3.画面の動作を作成
win_batch_gen.jsに処理を作成しました。難しいことはありません。Windowsバッチファイルとして扱われることになる、文字列を書き込んでいるだけです。

以上で完成です。

もし、プログラムを見たい場合は、Windowsバッチファイルジェネレーターを表示し、ブラウザ機能でソースを表示して頂ければ、全プログラムを見ることが出来ます。

動作確認環境

  • OS:Mac OS X 10.7.4 Lion
  • ブラウザ:Safari 6.0
  • 生成したバッチファイル動作確認環境:Windows 7 64bit