TOOTNE [ツートン]

TOOTONE [ツートン] – モールス信号で遊び、学ぶ。

TOOTONEは、モールス信号で遊びながら学ぶアプリケーションです。
手で打ったり、テキスト変換をしたりしながら思う存分ツートンしましょう。

「JavaScriptでモールス信号」というのは少し前から課題にしていたのですが、 ある程度まとまった形になったのでWebアプリケーションにしてみました。

使い方

誰しもおおまかな所はしっているとは思いますが、「モールス信号」そのものについては Wikipediaの説明 でも見て頂くとしましょう。

TOOTONE では次の4つの方法でツートンする事ができます。

1. キーボードの「T」をたたく
2. マウスでクリックする
3. スマートフォン・タブレット端末でタッチする
4. 文章を入力して変換する

「判定がシビアだ！」といった声を頂いておりますが、がんばってください。 長点と短点の差をハッキリさせて、ゆっくり打つのがコツです。

ツートン辞書をみる

アルファベット・カナ別に変換テーブルを掲載しています。 分からなくなったら参照してみましょう。

記録して、シェアする

「記録」ボタンを押してツートンするか、「テキスト入力」モードで文章を入力すると、 そのメッセージをURLで「シェア」する事ができます。 シェアしたメッセージをお友達に送ってあげましょう。

TOOTONE [ツートン] – お預かりしているツートンメッセージです

こぼれ話など

以前LT枠で参加させて頂いた「HTML5飯」では「Web Audio APIとモールス信号」をお題とさせていただきました。 （発表のスライドはこちら）

LTした時点ではオシレータについてよく理解していなかったので、信号の音声ファイルを作ってそれを読み込んで再生していましたが、 参加者の方からオシレータを勧められて試しに実装してみたところ、中身が非常にシンプルにまとまるではないですか！ さらに、悩まされていた iOS での不具合も解消されているのです。

これは面白いと思って、ついつい脇道にそれまくって出来上がったのが Oscy.js でした。 （楽器はTOOTONEの後に着手しようと思っていたのですが…）

cf) Web Audio API の Oscillator で楽器を作りたい話 – Mach3.laBlog

まとめ

Web Audio API 面白いですね！

対応環境が増えて普通に使えるようになる日を心待ちにしています。

つくってみたもの

Imaguria

画像を Data URI に変換する node-webkit 製の単機能アプリケーション。 画像をアプリケーション画面にドロップするか、 コピーした画像をアプリケーション画面にペーストすると、 Data URI が表示されます。

Windows版とMac版をご用意しました。 あまり使い道が思いつきませんが、せっかく作ったのでもしよろしければ。

この内容ならWebアプリケーションで十分用を足せるので あまり良い題材とは言えないかもしれませんが、 なにせ手頃な題材が思いつかなかったので。

おかげでおおまかな開発の流れがわかりました。

作ってみた感想

node-webkit は chronium を内包しているので、Webの技術でデスクトップアプリケーションが作れます。 Adobe AIR や Titanium Desktop 等に似た存在ですね。

強みの一つは、独自のAPIの他に node.js をフロントのJavaScriptから利用できる点で、 require(…) 等してモジュールを利用する事ができます。

node.js がそうであるように、Win / Mac / Linux のいずれでも動くマルチプラットフォームのアプリケーションが開発出来ます。 どの環境でも chronium がベースになるので、 Web開発者が常に悩まされ続けてきたクロスブラウザなどという物に縛られずに新しい技術を使い放題です。 これは結構書いていて爽快ですね。

node.js でローカルのファイルシステムを扱える他、Webストレージや Web SQLなどもサポートしている様です。

ちなみに、開発はMacがダントツでやり易かったです。

参考URL

• rogerwang/node-webkit
• Home · rogerwang/node-webkit Wiki

まとめ

node-webkit でのアプリの作り方はまた別の機会にします。

Webの技術でデスクトップアプリケーションを作るための選択肢が一つ増えました。喜ばしいことです。 これとは別に、Windows8のストアアプリもJavaScriptで開発出来る様ですよ。

