2012年7月11日水曜日
MeteorのHandlebarsで2項比較を試す
Meteorで使用しているHTMLテンプレートエンジンのHandlebars.jsのブロック要素はifを始め、4つ程度しかない。
Helperを登録することにより、独自に追加することができそうなので、2つの数値の大小関係で処理内容を変えようと思い以下のことをした。
foo.html
<head>
<title>原価管理システム</title>
</head>
<body>
{{>mainContent}}
</body>
<template name="mainContent">
{{#ifCond 10 3}} big {{else}} small {{/ifCond}}
</template>
foo.js
if(Meteor.is_client){
Handlebars.registerHelper("ifCond", function(m, n, block){
if(m > n) {
return block();
} else {
return block.inverse();
}
});
}
if(Meteor.is_server){
Meteor.startup(function(){
});
}
bigが表示される。
{{#ifCond 10 3}} big {{else}} small {{/ifCond}}を
{{#ifCond hoge 3}} big {{else}} small {{/ifCond}}に変えて、
if(Meteor.is_client){ の下に
Template.mainContent.hoge = function(){
return 8;
}
を挿入すると、ifCondの3つの引数のmには8が渡ってきているが、nには本来blockに渡って来るべき関数が渡ってきて、blockは未定義となっている。
今度は{{#ifCond hoge}}で、hogeに式を渡すようにする（m > nなど）。
2012年7月7日土曜日
Meteorで簡単なチャットプログラムを書いてみた
次に、メッセージ送信と送信したメッセージを表示する領域を作成する。
送信領域はログインした時のみ表示する。
メッセージ送信領域はメッセージ入力領域と送信ボタンを配置し、送信ボタンを押すとメッセージがデータベースに登録される。
メッセージ表示領域はデータベースに登録されたメッセージを全て表示する。
まず、messagesというコレクションを宣言する。RDBMSのように、予めテーブルやフィールドを作成する必要はない。
Messages = new Meteor.collection("messages");
送信ボタンを押したときに、そのコレクションにメッセージを登録する。
メッセージコレクションの全てのメッセージを登録時間の降順に取得する。Template.messages.messages = function(){
var messages = Messages.find({}, {sort: {postTime: -1}});
return messages;
}
2台のPCでブラウザを立ち上げ、このサイトを呼び出す。
両方に別の名前で入室する。一方のPCでメッセージを送信すると、そのメッセージがリアルタイムにメッセージ表示領域に両方に表示される。
送信領域はログインした時のみ表示する。
メッセージ送信領域はメッセージ入力領域と送信ボタンを配置し、送信ボタンを押すとメッセージがデータベースに登録される。
メッセージ表示領域はデータベースに登録されたメッセージを全て表示する。
まず、messagesというコレクションを宣言する。RDBMSのように、予めテーブルやフィールドを作成する必要はない。
Messages = new Meteor.collection("messages");
Template.login.events = {
...
"click #send": function(event){
var message = $("#message").val();
var loginName = Session.get("loginName");
Messages.insert({userName: loginName, message: message, postTime: new Date().toString()});
}
...
"click #send": function(event){
var message = $("#message").val();
var loginName = Session.get("loginName");
Messages.insert({userName: loginName, message: message, postTime: new Date().toString()});
}
}
var messages = Messages.find({}, {sort: {postTime: -1}});
return messages;
}
HTMLテンプレート
<head>
<title>discussion room</title>
</head>
<body>
<h1>Discussion Room</h1>
{{>login}}
{{>messages}}
</body>
<template name="login">
<div>
<div>
<label for="loginName">ユーザー</label>
{{#if loggedin}}
<span>{{loginName}}</span>
{{/if}}
{{#unless loggedin}}
<input id="loginName" type="text">
{{/unless}}
<button id="enter">{{enter}}</button>
</div>
{{#if loggedin}}
<div>
<input id="message" type="text">
<button id="send">送信</button>
</div>
{{/if}}
</div>
</template>
<template name="messages">
<div>
{{#each messages}}
<div>{{userName}} {{message}} {{postTime}}</div>
{{/each}}
</div>
</template>
2台のPCでブラウザを立ち上げ、このサイトを呼び出す。
両方に別の名前で入室する。一方のPCでメッセージを送信すると、そのメッセージがリアルタイムにメッセージ表示領域に両方に表示される。
Meteorで簡単なチャットプログラムを書いてみた
Meteorを知ったのは今年始め頃。どんなものか簡単なチャットプログラムを書いてみた。
元来ブラウザはデータをサーバーから取ってくるので、ブラウザでチャットプログラムを書こうと思ったらポーリングをする必要がある。
それだとサーバーに未読のメッセージがないのにクライアントからサーバーに余分な通信が発生する。
また、できるだけリアルタイムにデータを取得するためにはポーリング間隔を短くする必要がある。そうするとさらに余分な通信が発生する。
COMET技術はあるものの標準的な仕様にはなっていない。
HTML5が今後、標準仕様になっていくことは確実の今となっては、リアルタイム性が要求されるWEBプログラムは仕様の一部のWebSocketを使用するのは当たり前な流れだろう。
Meteorは、まさにそのようなプログラムを書くのにうってつけのフレームワークと思う。
ただ、リアルタイム性が要求されるWebシステムってあまりないような気がする。
フルスタックなので、思いつきでプログラムを書くのにはよいが、サーバーやDBMSを代えなくては 非機能要件が満たせない場合の足枷になる場合もある。
しかし開発環境構築からDeployの容易性やプログラムの修正が即座にブラウザに反映されるなど、目からうろこの機能がある。
Node.jsが動作しているので、サーバーサイドもJavascriptで書けるのは技術者の確保をしやすいかも。しかし、Javaなどの言語と比べるとデバッグ環境が少ない。
チャットの簡単なプログラムを書いてみた。
まずはローカル実行環境構築だか、恐ろしいほど簡単。
Linuxに CentOS6.2 で以下のコマンドを打つだけ。
curl install.meteor.com | sh
これで自分のPCにMeteorの実行環境ができた。
それでは、mysterytripというプログラムを作っていこう。
meteor create mysterytrip
これでカレントディレクトリ配下にmysterytripというディレクトリができた。
cd mysterytrip
ここにmysterytripという名前のjavascript、html、cssの計3つのファイルができている。
早速このプログラムを起動してみよう。
meteor
これで実行された。
ブラウザでhttp://localhost:3000/と打つと画面にHello World!が表示される。
ここまではなんてことない。
mysterytrip.htmlを開きHello WorldをMystery Tripに変更して保存するとブラウザをリロードしなくてもMystery Tripと表示されるではないか。
データだけでなくコードもリアルタイムに反映される。素晴らしい。
まずはログイン領域を作成する。ユーザー名入力項目と、入室ボタンを配置し、入室ボタンを押すとチャットルームに入れるようにする。
入室中は、ユーザー名は表示専用項目にして、入室ボタンは退室と表示させる。
入室中に退室ボタンを押すと初期画面に戻る。
まずはjavascriptを書く。
ログインしているかをセッションにloginNameというキーの値があるかどうかで判断させる。
Template.login.loginName = function(){
var loginName = Session.get("loginName");
loginName = isLogin() ? loginName : null;
return loginName;
}
ログインしているかどうかで入室ボタンの表示を変える。
Template.login.enter = function(){
var enter = isLogin() ? "退室" : "入室";
return enter;
}
元来ブラウザはデータをサーバーから取ってくるので、ブラウザでチャットプログラムを書こうと思ったらポーリングをする必要がある。
それだとサーバーに未読のメッセージがないのにクライアントからサーバーに余分な通信が発生する。
また、できるだけリアルタイムにデータを取得するためにはポーリング間隔を短くする必要がある。そうするとさらに余分な通信が発生する。
COMET技術はあるものの標準的な仕様にはなっていない。
HTML5が今後、標準仕様になっていくことは確実の今となっては、リアルタイム性が要求されるWEBプログラムは仕様の一部のWebSocketを使用するのは当たり前な流れだろう。
Meteorは、まさにそのようなプログラムを書くのにうってつけのフレームワークと思う。
ただ、リアルタイム性が要求されるWebシステムってあまりないような気がする。
フルスタックなので、思いつきでプログラムを書くのにはよいが、サーバーやDBMSを代えなくては 非機能要件が満たせない場合の足枷になる場合もある。
しかし開発環境構築からDeployの容易性やプログラムの修正が即座にブラウザに反映されるなど、目からうろこの機能がある。
Node.jsが動作しているので、サーバーサイドもJavascriptで書けるのは技術者の確保をしやすいかも。しかし、Javaなどの言語と比べるとデバッグ環境が少ない。
チャットの簡単なプログラムを書いてみた。
まずはローカル実行環境構築だか、恐ろしいほど簡単。
Linuxに CentOS6.2 で以下のコマンドを打つだけ。
curl install.meteor.com | sh
これで自分のPCにMeteorの実行環境ができた。
それでは、mysterytripというプログラムを作っていこう。
meteor create mysterytrip
これでカレントディレクトリ配下にmysterytripというディレクトリができた。
cd mysterytrip
ここにmysterytripという名前のjavascript、html、cssの計3つのファイルができている。
早速このプログラムを起動してみよう。
meteor
これで実行された。
ブラウザでhttp://localhost:3000/と打つと画面にHello World!が表示される。
ここまではなんてことない。
mysterytrip.htmlを開きHello WorldをMystery Tripに変更して保存するとブラウザをリロードしなくてもMystery Tripと表示されるではないか。
データだけでなくコードもリアルタイムに反映される。素晴らしい。
まずはログイン領域を作成する。ユーザー名入力項目と、入室ボタンを配置し、入室ボタンを押すとチャットルームに入れるようにする。
入室中は、ユーザー名は表示専用項目にして、入室ボタンは退室と表示させる。
入室中に退室ボタンを押すと初期画面に戻る。
まずはjavascriptを書く。
ログインしているかをセッションにloginNameというキーの値があるかどうかで判断させる。
isLogin = function(){
var loginName = Session.get("loginName");
return = typeof loginName !== "undefined" && loginName !== null;
}
Template.login.loggedin = function(){
return isLogin();
}
login領域のloginNameに、ログインしていればセッションにあるloginNameキーの値を設定する。Template.login.loginName = function(){
var loginName = Session.get("loginName");
loginName = isLogin() ? loginName : null;
return loginName;
}
ログインしているかどうかで入室ボタンの表示を変える。
Template.login.enter = function(){
var enter = isLogin() ? "退室" : "入室";
return enter;
}
また入室ボタンを押した時の処理
Template.login.events = {
"click #enter": function(event){
var loginName = Session.get("loginName");
Session.set("loginName", isLogin() ? null : $("#loginName").val());
}
}
次はhtmlテンプレート
<head>
<title>mystery trip</title>
</head>
<body>
<h1>Mystery Trip</h1>
{{>login}}
</body>
<template name="login">
<div>
<label for="loginName">ユーザー</label>
{{#if loggedin}}
<span>{{loginName}}</span>
{{/if}}
{{#unless loggedin}}
<input id="loginName" type="text">
{{/unless}}
<button id="enter">{{enter}}</button>
</div>
</template>
templateのloginでloggedinがtrueの時（#if）はスタティックでログイン名を表示する。loggedinがfalseの時（#unless）は入力項目を表示する。
まずは入室と退室ができるところまで作成。
2012年6月24日日曜日
Meteor
MeteorはモダンWebサイトを構築するためのとっても簡単な環境である。
Meteorでは、最高のツールを使っても数週間かかる作業をわずか数時間しかかからないというキャッチフレーズである。
Meteorはclient-sideとserver-sideのJavascript framework。ということは開発言語はJavascriptだけで開発ができるということか。
Meteorのインストールやプロジェクトの作成やデプロイはコマンド一つでできるのでとても簡単である。
ただし、Meteorは2012/06/24現在PREVIEW 0.3.7であるので、仕様や動作はまだ安定していないのかもしれない。
Meteorインストール
$ curl install.meteor.com | /bin/sh
たったこれだけ。
あとはmeteorコマンドを使用する。
プロジェクトを作成するのにはmeteor create myapp
しかも、meteorプロジェクトが作成しているサンプルであるtodosなどのプロジェクトを作成するのには
$ meteor create --example todos
とする。
ローカルで実行するためには、
$ cd myapp
$ meteor
これでブラウザから http://localhost:3000/ とするとアクセス可能。
meteorプロジェクトが用意しているサーバーにデプロイするのには、
$ mateor deploy myapp.meteor.com
これでmyappがまだ登録されていない場合にはパスワードを設定して登録ができる。すでに登録されている場合には、設定したパスワードを入力してパスワードが一致した場合にはデプロイが可能。
誤訳があると思うけど、以下にMeteorの7つの原則を示す。
- Data on the WireHTMLをネットワークに流さない。データを送信して、クライアントがどのように描画するかを決定する。
- One LanguageJavascriptでクライアントとサーバーの両側を書く。
- Database Everywhereクライアントまたはサーバーからデータベースへアクセスするためには同じ透過なAPIを使用する。
- Latency Compensationクライアント上で、プリフェッチとモデルシミュレーションを使用して、あたかもデータベースへの遅延時間無しで接続しているように見えるようにしている。
- Full Stack Reactivityすべての層、データベースからテンプレートまで、イベント駆動のインターフェイスが使用可能。
- Embrace the EcosystemMeteorはオープンソースで、現存のオープンソースのツールやフレームワークを置き換えるというよりは、統合をする。
- Simplicity Equals Productivity何かがシンプルに見えるようにする最善の方法は、実際には単純なものにすることです。きれいで、古典的な美しいAPIを介してこれを達成する。
2012年5月17日木曜日
Meteorが熱くなりそう
1ヶ月ほど前だったかな？Meteorがどこかで紹介されていたので、面白くて気にかかっていた。Webアプリケーション用フレームワークで、Javascript, CSS, HTMLさえあれば、開発できるというもの。node.jsのようなものかなという感じで見ていた。まだPREVIEW 0.3.5なので、実業務で使えるところまでは行っていないと思うが、何しろ、サーバー側でソースコードを変更すると、クライアント側にすぐに反映されるという話。ちょっとサンプルを作ってみたい気持ち。
登録:
投稿 (Atom)