kurukuru-papaのブログ

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

HTML5のBlobで、動的データのダウンロードを、わずか3行で実装できた。

Webアプリ

JavaScriptなどにより、クライアント側で動的なデータを作成し、それをローカル環境に保存したいと思い、サンプルプログラムを作成してみました。実装技術として、HTML5のFile API機能におけるBlobを使いました。

わずか3行で実装できてしまうのですね。便利ですね。さらに、HTML5なので、最近の主要ブラウザ（IE 10.0以降、Firefox 13.0以降、Chrome 20.0以降のはず）では動作しますし、現在動作していないブラウザ（Safari？）でも、HTML5対応が進めば、動作するようになるはず。

では、作成してみたサンプルプログラムを説明します。

ポイント

ポイントは、この3行です。content変数には、ダンロードしたいファイルのテキストデータが入っています。id変数は、ダウンロード用リンクのaタグを特定するid属性です。

var blob = new Blob([ content ], { "type" : "text/plain" });
window.URL = window.URL || window.webkitURL;
$("#" + id).attr("href", window.URL.createObjectURL(blob));

1行目で、contentのデータを、Blobオブジェクトとして保持しています。2行目では、Chrome, Safariにおいて、URLオブジェクトの変数名が異なるので、名前を統一しています。3行目では、Blobオブジェクトを識別するURLを生成し、jQueryを使用して、aタグのhref属性に設定しています。

これにより、ユーザがダウンロード用リンクをクリックすると、content変数の内容が、ダウンロードされます。ただし、ブラウザや設定によっては、ダウンロードではなく、別ウインドウやタブで開かれるかもしれません。

作成したプログラム

作成したプログラムをブラウザで表示した画面イメージです。テキストエリアに入力したテキストを、ダウンロードリンクから、ローカル環境にダウンロードする事ができます。

HTMLです。

<textarea id="content" cols="40" rows="5">Hello, World!
こんにちは、みなさん！</textarea><br>
<a id="download" target="_blank">ダウンロード</a>

JavaScriptです。

(function() {
    // Aタグのhref属性に、Blobを設定する。
    // Blobに含めるデータは、引数で指定する。
    function setBlobUrl(id, content) {
        // 指定されたデータを保持するBlobを作成する。
        var blob = new Blob([ content ], { "type" : "text/plain" });

        // Aタグのhref属性にBlobオブジェクトを設定する。
        window.URL = window.URL || window.webkitURL;
        $("#" + id).attr("href", window.URL.createObjectURL(blob));
    }

    $("#content").keyup(function(){
        setBlobUrl("download", $("#content").val());
    });

    $("#content").keyup();
})();

今回作成したプログラムは、jsdo.it上で作成しました。次のリンクから、参照可能です。興味が湧いた方は、Forkして遊んじゃって下さい。

動作環境

対象ブラウザ

  • IE 10.0以降、Firefox 13.0以降、Chrome 20.0以降
    • ※動作確認したブラウザは以下のみです。

動作確認済みブラウザ

  • Mac OS X 10.7 Lion, Firefox 15.0.1
  • Windows 8 Release Preview, IE 10.0
    • クリックでは無反応。右クリックメニューから「対象をファイルに保存」を選ぶ必要がありました。

動作しないことを確認したブラウザ

  • Mac OS X 10.7 Lion, Safari 6.0
    • リンクが反応しません。「blob」で始まるURLを認識してくれない模様です。

利用ライブラリ

参考ページ

初めてのjQueryプラグインを作成してみました

JavaScript

最近、jQueryやBootstrapなどに触れています。把握しきれないくらいたくさんのライブラリやプラグインが作成されていて、圧倒されていたりします。それで、興味が湧いてきて、jQueryプラグインの作成方法について、少し調べて見ました。jQuery公式サイトに載っていて、かなり簡単に作成できるようですので、ひとつ作ってみました。

元にしたjQueryプラグインのひな形

jQuery公式サイトから次のようなひな形をコピペして作成しました。いくつかひな形のパターンがあるようですが、一番使う機会が多そうなパターンにしました。

(function( $ ){

  $.fn.tooltip = function( options ) {  

    // Create some defaults, extending them with any options that were provided
    var settings = $.extend( {
      'location'         : 'top',
      'background-color' : 'blue'
    }, options);

    return this.each(function() {        

      // Tooltip plugin code here

    });

  };
})( jQuery );

$('div').tooltip({
  'location' : 'left'
});

作成したjQueryプラグイン

実用性はありませんが、次のように背景に色を付けてくれるプラグインを作成しました。

実装方法

次のようなHTMLのDiv要素に対して、CSSで色を付けるようにしました。

<div>
    Hello, World!
</div>

自作したjQueryプラグインです。

