Discover Meteor
Discover Meteorは Meteor の使い方を一通り学ぶのにちょうど良いサイト(オンラインブック)です。Meteor のチュートリアルを探し求めている途中で見つけました。
Discover Meteor は一部を除いて有料ですが、クリエイティブ・コモンズ 表示-非営利ライセンスの元、日本語翻訳版が公開されており、なんとこちらは無料で読むことができます。太っ腹ですね。
ただし、未翻訳の部分があったり、翻訳内容が古かったりと、完全ではないので注意が必要です。正確な情報が必要な場合は英語版のオンラインブックを購入することをお勧めします。
ソースコードに関しては Discover Meteor のGitHub リポジトリを参考にしながら進めていくと良い感じです。
Meteor とは
このメモに関して
- Discover Meteor の内容を Jade と CoffeeScript で書き直しています
- 必要に応じて内容をカスタマイズしている部分もあります
Chapter 2 Getting Started
Meteor のインストール
bash$
curl https://install.meteor.com | sh
Meteor のインストールが完了したらバージョンを確認しておきます。
$ meteor --version
Meteor 1.0.2.1
サンプルアプリ "microscope" の作成
bash$
meteor create microscope
Meteor アプリ動作確認
bash$
cd microscope
meteor
package の追加
bash$
meteor add mizzao:bootstrap-3
meteor add underscore
自動生成ファイルの削除
bash$
rm microscope.html microscope.js microscope.css
サンプルアプリ用のディレクトリとファイルを作成
bash$
mkdir -p client/stylesheets server public lib
touch client/main.html client/main.js client/stylesheets/style.css
サンプルアプリで使用するCSSを用意
client/stylesheets/style.css
.grid-block, .main, .post, .comments li, .comment-form {
background: #fff;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
padding: 10px;
margin-bottom: 10px;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15); }
body {
background: #eee;
color: #666666; }
.navbar {
margin-bottom: 10px; }
/* line 32, ../sass/style.scss */
.navbar .navbar-inner {
-webkit-border-radius: 0px 0px 3px 3px;
-moz-border-radius: 0px 0px 3px 3px;
-ms-border-radius: 0px 0px 3px 3px;
-o-border-radius: 0px 0px 3px 3px;
border-radius: 0px 0px 3px 3px; }
#spinner {
height: 300px; }
.post {
/* For modern browsers */
/* For IE 6/7 (trigger hasLayout) */
*zoom: 1;
position: relative;
opacity: 1; }
.post:before, .post:after {
content: "";
display: table; }
.post:after {
clear: both; }
.post.invisible {
opacity: 0; }
.post.instant {
-webkit-transition: none;
-moz-transition: none;
-o-transition: none;
transition: none; }
.post.animate{
-webkit-transition: all 300ms 0ms ease-in;
-moz-transition: all 300ms 0ms ease-in;
-o-transition: all 300ms 0ms ease-in;
transition: all 300ms 0ms ease-in; }
.post .upvote {
display: block;
margin: 7px 12px 0 0;
float: left; }
.post .post-content {
float: left; }
.post .post-content h3 {
margin: 0;
line-height: 1.4;
font-size: 18px; }
.post .post-content h3 a {
display: inline-block;
margin-right: 5px; }
.post .post-content h3 span {
font-weight: normal;
font-size: 14px;
display: inline-block;
color: #aaaaaa; }
.post .post-content p {
margin: 0; }
.post .discuss {
display: block;
float: right;
margin-top: 7px; }
.comments {
list-style-type: none;
margin: 0; }
.comments li h4 {
font-size: 16px;
margin: 0; }
.comments li h4 .date {
font-size: 12px;
font-weight: normal; }
.comments li h4 a {
font-size: 12px; }
.comments li p:last-child {
margin-bottom: 0; }
.dropdown-menu span {
display: block;
padding: 3px 20px;
clear: both;
line-height: 20px;
color: #bbb;
white-space: nowrap; }
.load-more {
display: block;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
background: rgba(0, 0, 0, 0.05);
text-align: center;
height: 60px;
line-height: 60px;
margin-bottom: 10px; }
.load-more:hover {
text-decoration: none;
background: rgba(0, 0, 0, 0.1); }
.posts .spinner-container{
position: relative;
height: 100px;
}
.jumbotron{
text-align: center;
}
.jumbotron h2{
font-size: 60px;
font-weight: 100;
}
@-webkit-keyframes fadeOut {
0% {opacity: 0;}
10% {opacity: 1;}
90% {opacity: 1;}
100% {opacity: 0;}
}
@keyframes fadeOut {
0% {opacity: 0;}
10% {opacity: 1;}
90% {opacity: 1;}
100% {opacity: 0;}
}
.errors{
position: fixed;
z-index: 10000;
padding: 10px;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
pointer-events: none;
}
.alert {
animation: fadeOut 2700ms ease-in 0s 1 forwards;
-webkit-animation: fadeOut 2700ms ease-in 0s 1 forwards;
-moz-animation: fadeOut 2700ms ease-in 0s 1 forwards;
width: 250px;
float: right;
clear: both;
margin-bottom: 5px;
pointer-events: auto;
}
Jade パッケージ導入
bash$
meteor add mquandalle:jade
mv client/main.html client/main.jade
CoffeeScript パッケージ導入
bash$
meteor add coffeescript
mv client/main.js client/main.coffee
Chapter 2.5 Deployment
meteor.com でサンプルアプリケーションを公開する
bash$
meteor deploy myapp.meteor.com
注: サブドメイン(myappの部分)はまだ使用されていないものを指定する。
Chapter 3 Templates
html と JavaScript で書かれている部分を jade と CoffeeScript で書き直し。
client/main.jade
head
title Microscope
body
.container
header.navbar.navbar-default(role="navigation")
.navbar-header
a.navbar-brand(href="/") Microscope
#main.row-fluid
+postsList
client/posts/posts_list.jade
template(name="postsList")
.posts
each posts
+postItem
client/posts/post_item.jade
template(name="postItem")
.post
.post-content
h3
a(href=url) {{title}}
client/posts/posts_list.coffee
postsData = [
{
title: 'Introducing Telescope'
url: 'http://sachagreif.com/introducing-telescope/'
}
{
title: 'Meteor'
url: 'http://meteor.com'
}
{
title: 'The Meteor Book'
url: 'http://themeteorbook.com'
}
]
Template.postsList.helpers
posts: postsData
ブラウザで動作確認
bash$
meteor
で meteor アプリを起動してから http://localhost:3000 にアクセス。
Jade + CoffeeScript でも同じように表示されました。
ひとまずここまで。