02-getting-started.md.erb

---
title: Getting Started
slug: getting-started
date: 0002/01/01
number: 2
コンテンツ: MeteorとMeteoriteをインストールする。|５種類のMeteorパッケージの演習|Meteorアプリにファイルを構築する。
paragraphs: 49
version: 1.7
---

第一印象は重要です。Meteorのインストールプロセスは比較的痛みを伴いません。

大抵の場合最初にターミナルウインドウを開けて、以下をタイプするだけでMeteorがインストールできます。

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

これでMeteorをあなたのシステム上に実行させ、Meteorを使う準備ができます。

<% note do %>

### *Not* インストールしてはいけない場合

ローカルにMeteorをインストールできない（もしくはしたくない場合）、ここを[Nitrous.io](http://nitrous.io).

を確認する事をお勧めします。Nitrous.io はアプリを実行させ、ブラウザー上でコードを編集させてくれるサービスです。
そして、短いガイドを[a short guide](https://www.discovermeteor.com/blog/meteor-nitrous)に描いたのでセットアップするのに便利だと思います。

<% end %>
 
### 簡単なアプリの作成。

Meteorをインストールしたので、簡単なアプリを作成してみましょう。まず,
Meteorのコマンドラインのツール'meteor'を使います。

~~~bash
$ meteor create microscope
~~~

このコマンドはMeteorをダウンロードして、基本的な物をセットアップしてくれ、Meteorプロジェクトの準備をしてくれます。これが終わったら、`microscope/`ディレクトリーをみて、次の項目が構成されているか確認してください。

~~~bash
microscope.css  
microscope.html 
microscope.js   
~~~

Meteorがあなたの為に作ったアプリは簡単なパターンのお手本を示すボイラープレートアプリケーションです。

私たちのアプリが沢山の事をしなくても、実行はできます。アプリを実行するにはタームなるに戻って次をタイプします：

~~~bash
$ cd microscope
$ meteor
~~~

次にあなたの画面のブラウザーを`http://localhost:3000/` (もしくは `http://0.0.0.0:3000/`と同様にします。) に合わせてください、そしてこのような物を見てください。


<%= screenshot "2-1", "Meteor's Hello World." %>

<%= commit "2-1", "Created basic microscope project." %>

おめでとうございます！初めてMeteorでアプリを実行する事ができました。ところで、アプリを一旦止めて、アプリが起動しているターミナルタブに持ってきて、`ctrl+c`を押してください。

そして、Gitを使っているなら、これは`git init`で初めてリポするいいタイミングですよ。


<% note do %>

###バイバイMeteorite

MeteorがMeteoriteと呼ばれる外部の管理パッケージに頼っていた時期がありました。Meteor Ver0.9.0以来、Meteor自体に吸収されてからにMeteoriteはもう必要なくなりました。


もしあなたがこの本、もしくはMeteor関連のマテリアルをブラウズしている間に、Meteoriteの `mrt`のコマンドラインのユーティリティに関連するものに出くわしたら、
安全に通常の`meteor`に置き換えればいいです。
So if you encounter any references to Meteorite's `mrt` command line utility throughout this book or while browsing Meteor-related material, you can safely replace them by the usual `meteor`. 

<% end %>

### パッケージを追加する

Meteorのパッケージシステムを[Bootstrap](http://getbootstrap.com/)のフレームワークを私たちのプロジェクトに追加して使えるようになりました。


これは、Meteorのコミュニティーメンバーの [Andrew Mao](https://github.com/mizzao) (the “mizzao” in `mizzao:bootstrap-3` は著作者のユーザーネームパッケージです。)が私たちに情報を更新してくれていることを除いては、 Bootstrapを通常通りに、マニュアルでそのCSSとJavaScriptファイルを追加していくのと何ら変わりないです。


私たちがそこに居る間、[Underscore](http://underscorejs.org/) パッケージを同じく追加します。
UnderscoreはJavaScriptユーティリティライブラリーで、JavaScriptのデーター構造を操作する段階になったときにとても便利です。


これを書いている現時点では、`underscore`パッケージはまだMeteorの"公式"パッケージの一部に過ぎず、そのため著者者がいないのです：

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

Bootstrap **3**を使いしていくとうことは念頭に置いておいてください。この本にある数々のスクリーンショットは Boostrap **2**上で実行されている古いバージョンのMicroscopeで撮ったので若干違いが出るかと思います。


<%= commit "2-2", "Added bootstrap and underscore packages." %>

<% note do %>

### パッケージのノート

Meteorのパッケージを文脈でつづれというのであれば、明確に挙げれます。Meteorは５種類の基本タイプを兼ね備えています：

 -Meteorのコア部は、異なる**Meteor　platform　packages**に分割されています。Meteorアプリのどれにもに含まれており、それらを全く気にする必要は全くありません。

- 通常のMeteorパッケージは、“**isopacks**”として認知されております。同一構造のパッケージ(クライアントとサーバー両方の上で動く事が出来るという意味)、
`**ファーストーパーティー パッケージ** の'accounts-ui` や `appcache`などはMeteorのコアチーム[come bundled with Meteor](http://docs.meteor.com/#packages)によってメンテナンスされています。

-**サード-パーティーパッケージ**は、単なるisopackで、Meteorのパッケージサーバーをアップロードされている他のユーザーによって開発されました。これは[Atmosphere](http://atmosphere.meteor.com)　もしくは `meteor search`コマンドでブラウズが出来ます。


-**Local packages** はあなたが自分でカスタマイズできるパッケージで、`/packages`のディレクトリーに入れておけます。

- **NPM packages** (Node.js パッケージモジュール) は Node.js　パッケージのことです。Meteorと一緒にBoxの外では作動し合いませんが、以前のパッケージタイプであれば、使用可能であるかもしれません。

<% end %>

### Meteorアプリのファイル構成

コーディングを始める前に、私たちはプロジェクトのプロパティーを設定する必要があります。まずは綺麗に構築ができるよう`microscope`ディレクトリを開け`microscope.html`と、 `microscope.js`, そして `microscope.css`を削除します。 

次に、４つのルートディレクトリを `/microscope`: `/client`, `/server`, `/public`, `/lib`, そして `/collections`の内側に作成します。

その次に、空の`main.html` と `main.js` の両方のファイルを`/client`の中に作成します。今のこの作業がもしもアプリを破壊しているのであっても
心配しないでください。次の章でこれらのファイルを埋めていきます。

このいくつかのディレクトリは特別であることをここで述べさせていただきます。コーディングを実行していくのにあたり、Meteorにはいくつかのルールがあります：

- `/server` ディレクトリにあるコードはサーバー上のみ実行します。
- `/client` ディレクトリにあるコードはクライアントの上のみ実行します。
- 他のものはみんなクライアントとサーバー上の両方で実行します。
- フォントや画像などの静的なアセットは`/public`ディレクトリに行きます。

それから、Meteorがあなたのファイルをロードする順番をどう決めているかを知ることはとても役に立ちます。
- `/lib`にあるファイルは何よりも*先にロードされます。
- どの`main.*` ファイルは何よりも*後にロードされます。
- その他のものはファイル名に基づいてアルファベット順にロードされます。

これらのルールがMeteorにはあるものの、もしあなたが望まないのでれば、このファイル構成の定義は強制されません。なので、この構成は私たちが提案するものであり、決定事項ではありません。

これについてもっと詳しく知りたければ、[official Meteor　docs](http://docs.meteor.com/#structuringyourapp)を一読することをお勧めします。

<% note do %>

###MeteorはMVC?

Ruby on Railなど、他のフレームワークからMeteorに移って来ているなら人、Meteorアプリは MVC (Model View Controller)パターンを採用しているのかと疑問に思っているかもしれません。 

簡単に言うと答えはノーです。Railと違ってMeteorはあなたのアプリに対して定義づけされた構成を課してはいません。ですので、この本の中ではアクロニム（頭文字）について深く考えなくても、自分が一番理解ができるよう簡単にコードをレイアウトします。

<% end %>

### No public?

はい、うそついてました。Microscopeは静的アセットを使わないため`public/` ディレクトリは実際には必要ないのです。しかし、他のほとんどのMEteorアプリは少なくとも何枚かの画像を含んでいるため、私たちはこれを含むのことは必要だと考えました。

ところで、もう一つ、隠れ`.meteor` ディレクトリについて気づかれたのではないでしょうか。Meteor自身のコードがここに格納されていますので、これに手を加えることは大体悲惨な結果を迎えることになります。事実このディレクトリは全く見る必要のないものです。唯一、使われているMeteorのバージョンと、あなたのスマートパッケージのリストでそれぞれが使われている
'.meteor/packages` と `.meteor/release`ファイルは例外となります。パッケージ追加したりとMeteorのリリースを変えたりするときはこれらのファイルの変更を確認することは役に立ちます。

<% note do %>

### アンダーバー 対 キャメル方式

古めかしいアンダーバー(`my_variable`) 対 キャメル方式(`myVariable`)の論争について一つ言及するとしたら、常に同じ様式を取っていればどちらを使おうと全く問題ありません。

この本では、JavaScriptで通常使われている様式のキャメル方式を使っています。(ところで、表記はJavaScriptですよ、java_scriptではないですよ!). 

ここでの唯一のルールは、ファイル名はアンダーバー(`my_file.js`)で表記し、CSSのクラスはハイフン(`.my-class`)で表記するという点です。理由としては、アンダーバーはファイルシステムで一番採用されている様式であり、CSSシンタックスではすでにハイフン(`font-family`, `text-align`, etc.)が取り入れられているからです。

<% end %>

### CSSの扱いについて

この本はCSSについての本ではありません。ですので、スタイリングについて詳しく述べ、あなたの足を引き止めことを避ける為、最初から全部のスタイルシートを作成しました。


CSSはMeteorによってMinify化（ファイル圧縮）を自動でロードするようになっています。そうすれば違う他の静的アセットが `/public`でなく`/client`の中に行きます。それでは今、`client/stylesheets/` ディレクトリをd作成して、この`style.css` ファイルを中に入れてください。

~~~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;
    -webkit-transition-delay: 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;
}

.not-found{
  text-align: center;
}
.not-found 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;
}
~~~
<%= caption "client/stylesheets/style.css" %>

<%= commit "2-3","Re-arranged file structure." %>

<% note do %>

###CoffeeScriptのノート

この本では、純粋なJavaScriptを書いていきます。しかし、一方でCoffeeScriptを好むのであれば、Meteorはカバーします。CoffeeScript パッケージを追加して、準備オッケーです。:

`meteor add coffeescript`

<% end %>