連載インデックスへ
一撃デザインの種明かしHTML5の味見しちゃうよ（2）

Meteorでチャットアプリを作ってしまったよ

シーエー・モバイル
市川　未吏
2012/6/5

味見部中に、Meteorでチャットを作ってしまった参加者の方もいらっしゃいました。これなら私でもすぐできそう！

　味見しながらチャット作っちゃいました

　Web先端技術味見部#2のテーマはMeteorです。さてさて、Meteorって何でしょう、ということでまずは本家のサイトを見てみます。

　 どうやら、JavaScriptだけでイケてるWebアプリケーションが作れるよってことらしいです。紹介動画を見ると、簡単にインストールして始められること、サーバへの変更がリアルタイムでブラウザへ反映されることなどが分かります。そして、とにかくものすごくスピーディーにアプリケーションが作れそうな雰囲気。実際、今回の味見部中に、Meteorでチャットを作ってしまった参加者の方もいらっしゃいました。これなら私でもすぐできそう！ では早速やってみましょう。

　以下は、実際に私のMac OS上で実行したものです。

　まずはインストールです。本家のドキュメントに従ってコマンド1つ、一瞬で終わります。

% curl install.meteor.com | /bin/sh

  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current

  Dload  Upload   Total   Spent    Left  Speed

  100  5238    0  5238    0     0   2006      0 --:--:--  0:00:02 --:--:--  2208

  Installing Meteor to /usr/local/meteor




/usr/local does not exist. Creating it with 'sudo mkdir'.

  This may prompt for your password.




Password:

  ... downloading

  ######################################################################## 100.0%




Meteor installed! To get started fast:




 $ meteor create ~/my_cool_app

  $ cd ~/my_cool_app

  $ meteor



Or see the docs at:

 docs.meteor.com

　ほんとにこれだけで終わりました。次はプロジェクトの作成です。

% meteor create myapp

  myapp: created.

To run your new app:

  cd myapp

  meteor

  % cd myapp

  % ls

  myapp.css     myapp.html     myapp.js

  % meteor

  [[[[[ ~/meteor/myapp ]]]]]
Running on: http://localhost:3000/

　ここでブラウザからhttp://localhost:3000/にアクセスすると、Hello world！が表示されました。必要なファイルはhtmlとCSS、そしてjsのみです。

　ローカルで動くようになったので試しにhtmlへ少し変更を加えてみます。元のHello world!をHello Ajimibu!に変更してファイルを保存し直すと、即座にブラウザ側へもその変更が反映されることが分かります。

　これがMeteorのイントロダクションに説明されているHot Code Pushesです。ブラウザのリロードは必要ありません。

　次はデプロイです。これまたコマンド一発でmeteor.comの環境へデプロイが完了し、誰でも簡単にアプリケーションを公開できます。

% meteor deploy ajimibu_ichikawa.meteor.com

  Deploying to ajimibu_ichikawa.meteor.com.  Bundling ... uploading ... done.

  Now serving at ajimibu_ichikawa.meteor.com

　ここでajimibu_ichikawa.meteor.comにアクセスすれば、やはりHello world！が見られます。また、デプロイ時にパスワードオプションを付けることもできます。

% meteor deploy --password ajimibu_ichikawa.meteor.com

  New Password:

  Confirm Password:

  Deploying to ajimibu_ichikawa.meteor.com.  Bundling ... uploading ... done.

  Now serving at ajimibu_ichikawa.meteor.com

　ここではテンプレートとしてHandlebarを使っています。htmlを見てみるとbodyタグの中でhelloというテンプレートを呼び出していてtemplateタグの中でhelloを定義しています。

<head>

  <title>myapp</title>

  </head>




<body>

  {{> hello}}

  </body>




<template name="hello">

  <h1>Hello World!</h1>

  {{greeting}}

  <input type="button" value="Click" />

  </template>

　ここまでできたら早速サンプルに挑戦してみましょう。

　サンプルは--exampleオプションで簡単にコピーできます。

% meteor create --example leaderboard

  leaderboard: created.




To run your new app:

  cd leaderboard

  meteor

ストレージにはMongoDB