Less/Sass/Stylus をGruntでコンパイルする

ではさっそく、GruntでCSSプリコンパイラを扱うタスクを紹介します。

• grunt-contrib-less – LessをCSSにコンパイルします
• grunt-contrib-sass – SassをCSSにコンパイルします
• grunt-contrib-stylus – StylusをCSSにコンパイルします

指定できるオプションは異なりますが、設定の仕方に差はありません。

違いを挙げるならば、Less/StylusはJavaScriptで書かれているのでnode.js上で動作させられますが、 RubyベースのSassは外部のsassコマンドを呼び出す仕組みになっており、別途インストールが必要です。 結果、Gruntとより相性が良いのはLess/Stylusであると言えますね。

ここでは、私の好きなLessを例にあげてみます。

Lessをコンパイルする（grunt-contrib-less）

基本設定

まず “grunt-contrib-less” をインストールしておきます。

$ npm install grunt-contrib-less

Gruntfile.js の内容は、例えば次のようになります。

module.exports = function(grunt){

    // grunt-contrib-less タスクの読み込み
    grunt.loadNpmTasks("grunt-contrib-less");

    grunt.initConfig({
        less : {
            // 作業のラベルは"dist"にしてみます
            dist : {
                // オプションの指定
                options : {
                    compress : true
                },
                // コンパイルするファイルの指定
                files : {
                    "./assets/css/style.css" : "./assets/less/style.less"
                }
            }
        }
    });
};

※ 基本的なタスクの書き方については 前編 にて

“options”セクションでオプションの設定を行い、 “files”セクションで出力するファイルの指定を行います。

“files”のキー（左辺）には出力先のCSSファイル、値（右辺）には元となるLessファイルへのパスを指定してください。 上の例では、 “./assets/less/style.less” がコンパイルされた結果が、”./assets/css/style.css” に保存されます。

実行

$ grunt less:dist

オプション

多く使われるであろうオプションは次の物でしょう。

• compress : Boolean (false) – 空白などを除去して圧縮します
• yuicompress : Boolean (false) – cssmin.js（YUICompressorのJS版）で圧縮します

その他のオプションについては grunt-contrib-lessのREADME を参照してください。

ファイルの更新を検知してコンパイルする（grunt-contrib-watch）

基本設定

多くのコンパイラにも実装されているファイル監視機能ですが、 Gruntでも grunt-contrib-watch というプラグインとして提供されています。

npm install grunt-contrib-watch

先ほどのLessのタスクを、ファイルを監視して実行してみます。

module.exports = function(grunt){
    grunt.loadNpmTasks("grunt-contrib-less");
    grunt.loadNpmTasks("grunt-contrib-watch");

    grunt.initConfig({
        less : {
            dist : { ... }
        },
        watch : {
            // ラベルは"less"にしてみます
            less : {
                // "files"セクションで監視するファイルの条件を指定
                files : [
                    "./assets/less/*.less"
                ],
                // "tasks"セクションで実行するタスクを指定
                tasks : [
                    "less:dist"
                ]
            }
        }
    });
};

“files”セクションで監視するファイルの条件を設定します。 そして“tasks”セクションで、“files”のファイルが更新された場合に実行するタスクを設定します。

“files”の値には、直接ファイル名を指定する他にパターンマッチングを使用する事ができ、特定ファイルの除外などの細かい設定が可能です。 詳細は公式ドキュメントにあるのでご参照ください。

cf) Globbing patterns | Configuring tasks – Grunt: The JavaScript Task Runner

実行

監視を開始するとターミナルは待機状態になります。

$ grunt watch:less
Running "watch:less" task
Waiting...

“./assets/less/” にあるLessファイルを更新すると、自動的に “less:dist” タスクを実行する様になります。

livereload もある？

私は使ったことがありませんが、livereload（ファイル更新を検知してブラウザをリロードする）を実現するプラグインもあるようです。

• gruntjs/grunt-contrib-livereload · GitHub

