Getting Started

2

翻訳の進捗

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

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

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

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

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

ローカルにMeteorをインストールできない(もしくはしたくない場合)、ここをNitrous.io.

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

簡単なアプリの作成。

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

$ meteor create microscope

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

microscope.css  
microscope.html 
microscope.js   

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

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

$ cd microscope
$ meteor

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

Meteor's Hello World.
Meteor’s Hello World.

コミット 2-1

Created basic microscope project.

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

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

バイバイ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.

パッケージを追加する

MeteorのパッケージシステムをBootstrapのフレームワークを私たちのプロジェクトに追加して使えるようになりました。

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

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

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

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

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

コミット 2-2

Added bootstrap and underscore packages.

パッケージのノート

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

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

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

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

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

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

Meteorアプリのファイル構成

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

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

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

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

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

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

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

これについてもっと詳しく知りたければ、official Meteor docsを一読することをお勧めします。

MeteorはMVC?

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

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

No public?

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

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

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

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

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

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

CSSの扱いについて

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

CSSはMeteorによってMinify化(ファイル圧縮)を自動でロードするようになっています。そうすれば違う他の静的アセットが /publicでなく/clientの中に行きます。それでは今、client/stylesheets/ ディレクトリをd作成して、この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;
    -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;
}
client/stylesheets/style.css

コミット 2-3

Re-arranged file structure.

CoffeeScriptのノート

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

meteor add coffeescript