Discover Meteor メモ(Jade + CoffeeScript 対応)

Discover Meteor

Discover Meteorは Meteor の使い方を一通り学ぶのにちょうど良いサイト(オンラインブック)です。Meteor のチュートリアルを探し求めている途中で見つけました。

Discover Meteor は一部を除いて有料ですが、クリエイティブ・コモンズ 表示-非営利ライセンスの元、日本語翻訳版が公開されており、なんとこちらは無料で読むことができます。太っ腹ですね。

• Discover Meteor 日本語翻訳版

ただし、未翻訳の部分があったり、翻訳内容が古かったりと、完全ではないので注意が必要です。正確な情報が必要な場合は英語版のオンラインブックを購入することをお勧めします。

ソースコードに関しては Discover Meteor のGitHub リポジトリを参考にしながら進めていくと良い感じです。

Meteor とは

• meteor.com
• JavaScript超初心者向け Meteor メモ (1) - Qiita

このメモに関して

• 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 でも同じように表示されました。

ひとまずここまで。