ここでは説明を省きますが、このプラグインは上で挙げた “grunt-contrib-watch” ではなく “grunt-regarde” の使用が推奨されるようです。

Note that grunt-contrib-livereload is designed to use grunt-regarde instead grunt-contrib-watch (mainly due to shortcomings in the watch task which doesn’t give access to changed files because it spawns tasks in subprocesses.)

GUIコンパイラでいいんじゃないの？

非常にもっともなご意見です。

本記事で挙げたCSSプリコンパイラの事例に限って言えば、 Compass、CodeKitやLess.app等、優秀なGUIコンパイラが数多くリリースされているので、 「黒い画面」が苦手な方は無理して導入する事もないと思います。

ただ、GUIコンパイラに対するGruntの優位点を挙げるとすれば、 環境を跨いでの設定の共有が極めて容易な点かな、と思っています。 nodeが動く環境ならばOS問わずどこでも同じ設定ファイルで、コマンド一発で同じ事が出来るわけです。

前編で触れたGruntの魅力に興味を持たれたならば、 これを機に「黒い画面」とのお付き合いを始めてみても良いのではないでしょうか。

まとめ

そんなわけで、最近ではGitとGruntとBowerのセットで制作を進めています。

これらの優秀なソフトウェアの開発者には足をむけて寝られませんが、 オープンソース故に多方面にいらっしゃるわけで、逆立ちして寝るしかなさそうです。

作ってみたもの

まずはデモから。当たり前ですが、box-shadowに対応していないブラウザでは動きません。

• DEMO on JS Bin

JS Bin

感想

作って動かしてみた率直な感想を申し上げると…そもそもこういう用途を想定していないと思うので、当然あまり捗りませんでした。 が、描かれる物の雰囲気は、これはこれで嫌いではないです。水墨画的な物が描けそう。

重さが加速する

Webkitはかなり軽快に動くのですが、Firefoxだとかなりもっさりした動きになります。IE9だとまだマシです。 そして、書けば書くほど重くなっていきます。 box-shadowを一点ずつどんどん重ねていっているわけですから、そりゃ当然重くなりますよね。

線を引きにくい

基本的にブラシで点描を繰り返している様な物なので、あまりはやく描こうとすると途切れて線になりません。 そういうブラシだと思うしかないでしょう。 間を補完するような感じに描画しようかとも思いましたが、むしろ味が損なわれる感じがしたので途中でやめました。

ライブラリ

書いてみたライブラリがこちら。別にやってる事はどうということはないです。 使い道は多分ないと思うのですが、使ってみたい方はお好きにお使いください。

ShadowCanvas : Drawing illustration with css box-shadow — Gist

/**
 * ShadowCanvas
 *
 * Drawing illustration with css box-shadow
 *
 * @version 0.9
 * @author mach3ss
 * @require jQuery
 */
