はじめに

ちょっと前から,「Jarty」という JavaScript なテンプレートエンジンを使ってみていたりします.GTDme とかでも使ってみていたりしてます.

特徴は次のような感じ:

Jarty には以下のような機能があります。書式の多くは Smarty 互換です。

  • 変数の置換 {$foo} => “abc”
  • {if} {else} {/if} などの条件分岐
  • {foreach} {/foreach} などのループ
  • {$foo|upper|escape} などのフィルタ (パイプ)
  • etc.

JavaScript 用テンプレートエンジン Jarty の紹介 – ドワンゴ 研究開発ブログ

Jartyなテンプレート中で,自分で定義した処理を「フィルタ」として使えんだろうか,とソースコードを覗いていたら,意外と簡単に追加できそうな感じだったので,そのあたりを紹介します.(どこかにドキュメントされているのかもしれませんが!)

なお,記述はすべて CoffeeScript で書いています.適宜翻訳してくださいまし.

基本

Jarty.Pipe.prototype のプロパティに,処理したい関数を追加すればよさげです.そのプロパティ名が,「フィルタ」の名前となります.ただし,フィルタ名をスネークケースで使いたいときは,それをキャメルケースでプロパティに追加する必要があります.

Jarty.Pipe.prototype.fooBar = () ->
    ...

また,パイプの入力値は,関数の中で @value として参照します.

例えば,「何もしない」フィルタを,次のように追加できる感じです:

Jarty.Pipe.prototype.doNothing = () ->
    return @value

こうしておけば,Jartyなテンプレート中で,次のようにフィルタが使えるようになります:

{$foo|do_nothing}
{$bar|doNothing}

メンドイので関数化しておく

毎回 Jarty.Pipe.prototype. ... とかするのはメンドイので,関数を定義しておくとラクです.

とりあえず add_jarty_filter という名前ででっち上げてみました:

window.add_jarty_filter = (name, func) ->
    # foo_bar -> fooBar
    name = name.replace(
        new RegExp('_(.)', 'g'),
        (p, c) ->
            return c.toUpperCase()
    )
    Jarty?.Pipe?.prototype?[name] = func

こうしておけば,先の「何もしない」フィルタは,次のように書けます:

add_jarty_filter(
    'do_nothing'
    () ->
        return @value
)

追加するフィルタが多くなれば,こうしておいた方がラクかもです.

ユーティリティ関数とかをフィルタ化しておく

文字列操作をはじめとする,小粒な関数とかをフィルタ化しておくと便利そうです.

例えば,与えた数値を3桁ごとに区切ってコンマ「,」を挿入するような関数 commify があったとします:

###
 * 数字を3桁ごとにコンマで区切る
 *   参考: http://www.din.or.jp/~ohzaki/perl.htm
 *
###
window.commify = (num) ->
    if typeof num is 'number'
        return num.toString().replace(/(\d{1,3})(?=(?:\d\d\d)+(?!\d))/g, '$1,')
    else
        return num

これは,こんな感じでフィルタ化できます:

window.add_jarty_filter(
    'commify'
    () ->
        return commify( parseInt(@value, 10) )
)

そうすれば,Jartyなテンプレート中で,

{$foo|commify}

みたいに使えて便利です.

おわりに

以上,Jartyなテンプレート中で,自分で定義した処理を行うための「フィルタ」を追加してみるお話でした.

ss-1325848366

はじめに

1つ前のエントリ の「今後」として書いたうちの1つ:

ランチャからInboxに放り込めると便利そう
「GTDme」というオレオレGTDツールを作って使い始めようとしています « いわぶろ(ろてん)

今のうちに作ってしまった方が今後恩恵に与れそうなので,「Alfredの拡張機能」という形でひとつこさえてみました.

以下,そのあたりの紹介などです.

Alfredって何?

いわゆる「ランチャ」の1つです.

もともと qsb-mac を使っていたのですが,ここ2年近くアップデートもなくてマンネリ化してきたので,「Mac ランチャ」とかでググっていたところ,次のエントリに行き当たりました.

現在ベータ版で普通にはダウンロードができませんが、メールアドレスを登録するとダウンロードリンクが送られてきます。

Google Quick Search Boxをよりお洒落に使いやすくしたような印象。

なにより軽快に動いて、わかりやすい操作方法なのがいいですね。

格好いい・使いやすい・軽快と三拍子揃ったランチャ『Alfred』 | Macの手書き説明書

エントリ時期自体はちょっと前のものですが,「Google Quick Search Boxをよりお洒落に使いやすくしたような印象。」の一文で,使ってみる気になった感じです.(QSBの使い勝手は好きなので.)

で,Alfred の半分くらいの機能は,£ 15 の「Powerpack」を購入する必要があり,本エントリで触れる「拡張」機能もこの範囲に入っていたかと思います.が,他の機能も含めて,その価値は十分にあると思いますよ.例えば,Free版では,ランチャの表示・非表示の際必ずフェイドイン・フェイドアウトがかかり,サクサク感を得にくいのですが,Powerpackによって,この設定を解除することができるようになる,といった具合です.

セットアップ

拡張機能のインポート

続きを読む »

ss-1325810374

はじめに

ここ2年ほどで,未実施なプロジェクトリスト == 紙の束を持ち運ぶのが大変になってきたり,毎度紙におこすのがメンドかったりと,週次レビューに対するモチベーションが,本題とは外れた部分をきっかけに下がり始めてきたので,ちょっとツールを切り替えてみようかな,などと思い立ちました.

