リアルタイムJSフレームワーク「Meteor」
エンジニアの松本です。
今日は最近Ver1.0になったJSフレームワーク、Meteorを触ってみたので、その共有をしたいと思います。
Meteorとは
データのリアルタイム同期、クライアントサイド／サーバサイドの同一言語開発(JavaScript、Node.js)、フルスタックフレームワークである事に加えPaaS環境やDB環境まで備えた全部入りの特徴を持ったJSフレームワークです。
2年前ぐらいに初期バージョンが公開され、わりと話題になりました。
で、ようやくバージョンが1.0になったようなので、チュートリアルをやってみました。
作業ログだけ見たい方はこちら→ Meteor Getting Started & Tutorial - Qiita
作業後のデプロイ済みの状態はこちら→ simple-todos (複数ブラウザで操作してみると変更がリアルタイムで同期されるのが分かると思います。)
セットアップ
インストールはコマンド一行です。
curl https://install.meteor.com/ | sh
------------------------------
% Total % Received % Xferd Average Speed Time Time Time Current
Dload Upload Total Spent Left Speed
100 6117 0 6117 0 0 2958 0 --:--:-- 0:00:02 --:--:-- 2959
Downloading Meteor distribution
######################################################################## 100.0%
Meteor 1.0 has been installed in your home directory (~/.meteor).
Writing a launcher script to /usr/local/bin/meteor for your convenience.
To get started fast:
$ meteor create ~/my_cool_app
$ cd ~/my_cool_app
$ meteor
Or see the docs at:
docs.meteor.com
------------------------------
サンプルアプリ作成
rails newと同じようにmeteor createでアプリケーションのひな形を自動生成してくれます。
cd ~/WORK_DIR
meteor create simple-todos
------------------------------
simple-todos: created.
To run your new app:
cd simple-todos
meteor
------------------------------
- アプリ起動
ローカルでの起動もrails sと同じようにmeteorと打つだけです。
cd simple-todos
meteor
------------------------------
[[[[[ ~/labo/meteor/simple-todos ]]]]]
=> Started proxy.
=> Started MongoDB.
=> Started your app.
=> App running at: http://localhost:3000/
------------------------------
データ格納
データを表示するhtmlとデータを取得するjsを用意します。
特に設定を書かなくてもMongoに繋がります。
- mongoDBコンソール起動
meteor mongo
- データ格納
db.tasks.insert({ text: "Hello world!", createdAt: new Date() });
データが追加された事を勝手に検知して、画面をリロードしなくても追加したデータが画面に表示されます。
フォームからデータ追加
フォームからデータを追加する場合もhtmlとjsだけで完結します。
データ削除
データの削除も、1つのページで削除を実行したらリアルタイムに他の画面にも反映されます。
デプロイ
MeteorはPaaS環境も備えているので、deployコマンドを実行するだけで他の人も閲覧可能な公開環境を作る事が出来ます。
meteor deploy simple-todos-sample.meteor.com
------------------------------
To instantly deploy your app on a free testing server, just enter your
email address!
Email: s.matsumoto0115@gmail.com
Deploying to http://simple-todos-sample.meteor.com.
Now serving at http://simple-todos-sample.meteor.com
/
You can set a password on your account or change your email address at:
https://www.meteor.com/setPassword?C3mZnbHWKK
------------------------------
セッションに一時情報保存
セッションを使う場合はSession.set、Session.getなどで。
ユーザアカウント機能
Meteorはパッケージをインストールする事で色々な機能を追加できるらしいです。
ユーザの登録やログイン機能などを追加する場合は↓こんな感じです。
meteor add accounts-ui accounts-password
------------------------------
added accounts-password at version 1.0.4
added accounts-base at version 1.1.2
added less at version 1.0.11
added accounts-ui at version 1.1.3
added service-configuration at version 1.0.2
added accounts-ui-unstyled at version 1.1.4
added email at version 1.0.4
added sha at version 1.0.1
added localstorage at version 1.0.1
added srp at version 1.0.1
added npm-bcrypt at version 0.7.7
accounts-ui: Simple templates to add login widgets to an app
accounts-password: Password support for accounts
------------------------------
meteor
------------------------------
[[[[[ ~/labo/meteor/simple-todos ]]]]]
=> Started proxy.
=> Started MongoDB.
=> Started your app.
=> App running at: http://localhost:3000/
------------------------------
雑感
何もしなくてもリアルタイム同期されるっていうのはわりと感動的でした。
シングルページのWebアプリケーションやチャットなどのリアルタイム性が重要なアプリケーションの開発にはかなり可能性はあるんじゃないかと思います。
ただ、フルスタックでDBやPaaS環境も内包したようなフレームワークになってるので、わりと使う場面、力を発揮出来るケースが限定されるかもっていう気もします。
クライアントサイドをMeteorで、サーバサイドをRailsで、データのやりとりはAPIで、という構成も出来なくはなさそうなので、機会があればやってみたいなと思います。