map」というWebアプリケーションを用意した。MapsのAPIを使って地図を表示するもので、地図上をクリックするとその場所に「ピン」がセットされる。ピンは複数を配置でき、ピン間の距離やその合計が表示されるようになっている(図14)。map」また、ピンを配置した状態で「Publish」ボタンをクリックすることで、そのピン配置を保存することができる(図15)。mapアプリケーションではフレームワークとしてexpressを使用している。Webブラウザ側で動作させるクライアントサイドコードではJavaScriptライブラリであるjQueryを使用している。jQueryについては本記事内での解説は行わないので、こちらについては適宜関連ドキュメントなどを参照していただきたい。AzureストレージのTableストレージを使用している。Azureストレージにアクセスするには「azure」モジュールを利用すれば良い。azureモジュールはnpmリポジトリに登録されており、npmコマンドでのインストールが可能だ。Azureのストレージアカウントを環境変数から取得するようになっている。そのため、このプログラムを実行させる際には「AZURE_STORAGE_ACCOUNT」環境変数にアカウント名、「AZURE_STORAGE_ACCESS_KEY」環境変数にアクセスキーをあらかじめセットしておく必要がある。azure.createTableService()以下では、このアプリケーションでポイントとなる部分のみを抜粋して紹介する。ソースコード全文については筆者のPersonalForgeリポジトリで公開しているので、興味のある方は適宜ダウンロードしていただきたい。mapでは、表2のURLに対するリクエストについてレスポンスを返すようになっている。ピンの緯度・経度情報のリスト「<サーバー名>/」はアプリケーションのトップページを表示するURLだ。トップページでは地図の表示や地名による地図検索、ピンの配置、保存といった操作が行える。作成したピンの保存は、そのピンの情報をAjaxで「<サーバー名>/publish/」に対してPOSTで送信することで行う。保存したピン情報にはID(「公開ID」)が与えられ、「<サーバー名>/published/<公開ID>」というURLにアクセスすることで、対応するピンが付加された地図が表示される。このWebページ内におけるピン情報取得にもAjaxが使用されており、公開IDを「<サーバー名>/listpins/」に対してPOSTで送信することでピン情報を取得している。mapのサーバーサイドスクリプトまず、各URLに対するリクエストを処理するため、アプリケーションのメインファイルであるapp.js内ではリスト8のようにルーティング設定を行っている。routes.loadpins);パスに対応する処理についてだが、まず「/」を処理する「routes.index」および「/published/<公開ID>/」を処理する「routes.published」についてはリスト9のようになっている。map」を与えてindex.jadeテンプレートをレンダリングするもので、後者はそれに加えて公開IDをURLから取り出し、pub_id変数としてテンプレートに与える処理を追加している。})};また、ピン情報を保存する「/publish/」パスに対する処理がリスト10だ。POSTリクエストで送信されたピンの緯度・経度リストをストレージに保存し、公開IDを返す、というものになる。ここでは、まず公開IDとして使用するランダムな16桁の文字列を生成し、続いてPOSTで渡されたデータをinsertEntity関数でTableストレージに保存、最後にIDをレスポンスとして返す、という処理を行っている。保存先のテーブル名は「newbmap」で、パーティションキーは公開ID、行キーにはピンのインデックス、「latitude」キーにピンの緯度、「longitude」キーにピンの経度を格納している。res.send(pub_id);};ストレージに保存されたピン情報を取得する「/loadpins/」パスに対する処理はリスト11だ。こちらはPOSTリクエストで送信された公開IDに該当するピンの緯度・経度リストをストレージから取り出し、json形式で返す、というものになる。<公開ID>」というクエリ文字列)を与えてクエリを実行することで行っている。mapのJadeテンプレート続いて、「<サーバー名>/」および「<サーバー名>/published/<公開ID>」に対応するHTMLを生成するためのテンプレートを見てみよう。リスト12が「<サーバー名>/」に対応するHTMLを生成するJadeテンプレートだ。ここでは地図本体を表示するためのdiv要素(#map_box)や、地名検索を行うフォーム(form#search_form)、そしてピンの保存を行うフォーム(form#publish_form)などが用意されている。実行されるスクリプトコードは「/javascripts/index.js」から読み出すようにしている。tbodyまた、「<サーバー名>/published/<公開ID>」に対応するHTMLコードを生成するJadeテンプレートはリスト13だ。“#{pub_id}”;」のように公開IDを格納する変数を宣言している点が異なっている。