QOXホームへ

JS初心者がMeteor.jsで超シンプルなチャットを作りました

Yuko Hashimoto

Yuko Hashimoto

Tags:

Meteor.jsがアツいらしいです

nodeベースのWebアプリケーションプラットフォーム、Meteor
弊社プログラマの皆は楽しそうに使いこなしています。
(弊社のアプリ旅デラックスWebサイトでもMeteorを使用しています)

サーバーサイドでJavaScriptが動くことにもたじろいでしまうのですが、システム周りの詳しいことがわからないデザイナーでもJavaSciptならちょっとはわかるのでは…?ということで、

作ってみました。
Po Po Chat
ハトの写真はランダム。自由に書き込めます。書き込む時は紙飛行機ボタンを押してください。
meteor.com上にデプロイしていて、実は全世界から上書きできる状態です。

ファイル数はとんでもなく少ない

使っているファイルですが、こんな感じです。
これらに加えてハト写真が7枚。

CSSはMaterial Design Liteを読み込んでいるので特に少ない。

以下のサイトを参考にしています。

Polymerを触っていた頃に見つけた猫のチャット、かわいいな〜と思ったのでデザインの参考にしています(リンク先のデモ)。
PolymerでMaterial Designなチャットアプリを作ろう
マテリアルデザインが上手に使えるように、模写で勉強です。

デザイナーが使ってみてどうよ、な話

Meteorに関しては「画期的だ!」という玄人の記事は多くてもウルトラ初心者に向けた記事はほぼないので、チュートリアルをやっていても「クライアント…?サーバー…?セッション…?DB…みる…?」な状態に陥りやすいです(私だけでしょうか)。

しかしJSは見慣れていることと、テンプレートやファイル構成から少しずつ概要が見えてきます。
それとブラウザのコンソールから操作することで、何が起こっているかの動きがわかりやすいです。

実務にバリバリ使うには時間を要しそうですが、Webアプリケーションの学習には適していそう。meteor.comで公開までできますしね。

全体の構成のおかげで、プログラマとの共同作業はスムーズです。

meteorとマテリアルデザイン

今回作ったチャットでは Material Design Lite を使用しています。
旅デラックスのサイトでは Polymer を使用しました。

使ってみて何箇所かひっかかる部分がありました。どうも相性がよろしくないようで、うまく動かない部分が出てきます。うーん。

何かいい方法はあるのかなあと検索してみて、

今頃見つけてちょっと泣きそう。

そのほか参考記事

Meteorのサンプルにチャットがちょうどいいみたい?作って解説している記事を見つけたのでメモしておきます。
JavaScriptのみ!Meteorで作る簡単リアルタイムWebアプリ
Meteorを使ったリアルタイムチャットアプリケーション

学習には Discover Meteor は必読。
DISCOVER METEOR
ただ翻訳が追いついてなくて情報が古くて動かないこともあるので、この辺も参考にすると捗ります。
JavaScript超初心者向け Meteor メモ (1)
Meteorが1.0になったので入門してみた(1/2)

最近のアップデートで公式サイトのサンプルも増えてるぞ!
Get started|meteor

Yuko Hashimoto

Yuko Hashimoto デザイナー

デザインって何だろう、と悶々としながら、オシャレさん目指して試行錯誤する日々です。ハト好き。寺社と散歩と時代劇が好きです。気がつくと荷物が多くなるのが悩み。

記事一覧
Go up