MeteorをMacにインストールしTodo管理のWebサービスを作る方法

公式サイト

Meteor公式サイトのチュートリアルはこちら。

Try Meteor

環境

Mac OS X Mountain Lion(10.8.5)
Meteor 1.0.3.2(2015/03/04最新版)

MeteorをMacにインストールする

ターミナルで下記のコマンドを入力します。

curl https://install.meteor.com/ | sh

すると、下記のようにダウンロードが始まり、インストールが完了します。たったこれだけ。

Meteorをダウンロード中

  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
100  6121    0  6121    0     0   2683      0 --:--:--  0:00:02 --:--:--  3075
Downloading Meteor distribution
######################################################################## 100.0%
 
Meteor 1.0.3.2 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 コマンドを使って、新しいプロジェクトを作成します。

新規プロジェクトの作成コマンド

meteor create simple-todos

正常に実行されると、下記のように表示されます。

実行結果

% meteor create simple-todos
 
simple-todos: created.
 
To run your new app:
  cd simple-todos
  meteor

プロジェクトの中に入っているもの

新規プロジェクトの中には、js,html,cssとmeteorのディレクトリが入っています。

プロジェクトの中身を確認してみる

% cd simple-todos
% ls -al
 
total 24
drwxr-xr-x   6 zero  staff  204  3  4 04:40 .
drwxr-xr-x   7 zero  staff  238  3  4 04:40 ..
drwxr-xr-x  10 zero  staff  340  3  4 04:40 .meteor
-rw-r--r--   1 zero  staff   31  3  4 04:40 simple-todos.css
-rw-r--r--   1 zero  staff  225  3  4 04:40 simple-todos.html
-rw-r--r--   1 zero  staff  478  3  4 04:40 simple-todos.js

ブラウザで確認する

次に、作ったプロジェクトが正常にブラウザでアクセスできるか確認します。Meteorサーバを立ち上げるには、meteor と入力するだけです。

サーバを立ち上げブラウザで確認する

simple-todos% meteor
[[[[[ ~/projects/materializer/simple-todos ]]]]]
 
=> Started proxy.
=> Started MongoDB.
=> Started your app.
 
=> App running at: http://localhost:3000/

ここまでできたら、ChromeやFirefox等のブラウザから、http://localhost:3000/ にアクセスします。下記のようなClick Meボタンを押すと、カウントが増えていくサンプルが表示されます。

プロジェクトの中に入っているもの

プロジェクトを構成するhtml,css,jsのファイルをそれぞれ見てみてると、下記のようになっています。

simple-todos.html

simple-todos.html

  1 <head>
  2   <title>simple-todos</title>
  3 </head>
  4
  5 <body>
  6   <h1>Welcome to Meteor!</h1>
  7
  8   {{> hello}}
  9 </body>
 10
 11 <template name="hello">
 12   <button>Click Me</button>
 13   <p>You've pressed the button {{counter}} times.</p>
 14 </template>

simple-todos.css

simple-todos.css

 1 /* CSS declarations go here */

simple-todos.js

simple-todos.js

  1 if (Meteor.isClient) {
  2   // counter starts at 0
  3   Session.setDefault('counter', 0);
  4
  5   Template.hello.helpers({
  6     counter: function () {
  7       return Session.get('counter');
  8     }
  9   });
 10
 11   Template.hello.events({
 12     'click button': function () {
 13       // increment the counter when button is clicked
 14       Session.set('counter', Session.get('counter') + 1);
 15     }
 16   });
 17 }
 18
 19 if (Meteor.isServer) {
 20   Meteor.startup(function () {
 21     // code to run on server at startup
 22   });
 23 }

"hot code push"の体験

上記のhtmlファイル内のボタンテキストなどをエディタで変更すると、変更内容がリアルタイムにブラウザに反映されます。これがリアクティブプログラミングを体現するMeteorの大きな特徴です。“hot code push“と呼ばれています。

Brainvalley

サイドバー

最新情報を購読する

脳科学・神経科学を網羅的に学ぶ必読書

最新記事

人工知能・脳科学エッセイ

書籍・セミナー・勉強会

オンライン大学

論文検索

研究者の採用・求人

MeteorをMacにインストールしTodo管理のWebサービスを作る方法

公式サイト

環境

MeteorをMacにインストールする

新しいプロジェクトを作ってみる

新規プロジェクトの作成

プロジェクトの中に入っているもの

ブラウザで確認する

プロジェクトの中に入っているもの

simple-todos.html

simple-todos.css

simple-todos.js

"hot code push"の体験

関連