流星-概要

Meteorの公式文書によると-

'_Meteorは、最新のWebおよびモバイルアプリケーションを開発するためのフルスタックJavaScriptプラットフォームです。 Meteorには、接続クライアントリアクティブアプリケーションを構築するための主要なテクノロジーセット、ビルドツール、およびNode.jsおよび一般的なJavaScriptコミュニティからの厳選されたパッケージセットが含まれています。_

特徴

* Webおよびモバイル*-Meteorは、Web、AndroidおよびIOSアプリを開発するためのプラットフォームを提供します。
ユニバーサルアプリ-Webブラウザとモバイルデバイス用の同じコード。
パッケージ-インストールと使用が簡単な膨大な数のパッケージ。
Meteor Galaxy -Meteorアプリ展開用のクラウドサービス。

利点

開発者は、サーバー側とクライアント側の開発にのみJavaScriptを必要とします。
コーディングは非常にシンプルで初心者にも使いやすいです。
Meteorアプリはデフォルトでリアルタイムです。
公式パッケージとコミュニティパッケージは時間を大幅に節約します。

制限事項

Meteorは、大規模で複雑なアプリケーションにはあまり適していません。
Meteorを使用する場合、多くの魔法が進行しているため、開発者は何らかの形で制限を受ける場合があります。

Meteor-環境のセットアップ

この章では、WindowsオペレーティングシステムにMeteorをインストールする方法を学習します。 Meteorを使用する前に、 NodeJS が必要です。インストールしていない場合は、以下のリンクを確認してください。

前提条件

NodeJSは、Meteor開発に必要なプラットフォームです。 NodeJS環境のセットアップの準備ができていない場合は、リンク：/nodejs/nodejs_environment_setup [ NodeJS Environment Setup ]を確認してください。

Meteorをインストールする

https://www.meteor.com/install [このページ]から公式の流星インストーラーをダウンロードしてください

インストール中にエラーが発生した場合は、管理者としてインストーラーを実行してください。インストールが完了すると、Meteorアカウントを作成するように求められます。

Meteorインストーラーのインストールが完了したら、コマンドプロンプトウィンドウで次のコードを実行して、すべてが正しくインストールされているかどうかをテストできます。

C:\Users\username>meteor

出力は次のようになります-

Meteor Installation Test

Meteor-最初のアプリケーション

この章では、最初のMeteorアプリケーションを作成する方法を学びます。

ステップ1-アプリを作成する

アプリを作成するには、コマンドプロンプトウィンドウから meteor create コマンドを実行します。アプリの名前は meteorApp になります。

C:\Users\username\Desktop\Meteor>meteor create meteorApp

ステップ2-アプリを実行する

*meteor* コマンドを入力して、アプリを実行できます。

C:\Users\username\Desktop\meteorApp>meteor

このコマンドはいくつかのプロセスを開始します。これは次の画像で確認できます。

Meteor First App Run

手順3-結果の確認

これで、 http：//localhost：3000/ アドレスを開いて、最初のMeteorアプリの外観を確認できます。

Meteor First App Output

流星-テンプレート

Meteorテンプレートは、3つの最上位タグを使用しています。最初の2つは head と body です。これらのタグは、通常のHTMLと同じ機能を実行します。 3番目のタグは template です。これは、HTMLをJavaScriptに接続する場所です。

シンプルなテンプレート

次の例は、これがどのように機能するかを示しています。 name = "myParagraph" 属性を持つテンプレートを作成しています。 template タグは body 要素の下に作成されますが、画面にレンダリングする前に含める必要があります。 \ {\ {> myParagraph}} 構文を使用してそれを行うことができます。このテンプレートでは、二重中括弧*（\ {\ {text}}）を使用しています。これは *Spacebars と呼ばれる流星テンプレート言語です。

JavaScriptファイルでは、テンプレートへの接続となる* Template.myParagraph.helpers（\ {}）メソッドを設定しています。この例では、 *text ヘルパーのみを使用しています。

meteorAppl

<head>
   <title>meteorApp</title>
</head>

<body>
   <h1>Header</h1>
   {{> myParagraph}}
</body>

<template name = "myParagraph">
   <p>{{text}}</p>
</template>

meteorApp.js

if (Meteor.isClient) {

  //This code only runs on the client
   Template.myParagraph.helpers({
      text: 'This is paragraph...'
   });
}

変更を保存した後、出力は次のようになります-

流星テンプレート出力

ブロックテンプレート

次の例では、 \ {\ {＃each paragraphs}} を使用して paragraphs 配列を反復処理し、各値に対してテンプレート name = "paragraph" を返します。

meteorAppl

<head>
   <title>meteorApp</title>
</head>

