SHOEISHA iD

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

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

Yahoo! JAPAN 黒帯シリーズ

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

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

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

Meteor.jsとは

 Meteor.jsとは、フルスタックのウェブアプリケーション用のフレームワークで、クライアントサイド・サーバサイド共にJavaScriptで記述でき、 リアクティブプログラミングが行えるのが特徴としてあります。

 リアクティブプログラミングのイメージは、ある特定のデータが更新されたら、そのデータに依存している対象が更新されるというものです。「Excel」の式をイメージしてみると分かりやすいと思います("=A2 + A3"とA1のセルに書かれてあるときはA2を更新すると、A1の式の値も更新)。

 また、サーバーサイドとクライアントサイドでデータを同期する仕組みを持っており、それを活用することで、サーバーサイドのデータが更新されたら、それがクライアントサイドに伝わり、データに依存している部分が更新されます。ここは、Meteor.jsのチュートリアルなどを見ると分かりやすいです。

 昨年の10月下旬に1.0がリリースされ、現在順調に開発が進んでおり、海外のプロダクションでは利用している記事も増えてきたように見えたので、今回一度使ってみようと思いました。

 インストールは、MeteorのGet Startedのページにもあるとおり、ワンライナーでインストールできます。

curl https://install.meteor.com/ | sh

 チュートリアルも揃っているので、初めて開発する方は参考にしてみてください。

テキストチャットのアプリを動かしてみよう

 では、プロジェクトのコードを見ていきましょう。

cd meteor-chat

 対象ディレクトリ内でmeteorを実行すると、起動するので、ブラウザでアクセスしてみましょう。

> meteor
[[[[[ ~/tmp/chatapp-demo/meteor-chat ]]]]]

=> Started proxy.
=> Started MongoDB.
=> Started your app.

=> App running at: http://localhost:3000/

 上記の例では、ブラウザで「http://localhost:3000/」にアクセスすると、画面を見ることができます。

 スマホからもアクセスできるように、IPアドレスを指定して起動しましょう。IPアドレスはifconfigのコマンドを実行すると分かります。

meteor -p YOUR_IP:3000  

 スマホで見ると、以下のように表示されます。すでにテストでいくつかメッセージを入れていますが、みなさんが初めてアクセスした場合は、メッセージは表示されていません。

 また、開発用のinsecure、autopublishは今回利用していません。以下のコマンドであらかじめはずしています。

meteor remove insecure autopublish

 insecureが有効になっていると、クライアント側から誰でもデータを更新できます。名前のとおり、安全ではない開発時に利用するものです。

 後ほど説明しますが、subscribeとpublishを利用してどのデータをクライアントサイドと共有するかをコントールして開発を行うため、autopublishも併せて削除しています。

 プロジェクトには、以下の3つのディレクトリがあります。

mkdir both client server
  • both:クライアントサイド、サーバーサイドでの共通部分のコードを配置
  • client:クライアントサイドのみで利用するコードを配置
  • server:サーバーサイドのみで利用するコードを配置

 画像など、そのまま配信したものがある場合は、publicというディレクトリを作成し、そちらに置きます。今回は、作成せずに進みます。

 また、見た目を少し良くするために、MaterializeというCSSのフレームワークを導入しています。

meteor add materialize:materialize

 上記のコマンドで導入しました。簡単ですね。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」など、さまざまなカンファレンスを企画・運営しています。

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

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

メールバックナンバー

アクセスランキング

アクセスランキング