(function( $ ){
  $.fn.tooltip = function( options ) {  

    // Create some defaults, extending them with any options that were provided
    var settings = $.extend( {
      'location'         : 'top',
      'background-color' : 'blue'
    }, options);

    return this.each(function() {        
      // Tooltip plugin code here
      $(this).css('location', settings['location']);
      $(this).css('background-color', settings['background-color']);
    });

  };
})( jQuery );

プラグインを呼び出している処理です。

  $('div').tooltip({
    'location' : 'left',
    'background-color' : 'lightgreen'
  });

非常に簡単に作成できるのですね！

動作確認環境

文字列表記を変換するツールを作ってみました

JavaScript

前回に引き続き、JavaScript/jQueryを使って、ブラウザ上で動作する簡単なツールを作成してみました。

作成したもの

今回は、入力された文字列を、キャメルケースやスネークケースに変換するツールです。次のURLで公開しました。

デベロッパーのための文字列表記変換

動作確認環境

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

Windows JavaScript

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

動作確認環境

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

Visual C# 2010 Express からNUnitを起動する方法

Visual C#

Visual C# 2010 Expressにて、NUnit 2.6.1を、外部ツールとして起動する方法をメモします。NUnitは既にインストール済みで、「C:\Program Files (x86)\NUnit 2.6.1」にインストールされている前提とします。

１．[ツール]→[設定]→[上級者設定]を選択します（既に選択済みの場合、操作不要です。）
２．[ツール]→[外部ツール...]から、外部ツールダイアログを起動します。
３．追加ボタンをクリックして、次のように入力します。

タイトル：NUnit
コマンド：C:\Program Files (x86)\NUnit 2.6.1\bin\nunit.exe
引数：/run $(TargetName)$(TargetExt)
初期ディレクトリ：$(BinDir)

４．ソリューションエクスプローラーから、テストケースを記述したプロジェクトを選択します。これで、[ツール]→[NUnit]を選択すると、NUnitの画面が起動し、テストが始まります。

コンソール出力したい場合

NUnitの画面を起動せず、Visual C# 2010 Expressの出力ウインドウにテスト結果を表示したい場合は、外部ツールダイアログで次のように設定します。

タイトル：NUnit-console
コマンド：C:\Program Files (x86)\NUnit 2.6.1\bin\nunit-console.exe
引数：$(TargetName)$(TargetExt)
初期ディレクトリ：$(BinDir)

32bit環境で動作させたい場合

私の動作端末はWindows 7 64bitです。そのため、上述の手順では、NUnitも64bit環境で動作するようです。32bitで動作させたい場合は、外部ツールダイアログで次のように設定します。

タイトル：NUnit-x86
コマンド：C:\Program Files (x86)\NUnit 2.6.1\bin\nunit-x86.exe
引数：/run $(TargetName)$(TargetExt)
初期ディレクトリ：$(BinDir)
タイトル：NUnit-console-x86
コマンド：C:\Program Files (x86)\NUnit 2.6.1\bin\nunit-console-x86.exe
引数：$(TargetName)$(TargetExt)
初期ディレクトリ：$(BinDir)

動作確認環境

参考

Windowsバージョンの取得方法（Windows8対応済み）

Visual C#

私のPC環境に、Windows 8 Release Preview 日本語版をインストールしてみました。これに伴い、以前作成したC#.NETによるWindowsバージョン取得プログラムを更新、動作確認してみました。

Windows8バージョン判定概要

Windows8のバージョン判定の方法は、Microsoftのサイトに載っています。

Windows8部分を抜粋すると次になります。

Operating system Version number dwMajorVersion dwMinorVersion Other
Windows 8 6.2 6 2 OSVERSIONINFOEX.wProductType == VER_NT_WORKSTATION
Windows Server 2012 6.2 6 2 OSVERSIONINFOEX.wProductType != VER_NT_WORKSTATION

プログラム

プログラムは、SourceForge.JPにおきました。

動作確認

WIndows 8 Release Preview 64 bit 日本語版で動作確認した結果は、次になります。

動作確認環境

  • OS: Windows 7 64bit, WIndows 8 Release Preview 64 bit 日本語版
  • 開発環境: Microsoft C# 2010 Express Edition
  • .NET Framework: Version 3.5

参考

日時を文字列で取得する

Windows バッチファイル

バッチファイルを書いていて、ファイル名などにタイムスタンプを入れたくなる事があります。そんなときのために、日付（YYYYMMDD）、時刻（HHMMSS）、タイムスタンプ（YYYYMMDD-HHMMSS）の取得方法をメモしておきます。

set datestr=%DATE:/=%
set timestrtmp=%TIME: =0%
set timestr=%timestrtmp:~0,2%%timestrtmp:~3,2%%timestrtmp:~6,2%
set timestamp=%datestr%-%timestr%
echo %timestamp%

参考