<body>
   <div>
      {{#each paragraphs}}
         {{> paragraph}}
      {{/each}}
   </div>
</body>

<template name = "paragraph">
   <p>{{text}}</p>
</template>

段落*ヘルパーを作成する必要があります。これは、5つのテキスト値を持つ配列になります。

meteorApp.js

if (Meteor.isClient) {

  //This code only runs on the client
   Template.body.helpers({
      paragraphs: [
         { text: "This is paragraph 1..." },
         { text: "This is paragraph 2..." },
         { text: "This is paragraph 3..." },
         { text: "This is paragraph 4..." },
         { text: "This is paragraph 5..." }
      ]
   });
}

これで、画面に5つの段落が表示されます。

流星テンプレート出力2

流星-コレクション

この章では、 MongoDB コレクションの使用方法を学習します。

コレクションを作成する

次のコードで新しいコレクションを作成できます-

meteorApp.js

MyCollection = new Mongo.Collection('myCollection');

データを追加

コレクションが作成されたら、 insert メソッドを使用してデータを追加できます。

meteorApp.js

MyCollection = new Mongo.Collection('myCollection');

var myData = {
   key1: "value 1...",
   key2: "value 2...",
   key3: "value 3...",
   key4: "value 4...",
   key5: "value 5..."
}

MyCollection.insert(myData);

データを探す

*find* メソッドを使用して、コレクション内のデータを検索できます。

meteorApp.js

MyCollection = new Mongo.Collection('myCollection');

var myData = {
   key1: "value 1...",
   key2: "value 2...",
   key3: "value 3...",
   key4: "value 4...",
   key5: "value 5..."
}

MyCollection.insert(myData);

var findCollection = MyCollection.find().fetch();
console.log(findCollection);

コンソールには、以前に挿入したデータが表示されます。

流星コレクション検索

検索パラメーターを追加することで同じ結果を得ることができます。

meteorApp.js

MyCollection = new Mongo.Collection('myCollection');

var myData = {
   key1: "value 1...",
   key2: "value 2...",
   key3: "value 3...",
   key4: "value 4...",
   key5: "value 5..."
}

MyCollection.insert(myData);

var findCollection = MyCollection.find({key1: "value 1..."}).fetch();
console.log(findCollection);

データを更新する

次のステップは、データを更新することです。コレクションを作成して新しいデータを挿入したら、 update メソッドを使用できます。

meteorApp.js

MyCollection = new Mongo.Collection('myCollection');

var myData = {
   key1: "value 1...",
   key2: "value 2...",
   key3: "value 3...",
   key4: "value 4...",
   key5: "value 5..."
}

MyCollection.insert(myData);

var findCollection = MyCollection.find().fetch();
var myId = findCollection[0]._id;

var updatedData = {
   key1: "updated value 1...",
   key2: "updated value 2...",
   key3: "updated value 3...",
   key4: "updated value 4...",
   key5: "updated value 5..."
}

MyCollection.update(myId, updatedData);

var findUpdatedCollection = MyCollection.find().fetch();
console.log(findUpdatedCollection);

コンソールには、コレクションが更新されたことが表示されます。

流星コレクション更新

データを削除

*remove* メソッドを使用して、コレクションからデータを削除できます。 この例では、特定のデータを削除するためのパラメーターとして *id* を設定しています。

meteorApp.js

MyCollection = new Mongo.Collection('myCollection');

var myData = {
   key1: "value 1...",
   key2: "value 2...",
   key3: "value 3...",
   key4: "value 4...",
   key5: "value 5..."
}

MyCollection.insert(myData);

var findCollection = MyCollection.find().fetch();
var myId = findCollection[0]._id;

MyCollection.remove(myId);

var findDeletedCollection = MyCollection.find().fetch();
console.log(findDeletedCollection);

コンソールには空の配列が表示されます。

流星コレクション削除

コレクションからすべてを削除する場合は、同じメソッドを使用できますが、 id の代わりに空のオブジェクト \ {} を使用します。セキュリティ上の理由から、サーバーでこれを行う必要があります。

meteorApp.js

if (Meteor.isServer) {

   MyCollection = new Mongo.Collection('myCollection');

   var myData = {
      key1: "value 1...",
      key2: "value 2...",
      key3: "value 3...",
      key4: "value 4...",
      key5: "value 5..."
   }

   MyCollection.insert(myData);
   MyCollection.remove({});

   var findDeletedCollection = MyCollection.find().fetch();
   console.log(findDeletedCollection);
}

他のパラメーターを使用してデータを削除することもできます。前の例のように、Meteorはサーバーからこれを行うことを強制します。

meteorApp.js

if (Meteor.isServer) {

   MyCollection = new Mongo.Collection('myCollection');

   var myData = {
      key1: "value 1...",
      key2: "value 2...",
      key3: "value 3...",
      key4: "value 4...",
      key5: "value 5..."
   }

   MyCollection.insert(myData);
   MyCollection.remove({key1: "value 1..."});

   var findDeletedCollection = MyCollection.find().fetch();
   console.log(findDeletedCollection);
}

コマンドウィンドウからデータが削除されていることがわかります。

Meteor Collections Remove Server

流星-フォーム

この章では、Meteorフォームを操作する方法を学習します。

テキスト入力

最初に、テキスト入力フィールドと送信ボタンを持つ form 要素を作成します。

meteorAppl

<head>
   <title>meteorApp</title>
</head>

<body>
   <div>
      {{> myTemplate}}
   </div>
</body>

<template name = "myTemplate">
   <form>
      <input type = "text" name = "myForm">
      <input type = "submit" value = "SUBMIT">
   </form>
</template>

JavaScriptファイルで、 submit イベントを作成します。ブラウザの更新を停止するには、デフォルトのイベント動作を防ぐ必要があります。次に、入力フィールドの内容を取得し、 textValue 変数に割り当てます。

次の例では、そのコンテンツのみを開発者コンソールに記録します。そして最後に必要なことは、入力フィールドをクリアすることです。

meteorApp.js

if (Meteor.isClient) {

   Template.myTemplate.events({

      'submit form': function(event) {
         event.preventDefault();
         var textValue = event.target.myForm.value;
         console.log(textValue);
         event.target.myForm.value = "";
      }
   });
}

入力フィールドに「Some text …」と入力して送信すると、コンソールは入力したテキストを記録します。

流星テキスト

ラジオボタン

同様の概念をラジオボタンに使用できます。

meteorAppl

<head>
   <title>meteorApp</title>
</head>

<body>
   <div>
      {{> myTemplate}}
   </div>
</body>

<template name = "myTemplate">
   <form>
      <input type = "radio" name = "myForm" value = "form-1">FORM 1
      <input type = "radio" name = "myForm" value = "form-2">FORM 2
      <input type = "submit" value = "SUBMIT">
   </form>
</template>

meteorApp.js

if (Meteor.isClient) {

   Template.myTemplate.events({

      'submit form': function(event) {
         event.preventDefault();
         var radioValue = event.target.myForm.value;
         console.log(radioValue);
      }
   });
}

最初のボタンを送信すると、コンソールに次の出力が表示されます。

Meteor Forms Radio

チェックボックス

次の例は、チェックボックスの使用方法を示しています。同じプロセスを繰り返していることがわかります。

meteorAppl

<head>
   <title>meteorApp</title>
</head>

<body>
   <div>
      {{> myTemplate}}
   </div>
</body>

<template name = "myTemplate">
   <form>
      <input type = "checkbox" name = "myForm" value = "form-1">FORM 1
      <input type = "checkbox" name = "myForm" value = "form-2">FORM 2
      <input type = "submit" value = "SUBMIT">
   </form>
</template>

meteorApp.js

if (Meteor.isClient) {

   Template.myTemplate.events({

      'submit form': function(event) {
         event.preventDefault();
         var checkboxValue1 = event.target.myForm[0].checked;
         var checkboxValue2 = event.target.myForm[1].checked;
         console.log(checkboxValue1);
         console.log(checkboxValue2);
      }
   });
}

フォームが送信されると、チェックされた入力は true として記録され、チェックされていない入力は false として記録されます。

Meteor Forms Checkbox

ドロップダウンを選択

次の例では、 select 要素の使用方法を学習します。 change イベントを使用して、オプションが変更されるたびにデータを更新します。

meteorAppl

<head>
   <title>meteorApp</title>
</head>

<body>
   <div>
      {{> myTemplate}}
   </div>
</body>

<template name = "myTemplate">
   <select>
      <option name = "myOption" value = "option-1">OPTION 1</option>
      <option name = "myOption" value = "option-2">OPTION 2</option>
      <option name = "myOption" value = "option-3">OPTION 3</option>
      <option name = "myOption" value = "option-4">OPTION 4</option>
   </select>
</template>

meteorApp.js

if (Meteor.isClient) {

   Template.myTemplate.events({

      'change select': function(event) {
         event.preventDefault();
         var selectValue = event.target.value;
         console.log(selectValue);
      }
   });
}

3番目のオプションを選択すると、コンソールはオプション値を記録します。

流星フォーム選択

流星-イベント

この章では、 tag、class 、および id をイベントセレクタとして使用する方法を学習します。イベントの操作は非常に簡単です。

HTMLテンプレートに3つの要素を作成しましょう。最初のものは p 、2番目のものは myClass クラス、最後のものは myId idです。

meteorAppl

<head>
   <title>meteorApp</title>
</head>

<body>
   <div>
      {{> myTemplate}}
   </div>
</body>

<template name = "myTemplate">
   <p>PARAGRAPH...</p>
   <button class = "myClass">CLASS</button>
   <button id = "myId">ID</button>
</template>

JavaScriptファイルでは、上で作成した3つの要素に対して3つのイベントを設定しています。 click イベントの後に p、.myClass および*＃myId *を追加していることがわかります。これらは、前述の*セレクタ*です。

meteorApp.js

if (Meteor.isClient) {

   Template.myTemplate.events({

      'click p': function() {
         console.log("The PARAGRAPH is clicked...");
      },

      'click .myClass': function() {
         console.log("The CLASS is clicked...");
      },

      'click #myId': function() {
         console.log("The ID is clicked...");
      },
   });
}

これをテストするには、まず PARAGRAPH をクリックしてから、 CLASS ボタン、最後に ID ボタンをクリックします。次のコンソールログを取得します。

流星イベントログ

上記の例に従って、他のすべてのJavaScriptイベント（クリック、dbclick、コンテキストメニュー、マウスダウン、マウスアップ、マウスオーバー、マウスアウト、マウスムーブ）を使用できます。

流星-セッション

セッションは、ユーザーがアプリを使用している間にデータを保存するために使用されます。このデータは、ユーザーがアプリを離れると削除されます。

この章では、セッションオブジェクトを設定し、データを保存し、そのデータを返す方法を学びます。基本的なHTMLセットアップを使用します。

meteorAppl

<head>
   <title>meteorApp</title>
</head>

<body>
   <div>
      {{> myTemplate}}
   </div>
</body>

<template name = "myTemplate">
</template>

ここで、* Session.set（）メソッドを使用して *myData をローカルに保存します。メソッドが設定されると、* Session.get（）*メソッドを使用してメソッドを返すことができます。

meteorApp.js

if (Meteor.isClient) {

   var myData = {
      key1: "value1",
      key2: "value2"
   }

   Session.set('mySession', myData);

   var sessionDataToLog = Session.get('mySession');
   console.log(sessionDataToLog);
}

コンソールを確認すると、保存されたデータが記録されていることがわかります。

流星セッションログ

次の章では、Session変数を使用してテンプレートを自動更新する方法を学びます。

流星-トラッカー

トラッカーは、セッション変数が変更されるとテンプレートを自動更新するために使用される小さなライブラリです。この章では、トラッカーの仕組みを学びます。

最初に、セッションの更新に使用される*ボタン*を作成します。

meteorAppl

<head>
   <title>meteorApp</title>
</head>

<body>
   <div>
      {{> myTemplate}}
   </div>
</body>

<template name = "myTemplate">
   <button id = "myButton">CLICK ME</button>
</template>

次に、開始セッション値 myData を設定し、 mySession オブジェクトを作成します。 Tracker.autorun メソッドは、 mySession を監視するために使用されます。このオブジェクトが変更されるたびに、テンプレートは自動更新されます。テストするために、更新用のクリックイベントを設定します。

meteorApp.js

if (Meteor.isClient) {

   var myData = 0
   Session.set('mySession', myData);

   Tracker.autorun(function () {
      var sessionData = Session.get('mySession');
      console.log(sessionData)
   });

   Template.myTemplate.events({

      'click #myButton': function() {
         Session.set('mySession', myData ++);
      }
   });
}

[CLICK ME]ボタンを5回クリックすると、セッションが更新されるたびにトラッカーが新しい値を記録していることがわかります。

流星追跡ログ

流星-パッケージ

Meteorは、アプリの開発中に使用できる数千のコミュニティパッケージを提供します。

パッケージを追加する

公式のMeteorパッケージサーバーhttps://atmospherejs.com/[こちら]を確認できます。必要なパッケージを検索して、コマンドプロンプトウィンドウに追加するだけです。たとえば、アプリに http パッケージを追加する場合は、次のコードを実行して実行できます-

C:\Users\username\Desktop\meteorApp>meteor add http

パッケージの削除

同様の原則は、パッケージを削除するために使用することができます-

C:\Users\username\Desktop\meteorApp>meteor remove http

パッケージの更新

次のコードを実行してパッケージを更新できます-

C:\Users\username\Desktop\meteorApp>meteor update http

現在のパッケージを確認する

また、現在のアプリケーションが使用しているパッケージを確認することもできます。

C:\Users\username\Desktop\meteorApp>meteor list

パッケージのメンテナンス

パッケージの名前に*：*が含まれている場合、それはコミュニティパッケージであることを意味しますが、プレフィックスのないパッケージはMeteor Developmentグループによって維持されます。

Meteor Development Groupパッケージの追加

C:\Users\username\Desktop\meteorApp>meteor add http

コミュニティパッケージの追加

C:\Users\username\Desktop\meteorApp>meteor add cfs:http-methods

流星-コアAPI

あなたはサーバーまたはクライアント側でのみ実行するようにコードを制限したい場合は、次のコードを使用することができます-

meteorApp.js

if (Meteor.isClient) {
  //Code running on client...
}

if (Meteor.isServer) {
  //Code running on server...
}

アプリがCordovaバンドリングを使用している場合にのみ実行するようにコードを制限できます。

if (Meteor.isCordova) {
  //Code running on Cordova...
}

一部のプラグインは、サーバーとDOMの準備ができるまで待つ必要があります。次のコードを使用して、すべてが始まるまで待つことができます。

Meteor.startup(function () {
  //Code running after platform is ready...
});

次の表に、他のいくつかのコアAPIメソッドを示します。

Sr.No.	Method & Details
1	Meteor.wrapAsync(function) 非同期コードのラッピングに使用し、同期コードに変換します。
2	Meteor.absoluteUrl([path], [options]) アプリを指す絶対URLの生成に使用されます。
3	Meteor.settings 展開構成の設定に使用されます。
4	Meteor.publish(name, function) レコードをクライアントに公開するために使用されます。

流星-チェック

checkメソッドは、引数または型がパターンに一致しているかどうかを調べるために使用されます。

チェックパッケージのインストール

コマンドプロンプトウィンドウを開き、パッケージをインストールします。

C:\Users\username\Desktop\meteorApp>meteor add check

チェックを使用する

次の例では、 myValue が文字列かどうかを確認します。それは真実なので、アプリはエラーなしで続行します。

meteorApp.js

var myValue = 'My Value...';
check(myValue, String);

この例では、 myValue は文字列ではなく数値であるため、コンソールはエラーを記録します。

meteorApp.js

var myValue = 1;
check(myValue, String);

流星チェックログエラー

マッチテスト

*Match.test* はcheckに似ていますが、コンソールエラーの代わりにテストが失敗した場合、サーバーを壊すことなく *value* を取得するという違いがあります。 次の例は、複数のキーを持つオブジェクトをテストする方法を示しています。

meteorApp.js

var myObject = {
   key1 : "Value 1...",
   key2 : "Value 2..."
}

var myTest = Match.test(myObject, {
   key1: String,
   key2: String
});

if ( myTest ) {
   console.log("Test is TRUE...");
} else {
   console.log("Test is FALSE...");
}

両方のキーが文字列であるため、テストは true です。コンソールは最初のオプションを記録します。

Meteor Match Test True

*key2* をnumberに変更すると、テストは失敗し、コンソールは2番目のオプションを記録します。

meteorApp.js

var myObject = {
   key1 : "Value 1...",
   key2 : 1
}

var myValue = 1;

var myTest = Match.test(myObject, {
   key1: String,
   key2: String
});

if ( myTest ) {
   console.log("Test is TRUE...");
} else {
   console.log("Test is FALSE...");
}

Meteor Match Test False

流星-ブレイズ

Blazeは、ライブリアクティブテンプレートを構築するためのMeteorパッケージです。

レンダリング方法

このメソッドは、テンプレートをDOMにレンダリングするために使用されます。最初に、レンダリングされる myNewTemplate を作成します。また、親要素として使用される myContainer を追加するため、 render メソッドはテンプレートをレンダリングする場所を認識します。

meteorAppl

<head>
   <title>meteorApp</title>
</head>

<body>
   <div id = "myContainer">
   </div>
</body>

<template name = "myNewTemplate">
   <p>Text from my new template...</p>
</template>

次に、2つの引数を取るレンダー関数を作成します。 1つ目はレンダリングされるテンプレートで、2つ目は上記の親要素です。

meteorApp.js

Meteor.startup(function () {

   if(Meteor.isClient) {
      var myNewTemplate = Template.myNewTemplate;
      var myContainer = document.getElementById('myContainer');
      Blaze.render(myNewTemplate, myContainer);
   }
});

Meteor Blaze Render

データでレンダリング

リアクティブにデータを渡す必要がある場合は、 renderWithData メソッドを使用できます。 HTMLは前の例とまったく同じです。

meteorAppl

<head>
   <title>meteorApp</title>
</head>

<body>
   <div id = "myContainer">
   </div>
</body>

<template name = "myNewTemplate">
   <p>Text from my new template...</p>
</template>

*Meteor.renderWithData* メソッドの2番目の引数としてデータを追加できます。 他の2つの引数は、前の例と同じです。 この例では、データはテキストを記録する関数です。

meteorApp.js

Meteor.startup(function () {

   if(Meteor.isClient) {
      var myNewTemplate = Template.myNewTemplate;

      var myData = function() {
         console.log('Log from the data object...')
      }

      var myContainer = document.getElementById('myContainer');
      Blaze.renderWithData(myNewTemplate, myData, myContainer);
   }
});

Meteor Blaze Render with Data

メソッドを削除

*remove* メソッドを追加できます。

meteorAppl

<head>
   <title>meteorApp</title>
</head>

<body>
   <div id = "myContainer">
   </div>
</body>

<template name = "myNewTemplate">
   <p>Text from my new template...</p>
</template>

この例では、3秒後に削除されるテンプレートをレンダリングしています。テンプレートを削除するために使用している Blaze.Remove メソッドに注目してください。

meteorApp.js

Meteor.startup(function () {

   if(Meteor.isClient) {
      var myNewTemplate = Template.myNewTemplate;
      var myContainer = document.getElementById('myContainer');
      var myRenderedTemplate = Blaze.render(myNewTemplate, myContainer);

      Meteor.setTimeout(function() {
         Blaze.remove(myRenderedTemplate);
      }, 3000);
   }
});

次の表は、使用可能な他の方法を示しています。

Sr.No.	Method & Details
1	Blaze.getData([elementOrView]) レンダリング要素からデータを取得するために使用されます。
2	Blaze.toHTML(templateOrView) テンプレートまたはビューを文字列にレンダリングするために使用されます。
3	Blaze.toHTMLWithData(templateOrView, data) 追加のデータを含む文字列にテンプレートまたはビューをレンダリングするために使用されます。
4	new Blaze.View([name], renderFunction) DOMの新しいBlaze反応部分を作成するために使用されます。
5	Blaze.currentView 現在のビューを取得するために使用されます。
6	Blaze.getView([element]) 現在のビューを取得するために使用されます。
7	Blaze.With(data, contentFunc) コンテキスト付きのコンテンツをレンダリングするビューを構築するために使用されます。
8	Blaze.If(conditionFunc, contentFunc, [elseFunc]) 条件付きコンテンツをレンダリングするビューの構築に使用されます。
9	Blaze.Unless(conditionFunc, contentFunc, [elseFunc]) いくつかの条件付きコンテンツ（反転 Blaze.if ）をレンダリングするビューの構築に使用されます。
10	Blaze.Each(argFunc, contentFunc, [elseFunc]) すべてのアイテムの contentFunct をレンダリングするビューの構築に使用されます。
11	new Blaze.Template([viewName], renderFunction) 名前とコンテンツを含む新しいBlazeビューを構築するために使用されます。
12	Blaze.isTemplate(value) 値がテンプレートオブジェクトの場合、trueを返すために使用されます。

流星-タイマー

Meteorは、独自の setTimeout および setInterval メソッドを提供します。これらのメソッドは、すべてのグローバル変数が正しい値を持っていることを確認するために使用されます。通常のJavaScript setTimout および setInterval のように機能します。

タイムアウト

これは Meteor.setTimeout の例です。

Meteor.setTimeout(function() {
   console.log("Timeout called after three seconds...");
}, 3000);

コンソールで、アプリが起動するとタイムアウト関数が呼び出されることがわかります。

流星タイムアウト

間隔

次の例は、間隔を設定およびクリアする方法を示しています。

meteorAppl

<head>
   <title>meteorApp</title>
</head>

<body>
   <div>
      {{> myTemplate}}
   </div>
</body>

<template name = "myTemplate">
   <button>CLEAR</button>
</template>

間隔呼び出しのたびに更新される初期 counter 変数を設定します。

meteorApp.js

if (Meteor.isClient) {

   var counter = 0;

   var myInterval = Meteor.setInterval(function() {
      counter ++
      console.log("Interval called " + counter + " times...");
   }, 3000);

   Template.myTemplate.events({

      'click button': function() {
         Meteor.clearInterval(myInterval);
         console.log('Interval cleared...')
      }
   });
}

コンソールは、更新された counter 変数を3秒ごとに記録します。 CLEAR ボタンをクリックして、これを停止できます。これにより、 clearInterval メソッドが呼び出されます。

流星間隔

流星-EJSON

EJSONは、 Date および Binary 型をサポートするJSON構文の拡張です。

EJSONをインストールする

EJSONパッケージをインストールするには、コマンドプロンプトウィンドウから追加する必要があります。

C:\Users\username\Desktop\meteorApp>meteor add ejson

日付の例

*parse* メソッドを使用して *date* をデシリアライズできます。

if (Meteor.isClient) {
   var myEjsonDate = '{"$date": 1455029631493}';
   var myDate = EJSON.parse(myEjsonDate);
   console.log(myDate);
}

コンソールは正しい日付値を記録します。

メテオEJSON日付

バイナリの例

同じことがバイナリタイプに適用できます。

if (Meteor.isClient) {
   var myEjsonBinary = '{"$binary": "c3VyZS4="}';
   var myBinary = EJSON.parse(myEjsonBinary);
   console.log(myBinary);
}

コンソールが新しいデシリアライズされた値を記録していることがわかります。

流星EJSONバイナリ

文字列化

*stringify* メソッドを使用してオブジェクトをシリアル化できます。 これは、上記の例の逆のプロセスです。

if (Meteor.isClient) {

   var myObject = {
      myDate : new Date(),
      myBinary : new Uint8Array([115, 117, 114, 101, 46])
   }

   var myEjosnData = EJSON.stringify(myObject);
   console.log(myEjosnData);
}

コンソールで新しい値を確認できます。

Meteor EJSON Stringify

Sr.No.	Method & Details
1	EJSON.parse(string) 文字列をEJSON値に解析するために使用されます。
2	EJSON.stringify(value) 値を文字列にシリアル化するために使用されます。
3	EJSON.fromJSONValue(value) JSONからEJSON値をデシリアライズするために使用されます。
4	EJSON.toJSONValue(value) EJSON値をJSONにシリアル化するために使用されます。
5	EJSON.equals(value1, value2) 2つの値が等しいかどうかを比較するために使用されます。
6	EJSON.clone(value) 値の詳細コピーを返すために使用されます。
7	EJSON.newBinary EJSONがシリアル化できるバイナリデータを割り当てるために使用されます。
8	EJSON.isBinary(x) 値がバイナリデータかどうかを確認するために使用されます。
9	EJSON.addType(name, factory) カスタムEJSONタイプの作成に使用されます。
10	customType.typeName() カスタムタイプの名前を返すために使用されます。
11	customType.toJSONValue() カスタムタイプのシリアル化に使用されます。
12	customType.clone() カスタムタイプのディープコピーを返すために使用されます。
13	customType.equals(otherValue) カスタムタイプの値と他の値の比較に使用されます。

流星-HTTP

このパッケージは、HTTPリクエストAPIに get、post、put 、および delete メソッドを提供します。

パッケージをインストール

コマンドプロンプトウィンドウで次のコードを実行して、このパッケージをインストールします。

C:\Users\username\Desktop\meteorApp>meteor add http

CALLメソッド

これは、 GET 、 POST 、 PUT 、および DELETE 引数を使用できる汎用的な方法です。次の例は、 GET 引数の使用方法を示しています。この章の例では、https://jsonplaceholder.typicode.com/[このWebサイト]からの偽のREST APIを使用します。

このメソッドは4つの引数を使用していることがわかります。最初の引数 GET についてはすでに述べました。 2つ目はAPI URLです。 3番目の引数は空のオブジェクトで、オプションのパラメーターを設定できます。最後のメソッドは非同期コールバックであり、エラーを処理して応答を処理できます。

HTTP.call( 'GET', 'http://jsonplaceholder.typicode.com/posts/1', {},
   function( error, response ) {

   if (error) {
      console.log(error);
   } else {
      console.log(response);
   }
});

GETメソッド

*CALL* メソッドの代わりに *GET* を使用して同じリクエストを送信できます。 最初の引数がAPI URLであることがわかります。

HTTP.get('http://jsonplaceholder.typicode.com/posts/1', {}, function( error, response ) {

   if ( error ) {
      console.log( error );
   } else {
      console.log( response );
   }
});

前の例は両方とも同じ出力を記録します。

Meteor HTTP Call

POSTメソッド

このメソッドでは、サーバーに送信する必要があるデータ（ postData ）を2番目の引数として設定しています。他のすべては、 GET リクエストと同じです。

var postData = {

   data: {
      "name1": "Value1",
      "name2": "Value2",
   }
}

HTTP.post( 'http://jsonplaceholder.typicode.com/posts', postData,
   function( error, response ) {

   if ( error ) {
      console.log( error );
   } else {
      console.log( response);
   }
});

コンソールは postData オブジェクトを記録します。

Meteor HTTP Post

PUTメソッド

*PUT* メソッドを使用してデータを更新できます。 概念は最後の例と同じです。

var updateData = {

   data: {
      "updatedName1": "updatedValue1",
      "UpdatedName2": "updatedValue2",
   }
}

HTTP.put( 'http://jsonplaceholder.typicode.com/posts/1', updateData,
   function( error, response ) {

   if ( error ) {
      console.log( error );
   } else {
      console.log( response );
   }
});

これで、更新されたオブジェクトがコンソールに表示されます。

Meteor HTTP Put

DELメソッド

*DEL* メソッドを使用して、サーバーに削除要求を送信できます。 *data* オブジェクト内のすべてを削除します。

var deleteData = {
   data: {}
}

HTTP.del( 'http://jsonplaceholder.typicode.com/posts/1', deleteData,
   function( error, response ) {

   if ( error ) {
      console.log( error );
   } else {
      console.log( response );
   }
});

コンソールには、削除プロセスが成功したことが表示されます。

Meteor HTTP Del

流星-メール

このパッケージは、Meteor Appからメールを送信する必要がある場合に使用されます。

ステップ1-パッケージの追加

コマンドプロンプトウィンドウを開き、次のコマンドを実行します-

C:\Users\username\Desktop\meteorApp>meteor add email

ステップ2-Mailgunアカウント

アカウントhttps://mailgun.com/signup[here]を作成する必要があります。これは、Meteorアプリのデフォルトのメールプロバイダーです。

ログインしたら、 Domains タブを開き、 Domain Name の下にある sandbox URL をクリックします。新しいページが開き、 Default SMTP Login および Default Password が見つかります。 MAIL_URL 環境変数を作成するには、これら2つが必要です。

メールを送る

有効な MAIL_URL を作成するには、 YOUR_DEFAULT_SMTP_LOGIN および YOUR_DEFAULT_PASSWORD の代わりにMailgun認証情報を挿入するだけです。

if (Meteor.isServer) {

   Meteor.startup( function() {
      process.env.MAIL_URL =
         "smtp://YOUR_DEFAULT_SMTP_LOGIN:YOUR_DEFAULT_PASSWORD@smtp.mailgun.org:587";

      Email.send({
         to: "toemailadress@email.com",
         from: "fromemailadress@email.com",
         subject: "Meteor Email",
         text: "The email content..."
      });
   });
}

アプリを実行すると、メールがあなたのアドレスに送信されます。

受信した流星メール

流星-資産

静的サーバーアセットは、アプリ内の private サブフォルダーにあります。次の例では、単純なJSONファイルのデータを使用する方法を学習します。

手順1-ファイルとフォルダーの作成

*private* フォルダーとそのフォルダー内に *my-json.json* ファイルを作成しましょう。 *コマンドプロンプト*ウィンドウで次のコマンドを使用してこれを行いますが、手動で作成することもできます。

C:\Users\username\Desktop\meteorApp>mkdir private

C:\Users\username\Desktop\meteorApp\private>touch my-json.json

ステップ2-テキストの取得

ファイルからデータを読み取れるようにするには、 Asssets.getText メソッドを使用します。これは、サーバー側からのみ実行できることに注意してください。 JSONを使用しているため、解析する必要があります。

if (Meteor.isServer) {
   var myFile = JSON.parse(Assets.getText('my-json.json'));
   console.log(myFile.data.text)
}

以下は、コマンドプロンプトウィンドウの出力です。

Meteor Assets Get Text

ステップ3-EJSONファイルの作成

このファイルを private フォルダー内に作成します。このファイルにはバイナリデータが含まれます "myBinary"：\ {"$ binary"： "c3VyZS4 ="}

C:\Users\username\Desktop\meteorApp\private>touch my-ejson.ejson

ステップ4-バイナリを取得する

EJSONファイルを読み取るには、 Assets.getBinary メソッドを使用できます。

if (Meteor.isServer) {
   var myFile = Assets.getBinary('my-ejson.ejson');
   console.log(EJSON.stringify(myFile));
}

コマンドプロンプトはEJSON値を記録します。

Meteor Assets Get Binary

流星-セキュリティ

この章では、アプリを保護する方法と、アプリを開発する際に考慮すべきことを学習します。

自動公開および自動保護

*Autopublish* は、データベースからクライアントにすべてのデータを自動的に公開するパッケージです。 これは、実稼働中に無効にする必要がある便利な機能です。 コマンドプロンプトから無効にできます。

C:\Users\username\Desktop\meteorApp>meteor remove autopublish

パブリッシュおよびサブスクライブの章で説明する* Meteor.publish（）および Meteor.subscribe（）*メソッドを使用して、一部のデータをクライアントにパブリッシュできます。

*Insecure* は、アプリのすべてのユーザーがデータベースにアクセスできるように、開発者のコンソールでMongoDBコマンドを作成できるようにするパッケージです。 パッケージは、コマンドプロンプトで次のコマンドを実行して削除できます。

C:\Users\username\Desktop\meteorApp>meteor remove insecure

アプリの開発を開始したらすぐに両方のパッケージを削除することをお勧めします。これにより、後でコードを変更および更新する必要がなくなります。

サーバー側のメソッドを使用する

常にサーバー上でメソッドを作成する必要があります。サーバーで* Meteor.methods（）を使用し、クライアントで Meteor.call（）*を使用して実行できます。これについては、メソッドの章で詳しく説明します。

追加のセキュリティ

アプリにセキュリティのレイヤーを追加する場合は、次のような他のMeteorパッケージの使用を検討する必要があります-

Browser Policyを使用して、アプリにロードする必要のある外部リソースを制御できます。
Checkパッケージを使用して、ユーザー入力タイプを処理前に確認できます。
Audit Arguments Checkは、処理前にすべてのパラメーターが正しくチェックされることを保証するパッケージです。一部のパラメーターを逃した場合、このパッケージは通知します。
Mylarパッケージは、セキュリティのレイヤーを追加できます。そのような保護が必要な場合は、チェックアウトできます。

流星-ソート

データベースから取得したら、データをソートできます。次の例では、 Users コレクションを作成します。コレクションデータを名前でソートするには、 sort 引数（ \ {sort：\ {name：1}} ）を使用します。番号 1 は、昇順を設定するために使用されます。降順を使用する場合は、代わりに -1 を使用します。

Users = new Mongo.Collection('users');

Users.insert({
   name: 'James',
   email: 'eee@example.com',
   joined: new Date(2016, 2, 23)
});

Users.insert({
   name: 'John',
   email: 'iii@example.com',
   joined: new Date(2016, 2, 19)
});

Users.insert({
   name: 'Jennifer',
   email: 'aaa@example.com',
   joined: new Date(2016, 6, 24)
});

var sortByName = Users.find({}, {sort: {name: 1}}).fetch();

var sortByEmail = Users.find({}, {sort: {email: 1}}).fetch();

var sortByJoined = Users.find({}, {sort: {joined: 1}}).fetch();

console.log(sortByName);
console.log(sortByEmail);
console.log(sortByJoined);

流星分類名

同じ方法でメールでデータをソートできます。

Users = new Mongo.Collection('users');

Users.insert({
   name: 'James',
   email: 'eee@example.com',
   joined: new Date(2016, 2, 23)
});

Users.insert({
   name: 'John',
   email: 'iii@example.com',
   joined: new Date(2016, 2, 19)
});

Users.insert({
   name: 'Jennifer',
   email: 'aaa@example.com',
   joined: new Date(2016, 6, 24)
});

var sortByEmail = Users.find({}, {sort: {email: 1}}).fetch();

console.log(sortByEmail);

流星選別メール

最後に、参加日で並べ替えることができます。

Users = new Mongo.Collection('users');

Users.insert({
   name: 'James',
   email: 'eee@example.com',
   joined: new Date(2016, 2, 23)
});

Users.insert({
   name: 'John',
   email: 'iii@example.com',
   joined: new Date(2016, 2, 19)
});

Users.insert({
   name: 'Jennifer',
   email: 'aaa@example.com',
   joined: new Date(2016, 6, 24)
});

var sortByJoined = Users.find({}, {sort: {joined: 1}}).fetch();

console.log(sortByJoined);

結合された流星分類

Meteor-アカウント

このパッケージにより、完全なユーザー認証機能が可能になります。コマンドプロンプトウィンドウで次のコードを実行して追加できます。

C:\Users\username\Desktop\meteorApp>meteor add accounts-password

認証の例

この例では、基本認証を示します。 register、login 、および home テンプレートを作成します。 currentUser がある場合（ユーザーが正常に登録またはログインしている場合）、 home テンプレートが表示されます。 currentUser がない場合、 register および login テンプレートが表示されます。

meteorAppl

<head>
   <title>meteorApp</title>
</head>

<body>
   {{#if currentUser}}
      {{> home}}
      {{else}}
      {{> register}}
      {{> login}}
   {{/if}}
</body>

<template name = "register">
   <h2>REGISTER:</h2>
   <form>
      <input type = "email" name = "registerEmail"><br>
      <input type = "password" name = "registerPassword"><br>
      <input type = "submit" value = "Register"><br>
   </form>
</template>

<template name = "login">
   <h2>LOGIN:</h2>
   <form>
      <input type = "email" name = "loginEmail"><br>
      <input type = "password" name="loginPassword"><br>
      <input type = "submit" value = "Login"><br>
   </form>
</template>

<template name = "home">
   <p>You're logged in.</p>
   <button class = "logout">Logout</button>
</template>

最初に、 register イベントを作成する必要があります。この関数は、レジスタ入力を読み取り、新しいユーザーを作成して、データベースに保存します。

2番目のイベントは login です。今回は、関数は login テンプレートから入力を読み取り、電子メールとパスワードが有効な場合はユーザーをログインし、有効でない場合はエラーを返します。

そして最後に、ボタンがクリックされると、ユーザーをログアウトするために logout イベントが使用されます。

meteorApp.js

if (Meteor.isClient) {

   Template.register.events({
      'submit form': function(event) {
         event.preventDefault();

         var registerData = {
            email: event.target.registerEmail.value,
            password: event.target.registerPassword.value
         }

         Accounts.createUser(registerData, function(error) {

            if (Meteor.user()) {
               console.log(Meteor.userId());
            } else {
               console.log("ERROR: " + error.reason);
            }
         });
      }
   });

   Template.login.events({

      'submit form': function(event) {
         event.preventDefault();
         var myEmail = event.target.loginEmail.value;
         var myPassword = event.target.loginPassword.value;

         Meteor.loginWithPassword(myEmail, myPassword, function(error) {

            if (Meteor.user()) {
               console.log(Meteor.userId());
            } else {
               console.log("ERROR: " + error.reason);
            }
         });
      }
   });

   Template.home.events({

      'click .logout': function(event) {
         event.preventDefault();

         Meteor.logout(function(error) {

            if(error) {
               console.log("ERROR: " + error.reason);
            }
         });
      }
   });
}

アプリが起動すると、次のページが表示されます。

流星アカウント開始

登録*フォームに電子メールとパスワードを入力すると、新しいユーザーを登録してログインできます。コンソールがユーザー *id を記録し、 home テンプレートがレンダリングされることがわかります。

流星アカウント登録

電子メールとパスワードが正しい場合、 login イベントはデータベースをチェックし、ユーザーをログインさせます。そうでない場合、コンソールはエラーを記録します。

流星アカウントのログインエラー

ユーザーが LOGOUT ボタンをクリックすると、アプリはユーザーをログアウトし、 register および login テンプレートを表示します。

流星-メソッド

Meteorメソッドは、サーバー側で記述された関数ですが、クライアント側から呼び出すことができます。

サーバー側では、2つの簡単なメソッドを作成します。最初の引数は5を引数に追加し、2番目の引数は 10 を追加します。

メソッドを使用する

meteorApp.js

if(Meteor.isServer) {

   Meteor.methods({

      method1: function (arg) {
         var result = arg + 5;
         return result;
      },

      method2: function (arg) {
         var result = arg + 10;
         return result;
      }
   });
}

if(Meteor.isClient) {
   var aaa = 'aaa'
   Meteor.call('method1', aaa, function (error, result) {

      if (error) {
         console.log(error);
         else {
            console.log('Method 1 result is: ' + result);
         }
      }
   );

   Meteor.call('method2', 5, function (error, result) {

      if (error) {
         console.log(error);
      } else {
         console.log('Method 2 result is: ' + result);
      }
   });
}

アプリを起動すると、計算された値がコンソールに表示されます。

流星メソッドログ

エラー処理

エラーを処理するには、 Meteor.Error メソッドを使用できます。次の例は、ログインしていないユーザーのエラーを処理する方法を示しています。

if(Meteor.isServer) {

   Meteor.methods({

      method1: function (param) {

         if (! this.userId) {
            throw new Meteor.Error("logged-out",
               "The user must be logged in to post a comment.");
         }
         return result;
      }
   });
}

if(Meteor.isClient) {  Meteor.call('method1', 1, function (error, result) {

   if (error && error.error === "logged-out") {
      console.log("errorMessage:", "Please log in to post a comment.");
   } else {
      console.log('Method 1 result is: ' + result);
   }});

}

コンソールには、カスタマイズされたエラーメッセージが表示されます。

流星メソッドエラー

Meteor-Package.js

この章では、独自の流星パッケージを作成する方法を学びます。

パッケージを作成する

パッケージが作成されるデスクトップに新しいフォルダーを追加しましょう。コマンドプロンプトウィンドウを使用します。

C:\Users\username\Desktop\meteorApp> mkdir packages

これで、上記で作成したフォルダーにパッケージを作成できます。コマンドプロンプトから次のコマンドを実行します。 Username はMeteor Developerのユーザー名で、 package-name はパッケージの名前です。

C:\Users\username\Desktop\meteorApp\packages>meteor create --package username:package-name

パッケージを追加する

アプリにローカルパッケージを追加できるようにするには、Meteorにローカルフォルダーからパッケージをロードするよう指示する ENVIRONMENT VARIABLE を設定する必要があります。コンピューターのアイコンを右クリックして、「プロパティ/システムの詳細設定/環境変数/新規」を選択します。

変数名*は PACKAGE_DIRSでなければなりません。変数値*は、作成したフォルダへのパスでなければなりません。この場合、 C：\ Users \ username \ Desktop \ meteorApp \ packages 。

新しい環境変数を追加した後、*コマンドプロンプト*を再起動することを忘れないでください。

次のコードを実行して、アプリにパッケージを追加できます-

C:\Users\username\Desktop\meteorApp>meteor add username:package-name

パッケージファイル

作成したパッケージには、次の4つのファイルが含まれています。

package-name-test.js
package-name.js
package.js
README.md

テストパッケージ（package-name-test.js）

Meteorは、テスト用の tinytest パッケージを提供しています。コマンドプロンプトウィンドウで次のコマンドを使用して、最初にインストールしましょう。

C:\Users\username\Desktop\meteorApp>meteor add tinytest

*package-name-test.js* を開くと、デフォルトのテスト例が表示されます。 この例を使用してアプリをテストします。 注：meteorパッケージを開発するときは、常に独自のテストを作成することをお勧めします。

パッケージをテストするには、コマンドプロンプトでこのコードを実行します。

C:\Users\username\Desktop>meteor test-packages packages/package-name

次の結果が得られます。

流星パッケージテスト

package.jsファイル

これは、コードを記述できるファイルです。パッケージの簡単な機能を作成しましょう。パッケージは、コンソールにテキストを記録します。

packages/package.js

myPackageFunction = function() {
   console.log('This is simple package...');
}

package-name.jsファイル

これは、いくつかのパッケージ構成を設定できるファイルです。後で戻りますが、今はアプリで使用できるように myPackageFunction をエクスポートする必要があります。これを Package.onUse 関数内に追加する必要があります。ファイルは次のようになります。

packages/package-name.js

Package.describe({
   name: 'username:package-name',
   version: '0.0.1',

  //Brief, one-line summary of the package.
   summary: '',

  //URL to the Git repository containing the source code for this package.
   git: '',

  //By default, Meteor will default to using README.md for documentation.

  //To avoid submitting documentation, set this field to null.
   documentation: 'README.md'
});

Package.onUse(function(api) {
   api.versionsFrom('1.2.1');
   api.use('ecmascript');
   api.addFiles('mypackage.js');
   api.export('myPackageFunction');//We are exporting the function we created above...
});

Package.onTest(function(api) {
   api.use('ecmascript');
   api.use('tinytest');
   api.use('username:package-name');
   api.addFiles('package-name-tests.js');
});

パッケージを使用する

これで、 meteorApp.js ファイルから* myPackageFunction（）*を最終的に呼び出すことができます。

packages/package.js

if(Meteor.isClient) {
   myPackageFunction();
}

コンソールはパッケージのテキストを記録します。

流星パッケージログ

*package.js* ファイルの設定方法をよりよく理解するために、Meteor公式ドキュメントの例を使用します。

これはサンプルファイルです…

/*Information about this package*/
Package.describe({

  //Short two-sentence summary.
   summary: "What this does",

  //Version number.
   version: "1.0.0",

  //Optional.  Default is package directory name.
   name: "username:package-name",

  //Optional github URL to your source repository.
   git: "https://github.com/something/something.git",
});

/*This defines your actual package*/
Package.onUse(function (api) {

  //If no version is specified for an 'api.use' dependency, use the
  //one defined in Meteor 0.9.0.
   api.versionsFrom('0.9.0');

  //Use Underscore package, but only on the server.
  //Version not specified, so it will be as of Meteor 0.9.0.
   api.use('underscore', 'server');

  //Use iron:router package, version 1.0.0 or newer.
   api.use('iron:router@1.0.0');

  //Give users of this package access to the Templating package.
   api.imply('templating')

  //Export the object 'Email' to packages or apps that use this package.
   api.export('Email', 'server');

  //Specify the source code for the package.
   api.addFiles('email.js', 'server');
});

/*This defines the tests for the package*/
Package.onTest(function (api) {

  //Sets up a dependency on this package
   api.use('username:package-name');

  //Allows you to use the 'tinytest' framework
   api.use('tinytest@1.0.0');

  //Specify the source code for the package tests
   api.addFiles('email_tests.js', 'server');
});

/* This lets you use npm packages in your package*/
Npm.depends({
   simplesmtp: "0.3.10",
   "stream-buffers": "0.2.5"
});

Meteor-公開および購読

コレクションの章ですでに説明したように、すべてのデータはクライアント側で利用できます。これは、発行および購読メソッドで処理できるセキュリティ問題です。

自動公開の削除

この例では、次のデータで PlayersCollection コレクションを使用します。チャプター自体に集中できるように、このコレクションを準備しました。 MeteorアプリでMongoDBコレクションを作成する方法がわからない場合は、リンク：/meteor/meteor_collections [collections]の章を確認してください。

Meteor Publish and Subscribe Database Data

データを保護するには、クライアント側でデータの使用を許可していた autopublish パッケージを削除する必要があります。

C:\Users\username\Desktop\meteorApp>meteor remove autopublish

この手順の後、クライアント側からデータベースデータを取得することはできません。コマンドプロンプトウィンドウでサーバー側からのみ表示できます。次のコードをチェックアウトします-

meteorApp.js

var PlayersCollection = new Mongo.Collection('playersCollection');
var myLog = PlayersCollection.find().fetch();
console.log(myLog);

コマンドプロンプト*ウィンドウには、4つのオブジェクトを含むコレクション全体が表示されますが、 developersコンソール*には空の配列が表示されます。これでアプリがより安全になりました。

流星の公開と購読の自動公開の削除

パブリッシュおよびサブスクライブの使用

クライアントがデータを使用できるようにしたいとしましょう。このために、サーバーで* Meteor.publish（）*メソッドを作成する必要があります。このメソッドは、データをクライアントに送信します。

クライアント側でそのデータを受信して使用できるようにするために、* Meteor.subscribe（）*メソッドを作成します。例の最後では、データベースを検索しています。このコードは、クライアント側とサーバー側の両方で実行されています。

var PlayersCollection = new Mongo.Collection('playersCollection');

if(Meteor.isServer) {

   Meteor.publish('allowedData', function() {
      return PlayersCollection.find();
   })
}

if (Meteor.isClient) {
   Meteor.subscribe('allowedData');
};

Meteor.setTimeout(function() {
   var myLog = PlayersCollection.find().fetch();
   console.log(myLog);
}, 1000);

データが developers console と command prompt ウィンドウの両方に記録されていることがわかります。

流星の公開と購読はすべて許可

クライアントデータのフィルタリング

データの一部を公開することもできます。この例では、 name = "John" でデータを公開しています。

var PlayersCollection = new Mongo.Collection('playersCollection');

if(Meteor.isServer) {

   Meteor.publish('allowedData', function() {
      return PlayersCollection.find({name: "John"});
   })
}

if (Meteor.isClient) {
   Meteor.subscribe('allowedData');
};

Meteor.setTimeout(function() {
   myLog = PlayersCollection.find().fetch();
   console.log(myLog);
}, 1000);

このコードを実行すると、コマンドプロンプト*はすべてのデータをログに記録しますが、クライアント側の*コンソール*は *John という名前の2つのオブジェクトを記録します。

流星の公開と購読はすべて許可

流星-構造

Meteorには、開発者がアプリを構造化するのに役立つ特別なフォルダーがいくつか用意されています。

クライアント

*client* フォルダーを作成すると、このフォルダー内のすべてがクライアント側で実行されます。 これは、 *HTML、CSS* 、およびクライアント側の *JavaScript* を配置できるフォルダーです。 *Meteor.subscribe* 関数、 *templates、helpers* 、および *events* をこのフォルダー内に配置する必要があります。 注： *client* フォルダー内にあるファイルで *Meteor.isClient* 関数を実行する必要はありません。

サーバ

このフォルダーのファイルは、サーバー側*でのみ実行されます。これは、 methods、Meteor.Publish（）関数、およびその他の機密データを保持する場所です。すべての認証データをここに保持する必要があります。このフォルダー内のファイルに Meteor.isServer（）*を使用する必要はありません。

パブリック

これは、画像、favicons、およびクライアントに提供される他のすべてのデータを配置する場所です。

非公開

このフォルダのファイルには、サーバーからのみアクセスできます。それらはクライアントから隠されます。サーバーのみが使用する JSON または EJSON ファイルをこのフォルダー内に配置できます。

クライアント/互換性

一部のJavaScriptライブラリは、変数をグローバルとしてエクスポートします。新しい変数スコープにラップされずに実行する必要があるファイルには、このフォルダーを使用します。

残り

残りのフォルダーは、必要に応じて構造化できます。上記のフォルダーの外側に配置されるコードは、*クライアント*および*サーバー*側で実行されます。これは、モデルを定義できる良い場所です。

ロード順

ファイルのロード順を知ることは常に良いことです。次のリストは、Meteor公式ドキュメントから引用したものです。

HTMLテンプレートファイルは常に他のすべての前にロードされます
* main。*で始まるファイルは最後にロードされます
lib/ ディレクトリ内のファイルが次にロードされます
深いパスを持つファイルが次にロードされます
その後、ファイルはパス全体のアルファベット順にロードされます

Meteor-展開

Meteorの素晴らしい点の1つは、アプリを簡単に展開できることです。アプリが完成したら、簡単に世界と共有する方法があります。必要なのは、コマンドプロンプトウィンドウで次のコードを実行することだけです。

C:\Users\username\Desktop\meteorApp>meteor deploy my-first-app-ever.meteor.com

Meteor開発者アカウント username および password を入力するよう求められます。

これで、アプリの名前を持つ次のリンクのブラウザからアプリにアクセスできるようになります。

http://my-first-app-ever.meteor.com/

Meteor Deploy

Meteor-モバイルで実行

この章では、Androidデバイスでアプリを実行する方法を学習します。 Meteorが最近Windowsオペレーティングシステムにこの機能を追加したため、meteorアプリを1.3ベータ版に更新する必要があります。

注-このチュートリアルの執筆時点では、Meteor 1.3バージョンはベータ版です。製品版がリリースされたら、これを更新します。

最新のMeteorバージョンを使用するため、コマンドプロンプトウィンドウで次のコードを実行してバージョンを更新できます。

C:\Users\username\Desktop\meteorApp>meteor update --release 1.3-beta.11

ステップ1-Android SDKをインストールする

次の表のリンクを使用して、Android SDKをインストールします。

Sr.No.	Software & Description
1	Java Development Kit & Android SDK モバイル環境でMeteorアプリを実行するには、Android SDKが必要です。インストールしていない場合は、リンク：/android/android_environment_setup [Android Environment Setup]チュートリアルを確認してください。

ステップ2-Androidプラットフォームを追加する

次に、プロジェクトにAndroidプラットフォームを追加する必要があります。

C:\Users\username\Desktop\meteorApp>meteor add-platform android

ステップ3-Androidエミュレーターでアプリを実行する

Androidエミュレーターでアプリを実行するには、行の最後で –verbose コマンドを使用して、起動プロセス中に発生する可能性のあるエラーを特定します。

C:\Users\username\Desktop\meteorApp>meteor run android --verbose

Meteor Mobile

Androidデバイスでアプリを実行する

Androidエミュレーターは低速であるため、デバイスでアプリを直接実行する方が常に優れたオプションです。デバイスをコンピューターに接続して、開発者モードとUSBデバッグを有効にすることで、これを実行できます。

このプロセスは、特定のデバイスによって異なります。 *設定/バージョン情報*で*ビルド番号*を見つけて7回タップする必要があります。あなたが開発者であるという通知を受け取り、*開発者オプション*のロックが解除されます。

設定*をもう一度検索して、 USBデバッグ*を有効にします。

コマンドプロンプトで次のコマンドを使用して、モバイルデバイスでMeteorアプリを実行できます。

C:\Users\username\Desktop\meteorApp>meteor run android-device

Meteor-ToDoアプリ

この章では、簡単なToDoアプリを作成する方法を学びます。

ステップ1-アプリを作成する

コマンドプロンプトを開き、次のコマンドを実行します-

C:\Users\username\Desktop>meteor create todo-app

アプリを表示するには、 meteor コマンドでアプリを実行し、 http：//localhost：3000 に移動する必要があります

C:\Users\username\Desktop\todo-app>meteor

ステップ2-フォルダーとファイルの作成

デフォルトのファイル構造の代わりに、リファクタリングします。 todo-appl、todo-app.css 、 todo-app.js を作成する client フォルダーを作成しましょう。

C:\Users\username\Desktop\todo-app>mkdir client
C:\Users\username\Desktop\todo-app\client>touch todo-appl
C:\Users\username\Desktop\todo-app\client>touch todo-app.js

また、 server.js を含む server フォルダーも作成します。

C:\Users\username\Desktop\todo-app>mkdir server
C:\Users\username\Desktop\todo-app\server>touch server.js

最後に、内部に task-collection.js ファイルを含む collections フォルダーを作成しましょう。

C:\Users\username\Desktop\todo-app>mkdir server
C:\Users\username\Desktop\todo-app\collections>touch task-collection.js

次の画像でアプリの構造を見ることができます-

流星Todoアプリの構造

ステップ3-client/todo-appl

開発の最初のステップは、アプリのHTMLを作成することです。新しいタスクを追加できる入力フィールドが必要です。タスクは、*削除*および*チェック*機能を備えたリスト形式になります。完了したタスクを表示または非表示にする機能もあります。

<head>
   <title>Todo App</title>
</head>

<body>
   <h1>Todo List ({{incompleteCount}})</h1>

   <label class = "hide-completed">
      <input type = "checkbox" checked = "{{hideCompleted}}"/>
      Hide Completed Tasks
   </label>

   <form class = "new-task">
      <input type = "text" name = "text" placeholder = "Add new tasks"/>
   </form>

   <ul>
      {{#each tasks}}
         {{> task}}
      {{/each}}
   </ul>
</body>

<template name = "task">
   <li class = "{{#if checked}}checked{{/if}}">
      <button class = "delete">x</button>
      <input type = "checkbox" checked = "{{checked}}" class = "toggle-checked"/>
      <span>{{username}} - {{text}}</span>
   </li>
</template>

ステップ4-collections/task-collection.js

これは、新しいMongoDBコレクションを作成する場所なので、サーバー側とクライアント側の両方で使用できます。

Tasks = new Mongo.Collection("tasks");

ステップ5-server/server.js

サーバー側でアプリのメソッドを定義します。これらのメソッドはクライアントから呼び出されます。このファイルでは、データベースクエリも公開します。

//Publishing tasks from the server...

Meteor.publish("tasks", function () {
   return Tasks.find({});
});

//Methods for handling MongoDb Tasks collection data...

Meteor.methods({

   addTask: function (text) {

      Tasks.insert({
         text: text,
         createdAt: new Date(),
      });
   },

   deleteTask: function (taskId) {
      var task = Tasks.findOne(taskId);
      Tasks.remove(taskId);
   },

   setChecked: function (taskId, setChecked) {
      var task = Tasks.findOne(taskId);
      Tasks.update(taskId, { $set: { checked: setChecked} });
   }
});

ステップ6-client/todo-app.js

これはメインクライアントJavaScriptファイルです。このファイルはリファクタリングすることもできますが、ここですべてのクライアント側コードを記述します。まず、サーバーで公開されている task コレクションをサブスクライブします。次に、アプリロジックを処理できるように*ヘルパー*を作成し、最後に、サーバーからメソッドを呼び出す*イベント*を定義します。

//Subscribing to the published tasks
Meteor.subscribe("tasks");

//Show/Hide functionality
Template.body.helpers({

   tasks: function () {

      if (Session.get("hideCompleted")) {

        //If hide completed is checked, filter tasks
         return Tasks.find({checked: {$ne: true}}, {sort: {createdAt: -1}});
      } else {

        //Otherwise, return all of the tasks
         return Tasks.find({}, {sort: {createdAt: -1}});
      }
   },

   hideCompleted: function () {
      return Session.get("hideCompleted");
   },

   incompleteCount: function () {
      return Tasks.find({checked: {$ne: true}}).count();
   }
});

//Events for creating new tasks and Show/Hide functionality.
//Calling methods from the server

Template.body.events({

   "submit .new-task": function (event) {
      event.preventDefault();
      var text = event.target.text.value;

      Meteor.call("addTask", text);
      event.target.text.value = "";
   },

   "change .hide-completed input": function (event) {
      Session.set("hideCompleted", event.target.checked);
   }
});

//Events for Deleting and Check/Uncheck functionality
Template.task.events({

   "click .toggle-checked": function () {

     //Set the checked property to the opposite of its current value
      Meteor.call("setChecked", this._id, ! this.checked);
   },

   "click .delete": function () {
      Meteor.call("deleteTask", this._id);
   }
});

ステップ7-デプロイ

開発が完了したら、コマンドプロンプトウィンドウからアプリを展開できます。アプリのデプロイ名は my-first-todo-app になります。

C:\Users\username\Desktop\todo-app>meteor deploy my-first-todo-app

http：//my-first-todo-app.meteor.com/*を開いて、アプリの使用を開始できます。

Meteor Todo App Deploy

Meteor-ベストプラクティス

前の章で、Meteor開発のベストプラクティスのいくつかを既に説明しました。以下は、Meteorを使用する際に留意すべきベストプラクティスの一部です。

ディレクトリ構造

Meteorアプリのディレクトリ構造に関する厳密なルールはありません。ガイドラインの詳細については、リンク：/meteor/meteor_structure [Meteor-Structure]の章をご覧ください。

使用方法

クライアントから insert、update 、 remove を直接呼び出すのではなく、機密データを扱う場合は常にlink：/meteor/meteor_methods [Meteor-Methods]を使用する必要があります。

データ管理

link：/meteor/meteor_publish_subscribe [Publish and Subscribe]メソッドを使用してデータを保護します。すべてのクライアントがデータを利用できるようにする場合は、代わりにパブリケーション名として null を使用できます。データの小さな塊を公開すると、アプリのパフォーマンスも向上します。

データを検証する

コレクション内に保存されるすべてのデータを検証する必要があります。最適なオプションの1つはhttps://atmospherejs.com/aldeed/collection2[collection2]パッケージです。このパッケージを使用すると、サーバーとクライアント側の検証を簡単に設定できます。

セッションを最小化

*session* 変数はグローバル変数であり、グローバルの使用はJavaScriptのベストプラクティスに反します。

ルーター

Meteorルーティングには、2つの最も一般的なオプションがあります。小さなアプリの場合、https://atmospherejs.com/iron/router [Iron Router]があります。データが変更されると、自動的に再実行されます。大きなアプリの場合、https://atmospherejs.com/kadira/flow-router [Flow Router]があります。このルーターを使用すると、テンプレートの再レンダリングを最適化する自由度が増しますが、少し定型的なコードが必要になります。

パッケージ

パッケージをアプリ内で使用する前に、パッケージが定期的に更新されているかどうかを常に確認してください。

Meteor-quick-guide

流星-概要

特徴

利点

制限事項

Meteor-環境のセットアップ

前提条件

Meteorをインストールする

Meteor-最初のアプリケーション

ステップ1-アプリを作成する

ステップ2-アプリを実行する

手順3-結果の確認

流星-テンプレート

シンプルなテンプレート

meteorAppl

meteorApp.js

ブロックテンプレート

meteorAppl

meteorApp.js

流星-コレクション

コレクションを作成する

meteorApp.js

データを追加

meteorApp.js

データを探す

meteorApp.js

meteorApp.js

データを更新する

meteorApp.js

データを削除

meteorApp.js

meteorApp.js

meteorApp.js

流星-フォーム

テキスト入力

meteorAppl

meteorApp.js

ラジオボタン

meteorAppl

meteorApp.js

チェックボックス

meteorAppl

meteorApp.js

ドロップダウンを選択

meteorAppl

meteorApp.js

流星-イベント

meteorAppl

meteorApp.js

流星-セッション

meteorAppl

meteorApp.js

流星-トラッカー

meteorAppl

meteorApp.js

流星-パッケージ

パッケージを追加する

パッケージの削除

パッケージの更新

現在のパッケージを確認する

パッケージのメンテナンス

Meteor Development Groupパッケージの追加

コミュニティパッケージの追加

流星-コアAPI

meteorApp.js

流星-チェック

チェックパッケージのインストール

チェックを使用する

meteorApp.js

meteorApp.js

マッチテスト

meteorApp.js

meteorApp.js

流星-ブレイズ

レンダリング方法

meteorAppl

meteorApp.js

データでレンダリング

meteorAppl

meteorApp.js

これはサンプルファイルです…