meteorTweetこんにちは。この春に無事大学を卒業したので、KRAYアルバイトから社員に転職しました、浅海です。最近、JavascriptのリアルタイムWebアプリケーションフレームワークのMeteorで遊びました。リアルタイムWebアプリケーションを簡単に作ることができますので「最近流行りのリアルタイムWeb、一度やってみたいなー、でも難しそうだなー」と思っている方におすすめです!この記事ではグーグルマップ上で会話できるリアルタイムチャットの作り方を解説します。・この記事を執筆時点のMeteorのバージョンは0.42です。・「コマンド一発でインストール!!」とか書きましたが、これは自分が使っているMacでの話です。windowsのcygwinなど、それらの環境でどうなるかは試してません。・一部、コードをどこに書くかが非常にわかりづらいと思います。完成品はgithubに公開しているので、そちらもよろしくお願いします。https://github.com/asaumi/geochat・「JavaScriptのみ!」と言いつつ、CoffeeScriptで書いています。Meteorを始めるMeteorとは昨年末に突如登場したリアルタイムwebアプリケーションをさくさく作れるというフレームワークです。「インストールやデプロイがコマンド一発!!!」などと、大きな話題になりました。とことん開発者の負担を減らそうという試みがされており、驚くほど短時間で、動作するリアルタイムWebアプリケーションができてしまいます。現状のMeteorには、MongoDBの更新は誰でもできてしまう(ブラウザからデータ全削除のクエリなども簡単に送れる)ため、使いどころは限られてきます。将来的に、Meteorの開発元は「Galaxy」という有償版を作るらしいので、憶測ですが、認証機能はそちらに入るのかもしれません。Meteorのインストール以下のコマンドを使うだけでインストールが済みます。createの後に、プロジェクト名を指定します。今回は、geochatと命名しました。geochatすると、geochatというディレクトリが作られ、その中にはgeochat.cssgeochat.htmlgeochat.jsという3つのファイルが作成されます。CoffeeScriptとjQueryのインストール普段Railsばかりやっている自分は、CoffeeScriptとjQueryがないと何もできないペーペーなので使います。ちなみにsassも使えるようです。起動はただ単にmeteorを入力するだけです。それだけでは味気ないので、MPが余ってる人は声高らかに「メテオッッ!!」と唱えながらEnterを叩くことをおすすめします。http://localhost:3000/にアクセスした結果は以下です。あなたの予想に反して、このページが見えているでしょうか?これは、「Click」というボタンを押すとJavaScriptのコンソールに文字が出力されるというサンプルプログラムです。こんなものは全て消し去りましょう。coffeeで開発するので、geochat.jsをgeochat.coffeeに改名します。geochat.coffeeそして、以下のように書き換えます。サーバ側の処理geochat.htmlは以下のように書き換えます。<title>geochat</title></head><body></body>これでまっさらなプロジェクトができました。CSSの設定この記事の最終的なCSSを当ててしまいます。geochat.cssを以下に書き換えてください。}リアルタイムチャットの作成ではまず、普通のリアルタイムチャットを作ってみます。Meteorならお手軽です。ユーザーのセッション管理Meteorでのセッション管理は、公式のこのサンプルが参考になります。http://meteor.com/examples/wordplayまずはチャットにアクセスしたユーザ情報を格納するUserコレクションを作成します。サーバのMongoDBにデータを保存するには、Meteor.Collectionクラスをnewします。現在時刻取得ついでに現在時刻を取得する関数もついかしました。クライアント側クライアント側のコードは以下のようにします。10秒毎データベースからデータを取り出すにはfind、新規に挿入するならinsert、更新するならupdate、削除するならremove。どれもmongoDBのクエリと同じような形式になっています。サーバ側これだけでは、Userを作ったら作りっぱなしになってしまいます。一定時間アクセスの無いUserは削除する処理をサーバ側に記述しましょう。batch_intervalリアルタイムにブラウザがリロードされるので、開発のタイミング次第ではゴミデータが発生するかもしれません。それの削除のための処理を入れています。参加人数表示HTMLを変更して画面に人数を出力するようにします。geochat.htmlのbody以下を以下のように書き換えます。}}という括弧の中で指定するのは、templateタグのname属性です。}}の中は対応するtemplateタグの中で置き換わります。ユーザ数を返すusersテンプレートのcountは、Template.users.countの戻り値、つまりユーザの総数に置き換わります。部分は、サーバのDBに更新があると自動で実行されるため、データの更新に紐付いたリアルタイムな処理を書く場合は、Templateを利用します。発言できるようにするチャットらしく、発言をできるようにします。発言を保存するMessageコレクションを宣言するので、geochat.coffeeファイルの頭に以下を追加します。Meteor.Collection('messages')HTMLHTMLに発言の入力欄と発言を表示する場所を作ります。class="message">{{body}}</li></template>を追加します。clickイベントを扱う文章を入力するフォームと、入力内容を送信するボタンを設置しました。これを動作させるには、フォームのイベントを扱う必要があります。Meteorでテンプレートのイベントを扱う場合の書き方は以下です。#submit-message」は、見ての通り#submit-messageがクリックされた時の処理です。このTemplate.controlls.eventsに複数のイベントを登録でき、clickの他にも色々と登録できます。公式のドキュメントでは以下の部分です。http://docs.meteor.com/#eventmaps発言内容を表示する他にgeochat.coffeeに何を書く必要があるかはここまで読んでいればわかると思います。thisはMessageのカーソルを追加します。Template.messages.message.bodyでは、thisはMessageのカーソルのため、「@body」とすれば発言本体を取得できます。サーバ側サーバ側にはある程度時間の経過したMessageを削除する処理を入れます。4}})を追加します。ここまでやれば、下の画像のように匿名リアルタイムチャットが完成しているはずです。簡単にチャットができてしまったので、次はGoogleマップを利用して少し凝ったことをしてみます。Googleマップの表示Googleマップの表示は、Meteor独自のことは特にしません。APIを利用するだけです。APIを読み込みます。オプションを付けておきます。language="javascript"></script>googleマップの初期化クライアント側のcoffeeにあるMeteor.startupの中で、以下を記述します。google.maps.MapTypeId.ROADMAP座標は適当です。画像のように、日本が見えていると思います。位置情報を取得するボタンを押したら現在位置を取得するようにします。ボタンの設置はhtmlのcontrollsテンプレートに以下を追加します。/>発言フォームを作った時のように、Template.controlls.eventsへ先ほどのボタンをクリックしたときの動作を追加します。geo.coords.longitude}}現在位置にマーカーを表示するマーカーとはgoogleマップでよくみるコレです。このマーカーを、チャットに来たユーザの現在地点に出すわけです。htmlマーカーの表示はUserのデータが更新された時に変更するべきなので、Template内でリアルタイム処理をします。HTMLのusersテンプレートを以下の様に書き換えます。{{marker}}</template>マーカーの表示HTMLにuserテンプレートを作成したので、Userが更新された時に、Template.user.markerが実行されるようになりました。以下のコードをクライアント側に書き加えます。''これで、最初のほうで設置した「現在位置を公開する」ボタンを押すとマーカーが地図に表示されます。Userの削除を検知する一定時間アクセスの無いユーザは、サーバ側で削除しています。ユーザが削除されたことを検知してマーカーも削除しなければいけません。それが以下の処理です。null発言を地図上に表示するこれが最後のステップです。チャットで発言した言葉を、以下のようにポップアップで出してみましょう。apiではInfoWindowと呼ばれているので、info_windowとします。クライアント側のコードに下の位置行をいれましょう。{}Template.user.markerに一行書き加えます。google.maps.InfoWindow発言を表示している部分で、info_windowを設定します。Template.message.bodyを以下のように書き換えましょう。info_windows[@data.user_id]?データが削除されたときにだけ実行したいときは、Templateのdestroyedに関数を登録します。それと一応、userが削除されたときに発言の表示も削除します。null完成!!お疲れ様です!これでリアルタイムの地図チャットができました!こんな感じになっているはずです。作ったアプリケーションを公開するMeteorはアプリケーションの公開方法も極限まで簡略化されています。デプロイデプロイするにはMeteorのdeployコマンドを実行するだけです。以下のコマンドでデプロイ後は、geochat.meteor.comで見れるようになります。誰でも同じサブドメインでデプロイされてしまってはこまるので、パスワード認証を付けたい場合は、–passwordオプションを付けます。geochatデプロイが非常に簡単ですが、残念なことにこのmeteor.comドメインを作ったデプロイは、将来的には廃止されるようです。完成品はこちらで公開しています。http://geochat.meteor.com自前のサーバにデプロイする方法は公式のドキュメントに載っています。myapp.tgzとすると、必要なパッケージ含む全てをtgzとして出力してくれます。これを自前のサーバに持っていって、解凍、実行するようです。おまけMeteorで遊んで、好き勝手に改造したバージョンです。縮尺を調整したり、エンターキーで発言できたりします。http://geochat_ex.meteor.comソースコードgithubにコードを公開しました。ブログで紹介したものはmasterブランチ、機能追加したものはexブランチにあります。https://github.com/ttakuru88/geochat宣伝ここからは宣伝です。Tripclipをリリースしました。散歩や旅行で撮ったスナップ写真をブラウザにドラッグ&ドロップするだけで、きれいなアルバムができあがります。Tripclip」というお題でTripclipの技術的な話を発表します。date*日本語が含まれない投稿は無視されますのでご注意ください。うどいいみたい?作って解説している記事を見つけたのでメモしておきます。fax.0422-26-9781お問い合わせはこちらからどうぞ。