August 16, 2014

Knockout.jsのforeachで少しハマったのでメモ

最近、ぶっつけ本番でKnockout.jsを使っていて、foreachの動きで少しハマったのでメモ。(慣れている人にとっては大したこと無い内容なんだろうけど。。。)

サンプルソースは以下です。
<html>
<head>
    <script src="//cdnjs.cloudflare.com/ajax/libs/knockout/3.1.0/knockout-min.js"></script>
</head>
<body>
<!-- foreach をネストする際、内側の foreach で使用する配列に "$root" をつけないとエラーになる  -->
<div data-bind="foreach: {data: array1, as: '$value1' }">
    <p data-bind="text: $value1"></p>
    <div data-bind="foreach: {data: $root.array2, as: '$value2' }">
        <p data-bind="text: $value2"></p>
    </div>
</div>

<!-- "$index" は単独だと出力できるが、文字列連結時等は "$index()" としないとエラーになる  -->
<!-- "$parentContext.$index" も同様  -->
<div data-bind="foreach: {data: array1, as: '$value1' }">
    <p data-bind="text: $index"></p>
    <p data-bind="text: $index() + ':' + $value1"></p>
    <div data-bind="foreach: {data: $root.array2, as: '$value2' }">
        <p data-bind="text: $parentContext.$index"></p>
        <p data-bind="text: $parentContext.$index() + ':' + $value2"></p>
    </div>
</div>

<script>
    function ViewModel() {
        var self = this;
        
        self.array1 = ko.observableArray(['foo', 'bar', 'baz']);
        self.array2 = ko.observableArray(['FOO', 'BAR', 'BAZ']);
    };

    ko.applyBindings(new ViewModel());
</script>
</body>
</html>

コメントに書いてある通りですが

1.
foreach をネストする際、内側の foreach で使用する配列に "$root" をつけないとエラーになる

2.
"$index" は単独だと出力できるが、文字列連結時等は "$index()" としないとエラーになる("$parentContext.$index" も同様)

で、ハマった。。。


P.S.
まだほんの少し使った程度ですが、JSはjQueryがメイン。という開発の中に、双方向バインディングだけ付け足したい時とかは便利かなと思いました。jQueryの処理も好きに書いて良い(という思想な)はずなので、例えばチームのメンバ的に、AngularJSだと(主にディレクティブ周りで)敷居が高くなってしまい導入に躊躇するような状況でも、Knockout.jsなら比較的楽に導入出来る気がします。(制約が緩いほど秩序は保ちにくくなってしまうはずですが。)



August 6, 2014

Chromeのオートコンプリートを個別に削除するメモ

メモ。

オートコンプリートリストの該当選択肢にカーソルを併せて
Windowsの場合は shift + delete
Macの場合は fn + shift + delete
で出来ました。

August 2, 2014

Macでidn_to_ascii()とidn_to_utf8()を使えるようにする

メモです。

icu4cとintlパッケージをインストールします。
brew install icu4c
sudo pecl install intl # ライブラリのパスは /usr/local/Cellar/icu4c/{VERSION} でした
php.iniに以下を記述します。(バージョン周りは適宜置換)
extension=/usr/local/Cellar/php54/5.4.25/lib/php/extensions/no-debug-non-zts-20100525/intl.so

July 29, 2014

AngularJSで一文字ずつフェードインして表示するディレクティブのメモ

以下がサンプルです。 ポイントは、一文字ずつバラしてspanタグで囲み、1spanタグずつdelay()させつつfadeIn()させる感じです。(あんまりAngularJS関係ない。。。)

先日作ったインスタグラムカルタで使っていて、テスト(spec)は https://github.com/mamor/igkaruta/blob/master/spec/directives/myFadeInCharsSpec.js みたいな感じで書きました。

Travis CIでPHPUnitを実行して、Coverallsでカバレッジを表示するメモ

メモです。

大雑把な手順は
1. Coveralls でアカウント作成と対象レポジトリの登録
2. satooshi/php-coveralls のインストール
3. .travis.yml を編集
4. .coveralls.yml を作成
になります。

1. Coveralls でアカウント作成と対象レポジトリの登録
https://coveralls.io/ から特に問題なく出来たので割愛します。

2. satooshi/php-coveralls のインストール
Travis CIとCoverallsの連携にしか必要ないので、composer.jsonには書かずに.travis.ymlでインストールするようにしました。"before_script" で "composer require satooshi/php-coveralls:0.* --dev" とかすればOKです。

3. .travis.yml を編集
"phpunit --coverage-clover build/logs/clover.xml" として、PHPUnit実行時にカバレッジファイルを出力するようにします。また "after_script" で "php vendor/bin/coveralls"として、Coverallsに通知します。

4 の.coveralls.ymlは
src_dir: .
coverage_clover: build/logs/clover.xml
json_path: build/logs/coveralls-upload.json
としました。

まとめると
https://github.com/mamor/igkaruta/commit/99c1492f9862000bd70e6a974c72ea209413f088
みたいな感じです。

後は、README.mdにバッジのURL(Coveralls側でわかります)を書けば https://github.com/mamor/igkaruta#karuta-for-instagram のように表示することが出来ました。