JavaScriptでは数値が全てfloatなので、単純な計算でも結構誤差が出て困ることになる。
検索してもこれといった解決策がなかったので、jasmine入門がてら簡単なクラスを作成した。
＜GitHubリポジトリ＞
https://github.com/icoxfog417/simple_decimal
よくも悪くも単純であります。
2013年3月3日日曜日
2012年4月24日火曜日
Windows Developer Days サマリ
Windows Developer Dayに参加してきたので、その内容をまとめます。
※1日目＋2日目で、新しいメトロアプリの内容を中心にマージしました
○Topics
Windows8 Release Preview が6月第1週に公開される。
○Windows8の特徴
Windows7で培った基盤の上に、メトロスタイルと呼ばれるデザインを実装したというイメージ。
Windows8では、これまでのアプリも、新しいメトロスタイルのアプリも両方動く。
メトロアプリはWinRT(Windows Runtime)という.NET Frameworkとは異なるアーキテクチャで動く。
メトロスタイルには細かいガイドラインがあり、このためデザインがしやすくなっている。
クラウドとの統合が行われ、例えばマイピクチャとSkyDriveの画像は区別がない。
○メトロアプリについて
Windows8から新登場した、いわゆるタブレットアプリ。
１．.実行環境
Windows Runtime(WinRT)という新しい実行環境で動く。
WinRTはネイティブの実装であるため、C++では直接コールできる。VB.NET/C#ではCLR、JavaScriptではChacra(IEのJavaScriptエンジン)を通じてアクセスが可能だが、この動作は裏で各ランタイムのAPIとWinRTのAPIをマッピングするWindowsメタデータと呼ばれる機構が働いていることによる(言語プロジェクション)。
２．.開発言語・コーディング
上述のとおり、各種言語で開発可能。
VB.NET/C# + XAMLが素直だが、C++を使うこともできるしJavaScript+HTML5でも可能。パフォーマンスの差異は特にないとのこと。
メトロアプリは基本的に非同期で動くため、データ抽出など完了を待ってから処理を行いたい場合は新シンタックスである await をつける必要がある。
非同期処理を行うメソッドはasyncで宣言を行う。返り値はvoidかTaskのみだが、Taskはジェネリクスで型が指定できるため、実質制限はあまりない。なお、await処理が可能なのは返り値がTaskのメソッドのみ(これは、返り値を待つという風に考えれば当然か)。
３．動作プロセス
メトロアプリの状態は、起動中->サスペンド->破棄という流れで遷移する。
起動中からサスペンドに移るのは他アプリの背後に隠れたときであり、サスペンドから破棄されるのはメモリなどのリソースが枯渇した時となる。
サスペンド->破棄の際イベント検知はできないため、サスペンドになった際必要なデータは保存しておく必要がある。
制約として、起動は5秒以内、サスペンド状態でのデータ保管も5秒以内に行う必要がある(この時間はデバイスの性能に依存するため、実際は2秒程度が好ましい)。
動作はサンドボックスで行われるため、OSアクセスには制限有り。また他アプリとの通信はクリップボードに似たコンテキストと呼ばれる仕組みで行う。
４．配布形態
Windowsストアから配布、となる。インストーラーは作成できず、パッケージ内に格納したマニュフェストファイルに基づきOSが自動でインストールする。
マニュフェストファイルにはアプリがアクセスするリソース(カメラ・GPSなど)が宣言されており、ここで宣言されていないリソースはアプリで使用できない(インストールする際の目安にもなる)。
購入はユーザー単位であり、同じ端末でもユーザーが異なれば共有はできない。ただ、一度購入したアプリはクラウド経由で他端末と共有が可能(ローミング)。ただ、５台までなので注意。
○メトロスタイルについて
細かいガイドラインがあるため、詳細はそちら参照 Metroスタイルの設計原則
１．起動前
アイコンは２種類用意する。縮小表示された際の１：１正方形サイズのものと、通常表示の１：２長方形サイズのもの。
起動していなくても裏側で通信が可能なため、例えばメールなら１：２表示の際、アイコン以外に新着メッセージを問い合わせその件数を表示するといったことが可能(ライブタイル)。
２．表示時
通常起動時・スナップ(画面の端に表示)・ポートレイト(タブレットの縦置き)の主に３種類の表示スタイルがあり、それぞれに対応しておく必要がある。
表示コンセプトとしては、ダッシュボードのように必要な情報を１画面でまとめるようなスタイルが良い(と言っているように思う)。
検索してコンテンツにたどり着くというよりは、コンテンツをまず前に出す。検索はチャームかアプリバーに移し、画面から外す。
※チャーム：右から出るメニューバーで、コンテキストメニュー的なもの。アプリバーは下から出るメニューバーで、アプリケーション固有のメニューをまとめられる。
レイアウトは方眼紙を意識し、そこに配置するようなイメージで行う。
ボタンは(押せるのが)7mmがだいたい下限のため、それ以上でデザインする。また、hoverのようなアクションを返すことが望ましい。
３．動作時
スクロールは１方向に統一し、１アプリ内で縦と横のスクロールが混在することを避ける。
アクションに意味を持たせる。スクロールなら左に概要・右に行くにつれ詳細、ズームなら縮小した場合カテゴリ別表示、拡大した場合詳細表示にするなど(セマンティックズーム)。
○ストアについて
開発者登録料は個人49$企業99$、売上は25000$を越えるまで70%、以降80%が手取りとなる。アプリの価格は開発者が1.49～999.99$の間で決定可。
アプリの配布に当たっては試用版配布がサポートされており、期間限定はデフォルト、機能制限はコード内で試用か否かが判定できる。
ストアのエミュレータを使用することでアプリ購入をシミュレート可能だが(=試用版/購入版の動作確認が可能)、本番とクラス名？が異なるためアップ前には書き換える必要あり。
広告はAdvertising SDK により数行で追加可、収益確認及び広告設定はpubCenterより可
審査はプロセスが公開されており、いま審査のどの段階か、どこで止められたかなどが確認できる。
○その他トピック
WebSocket、SqlServer2012について。
WebSocketは、要するにまだ実装しない方がいいと感じた。Windows8でないとNGなのだが(IIS8・.NET Framework4.5も必要)Azureでまだ提供されておらず、またAzureではWebsocketを行う場合定期的にpingをうつ必要があり結局Long Porling方式と変わらないため。
SqlServer2012はFileTableというフォルダ構造をまとめて格納したようなデータを持てるようになったらしい。GUIが伴えば、スケール可能なファイルサーバーとして使えるかもしれない。
SqlServerToolという便利なツールも提供され、Azure/SqlServer/ローカルDBが簡単に複製・同期できるようになっている。Azure開発はこれでかなり楽になりそう(その前に無償枠がないと使う気が・・・という気もするが)
内容に誤りなどあったらご指摘願いますm( _ _ )m。
※1日目＋2日目で、新しいメトロアプリの内容を中心にマージしました
○Topics
Windows8 Release Preview が6月第1週に公開される。
○Windows8の特徴
Windows7で培った基盤の上に、メトロスタイルと呼ばれるデザインを実装したというイメージ。
Windows8では、これまでのアプリも、新しいメトロスタイルのアプリも両方動く。
メトロアプリはWinRT(Windows Runtime)という.NET Frameworkとは異なるアーキテクチャで動く。
メトロスタイルには細かいガイドラインがあり、このためデザインがしやすくなっている。
クラウドとの統合が行われ、例えばマイピクチャとSkyDriveの画像は区別がない。
○メトロアプリについて
Windows8から新登場した、いわゆるタブレットアプリ。
１．.実行環境
Windows Runtime(WinRT)という新しい実行環境で動く。
WinRTはネイティブの実装であるため、C++では直接コールできる。VB.NET/C#ではCLR、JavaScriptではChacra(IEのJavaScriptエンジン)を通じてアクセスが可能だが、この動作は裏で各ランタイムのAPIとWinRTのAPIをマッピングするWindowsメタデータと呼ばれる機構が働いていることによる(言語プロジェクション)。
２．.開発言語・コーディング
上述のとおり、各種言語で開発可能。
VB.NET/C# + XAMLが素直だが、C++を使うこともできるしJavaScript+HTML5でも可能。パフォーマンスの差異は特にないとのこと。
メトロアプリは基本的に非同期で動くため、データ抽出など完了を待ってから処理を行いたい場合は新シンタックスである await をつける必要がある。
非同期処理を行うメソッドはasyncで宣言を行う。返り値はvoidかTaskのみだが、Taskはジェネリクスで型が指定できるため、実質制限はあまりない。なお、await処理が可能なのは返り値がTaskのメソッドのみ(これは、返り値を待つという風に考えれば当然か)。
３．動作プロセス
メトロアプリの状態は、起動中->サスペンド->破棄という流れで遷移する。
起動中からサスペンドに移るのは他アプリの背後に隠れたときであり、サスペンドから破棄されるのはメモリなどのリソースが枯渇した時となる。
サスペンド->破棄の際イベント検知はできないため、サスペンドになった際必要なデータは保存しておく必要がある。
制約として、起動は5秒以内、サスペンド状態でのデータ保管も5秒以内に行う必要がある(この時間はデバイスの性能に依存するため、実際は2秒程度が好ましい)。
動作はサンドボックスで行われるため、OSアクセスには制限有り。また他アプリとの通信はクリップボードに似たコンテキストと呼ばれる仕組みで行う。
４．配布形態
Windowsストアから配布、となる。インストーラーは作成できず、パッケージ内に格納したマニュフェストファイルに基づきOSが自動でインストールする。
マニュフェストファイルにはアプリがアクセスするリソース(カメラ・GPSなど)が宣言されており、ここで宣言されていないリソースはアプリで使用できない(インストールする際の目安にもなる)。
購入はユーザー単位であり、同じ端末でもユーザーが異なれば共有はできない。ただ、一度購入したアプリはクラウド経由で他端末と共有が可能(ローミング)。ただ、５台までなので注意。
○メトロスタイルについて
細かいガイドラインがあるため、詳細はそちら参照 Metroスタイルの設計原則
１．起動前
アイコンは２種類用意する。縮小表示された際の１：１正方形サイズのものと、通常表示の１：２長方形サイズのもの。
起動していなくても裏側で通信が可能なため、例えばメールなら１：２表示の際、アイコン以外に新着メッセージを問い合わせその件数を表示するといったことが可能(ライブタイル)。
２．表示時
通常起動時・スナップ(画面の端に表示)・ポートレイト(タブレットの縦置き)の主に３種類の表示スタイルがあり、それぞれに対応しておく必要がある。
表示コンセプトとしては、ダッシュボードのように必要な情報を１画面でまとめるようなスタイルが良い(と言っているように思う)。
検索してコンテンツにたどり着くというよりは、コンテンツをまず前に出す。検索はチャームかアプリバーに移し、画面から外す。
※チャーム：右から出るメニューバーで、コンテキストメニュー的なもの。アプリバーは下から出るメニューバーで、アプリケーション固有のメニューをまとめられる。
レイアウトは方眼紙を意識し、そこに配置するようなイメージで行う。
ボタンは(押せるのが)7mmがだいたい下限のため、それ以上でデザインする。また、hoverのようなアクションを返すことが望ましい。
３．動作時
スクロールは１方向に統一し、１アプリ内で縦と横のスクロールが混在することを避ける。
アクションに意味を持たせる。スクロールなら左に概要・右に行くにつれ詳細、ズームなら縮小した場合カテゴリ別表示、拡大した場合詳細表示にするなど(セマンティックズーム)。
○ストアについて
開発者登録料は個人49$企業99$、売上は25000$を越えるまで70%、以降80%が手取りとなる。アプリの価格は開発者が1.49～999.99$の間で決定可。
アプリの配布に当たっては試用版配布がサポートされており、期間限定はデフォルト、機能制限はコード内で試用か否かが判定できる。
ストアのエミュレータを使用することでアプリ購入をシミュレート可能だが(=試用版/購入版の動作確認が可能)、本番とクラス名？が異なるためアップ前には書き換える必要あり。
広告はAdvertising SDK により数行で追加可、収益確認及び広告設定はpubCenterより可
審査はプロセスが公開されており、いま審査のどの段階か、どこで止められたかなどが確認できる。
○その他トピック
WebSocket、SqlServer2012について。
WebSocketは、要するにまだ実装しない方がいいと感じた。Windows8でないとNGなのだが(IIS8・.NET Framework4.5も必要)Azureでまだ提供されておらず、またAzureではWebsocketを行う場合定期的にpingをうつ必要があり結局Long Porling方式と変わらないため。
SqlServer2012はFileTableというフォルダ構造をまとめて格納したようなデータを持てるようになったらしい。GUIが伴えば、スケール可能なファイルサーバーとして使えるかもしれない。
SqlServerToolという便利なツールも提供され、Azure/SqlServer/ローカルDBが簡単に複製・同期できるようになっている。Azure開発はこれでかなり楽になりそう(その前に無償枠がないと使う気が・・・という気もするが)
内容に誤りなどあったらご指摘願いますm( _ _ )m。
2012年3月21日水曜日
Node.js + express + MongoDB on Heroku でアプリケーションを作成する
最近話題のNode.jsを使ってみよう！ということでアプリ作成の環境構築～Herokuへのデプロイまで、その手順を紹介します。
Node.jsとは、メリットは、という辺りについては割愛して実際作るところのみにフォーカスします。Node.jsについては幾つか批判的な記事もあり、ここも調べてみると面白いです。
・開発準備(各種インストール)
・Node.jsのインストール
Macならmacportを使うなどいろいろと手段はありますが、ここは普通に公式サイトのインストーラーを使うことをお勧めします。
というのも、Node.js本体だけでなくそのバージョン・依存パッケージを管理するNPMというツールも合わせてインストールする必要があり、この相互のバージョン関係などを考えるとめんどくさくなってくるからです。
Node.js公式サイト
公式サイトのインストーラーはNode.jsとNPMをインストールしてパスも通してくれます。便利。
・expressのインストール
ここはNPMが入ってしまえばコマンド一発で、特に難しいことはありません。
expressインストール方法
QuickStartにもあるとおり、グローバルインストールにしないとパスが通らなかったりするため、以下の手順での実行をお勧めします。
npm install -g express
express /tmp/foo(開発フォルダ名)
cd /tmp/foo
npm install -d
-gオプションをつけてインストールするとパスが通りexpressのコマンドを使えるようになります。
後は、express フォルダ名でexpressで開発を行うためのフォルダを自動的に作ってくれるので、そこに移動し、install -d でその他依存関係のある各種ツールを落として、準備完了。
・MongoDBのインストール
これも普通にインストーラーからインストールすることをお勧めします。
MongoDB公式サイト
QuickStartガイド
インストーラーを使用すれば、特に難しい点はありません。ただ、データを格納するフォルダを自作する必要がある点に注意してください。
標準以外の場所にする場合起動時にオプション指定が必要なので、面倒な場合起動スクリプトをバッチ化(Winならbat、Macならsh)しておくと開発が楽になります。
環境がMacでバッチの作り方がよくわからない、という場合は下記を参照してみてください。ここが一番分かりやすかったです。
シェルスクリプト
MacではWindowsで言うところの環境変数の設定もGUIベースではなく、コマンドから追加します(個人的には ls -a で隠しファイルを含めて表示し、.profile・.bash_profileをopenで開いて直接編集してますが・・・目に見えて編集できるので良い)
・Mongooseのインストール(オプション)
Node.jsでMongoDBを扱う場合、ライブラリがあると楽です。Mongooseはそのうちの一つになります(非同期環境で扱う場合・・・と書いてあるので、ロック等の処理もうまいことやってくれているのかもしれません)。
NPMが入ってれば、こちらもexpress同様インストールは一発です。
mongoose公式ページ
npm install mongoose
でインストール。こちらはグローバルなどは関係なく、プロジェクトのフォルダに直接ファイルを落とす形式のようだ。
・開発
開発の細かいやり方は各種サイトにいろいろ書いてあるため、ここでは知っておくと便利な点に絞って紹介します。
・ファイル分割
Node.jsで開発をやっているととかくファイルがどんどん長くなります。そのためスキーマ定義など、分割できる箇所は分割したくなってきます。
Node.jsでは require のコマンドを使用して外部スクリプトをロードすることが出来ます(指定パスは相対パス)。フォルダを指定した場合は、フォルダ直下の index.js が読み込まれるなど、少し特殊な動作をするのでそこは注意が必要。
Node.jsでのモジュール読込
・expressでのルーティング
expressでは以下のようにルーティングを行います。
app.get('/user/:id', function(req, res){
var userid = req.params.id;
res.render("user",{ requestid : userid });
});
getの部分は、メソッド次第でpostやput、delなどに分かれる。
res.sendで単純にデータ送信、renderでviewsフォルダ内にあるjadeファイルを指定することで、データをレンダリングして送ることが出来る(要するにページ遷移する)。
※Ajaxなどで単純にデータを送りたい場合、res.contentType('json');としてres.send(jsonオブジェクト)とすればOK。
・expressでのフォーム項目とその取得
expressでは標準でjadeを使用しているので、jadeでのフォームの作成とその取得方法を紹介します。
・jadeでのフォーム
form(action='/', method= 'POST')
input#name(type="text" name=user[name])
input#email(type="text" name=user[email])
input(type="submit" value="送信")
・expressでの取得
var userName = req.body.user.name
nameの指定でオブジェクト名[要素名]にするとjson化してくれるようだ。
事前にapp.use(express.bodyParser()); が必要だが最初から入っていたので問題なしかと。
・MongoDBの起動・終了
mongodbのbinの中にあるmongodを実行する。
./mongod --dbpath フォルダ名 でデータフォルダを指定可能。
終了時は、同じくbin内にあるmongoを実行して起動中のDBに接続し、以下コマンドで終了。
use admin
db.shutdownServer()
止まらん、という場合はdb.shutdownServer({force : true})で強制終了。
・MongoDBでのデータベース作成・データ検索
まず use データベース名 でデータベースへ移動。MongoDBはデータベースがないけど指定された場合勝手に作ってくれるというフリーダムな仕様なので、特に作成コマンドはないのだ。
ユーザーは、ユーザーを使いたいデータベースに移動した後以下のコマンドで追加する。
db.addUser(username,password)
いわゆるテーブルのような概念は、コレクションという形で表現される(mongooseで作成するSchemaはこのコレクションと一致する)。DB内のコレクションの一覧は以下コマンドで取得可能。
show collections
コレクション内のデータは以下コマンドで参照できる。
db.コレクション名.find()
findにはフィルタの引数などを渡すことが可能。find({username:"john"}, {email:true})ならば、usernameがjohnで表示するオブジェクト(いわゆる列)はemailのみ、という形で指定できる。第一引数がフィルタ、第二引数が選択オブジェクトという形で機能する。
MongoDBチュートリアル
・Herokuへのデプロイ
Herokuへの基本的なデプロイの仕方は以下を参照してください。英語ですが一番最新で分かりやすいと思います。
Getting Started with Heroku
Heroku公式 Node.js関連ページ
なお、既に入っている場合念のためgem update herokuでherokuを更新しておいたほうがいいようです。また、デプロイに当たってはSSHキーの作成と登録が必要なので、こちらも参照ください。
Deploying with Git
Managing Your SSH Keys
この辺りは結構ハマりました・・・。ここは結局公式のドキュメント見るのが一番分かりやすく正確、だったのでうまくいかない場合はHerokuサイト内での検索をお勧めします。
デプロイ時には、依存ライブラリと稼動プロセス？を管理するため、アプリケーションフォルダの直下に以下のファイルが必要です。
・package.json
依存ライブラリを記載します。npm list で依存関係を確認できるので、それを元に追加します。また、このファイルは稼動するNode.js/NPM本体のバージョン宣言も兼ねています。下記のサンプルを参考にしてください(Node.jsのバージョンを指定しないと思わぬエラーが出てハマります)。
{
"name": "myapp",
"version": "0.0.1",
"engines": {
"node": "0.6.x",
"npm": "1.0.x"
},
"dependencies": {
"express": "2.2.0"
}
}
・Procfile
プロセスを稼動させるためのコマンドを書いておくファイル。以下でOK。
web: node web.js
※web.jsの部分は必要に応じて変更
・.gitignore
必須ではないですが、ライブラリ系のモジュールについて管理対象からはずします。
node_modules
なお、Node.jsアプリはHerokuへデプロイしてもそのままでは動かないため、以下のコマンドを打つ必要があります。これは最初の一回だけで、後のデプロイでの実行は不要です。
heroku ps:scale web=1
デプロイ後、名前を間違ってしまったなどでアプリを削除したい場合はこちらを参照。
herokuを始めてつまったところメモ
Heroku上では heroku logs でログを確認できます。デプロイが何かしらうまくいかない場合ここを参照します。
今回はMongoDBを使用しているので、MongoHQかMongoLabのアドオンを追加する必要があります。無料ですがクレジットカードの登録は必要になります。
接続文字列などはサーバー上のものにあわせる必要があるため、プログラム中では環境変数を使用する必要があります(環境変数は heroku config で確認可能)。
その辺りはこちらをご参照ください。
herokuでNode.jsを使ってchatアプリ その3(MongoDBを利用して、メッセージを永続化)
必要なポイントとしては以下になります(アドオン追加は画面からやった方が楽かも)。
・ポート番号
var port = process.env.PORT || 3000;
・接続文字列(MONGOHQの場合)
var uri = process.env.MONGOHQ_URL || 'mongodb://localhost/mongo_data';
※ユーザー名/パスワードを指定する場合以下のような感じ
'mongodb://username:password@localhost/sample'
これでアプリケーションは動いている！はずです。githubにアプリケーションのコードを上げておきましたので、実際のコードで確認したい場合はご参照ください。
スケジュール調整アプリ
Node.jsとは、メリットは、という辺りについては割愛して実際作るところのみにフォーカスします。Node.jsについては幾つか批判的な記事もあり、ここも調べてみると面白いです。
・開発準備(各種インストール)
・Node.jsのインストール
Macならmacportを使うなどいろいろと手段はありますが、ここは普通に公式サイトのインストーラーを使うことをお勧めします。
というのも、Node.js本体だけでなくそのバージョン・依存パッケージを管理するNPMというツールも合わせてインストールする必要があり、この相互のバージョン関係などを考えるとめんどくさくなってくるからです。
Node.js公式サイト
公式サイトのインストーラーはNode.jsとNPMをインストールしてパスも通してくれます。便利。
・expressのインストール
ここはNPMが入ってしまえばコマンド一発で、特に難しいことはありません。
expressインストール方法
QuickStartにもあるとおり、グローバルインストールにしないとパスが通らなかったりするため、以下の手順での実行をお勧めします。
npm install -g express
express /tmp/foo(開発フォルダ名)
cd /tmp/foo
npm install -d
-gオプションをつけてインストールするとパスが通りexpressのコマンドを使えるようになります。
後は、express フォルダ名でexpressで開発を行うためのフォルダを自動的に作ってくれるので、そこに移動し、install -d でその他依存関係のある各種ツールを落として、準備完了。
・MongoDBのインストール
これも普通にインストーラーからインストールすることをお勧めします。
MongoDB公式サイト
QuickStartガイド
インストーラーを使用すれば、特に難しい点はありません。ただ、データを格納するフォルダを自作する必要がある点に注意してください。
標準以外の場所にする場合起動時にオプション指定が必要なので、面倒な場合起動スクリプトをバッチ化(Winならbat、Macならsh)しておくと開発が楽になります。
環境がMacでバッチの作り方がよくわからない、という場合は下記を参照してみてください。ここが一番分かりやすかったです。
シェルスクリプト
MacではWindowsで言うところの環境変数の設定もGUIベースではなく、コマンドから追加します(個人的には ls -a で隠しファイルを含めて表示し、.profile・.bash_profileをopenで開いて直接編集してますが・・・目に見えて編集できるので良い)
・Mongooseのインストール(オプション)
Node.jsでMongoDBを扱う場合、ライブラリがあると楽です。Mongooseはそのうちの一つになります(非同期環境で扱う場合・・・と書いてあるので、ロック等の処理もうまいことやってくれているのかもしれません)。
NPMが入ってれば、こちらもexpress同様インストールは一発です。
mongoose公式ページ
npm install mongoose
でインストール。こちらはグローバルなどは関係なく、プロジェクトのフォルダに直接ファイルを落とす形式のようだ。
・開発
開発の細かいやり方は各種サイトにいろいろ書いてあるため、ここでは知っておくと便利な点に絞って紹介します。
・ファイル分割
Node.jsで開発をやっているととかくファイルがどんどん長くなります。そのためスキーマ定義など、分割できる箇所は分割したくなってきます。
Node.jsでは require のコマンドを使用して外部スクリプトをロードすることが出来ます(指定パスは相対パス)。フォルダを指定した場合は、フォルダ直下の index.js が読み込まれるなど、少し特殊な動作をするのでそこは注意が必要。
Node.jsでのモジュール読込
・expressでのルーティング
expressでは以下のようにルーティングを行います。
app.get('/user/:id', function(req, res){
var userid = req.params.id;
res.render("user",{ requestid : userid });
});
getの部分は、メソッド次第でpostやput、delなどに分かれる。
res.sendで単純にデータ送信、renderでviewsフォルダ内にあるjadeファイルを指定することで、データをレンダリングして送ることが出来る(要するにページ遷移する)。
※Ajaxなどで単純にデータを送りたい場合、res.contentType('json');としてres.send(jsonオブジェクト)とすればOK。
・expressでのフォーム項目とその取得
expressでは標準でjadeを使用しているので、jadeでのフォームの作成とその取得方法を紹介します。
・jadeでのフォーム
form(action='/', method= 'POST')
input#name(type="text" name=user[name])
input#email(type="text" name=user[email])
input(type="submit" value="送信")
・expressでの取得
var userName = req.body.user.name
nameの指定でオブジェクト名[要素名]にするとjson化してくれるようだ。
事前にapp.use(express.bodyParser()); が必要だが最初から入っていたので問題なしかと。
・MongoDBの起動・終了
mongodbのbinの中にあるmongodを実行する。
./mongod --dbpath フォルダ名 でデータフォルダを指定可能。
終了時は、同じくbin内にあるmongoを実行して起動中のDBに接続し、以下コマンドで終了。
use admin
db.shutdownServer()
止まらん、という場合はdb.shutdownServer({force : true})で強制終了。
・MongoDBでのデータベース作成・データ検索
まず use データベース名 でデータベースへ移動。MongoDBはデータベースがないけど指定された場合勝手に作ってくれるというフリーダムな仕様なので、特に作成コマンドはないのだ。
ユーザーは、ユーザーを使いたいデータベースに移動した後以下のコマンドで追加する。
db.addUser(username,password)
いわゆるテーブルのような概念は、コレクションという形で表現される(mongooseで作成するSchemaはこのコレクションと一致する)。DB内のコレクションの一覧は以下コマンドで取得可能。
show collections
コレクション内のデータは以下コマンドで参照できる。
db.コレクション名.find()
findにはフィルタの引数などを渡すことが可能。find({username:"john"}, {email:true})ならば、usernameがjohnで表示するオブジェクト(いわゆる列)はemailのみ、という形で指定できる。第一引数がフィルタ、第二引数が選択オブジェクトという形で機能する。
MongoDBチュートリアル
・Herokuへのデプロイ
Herokuへの基本的なデプロイの仕方は以下を参照してください。英語ですが一番最新で分かりやすいと思います。
Getting Started with Heroku
Heroku公式 Node.js関連ページ
なお、既に入っている場合念のためgem update herokuでherokuを更新しておいたほうがいいようです。また、デプロイに当たってはSSHキーの作成と登録が必要なので、こちらも参照ください。
Deploying with Git
Managing Your SSH Keys
この辺りは結構ハマりました・・・。ここは結局公式のドキュメント見るのが一番分かりやすく正確、だったのでうまくいかない場合はHerokuサイト内での検索をお勧めします。
デプロイ時には、依存ライブラリと稼動プロセス？を管理するため、アプリケーションフォルダの直下に以下のファイルが必要です。
・package.json
依存ライブラリを記載します。npm list で依存関係を確認できるので、それを元に追加します。また、このファイルは稼動するNode.js/NPM本体のバージョン宣言も兼ねています。下記のサンプルを参考にしてください(Node.jsのバージョンを指定しないと思わぬエラーが出てハマります)。
{
"name": "myapp",
"version": "0.0.1",
"engines": {
"node": "0.6.x",
"npm": "1.0.x"
},
"dependencies": {
"express": "2.2.0"
}
}
・Procfile
プロセスを稼動させるためのコマンドを書いておくファイル。以下でOK。
web: node web.js
※web.jsの部分は必要に応じて変更
・.gitignore
必須ではないですが、ライブラリ系のモジュールについて管理対象からはずします。
node_modules
なお、Node.jsアプリはHerokuへデプロイしてもそのままでは動かないため、以下のコマンドを打つ必要があります。これは最初の一回だけで、後のデプロイでの実行は不要です。
heroku ps:scale web=1
デプロイ後、名前を間違ってしまったなどでアプリを削除したい場合はこちらを参照。
herokuを始めてつまったところメモ
Heroku上では heroku logs でログを確認できます。デプロイが何かしらうまくいかない場合ここを参照します。
今回はMongoDBを使用しているので、MongoHQかMongoLabのアドオンを追加する必要があります。無料ですがクレジットカードの登録は必要になります。
接続文字列などはサーバー上のものにあわせる必要があるため、プログラム中では環境変数を使用する必要があります(環境変数は heroku config で確認可能)。
その辺りはこちらをご参照ください。
herokuでNode.jsを使ってchatアプリ その3(MongoDBを利用して、メッセージを永続化)
必要なポイントとしては以下になります(アドオン追加は画面からやった方が楽かも)。
・ポート番号
var port = process.env.PORT || 3000;
・接続文字列(MONGOHQの場合)
var uri = process.env.MONGOHQ_URL || 'mongodb://localhost/mongo_data';
※ユーザー名/パスワードを指定する場合以下のような感じ
'mongodb://username:password@localhost/sample'
これでアプリケーションは動いている！はずです。githubにアプリケーションのコードを上げておきましたので、実際のコードで確認したい場合はご参照ください。
スケジュール調整アプリ
2012年2月22日水曜日
WCFサービスを作成する
WCFサービスの作成から動作確認までの手順。ものすごい手間取った・・・
※ASP.NETサイト上で作成することを想定しています。
0.サービスの違い
サービスをつくろうかな、と思うとなんだか同じような名前でいろいろ選択肢があって迷う。
①Webサービス
②WCFサービス
③WCFデータサービス
Webサービスは一般的なSOAP形式のサービスを作成できる。単体で作成、テストが出来るので使いやすい。
WCFサービスは位置づけとしてWebサービスをさらに発展させたものであり、こちらを使った方がいいとマイクロソフトは言っているように思える。ただ、クライアントとサービスでプロジェクトを分けることが前提に作られているようで、気軽に今のWebサイト内に追加、という感じでは使いにくい。
WCFデータサービスは、エンティティデータモデルを外部公開(OData形式)するということを意識して作られているようだ。そのため、WCFサービスより柔軟性は低いが、既にエンティティデータモデルを使用しているならすばやいデータ公開が可能と思う。
1.WCFサービスの作成
新しい項目の追加 > WCFサービスで追加を行う。
こうすると、以下3種類のファイルが作成される
>AppCode内
①I<入力したサービス名> ： サービスの定義が記載されている(ServiceContract)
②<入力したサービス名> ： サービスの実装クラス
>ルートフォルダ内(右クリックしたフォルダ内)
③<入力したサービス名>.svc ： サービスのアクセスポイントとなるファイル
実態としては、③→①→②の順に処理が解決されていくイメージとなる
2.各種設定
①サービスコントラクト
外部からアクセスする処理(つまりメソッド)を定義するが、この際設定すべきアトリビュートがいくつかある。
必須：<OperationContract()>
サービス用のメソッドであることの宣言？
任意：<WebGet()>/<WebInvoke()>
GETで使用する場合WebGet、POSTで使用する場合WebInvokeを指定する。クライアントの呼び出しとサーバー上の設定が合っていないと405 Method Not Allowedが発生することがある。
JSON以外を使用する場合は、RequestFormat/ResponseFormatで形式を設定すること。
②サービス実装
サービスの実装。ASP.NETでも稼動させる場合？クラスにAspNetCompatibilityRequirementsの指定が必要。
③web.config
system.serviceModelの部分がWCFサービスのホスティングに関わる箇所になる。
services、behaviorsはデフォルトで追加されるし内容もそれほど分かりにくくないが、注意すべきはbehaviorsの中のendpointBehaviorsだ。これを設定しないとクライアントから呼び出せない。
serviceにはbehaviors/serviceBehaviorsが対応し、
serviceのendpointにはendpointBehaviorsが対応する。
endpointBehaviorsのbehaviorにenableWebScriptかwebHttpを設定しておくことでクライアントから呼び出すことができるようになる。
endpointBehaviorsとwebHttpはどちらを設定しても一見同じに見えるが、endpointBehaviorsの場合受け取ったオブジェクト.d(例：msg.d)の中にデータが格納されるという違いがある(webHttpはそのまんま)。
3.テスト・呼び出し
サービス側のテストは、デバッガを起動すると「指定された値は無効なコントロール文字を含んでいます。」というエラーが出てどうにもうまくいかない。
ただ、幸いにしてサービスの実装は単なるクラスなので、これをコードビハインドでテストしたほうがよっぽど早い。
クライアント側は、AJAX呼び出しを行い動作の確認を行う上記の設定を行えばJQueryの$.ajaxから呼び出せるはずなので、それで動作を確認すればよい。
4.参考サイト
WCFサービスの作成方法
10 行でズバリ !! サービスの作成 (WCF)
RESTでJSONなサービスをWCFで作ったり使ったりする
JQueryからの呼び出し
jQueryを使ってWCFのサービスにアクセス
※ASP.NETサイト上で作成することを想定しています。
0.サービスの違い
サービスをつくろうかな、と思うとなんだか同じような名前でいろいろ選択肢があって迷う。
①Webサービス
②WCFサービス
③WCFデータサービス
Webサービスは一般的なSOAP形式のサービスを作成できる。単体で作成、テストが出来るので使いやすい。
WCFサービスは位置づけとしてWebサービスをさらに発展させたものであり、こちらを使った方がいいとマイクロソフトは言っているように思える。ただ、クライアントとサービスでプロジェクトを分けることが前提に作られているようで、気軽に今のWebサイト内に追加、という感じでは使いにくい。
WCFデータサービスは、エンティティデータモデルを外部公開(OData形式)するということを意識して作られているようだ。そのため、WCFサービスより柔軟性は低いが、既にエンティティデータモデルを使用しているならすばやいデータ公開が可能と思う。
1.WCFサービスの作成
新しい項目の追加 > WCFサービスで追加を行う。
こうすると、以下3種類のファイルが作成される
>AppCode内
①I<入力したサービス名> ： サービスの定義が記載されている(ServiceContract)
②<入力したサービス名> ： サービスの実装クラス
>ルートフォルダ内(右クリックしたフォルダ内)
③<入力したサービス名>.svc ： サービスのアクセスポイントとなるファイル
実態としては、③→①→②の順に処理が解決されていくイメージとなる
2.各種設定
①サービスコントラクト
外部からアクセスする処理(つまりメソッド)を定義するが、この際設定すべきアトリビュートがいくつかある。
必須：<OperationContract()>
サービス用のメソッドであることの宣言？
任意：<WebGet()>/<WebInvoke()>
GETで使用する場合WebGet、POSTで使用する場合WebInvokeを指定する。クライアントの呼び出しとサーバー上の設定が合っていないと405 Method Not Allowedが発生することがある。
JSON以外を使用する場合は、RequestFormat/ResponseFormatで形式を設定すること。
②サービス実装
サービスの実装。ASP.NETでも稼動させる場合？クラスにAspNetCompatibilityRequirementsの指定が必要。
③web.config
system.serviceModelの部分がWCFサービスのホスティングに関わる箇所になる。
services、behaviorsはデフォルトで追加されるし内容もそれほど分かりにくくないが、注意すべきはbehaviorsの中のendpointBehaviorsだ。これを設定しないとクライアントから呼び出せない。
serviceにはbehaviors/serviceBehaviorsが対応し、
serviceのendpointにはendpointBehaviorsが対応する。
endpointBehaviorsのbehaviorにenableWebScriptかwebHttpを設定しておくことでクライアントから呼び出すことができるようになる。
endpointBehaviorsとwebHttpはどちらを設定しても一見同じに見えるが、endpointBehaviorsの場合受け取ったオブジェクト.d(例：msg.d)の中にデータが格納されるという違いがある(webHttpはそのまんま)。
3.テスト・呼び出し
サービス側のテストは、デバッガを起動すると「指定された値は無効なコントロール文字を含んでいます。」というエラーが出てどうにもうまくいかない。
ただ、幸いにしてサービスの実装は単なるクラスなので、これをコードビハインドでテストしたほうがよっぽど早い。
クライアント側は、AJAX呼び出しを行い動作の確認を行う上記の設定を行えばJQueryの$.ajaxから呼び出せるはずなので、それで動作を確認すればよい。
4.参考サイト
WCFサービスの作成方法
10 行でズバリ !! サービスの作成 (WCF)
RESTでJSONなサービスをWCFで作ったり使ったりする
JQueryからの呼び出し
jQueryを使ってWCFのサービスにアクセス
2011年5月27日金曜日
JavaScript、CSSファイルをまとめて読込み
１つのJavaScriptファイルの読込みで、複数のJSファイル、CSSファイルを
まとめて読込む方法
サンプル例：
親PGのHEADタグ内で、aaa.jsを読み込み指定
⇒ aaa.js内で、bbb.js、ccc.js、xxx.css、yyy.cssを読み込み
---------------------------------------------------------------------
【親PG】
＜script type="text/javascript" src="aaa.js"＞＜/script＞
---------------------------------------------------------------------
【aaa.js】
function include(stFile)
{
var script = document.createElement('script');
script.src = stFile;
script.type = 'text/javascript';
script.defer = true;
document.getElementsByTagName('head').item(0).appendChild(script);
}
include('bbb.js');
include('ccc.js');
document.write('xxx.css');
document.write('yyy.css');
まとめて読込む方法
サンプル例：
親PGのHEADタグ内で、aaa.jsを読み込み指定
⇒ aaa.js内で、bbb.js、ccc.js、xxx.css、yyy.cssを読み込み
---------------------------------------------------------------------
【親PG】
＜script type="text/javascript" src="aaa.js"＞＜/script＞
---------------------------------------------------------------------
【aaa.js】
function include(stFile)
{
var script = document.createElement('script');
script.src = stFile;
script.type = 'text/javascript';
script.defer = true;
document.getElementsByTagName('head').item(0).appendChild(script);
}
include('bbb.js');
include('ccc.js');
document.write('xxx.css');
document.write('yyy.css');
2011年5月10日火曜日
ASP.NET jQueryでラジオボタンリストの選択されている値を取得
ASP.NETのラジオボタンリストのコントロールは非常に扱いづらい形でHTML出力されるため、JavaScript側でその値を取得するには非常に骨が折れる。
ASP.NET上
-------------------------------------------------------------
追記
実はRadioButtonListはVerticalとHorizontalで出力される方法が異なり、HorizontalはTableタグ
で囲まれるため上記方法では対応できない。
そのため、最終的には以下のようにした
ASP.NET上
<asp:RadioButtonList ID="rbltest" CssClass="xxxx" >
実際のHTML
<span id="rbltest" class="xxxx">
<input id="rbltest_0" type="radio" name="(配置場所で変化?)$rbltest" value="1" /><label for="rbltest_0">①<label>
<input id="rbltest_1" type="radio" name="(配置場所で変化?)$rbltest" value="2" /><label for="rbltest_1">②<label>
<input id="rbltest_2" type="radio" name="(配置場所で変化?)$rbltest" value="3" /><label for="rbltest_2">③<label>
</span>
→SPANタグで囲われ、しかもCssはそのSAPNにしかつかない。idは個別に設定され、nameも不定になるようなので、チェックされているものの値の取得が非常に困難(場合によってはnameは使えるかも)。
jQueryでの値の取得
$("span[id='rbltest'] > :input[type='radio']").each(function () {
if ($(this).attr("checked") == true) {
alert($(this).val(););
}
});
→SPANをまず検索し、その子要素であるラジオボタンについて、チェックがついているものを取得する
function化したものを追記・・・
function getCheckedRadioButtonList(id){
var val = "";
$("span[id='" + id + "'] > :input[type='radio']").each(function () {
if ($(this).attr("checked") == true) {
val = $(this).val();
}
});
return val;
}
function化したものを追記・・・
function getCheckedRadioButtonList(id){
var val = "";
$("span[id='" + id + "'] > :input[type='radio']").each(function () {
if ($(this).attr("checked") == true) {
val = $(this).val();
}
});
return val;
}
-------------------------------------------------------------
追記
実はRadioButtonListはVerticalとHorizontalで出力される方法が異なり、HorizontalはTableタグ
で囲まれるため上記方法では対応できない。
そのため、最終的には以下のようにした
function getCheckedRadioButtonList(id) { var val = ""; $("#" + id).find(":radio").each(function () { if ($(this).attr("checked") == true) { val = $(this).val(); } }); return val; }
2011年5月6日金曜日
Google AJAX Feed API - Dynamic Feed Control Wizard
ＲＳＳフィードの検索～自サイト設置用のソース生成まで出来て便利！
http://www.google.com/uds/solutions/wizards/dynamicfeed.html
生成されたソースは、オプションをいじることでカスタマイズ可
var options = {
numResults : 12, // ①
displayTime : 3000, // ②
fadeOutTime : 2000, // ③
pauseOnHover : true, // ④
linkTarget : google.feeds.LINK_TARGET_BLANK, // ⑤
stacked : true,
horizontal : false,
title : "RSS feed"
}
①１サイトあたりの表示件数
②１つの記事を表示する時間（ミリ秒）
③記事の表示切替時間（ミリ秒）
④マウスオーバーで記事切替を停止する/しない
⑤記事クリック時の表示先Window（自分自身：google.feeds.LINK_TARGET_SELF）
http://www.google.com/uds/solutions/wizards/dynamicfeed.html
生成されたソースは、オプションをいじることでカスタマイズ可
var options = {
numResults : 12, // ①
displayTime : 3000, // ②
fadeOutTime : 2000, // ③
pauseOnHover : true, // ④
linkTarget : google.feeds.LINK_TARGET_BLANK, // ⑤
stacked : true,
horizontal : false,
title : "RSS feed"
}
①１サイトあたりの表示件数
②１つの記事を表示する時間（ミリ秒）
③記事の表示切替時間（ミリ秒）
④マウスオーバーで記事切替を停止する/しない
⑤記事クリック時の表示先Window（自分自身：google.feeds.LINK_TARGET_SELF）
2011年4月28日木曜日
GAE BigTableをJQueryで操作
Google App Engine の BigTable をJQueryで処理できるgaedirectというツールがあるそうだ。
http://www.atmarkit.co.jp/fwcr/rensai2/gaedirect01/01.html
JavaScriptがクライアントサイドのリソースをくってしまう点やMVCの観点から言えば邪道な
気もするが、記事にあるように「すぐに簡単なサイトを・・・」というときにいちいちJavaで開発
するのも確かに面倒だ。
内内で使用する出席管理のツールとか、それこそ災害時の安否連絡などには十分使える
のではないかと思う。
http://www.atmarkit.co.jp/fwcr/rensai2/gaedirect01/01.html
JavaScriptがクライアントサイドのリソースをくってしまう点やMVCの観点から言えば邪道な
気もするが、記事にあるように「すぐに簡単なサイトを・・・」というときにいちいちJavaで開発
するのも確かに面倒だ。
内内で使用する出席管理のツールとか、それこそ災害時の安否連絡などには十分使える
のではないかと思う。
2011年3月20日日曜日
RubyOnRailsでJQueryMobileを使用するのは注意
RubyOnRailsのフレームワークではurlに厳密な意味があり、コントローラーではこのurlにより処理が振り分けられたりする。
ところが、JqueryMobileはスマートフォン風の動作を実現するためこのurlを書き換えてしまい、
そうするとrailsは正しくリクエストを処理することができなくなりドハマリする
(ちなみに、railsの更新処理がどうしてもうまくいかず、原因がJQueryMobileである事に気づくのに2日を要した・・・)。
通常の更新はうまくいくのだが、input typeがfileの時になんだかうまくいかない。
・RailsでJQueryMobileを使用する
RailsでJqueryMobile
・JQueryMobileのAjax設定をオフにする
Ajax設定の変更
ただ、Rubyを使用したスマートフォン向けの開発はRhodesが提供されているので、Rubyを使用したいなら
こちらのほうがいいかも
Rhodes
ところが、JqueryMobileはスマートフォン風の動作を実現するためこのurlを書き換えてしまい、
そうするとrailsは正しくリクエストを処理することができなくなりドハマリする
(ちなみに、railsの更新処理がどうしてもうまくいかず、原因がJQueryMobileである事に気づくのに2日を要した・・・)。
通常の更新はうまくいくのだが、input typeがfileの時になんだかうまくいかない。
・RailsでJQueryMobileを使用する
RailsでJqueryMobile
・JQueryMobileのAjax設定をオフにする
Ajax設定の変更
ただ、Rubyを使用したスマートフォン向けの開発はRhodesが提供されているので、Rubyを使用したいなら
こちらのほうがいいかも
Rhodes
2011年3月1日火曜日
登録:
投稿 (Atom)