foursquare API が少し変更されてました。

https://api.foursquare.com/v2/venues/search? を使ってる部分があったんですが、最近どうも取得できなくなったようなので、その修正をしている内に、いくつか変更されてる点が分かりました。

以前

• client_id と client_secret を渡せば取得できた
• v は必要なかった
• query はエンコードする必要なかった

- 現在

• oauth_token を渡さないと取得できない
• v を付けると取得されるデータの構造が変わる
• query はエンコードしないと取得できない（日本語の場合）

v を付けなかったときの構造は、response > groups > 0 > items でしたが、v を付けると、response > venues へ構造が変わります（v は YYYYMMDD の日付）。

最初エラーを見たときは、v を付けろって話だったので、今後は付けたときの構造になっていくような感じがします（v を付けなくても取得はできます）。

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

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

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

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 にも対応させました。

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

「京巡りガイド」を公開しました

昨年、京都で遊ぼう！ として公開した、京都での観光名所やホテル等の観光案内（ルート検索付き）のウェブサービスですが、今回「京巡りガイド」としてリニューアル公開しました。
以前は JavaScript ベタ書きでしたが、今回 jQuery + jQuery Mobile で構築してみました。データを読み込むのに Cache_Lite をかましてるので、3 時間はキャッシュから取得します。ローディングアニメーションは、自作の jQuery プラグイン「jquery.wakeup.js」を使ってます。

京巡りガイド

**動作確認環境
スマートフォン

• iPhone 4 以降
• iPod touch(iOS 4) 以降
• Android(OS 2.3) 以降

タブレット

• 新しい iPad

パソコン

• Safari 5 以降
• Chrome 20 以降
• Firefox 14 以降

「京巡りガイド」では、GPS現在地や指定した出発地から目的地までのルートを検索できます。ルートは、JRや私鉄、地下鉄の各鉄道や市バスを利用した結果が検索されます。
検索画面では次の情報を見られます。駅とバス停では時刻表、ホテルとショップでは電話番号、神社仏閣と観光スポットでは写真、全てのカテゴリで地図を表示します。
詳細画面では次の情報を見られます。駅とバス停では乗り換えられる距離にある駅やバス停、ホテルとショップでは電話番号とルート検索、神社仏閣では写真とWikipediaの情報とルート検索、観光スポットでは写真とルート検索、全てのカテゴリで地図および近くに駅があった場合は食べログサイトへのリンクを表示します。また、ルート検索の保存も可能です。

神社仏閣やホテルなどの一覧を見る

「検索して選ぶ」でホテル名などを入力（セレクトメニューでカテゴリを絞ることも可能）するか、「カテゴリから選ぶ」「最寄りの施設から選ぶ」でのボタンを押すと一覧ページが表示されます。
「検索して選ぶ」では、よみがなでも検索できます。「カテゴリから選ぶ」で表示した場合、初期状態では「五十音順」の「あ行」になっています。「五十音順」では「あ行」「か行」「さ行」「た行」「な行」「は行」「ま行」「や～ん」を、「近距離順」では「500m以内」「1km以内」「2km以内」を選べます。

「基本情報」では、「読み方」「（出発地からの）直線距離」「路線（駅・バス停のみ）」「Tel（ホテル・ショップのみ）」が表示されます。また、「時刻表」（駅・バス停のみ）は「駅から時刻表」（駅）・「京都市バス」（バス停）へ、「予約」（ホテル・ショップのみ）は「楽天トラベル」もしくは「るるぶ」へ、「評価」（ショップのみ）は「食べログ（掲載されている場合のみ）」へ、それぞれジャンプします。「写真」（神社仏閣・観光スポットのみ）を押すと、Google画像検索での該当施設を検索した結果が表示され、「Tel」（ホテル・ショップのみ）は電話をその場でかけられます。また、「出発地にする」を押して、出発地に指定することができます。
「地図」を開くと、出発地が青いピンで、該当施設を赤いピンで表示した地図が表示されます。
「ルートなどの詳細」を押すと、出発地から該当施設までのルートなどを示すページに移ります。

ルートなどの詳細を見る

