Hatena::ブログ(Diary)

Web系がおもしろい。

2011-03-21

炊き出したんWebAPIを使った「炊き出したんマップ」を作りました

| 19:50 | 炊き出したんWebAPIを使った「炊き出したんマップ」を作りましたのブックマークコメント

f:id:esperia:20110321222513p:image:h500

http://takidashi-map.appspot.com/


これは?

炊き出したん WebAPI を利用して、現在炊き出し中の位置を地図上に表示することができます。

パソコンやスマートフォンに付いているGPS機能を利用して、現在地をマーカーで指すこともできます。



動作環境


iPhoneiPadに関しては未検証ですが、入っているブラウザSafariなので動くと思います。

Android1.6以下に関しましては、確かWebStorageがサポートされていなかったと思うので、バグが発生するかもしれません。

ガラケーにも対応したい…!


使い方

1.炊き出し場所を確認したい場所をタップして、「炊き出し場所を取得」ボタンをタップします。

f:id:esperia:20110321183952p:image:h400


2.炊き出し情報を取得して、場所を表示します。

f:id:esperia:20110321183953p:image:h400


3.ピンをタップすると、吹き出しに詳細を表示します。

f:id:esperia:20110321222513p:image:h400


他の機能

  • 「現在地を取得」ボタンをタップすると、現在地が取得できます
    • 現在地を取得する際、位置情報を共有するかの確認がでますので、共有を行ってください
  • Aboutのリンクを押すと、ヘルプのウィンドウが表示されます。
    • 簡単な使い方などが参照できます。
  • 右下の赤いボタンを押すと、メニューの開閉ができます。

バグ報告や追加要望等

僕のTwitterアカウント(@esperia09)へご連絡頂くか、この記事のコメント欄等へ書きこんでください。また、炊き出したんWebAPIの作者(@yokmama)様とは別人ですので、このマップのことでご迷惑をおかけしないようにお願いいたします。


余談

今回、作成した「炊き出したんマップ」ですが、GAE上で動作するフレームワークとしてサーバーサイドJavaScriptである「RingoJS」を使用しています。やっとAppengineJSとRingoJSを組み合わせる方法が分かったので。。

追って記事書きたいんですが、ちょっと忙しくてかけてません。。



アップロードする画像を間違えていたので修正しました。

見出しの画像を差し替え

Connection: close