未完成です。随時更新していきます。(学校が始まってしばらく忙しいため２〜３日に一回のペースになります)
僕自身チュートリアルを進めながら翻訳しているため、間違った理解故の説明や翻訳ミスなど含まれるかもしれません。もしお気付きの点がありましたらコメントにて教えていただけると助かります。
箇条書きみたいになってしまってて申し訳ありません。一通り翻訳が終わったら自然な文になるよう努めます。
ちなみにMeteorの公式はコチラ
興味のある方は是非最後までお付き合いください。
Meteorのインストール
MeteorはOSX、Windows、Linuxをサポートしています。
WindowsではここからMeteorのインストーラーをダウンロードしてください。
OSXとLinuxではターミナルから最新のMeteorをインストールしてください。
% curl https://install.meteor.com/ | sh
アプリケーションの作成
Meteorアプリケーションを作成するには、ターミナルを開いて
meteor create simple-todos
と入力してください。
simple-todos呼ばれるフォルダーとMeteorアプリケーションに必要なファイルの全てが生成されます。
作成したアプリケーションを実行する
% cd simple-todos
% meteor
実行したアプリケーションを見る
ブラウザでhttp://localhost:3000にアクセスします。
作業を続行する前に、このデフォルトのアプリケーションで少し遊ぶことが出来ます。
例えばsimple-todos.htmlの<h1>の中をエディタで編集してください。
そのファイルを保存した時、ブラウザのページは自動的に新しい内容に更新されます。
これをhot code pushと呼びます。
テンプレートについて
TODOアプリの作業を始めるには、デフォルトのアプリケーションのコードを以下のコードに置き換えましょう。
後ほど、コードに関する説明をします。
<head>
<title>Todo List</title>
</head>
<body>
<div class="container">
<header>
<h1>Todo List</h1>
</header>
<ul>
{{#each tasks}}
{{> task}}
{{/each}}
</ul>
</div>
</body>
<template name="task">
<li>{{text}}</li>
</template>
if (Meteor.isClient) {
// This code only runs on the client
Template.body.helpers({
tasks: [
{ text: "This is task 1" },
{ text: "This is task 2" },
{ text: "This is task 3" }
]
});
}
ブラウザ上ではこのように見えるはずです。
Todo List
・This is task 1
・This is task 2
・This is task 3
コードを調べてみましょう。
MeteorのHTMLファイルにテンプレートを定義
Meteorはアプリケーションのフォルダー内の全てのHTMLファイルをパースし、<head> <body> <template>の3つのトップレベルのタグを識別します。
headタグ内のそれぞれのものはクライアント側に送られたHTMLのheadに追加され、bodyタグ内のものは通常のHTMLと同じようにbodyに追加されます。
またtemplateタグ内のものは、Meteorのテンプレートにコンパイルされます。
これは{{> templateName}}を使ってHTML内にインクルードするかTemplate.templateNameを使ってJavaScriptの中で参照することができます。
ロジックとテンプレートへのデータを追加する
HTMLファイルの全てのコードは、Meteor's Spacebars compilerでコンパイルされます。
Spacebarsでロジックとデータをviewに追加するには、{{#each}}や{{#if}}のように2重中括弧で囲まれた文を使用します。
データは定義されているhelperによってJavaScriptのコードから渡すことができます。
上記のコードでは、配列を返すtasksと呼ばれるhelperをTemplate.bodyに定義しました。
HTMLのbodyタグ内で、配列の反復処理と各値をtaskテンプレートに挿入するために{{#each tasks}}を使うことができます。
#eachのブロック内では{{text}}を使って、それぞれの配列のアイテムのtextプロパティーを表示することができます。
CSSを追加する
先に進める前に、CSSを追加してアプリケーションの見た目を良くしてみましょう。
このチュートリアルでは、HTMLとJavaScriptでの作業に焦点を置いているので、以下の全てのCSSはsimple-todos.cssにコピーしてください。
この全てのCSSはチュートリアルの最後まで必要になります。
このアプリケーションは、まだCSS無しでも動作します。
しかし、それを追加すればより良い見た目になるでしょう。
/* CSS declarations go here */
body {
font-family: sans-serif;
background-color: #315481;
background-image: linear-gradient(to bottom, #315481, #918e82 100%);
background-attachment: fixed;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
padding: 0;
margin: 0;
font-size: 14px;
}
.container {
max-width: 600px;
margin: 0 auto;
min-height: 100%;
background: white;
}
header {
background: #d2edf4;
background-image: linear-gradient(to bottom, #d0edf5, #e1e5f0 100%);
padding: 20px 15px 15px 15px;
position: relative;
}
#login-buttons {
display: block;
}
h1 {
font-size: 1.5em;
margin: 0;
margin-bottom: 10px;
display: inline-block;
margin-right: 1em;
}
form {
margin-top: 10px;
margin-bottom: -10px;
position: relative;
}
.new-task input {
box-sizing: border-box;
padding: 10px 0;
background: transparent;
border: none;
width: 100%;
padding-right: 80px;
font-size: 1em;
}
.new-task input:focus{
outline: 0;
}
ul {
margin: 0;
padding: 0;
background: white;
}
.delete {
float: right;
font-weight: bold;
background: none;
font-size: 1em;
border: none;
position: relative;
}
li {
position: relative;
list-style: none;
padding: 15px;
border-bottom: #eee solid 1px;
}
li .text {
margin-left: 10px;
}
li.checked {
color: #888;
}
li.checked .text {
text-decoration: line-through;
}
li.private {
background: #eee;
border-color: #ddd;
}
header .hide-completed {
float: right;
}
.toggle-private {
margin-left: 5px;
}
@media (max-width: 600px) {
li {
padding: 12px 15px;
}
.search {
width: 150px;
clear: both;
}
.new-task input {
padding-bottom: 5px;
}
}
コレクションについて
コレクションは、Meteorの永続的なデータを保存する方法です。
Meteorのコレクションに関する特別なことは、サーバーとクライアントの両方からアクセスできるということです。