一覧ページで「ルートなどの詳細」を押すと、出発地から該当施設までの電車やバスによるルートや周辺地図などの詳細ページが表示されます。
「基本情報」では、一覧ページでの「基本情報」に加え、「目的地周辺の飲食店」として、該当施設の周囲1km以内にある駅を元に検索した「食べログ」へのリンク（周囲に駅がない場合は表示されません）が、神社仏閣の場合はWikipediaの情報が、それぞれ表示されます。

「ルート」を開くと、最大3件までルート情報が表示されます。駅やバス停の情報と、路線や時刻表（駅の場合は「駅から時刻表」、バス停の場合は「京都市バス」にジャンプします）、乗り換え（ある場合）のボタンが表示されます。
また、出発地から経由地も含めた該当施設までの大まかな地図も表示します。

「乗り換え」を押すと乗り換え元と乗り換え先をピンで示した地図を表示します。

「（該当施設）周辺地図」を開くと、該当施設周辺の地図を表示します。大きな地図で見る場合（iOSの場合は地図アプリに自動切り替え）は、「大きな地図で見る」を押してください。

「SNS連携」を開くと、TwitterとFacebookへ投稿できるエリアが表示されます。投稿したくない共有先はフリップスイッチでオフにできます。投稿するには、ナビゲーションエリア（パソコンやiPadは画面左、その他は画面下）にある「SNS連携」を開いて接続します。

降りる駅までの情報を見る

詳細ページの「ルート」内の路線名を押すと、路線内の駅やバス停の一覧ページが表示されます。乗車駅・バス停は赤で、降車駅・バス停は黄で表示されます。
※バスの場合は、往路と復路で通るバス停が異なるので、目安とお考えください。

「乗り換え」を押すと、その駅やバス停で乗り換えられる路線が表示されます。

foursquareのExplorer機能を使って現在地から近くの施設を探す

foursquareのExplorer機能を使って、現在地から近くの施設を探すことができます。ナビゲーションエリア（パソコンやiPadは画面左、その他は画面下）にある「SNS連携」を開いてfoursquareに接続します。

ナビゲーションエリアにある「最寄りの施設から選ぶ」内の「explorer」を押し、表示されたページで「飲食店」「カフェ」「バー」「ショップ」「美術館等」を選ぶと、結果が表示されます。電話番号が登録されている場合は、電話ボタンが表示されます。また、foursquareでのvenueページへジャンプするボタンも表示されます。

ルート検索を保存する

全てのページは、「このページを保存」を押すことにより、端末内のストレージに情報を保存することができます。

出発地が現在地で詳細ページを保存した場合は、次回アクセスした際の現在地からルートを計測します。

保存したページを削除したい場合は、「削除モード」を押してモードを変更し、削除したいページを押してから「削除」を押してください。

GPS計測について

GPSはGeolocation API を用いて計測しており、スマートフォン端末でのGPS設定が有効の場合に発動しますが、パソコンでアクセスした場合は取得せずに、現在地を「京都駅」としています。

[php で OAuth を使ってみる：第十一回] 4square でチェックインする

4square で OAuth を使ってチェックインしてみる。
※この情報は 2012 年 1 月現在のものです。仕様が変更される可能性は充分にあるので、ご了承ください。

OAuth を使った認証〜チェックインスポットの流れは 前のエントリー を参照。

チェックインする

<?php
$status = '＊＊にチェックイン！'; // チェックインと一緒に post する文字列
$placeId = 'xxxxxxxxxxxxxxxx'; // 前エントリーで取得したチェックインスポットの ID
$lat = ''xxxxxxxxxxxxxxxx''; // 前エントリーで取得したチェックインスポットの緯度
$lon = 'xxxxxxxxxxxxxxxx'; // 前エントリーで取得したチェックインスポットの経度
$name = 'xxxxxxxxxxxxxxxx'; // 前エントリーで取得したチェックインスポットの名前

$checkin_url = 'https://api.foursquare.com/v2/checkins/add';
$data = array(
  'oauth_token' => $_COOKIE['4sqToken'], // 前エントリーの「3.」で cookie に保存した access_token
  'venueId' => $placeId,
  'venue' => $name,
  'shout' => $status,
  'broadcast' => 'public',
  'll' => $lat. ','. $lon
);
$data = http_build_query($data, '', '&');
$options = array(
  'http' => array(
    'method' => 'POST',
    'content' => $data
  )
);
$result = file_get_contents($checkin_url, false, stream_context_create($options));
?>

