Perl の Locale::Maketext::Lexicon::Gettext は以下のような Gettext ライクなフォーマットを扱うが、同じようなことを JS でしたいとき

%1 さん、こんにちは
%quant(%1,user,users)

• %function() は任意の関数が呼べる感じなので、JS でもそのようにしておく。
• numf は実装してない。
• Locale.data= { ... } みたいなのが言語別に完全にわかれているのを想定してる

var Locale = {
    loc : function (msgid, arg) {
        var args = Array.prototype.slice.call(arguments, 0);
        var text = Locale.data[msgid];
        if (text) {
            if (/%/.test(text)) {
                text = text.replace(/%(\d)/g, function (_, n) {
                    return args[n];
                });
                text = text.replace(/%([a-z*#]+)\(([^\)]+)\)/g, function (_, func, args) {
                    if (func == '#') func = 'numf';
                    if (func == '*') func = 'quant';
                    args = args.split(/,/);
                    return Locale[func].apply(null, args);
                });
                return text;
            } else {
                return text;
            }
        } else {
            return msgid;
        }
    },

    quant : function (number, singular, plural, negative) {
        if (number == 0 && negative) { // no warnings
            return negative;
        } else
        if (number == 1) {
            return singular;
        } else
        if (plural) {
            return plural;
        } else {
            return singular + 's';
        }
    },

    numf : function (number) {
        return number; // XXX
    }
};

1. トップ
2. tech
3. Perl の Locale::Maketext::Lexicon::Gettext フォーマットのメッセージをJSでフォーマットする

WebAudio で ScriptProcessorNode とかを使ってちょっと変なことしようと思うと、波形が実際どうなっているのか見たくなったりするわけですが、うまいこと取得できなくてイライラするわけです。なのでトリガをかけて一定期間の波形を表示するのを作りました。

デバッグ用なので、UI 上には殆ど機能はなく、以下のようにコード上で設定を引数で渡す感じです。トリガはSimple, RaisingEdge, FallingEdge, DualEdge だけとりあえず実装してあります。実装すればチャンネル間の and トリガとかもできる感じの設計です。

WebAudioDebug.prove(context, merger, {
    bufferSize : 64e3,
    windowTime : 100e-3,
    highResolution : false,
    trigger : WebAudioDebug.OscilloscopeNode.Trigger.RaisingEdge({ triggerChannel: 0, width : 10, threshold : 0.5 }),
    continuous : false
});

作ってる途中でやる気が失せたので、特に highResolution: true (Retina 対応) にしたときパフォーマンスがめっちゃ劣化するけどそのままです。あと、繋げる段数が違ったノードを merge して渡すとズレたりするので、ちょっとめんどうくさい感じです。なんとかしたいけど、その前にやる気がなくなったのでそのうちやる気がでたらやるかもしれないです。

1. トップ
2. tech
3. WebAudio のデバッグ用のオシロスコープ

ngResource は $get してオブジェクトを変更して \$save を呼んだらサーバサイドに反映とかいうことができます。

1. データを $get などで取得した直後の状態、(サーバサイドで) 保存されている状態
2. 取得したリソースを変更した状態、(サーバサイドで) 未保存の状態
3. $save などで保存完了した状態、(サーバサイドで) 保存されている状態

とリソースの状態が変化します。

しかし、実際のアプリケーションでは、変更されたが更新されていない状態というのを表示したくなることが多々あります (変更があって未保存なら項目の色を変えるとか)。

なので、保存前の状態をどこかに保存して、保存されたらそれを更新するとかいう作業が必要になります。ただ、コントローラ側の ngResource のコールバックでいちいちこんなことしようとするとバグるので、ngResource の定義側でなんとかしたいところです。

var Entry = $resource('/api/entries', { id : '@id' }, {
    'query':  {
        method:'GET',
        isArray: true,
        transformResponse : function (data, headers) {
            data = angular.fromJson(data);
            data.saved = angular.copy(data);
            return data;
        }
    },
    'save':  {
        method:'POST',
        transformResponse : function (data, headers) {
            data = angular.fromJson(data);
            data.saved = angular.copy(data);
            return data;
        }
    }
});

// controller
$scope.entry = Entry.get({ id : 1 });
// $scope.entry.saved is original data

// template
<div ng-class="{ changed: entry.body != entry.saved.body }">
    <textarea ng-model="entry.body"></textarea>
</div>

1. トップ
2. tech
3. ngResource を使って未保存の情報を明確にする