Menu

Subscribe

Meteor Fan (日本語情報)

JavaScriptフレームワークMeteorに関していろいろ紹介する日本語情報サイト

フォームを簡単に生成するMeteorパッケージ「AutoForm」

| パッケージ

MeteorでFormを簡単に作るパッケージを紹介します。

管理系のUIを作成する場合には、Meteorのコレクションを操作するためのフォームを作成することがよくあると思います。普通に開発してもそれほど手間はかかりませんが、より手軽に開発できるとよいです。フォームのバリデーションも簡単にできるよよいです。そのようなことを実現するパッケージを紹介します。

AutoFormとは

AutoForm(Atomosphere, GitHub)は、とても簡単にフォームを作成できるMeteorパッケージです。スキーマの定義は依存パッケージであるSimpleSchemaで実現しており、またCollections2を使うとサーバ側でのバリデーションも自動で行われるようにできます。本記事ではCollection2は使わずに紹介します。

インストールは、

meteor add aldeed:autoform

でできます。パッケージで提供されている標準フォームタイプ以外にも外部パッケージで様々な追加タイプがサポートされています。詳細はAutoFormのREADMEを参照してください。

とりあえずどんなことができるのかはデモサイトを見ると分かりやすいです。

簡単な使い方

最も簡単な例として、氏名を入力するフォームを考えます。まずはコレクションの定義をします。

var Names = new Mongo.Colleciton('names');

次にスキーマの定義をします。

var NamesSchema = new SimpleSchema({
  lastname: {
    type: String,
label: '姓'
  },
  firstname: {
    type: String,
label: '名'
  }
};

最後にHTMLでテンプレートを呼び出します。

1
{{> quickForm id="insert-form" schema=NamesSchema type="insert"}}

へルパーの設定がどこかに必要です。例えば、グローバルへルパーの場合は、

if (Meteor.isClient()) {
  Template.registerHelper('NamesSchema', NamesSchema);
}

のようにします。

以上のコードでフォームが作成されます。下記に補足を述べます。

  • デフォルトではBootstrapのスタイルが適用されています
  • insecureパッケージが削除されている場合は、allow()で適切に権限が設定されている必要があります
  • ほぼ同様に type="update" もできます

もう少し柔軟な使い方

上記の例は簡単ですが、もっと表示をカスタマイズしたい場合があるでしょう。また、Meteorのチュートリアルに沿って学習した場合、allowよりMeteor.methodsを使う方が慣れているでしょう。

下記のように書くことができます。

1
2
3
4
{{#autoForm id="insert-form" schema=NamesSchema type="method" meteormethod="insertName"}}
  {{> afQuickField name="lastname"}}
  {{> afQuickField name="firstname"}}
  <buttont type="submit" class="btn btn-primary">保存</button>

この場合、次のようなmethodが定義されている必要があります。

Meteor.methods({
  insertName: function(doc) {
    // 必要であれば権限の確認をまず行う
    check(doc, NamesSchema);
    Names.insert(doc);
  }
});

下記に補足を述べます。

  • 上記例ではUIは変化がありませんが、いじりやすくはなっています
  • Meteor.methodsを使う場合は自前でチェックなどを実装する必要があります
  • updateについてもだいただ同様に実現することができます

さらに高度な使い方

AutoFormはカスタマイズ可能なように多くのテンプレートが用意されており、様々なオプションを指定できます。また、処理のフックも多く柔軟な対応が可能です。あまりに多くて書ききれないため、AutoFormのREADMEを参照してください。

ところで、Meteor Forumでは、AutoFormの代替について議論されています。AutoFormは大きすぎるのか多少問題も含んでいるとのことです。一つの案として、SimpleSchemaを直接使う案が提示されており、考慮の価値があるかもしれません。また、https://atmospherejs.com/templates/formsも紹介されています。

感想

Meteorの精神ではコード量は少なくアプリを開発できるとよいと思うので、その意味でこのパッケージは使い出がありそうです。アプリをある程度開発してから導入するのは手間がかかるので、初めから使う方がよいと思います。AutoFormの流儀に乗っ取れば大幅にコード量を削減できるでしょう。

カスタマイズ性が高いことは大変すばらしく再利用性も上がりそうですが、一方でカスタマイズを増やすと、コードとしてはかえって分かりにくくなるかもしれません。コード量が変わらないのであれば、Blaze標準機能だけで実装した方がブラックボックスがない分理解しやすい可能性があります。このあたりはトレードオフになりそうです。