unknownplace.org

node.js とかが盛り上がっていてもまったく興味をそそられなかったのは、JavaScript 自体があんまり好きじゃないってのがあった。

• function () {} とかのシンタックスシュガーがない
• レキシカルスコープない

とかもろもろ。基本的に美しくコードがかけない言語だと思ってた。

っていうのを一気に解決してくれるのが CoffeeScript。

この言語は専用のインタラプタで実行することも出来るけど、 1:1 で JavaScript に変換できるので、変換後のコードは普通の JavaScript インタラプタで実行することができる。 なので普通にWebサイトでつかってるjsもCoffeeScriptで書いて変換したのを使うってことができる。

具体的なシンタックスについては上記のサイトをみてもらうとして、僕が不満だった部分はほぼなくなっている。インデントによるブロックは僕はあまり好きじゃないけど、Emacs用のcoffee-modeもすでにあるのでたいした問題じゃない。

js はもうこれでしか書かないなー。あんまり書く機会ないけどさ。

(new Date(new Date() - new Date("1981/02/11"))).getFullYear() - 1970;

こんなんでいいんだろか。

つくった。

http://svn.unknownplace.org/public/scripts/jemplate-maketext.pl

Jemplate のテンプレート内に {{Hello}} とか _("Hello") とかかいておいて jemplate -c のかわりに

jemplate-maketext.pl --path lib/MyApp/I18N --locale ja templates/jemplates/*.tt > jemplate_ja.js

みたいにすると {{Hello}} とかの部分がその言語になったファイルができるというやつ。jemplate -c の簡単なラッパ。

--path には .po や .mo のあるディレクトリを指定する。

"Hello %1!" みたいなのには対応できないんだけど、まぁとりあえずこれで。

インストールされているFlashプレイヤーのバージョンを調べるためにadobeからFlash Player Detection Kitというものが出てるのだが、これのjsの部分がひどいのでいじった。

Flash.js

var付け忘れてる変数にちまちまvarつけたり、関数エクスポートまくりなのを全部隠蔽したりとか。あと使わない部分はごっそり削除。

このjsでは、Flash.VERSION でプレイヤーのバージョンがとれ、Flash.require() でプレイヤーのバージョンをチェックするって感じにしてある。

前者は単純に文字列が入っててで、後者のrequire関数は

if (Flash.require(8,0,0)) {
    // プレイヤー8以上入ってる！
}

みたいに使う。

SWFObjectもこの中に突っ込むといいかなとか思ったけど今は必要ではないのでいれていない。

ぐぐったら速攻あった。deconceptにｗ

deconcept > RegExp in Flash 8 using ExternalInterface

これ無名関数で書いちゃえばjsいらねーのにな。

弊社フラッシュチームからは常識じゃん？的なことを言われましたが、FlashのExternalInterfaceに無名関数を使うというテクはなかなか使えるなぁ。

UserAgent取得

var ua = ExternalInterface.call("function() { return navigator.userAgent }");

JSつかってJSONパースさせてオブジェクトを得る

var json   = '{foo:"bar"}';
var object = ExternalInterface.call("function(json) { return eval('('+json+')') }", json);

などちょっとしたことやるならjsファイルでなんかやらなくてもas内だけで完結できる。

ちょっとがんばればasクラスだけでjsの正規表現つかうラッパークラスとかもできそうだけど、もうありそうかな。

いままではLocalConnection使うロガーをつかってたんだけど、JSと同じところで見れたほうが楽かなと思って作ってみた。

import flash.external.ExternalInterface;

class Logger {
    public static function trace(msg) {
        return ExternalInterface.call("window.console.log", msg)
            || ExternalInterface.call("opera.postError", msg)
            || ExternalInterface.call("printfire", msg)
            || ExternalInterface.call("Debug.writeln", msg)
            || ExternalInterface.call("debug.trace", msg)
        ;
    }
}

こんな感じの、もてきっとからぱくってきただけだけど。

MTASCから利用するときはコマンドラインパラメータに -trace Logger.trace とかすればasソース内のtrace()がコンパイル時かってに置換されるのでアプリ内からは普通にtrace()るだけでおｋ

っぽいことをするライブラリを作った。

http://svn.unknownplace.org/public/library/js/trunk/Flax/

Flax.Request(
    'http://example.com/',
    {
        method: 'get',
        onSuccess: function(data) { alert(data) }
    }
);

みたいな。まだすごくシンプルな機能しかないけど、getとpostできる。

crossdomain.xmlでドメインを制限しつつ自社サービス間とかでAPIを利用しあったりする用に便利かなと思う。

簡単な使用例として

http://unknownplace.org/tmp/Flax/examples/flickrsearch/

flickrの検索とかつくった。flickrはJSONPあるからこんなことしなくてもいいんだけど。ほかにいい例がなかった。

を作った。

http://svn.unknownplace.org/public/library/js/trunk/JSound/

使い方は

<script type="text/javascript" src="/js/prototype.js"></script>
<script type="text/javascript" src="/js/sound.js"></script>
<script type="text/javascript">

    Sound.swf = 'sound.swf'; // sound.swf のパスを指定 (デフォルト /swf/sound.swf)

    // 設定
    var rules = {
        // CSSライクなセレクタでエレメントを指定
        'a': {
            onmouseover: '/static/sample/foo.mp3', // イベントとサウンドファイル指定
            onclick: '/static/sample/foo.mp3'
        },
        '#foo a': {
            onmouseover: '/static/sample/foo.mp3'
        },
        '.blah a': {
            onmouseover: [
                '/static/sample/foo.mp3',  // サウンドファイルを配列で指定すると
                '/static/sample/bar.mp3'   // その中からランダムで再生される
            ]
        }
    };

    // イベント登録
    SoundEvent.onloadregister(rules);

</script>

こんな。prototype.js 1.5 以上が必要。重複するエレメントがあるばあい下に書いた方が有効になります。なのでa全体に適用とかいうセレクタは一番上に。

Javascript Sound library とか id:brazil さんの FlashProxy とか見てたら面白くなってきて、自分でも作ってみたという感じ。

MTASC + ExternalInterface おもろいわぁ。

ずっと何でこんな書き方すんだろとおもってたんだけど、MTASCのサイト見ててわかった。

JavaScriptやActionScriptって変数のスコープがブロックじゃなくて関数なんだね。だからperlとかの感じでブロック作ろうとするとタイトルのような書き方になっちゃうわけか。