MeteorKitchenで簡単アプリ構築

MeteorKitchenで簡単アプリ構築

これはMeteor Advent Calendar 2015の初日(12⁄1)の投稿です。 今回はjsonファイルを記述するだけで、Node.jsのフレームワークであるMeteorのアプリケーションを構築できるMeteorKitchenの紹介をしていきます。 Meteorとは? Node.jsのフルスタックフレームワークです。 https://www.meteor.com/ コマンド一発で開発環境構築やデプロイ、アプリ生成までできちゃうやつです。 現状のフロントエンド周りのツール類はカオスなので、コマンド叩くだけで環境構築できるのは便利。 もちろんその環境で、ES2015がデフォルトで使えます。 ビルド周りも勝手にやってくれます。 ちなみに、Meoterのドキュメントを日本語に翻訳中です。 http://meteor-fan.github.io/meteor-docs-ja/ Basicのほうは完了しているので、参考にしてみてください。 Meteor Kitchenとは? jsonを記述するだけで、Meteorのアプリが構築できるツールです。 jsonだけと聞くと簡単なものしか作れないように聞こえますが、複雑なアプリもつくることができます。 そのぶんjsonも複雑になるのであんまり変わらないかもしれませんが… インストールと実行 $ curl http://www.meteorkitchen.com/install | /bin/sh $ vim myapp.json $ meteor-kitchen myapp.json myapp $ cd myapp && meteor 簡単ですね。 適当なjsonファイルを編集して、meteor-kitchenコマンドで実行すると生成されます。 下のmeteorコマンドはMeteorの機能で、開発環境構築のためのコマンドです。 Meteor Kitchenの利点 公式サイトに記載されているメリットは4つです。 Save time & money Perfect for prototyping High quality code Write once - use many times 素早く構築できるので、お金と時間が節約できます。 そのため、プロトタイピングに最適です。 高品質なMeoterにコードが生成されます。 書いたjsonファイルは使い回しができます。 みたいなことが書いてあります。 基本的に一般的な自動生成ツールのメリットと同じですね。 ただ後述しますが、時間とお金の節約になるかどうかは個人的には疑問です。 json サンプル jsonファイルのサンプルです。 公式サイトにものってます。 http://www.meteorkitchen.com/getting_started ちなみに、直でjsonを書くのではなく、yamlからjsonを生成する方法が推奨されています。 さすがにこの規模を書くのは厳しいですしね。 { "application": { "free_zone": { "pages": [ { "name": "home", "title": "Home page" }, { "name": "about", "title": "About" } ], "components": [ { "name": "main_menu", "type": "menu", "items": [ { "title": "Home page", "route": "home" }, { "title": "About", "route": "about" } ] } ] } } } pagesの中身が各ページごとの生成になっています。 ここではcomponents以下にmain_menuの記述がされています。 componentsにはいろいろな要素(メニューやフォームなど)の要素を記載します。 生成されるファイル 上記のhomeの要素から生成されるファイルは以下の3つです。 home.html home.js home_controller.js ページ一つにつき、3ファイル生成されるのでわりと煩雑になります。 ちなみに生成されるファイルの命名規則は、テンプレートがキャメルケース、それ以外がスネークケースとなっています。 自分で追加実装する際は、その命名規則を守ったほうが良さそうです。 フロントエンドフレームワーク フロントエンドフレームワークは3種類から選べます。 bootstrap3 semantic-ui materialize デフォルトはbootstrap3です。 jsonのいろいろな書き方 Meteor Kitchenは簡単なアプリだけではなく、複雑なアプリも構築できます。 そのために必要な記述を紹介します。 collections { "collections": [ { "name": "notes", "before_insert_code": "doc.name = Meteor.user() ?