var ShadowCanvas = function(selector, option){

    // config
    this.option = $.extend({}, this.option, option);
    this.node = $.extend({}, this.node);

    // nodes
    this.node.container = $(selector);
    this.node.canvas = $("<div>")
    .css({position:"absolute"})
    .appendTo(this.node.container);

    // events
    this.node.container
    .on("mousemove", $.proxy(this._onMouseMove, this))
    .on("mousedown", $.proxy(this.start, this))
    .on("mouseleave mouseup", $.proxy(this.stop, this));
};
(function(fn){

    fn.boxShadowText = "{x}px {y}px {blur}px {size}px {color}";
    fn.drawing = false;

    fn.node = {
        container : null,
        canvas : null
    };

    fn.option = {
        color: "black",
        blur : 5,
        size : 5
    };

    /**
     * Configure option or get the option value
     *
     * @param String key
     * @param Mixed value (optional)
     * @return Mixed
     */
    fn.config = function(key, value){
        if(this.option.hasOwnProperty(key)){
            if(typeof(value) !== "undefined"){
                this.option[key] = value;
                return this;
            } else {
                return this.option[key];
            }
        }
    };

    /**
     * Get css text for box-shadow
     *
     * @param Integer x
     * @param Integer y
     * @return String
     */
    fn._getBoxShadowText = function(x, y){
        var o, callback;
        o = this.option;
        o.x = x;
        o.y = y;
        callback = function(a, b){
            return o[b];
        };
        return this.boxShadowText.replace((/\{(\w+)\}/g), callback);
    };

    /**
     * Draw the point with box-shadow
     *
     * @param Integer x
     * @param Integer y
     * @return self
     */
    fn.draw = function(x, y){
        var shadow = this.node.canvas.css("boxShadow");
        shadow = shadow === "none" ? "" : "," + shadow ;
        shadow = this._getBoxShadowText(x, y) + shadow;
        this.node.canvas.css("boxShadow", shadow);
        return this;
    };


    /**
     * Start drawing
     *
     * @return self
     */
    fn.start = function(){
        this.drawing = true;
        return this;
    };

    /**
     * Stop drawing
     *
     * @return self
     */
    fn.stop = function(){
        this.drawing = false;
        return this;
    };

    fn._onMouseMove = function(e){
        var offset, x, y;

        if(! this.drawing){
            return;
        }

        offset = this.node.container.offset();
        x = e.clientX - offset.left + document.body.scrollLeft;
        y = e.clientY - offset.top + document.body.scrollTop;
        if(x < this.node.container.width() && y < this.node.container.height()){
            this.draw(x, y);
        }
    };

    /**
     * Clear all on canvas
     *
     * @return self
     */
    fn.clear = function(){
        this.node.canvas.css("boxShadow", "none");
        return this;
    };

    /**
     * Get css text of the illustration on canvas now
     *
     * @return String
     */
    fn.getCSS = function(){
        return this.node.canvas.css("boxShadow");
    };

}(ShadowCanvas.prototype));

使い方は、キャンバスにしたいボックス要素のセレクターを引数にしてnewするだけです。 各設定はconfigで。

var myCanvas = new ShadowCanvas("#my-canvas");
myCanvas.config("color", "black");
myCanvas.config("size", 8);
myCanvas.config("blur", 10);

まとめ

表現力は結構ありそうですが、実用的なアプリかと問われると…

cf) CSS3のbox-shadowだけで作られたモナリザ・・・ – かちびと.net

HTTPでアクセスしてチェックしたいケースとは

Webページを制作している時、多くの場合はそのままブラウザで開けば動作チェックが出来ますが、 サーバーを通してHTTPでアクセスしないと正常に動作しないケースもあります。

つまり、「file:～」ではなく、「http:～」でアクセスしたい。例えば、

• ChromeからAjaxのテストをしたい
• 各種ウィジェットのスクリプトの表示をチェックしたい

Chromeのケースは起動オプション（”–allow-file-access-from-files”）で解決できますし、 ウィジェットもスクリプトの中身を少しいじれば動くことが多いですが、 いずれもWebサーバーを通せば難なく動作するわけで、それがすぐに出来るのならばその方がシンプルではないかな、と思うわけです。

ではどうしようか

既にXAMPP/MAMPPや仮想マシン等でサーバ環境がある場合は良いのですが、 バーチャルホスト等の諸設定をこなすのが面倒くさかったり、とにかくささっと確認したいような場合は、 簡易的なサーバを利用してのチェックがお勧めです。

サッと起動して、サッ確認し、終わったらサッと終了する。

ここでは、3つの方法を提案してみます。

1. SublimeServerでチェックする
2. PHP5.4+のビルトインサーバーでチェックする
3. ローカルプロキシでチェックする

SublimeServer でチェックする

もし貴方がSublime Text 2を使って制作をしているのならば、これを使わない手はないでしょう。 Sublime Serverは、Sublime Text 2で動作する簡易Webサーバープラグインです。

SublimeServer

learning/SublimeServer

Allow you run a HTTP Server in SublimeText 2, and serves all the open project folders

メリットは、作業環境からすぐに実行できる点ですね。

