SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

Yahoo! JAPAN 黒帯シリーズ

CrosswalkとMeteor.jsでチャットアプリを作成してみよう

Yahoo! JAPAN 黒帯シリーズ 第4回 ~ 「Androidアプリ黒帯」によるCrosswalkを用いたハイブリッドアプリの解説

  • X ポスト
  • このエントリーをはてなブックマークに追加

テンプレート部分

 Meteorの特徴ですが、htmlファイルは解析され、headタグの中に、実際に利用するJavaScriptのscriptタグが挿入されて、bodyタグの中身はすべて動的に作成されます。実際に生成されたHTMLのコードを見てみると分かると思います。

 では、一個ずつ見てきましょう。clientフォルダにあるindex.htmlを参照すると、bodyタグの中に以下のような記載があります。{{> header }} はheaderという名前のテンプレートを挿入するという意味です。

client/index.html
<body>
  {{> header }}
  {{> textChat }}
  {{> inputBox }}
</body>

 この記法は、Spacebarsというテンプレートエンジンのものになります。Meteor.jsのチームが開発しているライブラリです。

 index.htmlを見ていくと、name属性の値がheaderというtemplateタグがあり、その中にhtml片がありますね。これが挿入されます。

client/index.html
<template name="header">
<header>
  <nav>
  <div class="nav-wrapper blue lighten-1">
    <a href="#" class="brand-logo">My Chatty</a>
  </div>
  </nav>
</header>
</template>

 textChatの中身を見てみましょう。

client/index.html
<template name="textChat">
<div id="chat-messages">
  {{#each messages}}
  {{> message user=user text=text timestamp=timestamp}}
  {{/each}}
</div>
</template>

 こちらは、{{#each message}} という謎のものがあります。#eachはなんとなく、配列などのコレクションの要素を一個ずつ取り出し繰り返し処理に使うというイメージが付くと思います。次のmessagesですが、これは急に出てきましたね。一体どういうものなのでしょうか?

 同じ階層にあるindex.jsを参照してください。こちらに答えがあります。

client/index.js
Template.textChat.helpers({
  messages: Messages.find({}, {sort:{timestamp: 1}})
});

 ここにmessagesが出てきました。ここでは、textChatというテンプレートのヘルパーを設定しており、messagesが定義されています。

 Messages.find({}, {sort:{timestamp: 1}}) で、timestampでソートしてMessagesのデータを取得しています。Messagesについては、これから説明します。

クライアントとサーバーのデータの同期

both/collections.js
Messages = new Mongo.Collection("messages");

 Messagesでは、4つの要素(_id, user, text, timestamp)を持ちます。

 Mongo.CollectionとあるようにMeteor.jsではMongoDBをデータベースとして利用しており、ユーザーは他のデータベースに変更できません(最近は、RethinkDBなど他のデータベースも利用できるような動きがあります)。

server/server.js
Meteor.publish('messages', function () {
    return Messages.find({}, {sort:{timestamp: -1}, limit:8});
});
client/index.js
Meteor.subscribe('messages');

 まず、ここまで頭に入れた上で、サーバー側のデータを更新して、それが瞬時にクライアント側にも反映されることを見てみましょう。ターミナルから以下を実行してみてください。

meteor mongo
meteor:PRIMARY> db.messages.insert({text: "Hello", timestamp: new Date(), user: "console"})

 次にChromeブラウザの開発コンソール上で、以下を実行してみてください。

Messages.findOne({}, {sort: {timestamp: -1}})
=> Object {_id: L…n._ObjectID, text: "Hello", timestamp: Thu Jul 23 2015 14:40:27 GMT+0900 (JST), user: "console"}

 先ほど、サーバー側で追加したデータが追加されていることが分かります。

 また、サーバーでpublishするのは、8個のドキュメントなので、クライアント側には、8個だけあります。

Messages.find().fetch().length
=> 8

 クライアント側もサーバーと同じAPIでデータが取得できるところも素晴らしいです。クライアント側(ブラウザ)にはMongoDBはないので、その代わりにminimongoというMongoDBのすべての機能ではないですが、ほぼ互換があるin-memoryデータベースを実装することで実現しています。

 minimongoもMeteor.jsのチームが開発しています。

次のページ
表示の更新部分の理解

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
Yahoo! JAPAN 黒帯シリーズ連載記事一覧

もっと読む

この記事の著者

筒井 俊祐(ヤフー株式会社)(ツツイ シュンスケ)

ヤフー株式会社 パーソナルサービスカンパニー アプリ推進本部 起点アプリ部 部長 黒帯 Androidアプリソフトウェア会社でソフトウェアエンジニアとして、携帯向けゲームアプリの開発、携帯アプリ用のAPIの開発エンジニアを経て、2005年ヤフー株式会社入社。入社後は、「Yahoo!ウィジェット」、「...

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/8872 2015/08/07 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング