【Meteor】はじめての Meteor

JavaScript + HTML + CSSで Webアプリケーションを作ることができる、 Meteor を使ってみました。

Meteorの特徴

Node.jsをベースにしているのでクライアントとサーバのコードを一つの言語(JavaScript)で書くことができる
インストールもデプロイもコマンド一発でできる
パッケージが充実している
リロードしなくても修正したコードが同期される

早速インストールしてみましょう。

Meteor のインストール

$ curl install.meteor.com | sh

これで実行に必要なファイルが全てダウンロードされます。

  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
100  3642    0  3642    0     0   1707      0 --:--:--  0:00:02 --:--:--  2509
Downloading Meteor distribution
######################################################################## 100.0%

Meteor 0.6.4 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

インストールされていることの確認

$ meteor --version

Release 0.6.4

これでインストールは完了。

Hello World

・プロジェクトを作成する

$ meteor create demo

「demo.css」「demo.html」「demo.js」の3ファイルと「.meteor」ディレクトリが作成されます。

# demo.css

/* CSS declarations go here */

# demo.html

<head>
  <title>demo</title>
</head>

<body>
  {{> hello}}
</body>

<template name="hello">
  <h1>Hello World!</h1>
  {{greeting}}
  <input type="button" value="Click" />
</template>

# demo.js

if (Meteor.isClient) {
  Template.hello.greeting = function () {
    return "Welcome to demo.";
  };

  Template.hello.events({
    'click input' : function () {
      // template data, if any, is available in 'this'
      if (typeof console !== 'undefined')
        console.log("You pressed the button");
    }
  });
}

if (Meteor.isServer) {
  Meteor.startup(function () {
    // code to run on server at startup
  });
}

サーバーを起動する

$ meteor

ブラウザで確認する

ブラウザで http://localhost:3000 にアクセスし
「Click」ボタンを押すとコンソールに「You pressed the button」と表示される。

f:id:kzy52:20130708220057p:plain

デプロイする

このコマンド一発でデプロイできてしまう。

$ meteor deploy kzy52demo

Deploying to kzy52demo.meteor.com.  Bundling...
Uploading...
Now serving at kzy52demo.meteor.com

http://kzy52demo.meteor.com でアクセスできるようになる。

パスワードを設定する

このままでは誰でも自由にデプロイできてしまうのでパスワードを設定する。

$ meteor deploy kzy52demo  --password

New Password:
New Password (again):
Deploying to kzy52demo.  Bundling...
Uploading...
Now serving at kzy52demo.meteor.com

デプロイを取り消す

$ meteor deploy --delete kzy52demo

Deleted.

・参考にしたサイト

http://meteor.com/