インストール

1. 「Sublime Package Control」をインストール
2. コマンドパレットから 「Install Package」>「SublimeServer」 と打ち込む

※プラグインの導入法については以前書いた記事などをご参考に

使い方

1. 「Tools」>「SublimeServer」>「Start SublimeServer」で起動
2. 確認したいHTMLファイルを開いて、右クリックし、「View This File in Browser」

これで、デフォルトのブラウザで目的のファイルが開かれます。 URLは以下のようになります。プロジェクトがルートディレクトリのような扱いになっていますね。

http://localhost:8080/[folder name]/index.html

ポート番号の「8080」は、「Tools」>「SublimeServer」>「Settings」 で変更できます。

PHP5.4+のビルトインサーバーでチェックする

マシンにPHP5.4以降がインストールされているのあらば、 PHPにビルトインされている簡易Webサーバーが利用できます。

PHP: ビルトインウェブサーバー – Manual

メリットはPHPの動作チェックが出来る点ですが、 簡易的な物なのでrewrite等は動かず、そこらへんに依存するFW等の動作は難しいでしょう。 そういう大掛かりな物は、きちんと仮想環境を構築してテストしましょう。

使い方

※PHP5.4以降が導入済みで、パスが通っている前提で話を進めます。

1. ターミナル（あるいはコマンドプロンプト）を開く
2. 
   

   目的のファイルがあるディレクトリまで移動して、以下のコマンドを実行する

   
   

   php -S localhost:8080

   
   
3. 
   

   ブラウザを開いてアドレスバーにURLを入力する

   
   

   http://localhost:8080/index.html

   
   

実行したディレクトリがルートディレクトリの扱いになります。

ローカルプロキシでマッピングする

これは前述した2つの方法と違い、ローカルでWebサーバーを起動するのではなく、 ローカルプロキシを利用して、或るドメインへのアクセスをローカルのファイルにマッピングする方法です。

…と言ってもピンと来ないですね。

例えば、「http://example.com/index.html」というファイルへブラウザでアクセスするとして、 その「index.html」の内容を、ローカルにあるファイルに差し替える事が出来ます。 そうすることで、あたかもインターネット上にそのファイルがあるかのように振る舞ってくれるわけですね。

Charles

ここでは、ローカルプロキシツールのCharlesを使ってみます。 有料ではありますがクロスプラットフォームで開発されていて、Windows/Mac/Linux版が用意されています。

Charles Web Debugging Proxy • HTTP Monitor / HTTP Proxy / HTTPS & SSL Proxy / Reverse Proxy

使い方

1. 「Tools」>「Map To Local」で設定ダイアログを開きます
2. 「Add」で新しくマッピングを作成します
3. 
   

   下記のような要領で入力して「OK」

   
   

   

   
   
4. 
   

   設定したURLにアクセスします

   
   

   http://local.test/index.html

   
   

ドメインは、名前解決が出来る必要があります。 プロジェクトに使用する予定のドメインを使うか、適当な「local.test」などの名前をあてがってhostsファイルに127.0.0.1などで書き込んでおくか、 あるいはexample.comやlocalhostを利用するなどしましょう。

まとめ

これらの方法は、DirectoryIndexが指定できなかったりパフォーマンスが悪かったりする為、あくまでも簡易的なチェック向けです。 が、それで十分な場合は多いに制作の手助けになってくれる事でしょう。

特にローカルプロキシは、こういったケースに因らず、様々なシーンで開発効率をあげてくれるので、 （むしろそちらの方がメインですね） ぜひとも導入しておくべきだと思います。

WinLess

公式サイト : WinLess – Windows GUI for less.js

MacではLess.appをはじめとして、UIが優秀なコンパイラが複数あるようですが、
Windowsはまだコレ！という物に出会えていませんでした。が、これはかなり良いです。

WinLess is a Windows GUI for LESS.js. WinLess is a must-have for the webdeveloper who uses Windows.

