このチュートリアルでは、https://www.meteor.com/[Meteor]フレームワークを使用してウェブサイトを作成する方法を説明します。

使用されるツール:

  1. 流星1.2.1

  2. Linuxでテスト済み(Debian、Ubuntu、Mint)

  3. Mac OSXでテスト済み

1.流星をインストールする

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

  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
100  6674    0  6674    0     0   4145      0 --:--:--  0:00:01 --:--:--  4145
Downloading Meteor distribution
######################################################################## 100.0%

Meteor 1.2.1 has been installed in your home directory (~/.meteor).
Writing a launcher script to/usr/local/bin/meteor for your convenience.//...

これは `meteor`実行可能スクリプトをインストールします。

2.流星のアプリケーションを作成する

2.1デフォルトの「クリックアンドカウント」テンプレートに基づいてMeteorアプリケーションを作成するには、 `meteor create {app-name}`を発行します。このチュートリアルでは、「こんにちは」アプリを作成します。

$ meteor create hello
Created a new Meteor app in 'hello'.

To run your new app:
  cd hello
  meteor//...

2.2終了したら、次のファイルを含む `hello`ディレクトリが表示されます:

$ tree -a -L 1 hello

hello
|--- hello.css
|--- hello.html
|--- hello.js
|--- .meteor

2.3生成されたファイルを確認します。

hello.js

if (Meteor.isClient) {
 //counter starts at 0
  Session.setDefault('counter', 0);

  Template.hello.helpers({
    counter: function () {
      return Session.get('counter');
    }
  });

  Template.hello.events({
    'click button': function () {
     //increment the counter when button is clicked
      Session.set('counter', Session.get('counter') + 1);
    }
  });
}

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

hello.css

…​./

CSS declarations go here

/…​.

hello.html

<head>
  <title>hello</title>
</head>

<body>
  <h1>Welcome to Meteor!</h1>

  {{> hello}}
</body>

<template name="hello">
  <button>Click Me</button>
  <p>You've pressed the button {{counter}} times.</p>
</template>

__P.S現在のMeteorプロジェクトの設定情報を含んでいる `.meteor`フォルダです。これは頻繁には触れません。

3.流星のアプリケーションを実行する

Meteorアプリケーションを実行するには、プロジェクトのルートパスに移動し、 `meteor`と入力します

$ cd hello/$ pwd
$/home/mkyong/hello

$ meteor[[[[[~/path-to/hello]]]]]
=> Started proxy.
=> Started MongoDB.
=> Started your app.

=> App running at: http://localhost:3000/....

Meteorは3000番ポートで起動します。

===  4.デモ

4.1ブラウザを開き、__http://localhost:3000/__にアクセスします。

image://wp-content/uploads/2016/01/meteor-hello-world-1.png[meteor-hello-world-1、width = 604、height = 398]

4.2ブラウザで、いくつかのタブを開き、同じURL __http://localhost:3000/__にアクセスし、ブラウザを開いたままにします。 `hello.html`を編集し、` **  hello world **  'を `h1`の行頭に追加して保存します。

hello.html

<head>
<title>hello</title>
</head>

<body>
<h1>Welcome to Meteor! hello world</h1>

  {{> hello}}
</body>

<template name=”hello”>
<button>Click Me</button>
<p>You’ve pressed the button {{counter}} times.</p>
</template>

4.3ブラウザをもう一度見直すと、すぐにすべてのブラウザのタブに表示され、ブラウザやF5を更新する必要はありません!

image://wp-content/uploads/2016/01/meteor-hello-world-2.png[meteor-hello-world-2、width = 688、height = 470]

===  5.よくある質問

5.1実行中のMeteorアプリケーションを停止するには? **  A ** :Meteorアプリケーションが動作している端末を起動し、 `ctrl c 'を押します。

5.2他のMeteor appテンプレートはありますか? **  A ** : `meteor create --list`

$ meteor create –list
Available examples:
clock
leaderboard
localmarket
simple-todos
simple-todos-angular
simple-todos-react
todos

テンプレート "localmarket"から流星アプリを作成する例

$ meteor create hello –example localmarket

5.3異なるポートでMeteorアプリケーションを起動するには? **  A ** : `meteor --port {port-number}`を使用します。

$ meteor –port 8080

1024より小さいポートの場合、 `sudo`が必要です

$ meteor –port 80
Error: listen EACCES

$ sudo meteor –port 80

=== 参考文献

.  https://www.meteor.com/[Meteor  -  JavaScriptアプリケーションプラットフォーム]

.  https://www.meteor.com/tutorials/blaze/creating-an-app[Meteor  -

あなたの最初のアプリを作成する]

link://tag/hello-world/[hello world]link://tag/meteor/[meteor]