Meteorのチュートリアルをやって簡単なToDoアプリを作ってみました。


Meteorチュートリアルをやったよ

Meteor。Node.jsをベースにして、JavaScriptとHTML+CSSだけWebアプリケーションで記述できる新たなWebアプリケーション開発プラットフォームです。(引用)

公式サイトのチュートリアル通りに勧めてシンプルなTodolistを作りました。

popcosorn.meteor.com

まだまだ全体は把握できていないけれども、なんかすげーぞーという感じ。チュートリアルを進めながら適当に翻訳メモも書いたので雰囲気だけでもすげーぞーということが伝われば吉です。

それでは参考までにどうぞ。

Ads by Google

チュートリアル翻訳メモ

※チュートリアルを進めながらの翻訳メモで、見直しもしていないのでかなり適当です。基本自分だけが読めるようのもです。よくわからなかったり、解釈に迷ったりしたら公式のチュートリアルをご覧ください。

また、公式のドキュメントはこちらです。

下に割り振られた番号は本家のチュートリアルの番号と紐付いています(No0, 1 は割愛しました)。

No2. テンプレートの使いかた

  • テンプレートで定義した内容は {{>templateName}} で参照することができる。
  • ロジックの追加は{{}}を使えば良い。{{#each}}, {{#if}}とか
  • Javascriptからテンプレートにデータを挿入する
    → “helpers”を定義すれば良い

    if (Meteor.isClient) {
    Template.body.helpers({ tasks: [
    {text: “sample1”},
    {text: “sample2”}, {text: “sample3”}
    ] }); }

    → 配列を返すtasks という名前の”helper”をTemplate.bodyに定義している。

No3. コレクションについて

  • コレクションは永続的なデータをストアするときに用いる(要はDB)
  • コレクションはサーバとクライアントに両方からアクセスすることができる。
  • Collection = new Mongo.Collection(‘my-collection’);
    でコレクションを作成可能 (server側)
    → my-collection という名前のMongoDBコレクションを作成 クライアント側で同様のコードを書くとサーバのコレクションに接続されたキャッシュが作成される
  • コレクション内部のアイテムはドキュメントと呼ばれる
  • DBに直接ログインしてインサートすれば直ちに結果が反映される
  • サーバのDBに接続するために新たにコードを書く必要がない

No4. コードからDBにアイテム追加する

  • イベントリスナはhelperと同様にして定義することができる
    : Template.templatename.events({key: value});
    key にはリッスンしたいイベント名を、valueには実行したい内容を書く
  • event プロパティは適宜確認してね
  • コレクションの為に別途、スキーマを定義する必要はない
  • insert するときに何でも追加できちゃう
  • クライアントからDBにどんなデータでも挿入できるのは危険だよね。だけど今はまぁいいよ。

No5. タスクのチェックと削除

  • コレクションのドキュメントは、それぞれのドキュメントを特定するためのユニークな_idをもつ
  • update 関数の第一引数はドキュメントのid、第二引数は条件にマッチした場合の処理
  • remove 関数の引数はドキュメントidのみ

No6. デプロイするよー

  • デプロイしたアプリのディレクトリ配下に移動して以下のコマンドを実施
    meteor deploy popcosorn.meteor.com
  • 質問に適宜答えていけば上記のURLで公開されている

No7. iOSとAndroid用のアプリにするよー

  • meteorならWebアプリとして作ったものを簡単にiOSとAndroidアプリに簡単に変換できる。 しかも、たったいくつかのコマンドでね!
  • meteor install-sdk android
    -> Androidアプリのビルドに必要なツールをインストールしてくれる
  • meteor add-platform android
    -> 規約に同意
  • meteor run android
    -> シミュレータが起動
  • meteor install-sdk ios
  • meteor add-platform ios
  • meteor run ios

No8. セッションにUIの状態を保存する

  • クライアントサイドデータフィルタリング → 見えている完了していないタスクのみをチェック可能にする
  • セッションの状態が変わったら勝手に反映してくれる。Meteorが監視しているから。
  • Session.get(”);
  • $ne はMongoDBの基本的なコマンドの一つ。 ne = NotEqual
  • とにかくセッションを使ってみよう!という章でした!

No9. 認証機能を簡単に追加できちゃう!

  • パッケージをインストールしよう
    → meteor add accounts-ui accounts-password
    → html にコードを追記 {{> loginButtons}}
  • currentUser オブジェクトが存在していなければログインしていない状態
    → currentUser.username
  • Meteor.userId() : 現在ログインしているユーザのIDを取得
  • Meteor.user : ユーザの全てのドキュメントを取得する

No10. Secureなサイトにしよう

  • 作ったタスクの状態を誰でもいじれちゃうのは嫌だよね
  • Meteor のプロジェクトにはデフォルトで ‘insecure’ のパッケージが組み込まれている。 これにより、クライアント側からDBを直接触ることが可能だった。(CRUD処理が可能) プロトタイプを作るときはこれで良いけど、実際はまずいよね。
    -> meteor remove insecure
    -> これで今までに作ったアプリは全く使い物にならなくなる。(DBをクライアントから触れなくなるので)
  • 新しくメソッドを定義しよう
  • dao層を切り離すことができた。どこからでも同様のメソッドを呼び出すことが可能になった。
  • Meteor.call()を使用した時に内部で起こっていること
    • クライアントがサーバにリクエストを送る。メソッドをセキュアな環境で実行するために。リクエストはAJAXで投げてるよ
    • メソッドのシミュレータがクライアント側で実行される。サーバ側から返される結果を予想しようとする。クライアントが使える情報を使ってちょ。
      → 新しく作られたタスクはサーバからの結果を待たずにクライアント側に表示される。
      クライアントに表示された結果とサーバ側から返却された結果が異なる場合は、サーバ側の正しい情報に置き換えられる。

No11. publishとsubscribeでデータフィルタリング

  • autopublishパッケージを取り除こう。
    → meteor remove autopublish
  • autopublishパッケージを外したら、サーバがクライアントにどんな情報を送るのか明確に指定する必要がある。 これをできるのが、Meteor.publish, Meteor.subscribe
  • ユーザ側に見せて良いデータを指定して管理することができる。
  • Meteor.publish(‘tasks’) tasksという名前のpublicationをサーバに登録することができる
  • Meteor.subscribe(‘tasks’) tasksという名前のpublicationに登録されたデータ全て参照することができる

No12. 次のステップは?

  • もう一度同じURLにデプロイすれば最新のアプリが反映されるよ
    → もう一度デプロイしようとしたら、Error deploying application: Expired credential. Please log in again.
    → ログアウトしてログインしなおせばOK。
    meteor logout
    meteor login