「京巡りガイド」の機能を少し変更しました

先日 リニューアルした京巡りガイド ですが、機能を少し変更しました。

変更点は以下の通りです。

1. 詳細ページでの出発地が「現在地」の場合、および「現在地最寄りで検索」を選んだ場合に現在地の再取得と「現在地最寄りで検索」のヒット件数の更新を行うように修正。
2. 路線ページで、路線中にある駅名やバス停名を押すことで、出発地はそのままで目的地を変更して詳細ページを表示する導線を追加。
3. スマートフォンで本サイトを表示した場合、画面下部のメニューに「現在地地図」を追加。

今後、機能の追加・変更・削除や、神社仏閣・飲食店などのスポットデータの追加があれば、モーダルウィンドウでお知らせします。

「京巡りガイド」をリニューアルしました

去年一度リニューアルした「京巡りガイド」ですが、この度またリニューアルしました。

京巡りガイド
動作環境：iPhone/Android 4/Google Chrome/Safari/Firefox/Opera

このウェブサービスは、京都市には色んな名所旧跡があるけど、それらはなかなか電車で行きづらいところにあるけど、バスだと巡りやすいということを踏まえ、様々な神社仏閣・名所・ホテル・飲食店などを電車とバスでルート案内する目的で作っています。
これに付随して、ホテルなら楽天トラベルなどで予約を、飲食店なら食べログで情報取得を、すぐにできるようにしてあります。

京巡りガイド | Archives | Flügel にて詳しい説明をさせていただいておりますので、ご興味があればご一読ください。

今回の変更点は以下の通りです。

1. jQuery Mobile の撤廃し、独自 UI へ変更

前回のリニューアルでは、jQuery Mobile を使ってみるという面があったので、全面 jQuery Mobile でしたが、個人的な好き嫌いもあって今回全て撤廃し、UI は独自に構築しています。jQuery Mobile に頼っていた画面遷移は Backbone.js を使っています。

2. 内部構造の一新につき、より正確なルート案内を実現

今までは、データベース代わりに使っていた Google Maps のマイマップで得られる KML を分解して使っていましたが、今回はその KML から一度 json に変更したものを読み込んでいます。それにより、内部での情報管理や計算がしやすくなり、データの読み込みスピードも速くなりました。また、最初のリリースから手をつけていなかったロジックも全面的に変更し、ルートの計測がより正確になりました。

3. ルート案内には徒歩時間も考慮

上記とも関連しますが、今回は出発地と目的地で案内する最寄りの駅やバス停までの徒歩時間もルートの時間として計算していますので、今までよりももっと現実味のある案内になりました。なお、徒歩時間は、一般的には分速 80m ですが、道路区画や信号等も考慮しなければならないので、分速 60m で計算しています。

4. Twitter/Facebook/foursquare への同時投稿

以前から Twitter と Facebook への投稿はできましたが、今回は Facebook/foursquare でのチェックインも可能にしております。

5. Facebook/foursquare でのチェックインは予め ID があるのでそのまま投稿

チェックインを行うには通常、その場所（大抵は現在地）から検索して、該当の場所にチェックインという流れですが、データには予め該当するチェックイン ID を記録しているので、検索せずにそのままチェックインできます。

6. スポットデータを約 900 件へ増加

このウェブサービスで使用しているデータは、上述したように、Google Maps のマイマップ機能を使って、ひとつひとつピンを立て、そのピンに様々な情報を記録し、データベース代わりとして使っています。このピンを今回約 900 件へと増加させました。

7. Android 4 での GPS 対応

以前は iOS 端末と Android 2.x 系でのみ有効だった GPS 機能を、今回は Android 4 にも対応させました。

京都での観光の際に、お役に立てたら幸いです。
京巡りガイド

CSS3 によるローディングアニメーションを生成する jQuery プラグイン jquery.cssloading.js をリリースしました

CSS3 によるローディングアニメーションを生成する jQuery プラグインを作ってみました。iOS や Android といった、スマートフォン用のプラグインという位置づけです。cssloading() でアニメーション開始、stopcssloading() でアニメーション停止を行います。アニメーションの形やスピードなどは、プロパティを与えて設定します。
GitHub: jquery.cssloading.js

☆確認環境
iOS/Android

☆プロパティ一覧

• type：アニメーションの形（dot/line/square/block/eddy）
• width：表示されるアニメーションのサイズ（数値）
• color：色（CSSで定義できる値）
• size：表示されるひとつひとつのサイズ（数値）
• items：表示されるアイテムの数（数値、「type」が「dot」の場合は円を構成する数、それ以外は1行の数）
• speed：アニメーションのスピード（ミリ秒）
• clockwise：右回りか左回りか（「true」が右回り、「false」が左回り）
• direction：アニメーションを行う起点の方向（「left」「right」「top」「bottom」）
• shape：表示されるひとつひとつの形（「circle」「square」）

☆使用できるプロパティの種類

• dot：direction/shape以外
• line：width/clockwise以外、「direction」は「left」または「right」
• square：width/direction以外
• block：width/clockwise以外
• eddy：width/direction以外

☆ファイルの読み込み

<script type='text/javascript' src='http://code.jquery.com/jquery-latest.js'></script>
<script type='text/javascript' src='jquery.cssloading.min.js'></script>

☆html

<button>Play/Stop</button>
<div id='loading'></div>

☆JavaScript（dot）

// 開始
var option = {
  type: 'dot',
  width: 100,
  color: 'rgba(0, 102, 255, .9)',
  size: 3,
  items: 30,
  speed: 1000,
  clockwise: false
};
$('#loading').cssloading(option);

// 終了
$('#loading').stopcssloading();

☆結果
flugel.bizでご確認ください。


☆JavaScript（line）

// 開始
var option = {
  type: 'line',
  color: 'rgba(255, 255, 255, .9)',
  size: 5,
  items: 10,
  speed: 1000,
  direction: 'left',
  shape: 'square'
};
$('#loading').cssloading(option);

// 終了
$('#loading').stopcssloading();

☆結果
flugel.bizでご確認ください。

その他のサンプルは jquery.cssloading.js | Archives | Flügel にて公開しています。

iOS6 で input type=file を使えるようになった

先日書いたエントリー で使えるだろうとは思ってたけど、実際に使えました。



input type=file を使って post した tweet がこちら。
Twitter / WINGS1685: ついに iOS で input type=file ...