　Meteorではデータの扱いも簡単に行えます。データはMongoDBのコレクション（=RDBでいうところのテーブル）として保持し、クライアント側ではそれをキャッシュします。実装にはminimongoというライブラリを利用していて、クライアント側からもサーバ側からも全く同じ実装でデータの参照や変更を行えます。

　クライアント側の変更は即座にそのクライアントのキャッシュに反映された後、その変更をサーバ側のMongoDBへ送信します。MongoDB側で他のクライアントからの変更も反映した状態でクライアント側へ結果を返すと、他のクライアントでもその変更を受信するといった流れです。試しにleaderboardのサンプルを2つのブラウザで開いた状態で片方からGive 5 pointボタンを押下すれば、隣のブラウザ上でもリロードなしに即座に同じ変更が反映されることが分かるはずです。

　ただ、現時点ではクライアント側からのデータの変更が自由自在。認証が存在していないあたりは、まだこれからといったところでしょうか。

　サンプルの実際のソースを見てみましょう。leaderboard.jsでは1行目でMongoDBのコレクションとしてplayersを宣言し、Players.find〜や、Players.update〜、Players.insert〜といったふうにデータを参照、操作しています。うん、確かに直感的で分かりやすい。コードの量もたった50行ほどです。

Players = new Meteor.Collection("players");




if (Meteor.is_client) {

  Template.leaderboard.players = function () {

  return Players.find({}, {sort: {score: -1, name: 1}});

  };




 Template.leaderboard.selected_name = function () {

  var player = Players.findOne(Session.get("selected_player"));

  return player && player.name;

  };




 Template.player.selected = function () {

  return Session.equals("selected_player", this._id) ? "selected" : '';

  };




 Template.leaderboard.events = {

  'click input.inc': function () {

  Players.update(Session.get("selected_player"), {$inc: {score: 5}});

  }

  };




 Template.player.events = {

  'click': function () {

  Session.set("selected_player", this._id);

  }

  };

  }




// On server startup, create some players if the database is empty.

  if (Meteor.is_server) {

  Meteor.startup(function () {

  if (Players.find().count() === 0) {

  var names = ["Ada Lovelace",

  "Grace Hopper",

  "Marie Curie",

  "Carl Friedrich Gauss",

  "Nikola Tesla",

  "Claude Shannon"];

  for (var i = 0; i < names.length; i++)

  Players.insert({name: names[i], score: Math.floor(Math.random()*10)*5});

  }

  });

  }

　今回の味見部では、他の2つのサンプルも試し、みんなでMeteorをしっかり味見しました。Meteorが中で何をやってくれているかについては、Jxckさんのこちらの資料が詳しいです。

　ちなみにMeteorは、reactive programmingという概念を取り入れています。依存するデータが変更される度に自動的に結果を再計算し、単純な命令形のコードで書けるという、Meteorの特徴はこの概念の表れです。われわれが変更を意識してプログラミングしなくとも、システム側が勝手にreactiveしてくれるってことですね。なるほど。私は初めて聞いたのですが、この概念は、今後、浸透していくものなんでしょうか。とにかく簡単に、それなりに動くものが作れるという点では、私のようなJavaScript初心者にも非常にとっつきやすいし、触っていて単純に楽しいです。今後の実用性がどうなるかという点では、まだ様子を見るしかないのでしょうが、期待して待ちたいと思います。

　さて、次回のテーマは少し流れを変えてspdy！名前からも連想できるように、Webを高速化するために提唱された新しい通信プロトコルです。Googleによって提唱されApacheのモジュールやNode.jsでの実装も登場している、この最新技術のお味を見てみたいと思います。

著者プロフィール

市川未吏（いちかわ　みさと）
シーエー・モバイル／エンジニア
女性向けソーシャルゲームの開発を担当。
インフラ経験あり。ガテン系オペレーションもOK。サーバ−も担げる女子エンジニア。
もともとの専門は宇宙物理学


[an error occurred while processing this directive]
「デザインハック」コーナーへ



HTML5 + UX フォーラム 新着記事
＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）

注目のテーマ

デザインハック 記事ランキング

本日 月間
＠IT