先日記事にしたLessParserはLess.appの模倣をうたっているだけあって確かに似ていましたが、
個人的に欲しい機能である、「フォルダのドラッグドロップ登録」が出来ませんでした。

WinLessはそのドラッグドロップ登録に対応している他、

• 通知メッセージの表示
• デフォルトで「Minify」をチェック

などの設定項目があり、親切です。

アプリケーション画面

こんな感じになっていて、基本的にはLess.app（LessParser）と操作法はかわりません。
File > Settings で設定を変更できます。

現行バージョンの設定項目は以下の通り。
（本稿執筆時のバージョンは1.5.2）

General

• Start with Windows
• Start minimized

Compiling

• Minify by default
• Automatically compile files when saved
• Show message on successful compile

通知メッセージをONにすると、
タスクバーのアイコン付近にポップアップでメッセージが表示されます。

まとめ

概ねLessParserで満足していたのですが、
唯一物足りなかったドラッグドロップに対応するコンパイラが出てきてくれて、
きっとLessniumも思い残す事はないでしょう…。

LessParserについて

• Less Parser

AIRで開発されている、クロスプラットフォームのLessコンパイラ。
AdobeAIRが入っているOSならどこでも動作するでしょう。

Mac版のLess.appの影響を強く受けているようで、
レイアウトも使い方もとても良く似ています。
作者同意のもと、Less.appのレイアウトをベースに開発したとの事。

It is possible that you’ve come across “Less.app for Mac OSX” developed by Bryan D K Jones. With his consent, I have based my application layout on the layout of his application..

使い方

プロジェクトの登録

1. Addをクリックして、プロジェクトの名前と監視するディレクトリを入力します。
2. 右カラムに、.lessファイルのリストが表示されます。
   
   左のチェックボックスはコンパイルするかどうか、右はMinify（圧縮）するかどうかをチェックします。
3. 左下の「Automaticaly parse files on save」にチェックが入ってれば、
   
   ファイルの更新を検知して自動的にコンパイルしてくれます。

ログ画面

上の「Log」ボタンをクリックするとコンパイルのログが表示されます。

Less.appとの比較

AIR版ということもあり、
本家Less.appと比べて出来ない事もいくつかあるようです。

• ドラッグドロップによる登録
• アウトプットパスの設定

個人的に残念なのは、AIRのディレクトリ選択ダイアログが使いづらい所でしょうか。
ドラッグドロップ使えればもっと素敵なのですが（AIRなら実装出来たようなおぼろげな記憶も…）

Lessniumと比較して

• フォルダ単位で登録ができ、ファイル毎でもコンパイルのon/offが選択できる。
• 圧縮のon/offが選択出来る

Less.app同様に、非常に使いやすいUIで細かい設定が出来、
言うまでもなくLessniumの完全上位互換ですね。
このプロジェクトが存続する限りは、Lessniumは開発されない事と思います。
作者もLessParser使いますし（！

まとめ

Lessniumが要らない子になるのはちょっとだけ寂しいですが、
元々Windowsで動くものが無かったから作っただけで、
開発する人が出てきたと言う事は、それだけLessが市民権を得てきたという事ですし、
非常に使いやすいアプリなので、素直に嬉しいです。

以前何度かご紹介したCSS開発ツールのLESSですが、
コマンドを介したり自前で設定しなきゃいけなかったりで少々面倒なので、
LESS.jsをベースにしたフロントエンドをTitaniumデスクトップで作ってみました。

作ってみたもの

Lessnium – version 0.9.0 (4.04MB)

※Windows版のみです。

使い方

要するに何をしてくれるのか

LESSファイルを登録しておくと、更新を検知して自動的にCSSファイルをコンパイルしてくれます。
/the/path/to/hoge.less と登録しておくと、
/the/path/to/hoge.css を生成します。

LESSファイルの記法については公式を御覧ください。
LESS « The Dynamic Stylesheet language

ウォッチリストへのファイルの追加

1. 「ファイル」→「ファイルを追加」または「Add」ボタンで、
   
   ウォッチリストにlessファイルを追加します
2. lessファイルが更新されると、同じディレクトリにcssファイルが自動生成されます

ファイルの削除

ウォッチリスト上のファイルを選択して、
「ファイル」→「ファイルの削除」または「Remove」ボタンでリストから外します。
（deleteキーでもOK）

リストのリセット

「ファイル」→「リストをリセット」でリストをクリアします。

課題

本当はリストにファイルをドラッグドロップとかしたい

Mac版やLinux版は？

Mac用にはもう既に開発されたものがあるので、それを使うと良いと思います。
こっちのがずっとUIも優れてそうですし。
» LESS.app For Mac OS X

Linux版は、使いたいなんていう酔狂な方がいらっしゃった場合は考えます。

まとめ

今まではRuby版で一々コマンドでコンパイルしていたのですが、
先日LESS公式ページからRuby版の説明がこつ然と姿を消してLESS.jsがメインになった為、
JS版に乗り換えるついでにこさえてみました。

WindowsユーザーでしかもLESS使いなんて相当に限られてますが、
そんな限られた方々のお役に立てれば幸いです。

私のLESS愛をあらわす拙い記事など

• LESSをJavaScriptで実現する 「LESS.js」
• ゼロから導入する、Ruby LESS for Windows ～素晴らしいCSSソリューション
• CSS3対応の為のLESSスニペットメモ

もっと流行るといいな。

概要

普通につくるといくらでも立ち上がるよ！

Titaniumで普通にデスクトップアプリを作ると、いくらでも立ち上げられます。
連打すれば連打しただけアプリウィンドウがぽぽぽぽーんと増えていく。
アプリの性格にもよりけりですが、不都合が生じる事の方が多そうです。

ざっくりとした仕組み

1. タスクリストにある自分の名前の数を確認。
2. 2個以上あったら多重起動されてしまっているので、自分を落とす。

ソース

見ての通り、Windows用の処理しか書いていません
Mac/Linuxではcaseを書き足してやらねば動きませんのでご注意を。

var SingleLaunch = function( appName, callback ){
    var name, args, prc;

    switch( Titanium.platform ){
        case "win32" :
            name = appName + ".exe";
            args = [ "tasklist", "/NH", "/FI", "IMAGENAME eq " + name ];
            break;
        default :
            throw "このプラットフォームはサポートされていません";
            break;
    }
    prc = Titanium.Process.createProcess( args );
    prc.processCount = 0;
    prc.setOnRead(function(e){
        this.processCount += e.data.toString().match( RegExp( name, "g" ) ).length;
    });
    prc.setOnExit(function(){
        if( this.processCount >= 2 ){
            alert( appName + "は既に起動しています" );
            Titanium.UI.currentWindow.close();
            return;
        }
        callback();
    });
    prc.launch();
};

SingleLaunch( "YouApplication", function(){
    /* アプリを初期化 */
});

タスクリストを取得するには、Titanium.Processを使って「tasklist」コマンドを呼びます。
createProcessメソッドの引数に、コマンドとその引数を配列にして渡してlaunch。

cf) Appcelerator Developer Center – API for Titanium.Process (version 1.1)

setOnReadは出力が返される度に呼ばれるので、そこで自分の名前を探して数を加算。
すべての出力が完了したらsetOnExitが呼ばれるので、合計の数を見て条件分岐します。
2個以上であれば自身を落とし、そうでなければcallbackを呼んでアプリの初期化を行いましょう。

ポイント

tasklistが正しい値を返してくれない

既に1個起動しているはずなのに自分の名前が見つからない。
Titanium.Processで呼んだtasklistと、コマンドプロンプトで呼んだtasklistで結果が変わってしまう。

どうやら、TitaniumProcessがヘッダの行数を勘違いしている事に起因する模様。
見出しを出力しない/HNオプションを付けることで解決出来ました。

args = [ "tasklist", "/NH", "/FI", "IMAGENAME eq " + name ];

exit()とclose()

