流星の世界の例
このチュートリアルでは、https://www.meteor.com/[Meteor]フレームワークを使用してウェブサイトを作成する方法を説明します。
使用されるツール:
-
流星1.2.1
-
Linuxでテスト済み(Debian、Ubuntu、Mint)
-
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]