Discover Meteor メモ(Jade + CoffeeScript 対応)



# Discover Meteor 

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

Discover Meteor は一部を除いて有料ですが、[クリエイティブ・コモンズ 表示-非営利ライセンス](http://creativecommons.org/licenses/by-nc/4.0/deed.ja)の元、[日本語翻訳版](http://ja.discovermeteor.com/)が公開されており、なんとこちらは無料で読むことができます。太っ腹ですね。

* [Discover Meteor 日本語翻訳版](http://ja.discovermeteor.com/)

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

ソースコードに関しては Discover Meteor の[GitHub リポジトリ](https://github.com/DiscoverMeteor/Microscope)を参考にしながら進めていくと良い感じです。

# Meteor とは

* [meteor.com](https://www.meteor.com/)
* [JavaScript超初心者向け Meteor メモ (1) - Qiita](http://qiita.com/tadfmac/items/a63bb85e5cfb12bbbfc8)

# このメモに関して

* Discover Meteor の内容を Jade と CoffeeScript で書き直しています
* 必要に応じて内容をカスタマイズしている部分もあります

## Chapter 2 Getting Started

### Meteor のインストール

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

Meteor のインストールが完了したらバージョンを確認しておきます。

```bash
$ meteor --version
Meteor 1.0.2.1
```

### サンプルアプリ "microscope" の作成

```bash:bash$
meteor create microscope
```

### Meteor アプリ動作確認

```bash:bash$
cd microscope
meteor
```

### package の追加

```bash:bash$
meteor add mizzao:bootstrap-3
meteor add underscore
```

### 自動生成ファイルの削除

```bash:bash$
rm microscope.html microscope.js microscope.css
```

### サンプルアプリ用のディレクトリとファイルを作成

```bash:bash$
mkdir -p client/stylesheets server public lib
touch client/main.html client/main.js client/stylesheets/style.css
```

### サンプルアプリで使用する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:bash$
meteor add mquandalle:jade
mv client/main.html client/main.jade
```

### CoffeeScript パッケージ導入

```bash:bash$
meteor add coffeescript
mv client/main.js client/main.coffee
```

## Chapter 2.5 Deployment

### meteor.com でサンプルアプリケーションを公開する

```bash:bash$
meteor deploy myapp.meteor.com
```

注: サブドメイン(myappの部分)はまだ使用されていないものを指定する。

## Chapter 3 Templates

html と JavaScript で書かれている部分を jade と CoffeeScript で書き直し。

```jade: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
```

```jade:client/posts/posts_list.jade
template(name="postsList")
  .posts
    each posts
      +postItem
```

```jade:client/posts/post_item.jade
template(name="postItem")
  .post
    .post-content
      h3
        a(href=url) {{title}}

```

```coffeescript: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:bash$
meteor
```

で meteor アプリを起動してから http://localhost:3000 にアクセス。

![2015-01-05_microscope.png](https://qiita-image-store.s3.amazonaws.com/0/24450/69783593-e133-a283-afba-ed1a7d3ffe92.png "2015-01-05_microscope.png")

Jade + CoffeeScript でも同じように表示されました。

ひとまずここまで。