アプリを終了するTitanium.App.exit()と、
現在のウィンドウを閉じるTitanium.UI.currentWindow.close()がありますが、
どのような違いがあって、どちらの方が良いのか、というお話。

試してみた結果、実行後即閉じるclose()に比べ、
exit()は終了処理的な事をしているらしく、かなり動作がモッサリとしています。
ただし、close()したらすぐにプロセスが消えるかというとそうではなく、
だいたいexit()と同じぐらい待たされてからタスクリストから姿を消します。

exit()の方が安心そうではありますが、
見た目だけでもサクッと閉じてほしいので、取り急ぎ今回はclose()を使っています。
（そう思わせる程度には、exitはモッサリしています）

まとめ

ひょっとしたら多重起動防止用の何かが既にあるかもしれないし、なくても今後実装されるかもしれませんが、
とりあえず情報が見つからなかったので書いてみました。ツッコミありましたらよろしく願います。

nave.shの導入

isaacs/nave – GitHub

私はノートのUbuntuで導入してみましたよ。
nave.shはGitに乗っかっているのでcloneしてくれば良いです。
導入先は、俺々ルールに則った~/opt/に。

cd ~/opt/ git clone http://github.com/isaacs/nave.git

とりあえず最新版のnode.jsを入れてみる

cd ~/opt/nave/ ./nave.sh install latest

基本的にnave.shに引数を渡して実行するだけです。
上のコマンド例は、最新版（latest）をインストール（install）してるわけですね。
極めてシンプル。使い方に迷ったら、黙って「./nave.sh help」。

つまづくかもしれないポイント

まず、nave.shの動作自体にcurlが必要らしいので、
入ってないのなら導入しておきましょう。

sudo apt-get install curl

他には、g++やopensslなどが要求されますので、こちらもインストール。

sudo apt-get install g++ sudo apt-get install libssl-dev

他にも不足している物があったら、エラーをみて都度導入してあげましょう。

全ての環境が完了するとインストールが始まります。
少々時間を要するので、正座して待ちましょう。

使用するnode.jsを選択する

インストールが完了しても、まだnode.jsは使えません。
useコマンドを使ってどのバージョンを使用するかを選択する必要があります。

./nave.sh use latest

これで、最新版のnode.jsへのパスが通り、
nodeコマンドが使用可能になります！おめでとう！

ただし、一度ログアウトすると未選択に戻ってしまい、毎度useしてあげないといけません。
煩わしい場合は.bashrcにでも書いておくか、usemainコマンドを使ってみるか。

注意点としては、”use latest”した時に最新版が未だインストールされてないと、
長～いインストールが開始されてしまいます。
なので、.bashrcとかに書く場合はバージョンを決め打ちしておいた方が良い気がします。

./nave.sh use 0.4.1

すでにインストール済みのnode.jsのリストは、”nave ls”で見られます。

./nave.sh ls

ついでにnpmも入れておく

npm – Node Package Manager

npmというのは、node.js用のパッケージマネージャ。
せっかくなので入れておきましょう。
公式いくとワンラインインストールのコマンドが書いてあるので、それで瞬殺です。

curl http://npmjs.org/install.sh | sh

テストする

node.js公式にあるスクリプトでHello,Worldしてみましょう。

var http = require('http');
http.createServer(function (req, res) {
    res.writeHead(200, {'Content-Type': 'text/plain'});
    res.end('Hello World\n');
}).listen(8124, "127.0.0.1");
console.log('Server running at http://127.0.0.1:8124/');

このスクリプトを「example.js」等に保存して次のコマンドを入力。

node example.js

あとはWebブラウザで「http://127.0.0.1:8124/」にアクセスして
「Hello World」が表示されれば成功です。
たったこれだけでWebサーバが立ち上がっちゃうなんて素敵ですね。

巷で話題のnode.jsを入れて、ちまちま弄ってみてます。
一体どんな事が出来るようになるのか、イベントドリブンとやらに期待が高まりますね。

ちなみに、「nvm」（Node Version Manager)なんてのもあるみたいです。
» creationix/nvm – GitHub