Meteor 1.2からはAngularとReactのサポートも追加されましたが、Blazeも根強い人気があります。今回はそんなBlazeをちょっと使いやすくするパッケージを二つ紹介します。

初めに紹介するパッケージは、Handlebar-helpersです。

インストールは、

meteor add raix:handlebar-helpers

です。これを使うと、テンプレートで、

{{#if $lt counter 10}}

のようなことが書けるようになります。実は本来テンプレートにはロジックを書くのはよろしくないので、これはあまり好まれない場合があります。しかし、通常の書き方だと、

{{#if isCounterLargerThanTen}}

のようになりヘルパー関数を用意する必要があります。よって、小規模プロジェクトなどでは原則を破ってロジックを書いてしまった方が効率がよい場合もあると思います。

次に紹介するパッケージは、blaze-magic-eventsです。

インストールは、

meteor add themeteorites:blaze-magic-events

です。これも好みが分かれるところですが、イベントハンドラを書きやすくするものです。テンプレートに、

<button onclick={{sayHi}}>Say Hi!</button>

と書いて、JavaScriptコードに、

Template.helloworld.events({
  sayHi (event, template) {
    console.log('event and templateInstance params', event, template)
    template.$('p').html('hi there from sayHi() handler!')
  }
});

と書きます。これも微妙にロジックを書いてしまっているので美しくないのですが、jQueryに慣れている人は分かりやすいかもしれません。

最後にせっかくなので、自分のパッケージも紹介しておきます。blaze-showhideです。これもテンプレートに簡単なロジックを書いて表示・非表示を切り替えるようにするものです。

以上、テンプレートにはロジックを書かないという原則を破ってちょっと便利にするパッケージの紹介でした。

以前、Angular向けに自分で開発したsocial-cms-backendは今もメンテナンスしていますが、 これのMeteor版があったら面白いだろうなと思っていました。Meteor版だとfrontendも含まれるので、単にsocial-cmsと呼ぶものになるかなとか。 既に、似たようなものが既にあったので紹介します。自分で作る手間は省けたものの、作ってみたかったという気持ちもあったりします。

一つは、ryw:blog (GitHub)です。 これは他のアプリに組み込むライブラリとしての位置付けで作られたもので、 なんとiron-routerとflow-router両方に対応しているということです。 単体で動かそうと思うと、意外とパッケージ導入に手間がかかりました。 参考までに手順をまとめておきます。

meteor create test-app
cd test-app
meteor add ryw:blog
meteor add kadira:flow-router kadira:blaze-layout
meteor add twbs:bootstrap ian:accounts-ui-bootstrap-3
meteor add accounts-password
meteor run

その後、htmlにログインボタンを設置すれば一応動きます。 ただし、デフォルトでは全員管理者になってしまうので、ロール管理しようとするともう少し複雑になります。 accounts-admin-ui-bootstrap-3 を使うとよさそうですが、初期の管理者を手動で設定する必要があったりと多少導入にハードルを感じます。 もっと簡単にスタンドアローンで動かすための整備は、まだ残件かなと思いました。

UIはいろいろカスタマイズできるようになっているようですが、コメント機能がないのは不完全な感じがします。 DISQUSを使う方法が説明されていますが、スタンドアローンで機能拡張できるとよいです。 そういう意味では、ライブラリとして使うものなのか、すぐに使えるようにするものなのかが曖昧に感じてきました。 このあたりもう少しいじってみたいような気もします。

さて、ついでにもう一つのパッケージを紹介します。 xolvio:md-blog (GitHub)です。 これは、The Meteor Testing Manualで実際に使われているアプリのパッケージのようです。 こちらにデモサイトがあるので様子が分かります。 表示のカスタマイズやロールの設定もできるようです。 試してはいませんが、スタンドアローンで動くアプリを作るのが目的であればこちらの方が楽かもしれません。

感想ですが、だいぶ便利なものが作られているなと思う一方で、まだまだ色々登場しそうですし、何か作ってみたいなと思います。

MeteorでGoogle Mapsを使うライブラリとしては、 dburles:google-maps が有名なようですが、使ってみたところちょっと気に入りませんでした。 せっかくBlazeがシンプルな設計になっているのに、全然お手軽な感じがしません。 リアクティブにするためのサンプルが載っていますが、アプリ開発者の仕事になってしまっています。 慣れている人はいいですが、Blaze初心者にはつらい感じです。

ないものは作ろうということで、作りました。

https://atmospherejs.com/daishi/blaze-google-maps

全部のAPIをサポートしているわけではないので、ライブラリとして置き換えられるようなものではありません。 しかし、マーカーをコレクションから読み込んで表示することに限れば、素直に使えるのではないかと思います。 もちろん、リアクティブに動作します。

Google Maps APIをMeteorから使ってみようと思う方はぜひお試しください。

10/6追記

なぜか「ライブラリ」と書いていましたが「パッケージ」と書くつもりでした。

Meteorの標準テンプレートであるBlazeはシンプルで割と気に入っています。 最低限の機能が用意されていて、あとは自分でがんばってねという感じが悪くないです。 ただ、Angularに慣れてしまうとこんなことはできないのかなどと思うことがあります。

その一つが、ng-showみたいなこと。ng-clickと合わせて表示を切り替えることがしばしばあります。

Blazeでは{{#if}}を使うと似たようなことができます。これはおそらくng-if相当です。具体的には次のようになります。

<template name="foo">
  {{#if hello}}
    <p>Hello World!</p>
  {{/if}
</template>

と

Template.foo.helpers({
  hello: function() {
    return Session.get('hello');
  }
});

さらに表示を切り替えるボタンは例えば次のようになります。

<template name="bar">
  <button>Toggle</button>
</template>

と

Template.bar.events({
  'click button': function(event) {
    event.preventDefault();
    Session.set('hello', !Session.get('hello'));
  }
});

ちなみに、AngularだとHTML内にロジックを書いてしまえば次のように書けます。

<p ng-if="hello">Hello World!</p>
<button ng-click="hello = !hello">Toggle</button>

そこで、Blazeでも簡単に書けるようにするパッケージを作ってみました。

https://atmospherejs.com/daishi/blaze-showhide

これを使うと、

<div>
  {{#showIf name="hello"}}
    <p>Hello World!</p>
  {{/showIf}}
  {{#toggleShowHide name="hello"}}
    <button>Toggle</button>
  {{/toggleShowHide}}
</div>

こんな感じで書けるようになります。Sessionはアプリで共通なので実際に使う場合は他のtemplateと競合しないように注意する必要があります。

ng-ifやng-showを使いたいのならangular-meteorを使えばよいのではないかという意見もありますが、それはそれとしてBlazeでもパッケージでこういうやり方ができるということが分かりました。

余力があればやってみたいことは、ng-show相当の機能や設定のカスタマイズなどです。 余力というかモチベーションですが。

ところで、既に似たような機能を持つパッケージがないか探したのですが、見つかりませんでした。 もしかしたら、探し方が不十分であるパッケージの一機能として実現されているものもあるかもしれません。 いずれにしてもパッケージ作りの勉強になりました。