[php で OAuth を使ってみる：第十回] 4square のチェックインスポットを取得する

4square のチェックインスポットを OAuth を使って取得してみる。
※この情報は 2012 年 1 月現在のものです。仕様が変更される可能性は充分にあるので、ご了承ください。

1. アプリを登録する
OAuth Consumer Registration にアクセスし、アプリの登録を行う。

APPLICATION NAME: アプリ名
APPLICATION WEB SITE: アプリ本体の URL
CALLBACK URL: ユーザによる認証動作後にリダイレクトする URL（「4.」でアップする php）

※全ての情報は登録後でも変更できるので、気楽に。

2. 使うキーを確認する
My OAuth Consumers にある「Client ID」と、「Client Secret」を確認する。これが今後必要となるキー。

3. 認証受け渡し用の php を用意する
下記に必要な事項を埋め、アプリのディレクトリにアップする。

<?php
$consumer_key = 'xxxxxxxxxxxxxxxx'; // 「2.」で確認した「Client ID」
$consumer_secret = 'xxxxxxxxxxxxxxxx'; // 「2.」で確認した「Client Secret」
$callback = 'callback する URL'; // この場合はこの php 本体

if (empty($_GET['code'])) {
// ユーザの認証前、4square にリダイレクトする
  $auth_url = 'https://foursquare.com/oauth2/authenticate?';
  $auth_url .= 'client_id='. $consumer_key;
  $auth_url .= '&response_type=code';
  $auth_url .= '&redirect_uri='. $callback;

  header('Location: '. $auth_url);
} else {
// ユーザの認証後、リダイレクトで帰ってきた後
  $accees_token_url = 'https://foursquare.com/oauth2/access_token?';
  $accees_token_url .= 'client_id='. $consumer_key;
  $accees_token_url .= '&client_secret='. $consumer_secret;
  $accees_token_url .= '&grant_type=authorization_code';
  $accees_token_url .= '&redirect_uri='. $callback;
  $accees_token_url .= '&code='. $_GET['code'];

  $result = json_decode(file_get_contents($accees_token_url), true);
  $access_token = $result['access_token'];

  echo "<script type='text/javascript'>location.href = 'アプリ本体の URL';</script>";
}
?>

4. チェックインスポットを検索して表示する

<?php
// php の文字コードが utf-8 であっても文字化けしたので記載
header('Content-type: application/json; charset=utf-8');

$query = 'モスバーガー'; // 検索語句

$spot_url = 'https://api.foursquare.com/v2/venues/search?';
$spot_url .= 'client_id='. 'xxxxxxxxxxxxxxxx'; // 「2.」で確認した「Client ID」
$spot_url .= '&client_secret='. 'xxxxxxxxxxxxxxxx'; // 「2.」で確認した「Client Secret」
$spot_url .= '&access_token='. 'xxxxxxxxxxxxxxxx'; // 「4.」で取得した access_token
$spot_url .= '&ll=34.985214,135.758593'; // 任意の緯度経度
$spot_url .= '&llAcc=1000'; // 1,000m 四方が対象
$spot_url .= '&limit=20'; // 20 件取得
// スポット名で検索する場合
if ($_COOKIE['query']) $spot_url .= '&query='. urlencode($query); // urlencode しないと取得できない
// 結果は json で返ってくるので、そのまま echo してやる
echo file_get_contents($spot_url);
?>

例えばこの php をアプリ本体の Javascript で読み込み、結果で出た json を Javascript で解析してレイアウト後に表示する、などができる。

php で OAuth を使ってみる

php で OAuth を使って色々と遊んでみようと思う。

1. Twitter に文字を post する
2. tumblr. に文字を post する
3. Facebook に文字を post する
4. TwitPic に画像を post する
5. tumblr. に画像を post する
6. Facebook に画像を post する
7. Flickr に画像を post する
8. Facebook のチェックインスポット取得する
9. Facebook でチェックインする
10. 4square のチェックインスポットを取得する
11. Twitter でお気に入りを取得する
12. Twitter でフォロワの一覧を取得する
13. Twitter でフォローの一覧を取得する