で,これまでやってきたオレオレ週次レビューの流れをそれなりに活かせそうな形で,「GTDme」というツールを作り始めてみてます.ネーミングは気にしない.

多少形になってきたので,以下,現状での紹介など.

そもそもGTDって何?

ここでは省略.

まずは実践してみることをオススメします.「脳はHDDではなくCPUである」という考えに賛同できれば,コンセプトは吸収しやすいんじゃないかな,と思います.

現状をざっと詳細

認証

Twitter な OAuth のみサポートしています.個人レベルでの利用とかいいながら,認証はソーシャルっぽく.

ナビゲーション

ss-1325807388

GTDにおいて,一般的に「準備しよう」とされている各種の「リスト(フォルダ)」に相当するようにナビゲーションを置いてます.だいたい次のような感じです:

Home
「次に取るべき行動」リスト
Inbox
「In-box」
Calendar
「カレンダー」.オレオレ的に,特定日(期間)もの,週次反復もの,月次反復もの,と分割していたり
Background
「連絡待ち」リスト
Materials
「資料」.単語に違和感><
Someday
「多分やる・いつかやる」リスト
Projects
「プロジェクト」リスト

Add to Inbox?

ss-1325807448

どのページにも,右上のあたりに「Add to Inbox?」という,ボタンのようなものを置いてます.これをクリックすると...

ss-1325807658

...何か入力フォームが表示されるので,頭に浮かんだ気になったことを書いて Enter すれば,その内容が Inbox に入ります.

Inbox

ss-1325808195

こんな感じで,「Add to Inbox」した内容がいろいろたまります.それらにマウスを乗せると...
続きを読む »

はじめに

ちょっと必要になって10分ほどで書いてみました.リハビリ.

「ジョブ」の定義とかよく知りません><

使い方

var jobseq = new JobSequencer({ interval: 1000 });
 
jobseq.push(function (o) {
    console.log( o.id );  // 1
});
 
jobseq.push(function (o) {
    console.log( o.id );  // 2
}, 500);
 
jobseq.start();
jobseq.stop();

コールバック関数を順番で追加していき, start メソッドでその順番に,指定したインターバルをおいて実行される感じです.

すべて完了する前に stop メソッドを呼ぶことで,中断することもできます.その後 start メソッドを再度呼ぶことで再開します.

ソースコード

冒頭のリンクを参照頂ければよいのですが,ページ稼ぎのためこちらにもw

window.JobSequencer = function () { return this.init.apply(this, arguments); };
JobSequencer.prototype = {
    init: function (params) {
        params = params || {};
 
        var self = this;
        self._queue   = [];
        self._stopped = false;
        self._count   = 0;
        self.interval = params.interval || 0;
 
        return self;
    },
 
    push: function (f, sec) {
        this._queue.push({ f: f, s: sec || this.interval });
    },
 
    shift: function () {
        return this._queue.shift();
    },
 
    start: function () {
        this._stopped = false;
        return this._exec();
    },
 
    stop: function () {
        this._stopped = true;
    },
 
    _exec: function () {
        var self = this;
        var f_this = arguments.callee;
 
        if ( self._stopped ) { return }
 
        var o = self.shift();
        if ( typeof o !== 'undefined' ) {
            var params = {
                id: ++self._count
            };
 
            setTimeout(function () {
                o.f(params);
                f_this.call(self, []);
            }, o.s);
        }
    }
};

おわりに

順番に追加していった関数を,その順番に実行していく JobSequencer っていう JavaScriptなクラスを書いてみたお話でした.

Amazonさん

まだ読んでない><

ss-1324860051

はじめに

どのブランチがどのブランチの上に乗っかるか,というルールが複数定義されたファイルを読んでひたすら git rebase を行うためのツール「git-rebase-matsuri」というのを書いてみたので,本エントリで軽く紹介します.

※ とあるコミットポイントにおいてちょっとした主要なコミットが発生したおかげで,そこから派生していたすべてのブランチに対して git rebaase する作業が発生することを,私は勝手に「rebase祭り」などと呼んでおります.

背景

「この機能の実装を進めて」「ちょっとあれを直してほしい」先方からそんな要求がくるたびに,その数だけトピックブランチを,公開状態のコミットポイントから生やして作業しています.で,こちらが作業を完了して報告,公開向けの準備の指示を仰ぐのですが,そこから返信がこなくなります.(まぁお忙しいのでしょうね.)その結果,「公開待ち」な状態のブランチが増えてきます.

コミットツリーは次のような感じになります:

ss-1324859692

そこで飛び込んでくる「これ,あのお客さんにどうしても対応したいから,すぐに実装して反映してほしい」といった要求.私の少量メモリな脳内ではスワップを起こしていますが,対応しなければなりません.そしてその修正を先に公開します.

(本エントリを書いている最中にも,何か1件飛び込んできましたw)

コミットツリーは次のような感じになります:

ss-1324860051

さて,本来の開発作業に戻りますか.しかし,安心して開発を再開するには,コミットツリーを次のようにしておきたいところですね:

ss-1324860499

まぁ git rebase しまくればよいだけですが,いかんせんメンドイ!

使い方

インストール

続きを読む »

1 of 93  1  2  3  4  5 » ...  93