東京通勤道中をTwitter API 1.1のOAuthに対応させました

Twitter Search APIが2013/3/5をもってTwitter API 1.1に統合されるとのことなので、これまでTwitter Search APIを使っていた+東京+通勤+道中+をTwitter API 1.1を使うよう変更しました。

Twitter Search APIと違ってTwitter API 1.1では検索をするだけでもOAuthによる認証が必須なので、これまではブラウザからJavaScriptにより気軽に検索できていたのが、サーバサイドでAPI を叩かなくてはいけなくなったのが面倒です。(回数制限も考慮してサーバでキャッシュしたりとかも。)

ただ、主にバックグラウンド側の変更なので、見た目も使い勝手もあまり変わってないと思います。

さりげなくjQeury Mobileのバージョンを1.3に上げたりもしましたが、新機能を使っていないのであまり影響ありません。

次はRT_reportかなあ…

jQuery Mobile 1.1RCを東京通勤道中に適用してみた

jQuery Mobile 1.1.0のRC1が出たので、さっそく東京+通勤+道中に導入してみました。(ついでにFlic 100Kにも。)

jQuery Mobile 1.0.xではスクロールすると明滅してぎこちなく付いてくる奥ゆかしさが不評だったStickyなヘッダーが普通に固定になっていい感じですね。

IE8(IE9の互換モードで確認)ではレイアウトが思いっきり崩れたり、そもそも表示されなかったりしますが、もう気にしないことにしましょう…(IE7-9もAグレード扱いだから、きっとRC2で治るはず…だといいな。)

スマホで見られる写真地図のFlic 100K(ふりく百景)を作りました

東京+通勤+道中に続くスマートフォン向けのWebサイトとして、今自分がいる場所の近くで撮影された美しい写真を地図上にマッピングして表示するFlic 100K (ふりく百景)を作りました。
(分かりにくかもしれませんが、「富嶽百景」とかけています…)

位置情報を取得できなかった場合は、外国の方が喜びそうな金閣寺周辺の写真を表示するようにしました。
Androidでは大丈夫なのですが、iPhoneだとGPSやWi-Fiからの位置情報取得がタイムアウトして金閣寺が表示されることが多いようです。SafariのGeolocation APIの問題かもしれません。

技術的には、今回もjQuery Mobileを使いました。ページ遷移が無いので見た目をそれっぽくするために使っただけですが。
一点、listviewのdividerへのテーマの反映が期待通りに動かなかったのが残念です。黄色にしたかったです。jQuery Mobileは現在RC2ですが、正式版リリースまでには直るといいですね。

Flickr APIはPHPのserialized形式があってPHPに優しいのですが、Twitter APIのようにKEYなしでSearchができたらJavaScriptだけで済んだのでもっとよかったのにと思いました。
まあKEYを公開してJavaScriptでアクセウするような参考ページもたくさんありますが。(Flickr APIの規約としてはKEYの公開は禁止しています。)

東京通勤道中を少しバージョンアップしました

スマートフォン向けに電車の路線に関するつぶやきをリアルタイム検索できる+東京+通勤+道中+をパワーアップしました。

主な変更点は、

  • 東京の電車の路線名だけでなく、他の路線名や駅名、その他どんなキーワードでも検索できるように検索BOXを追加
  • 不動産の広告のTweetが表示されにくいようにフィルターをかけるようにした
  • Tweetの内容が二重にHTMLエスケープされていた問題を解消

といったところです。

検索窓はjQuery Mobileのおかげで簡単にそれらしいものができました。jQuery Mobileすごいですね。

苦労したのはjQuery MobileによるAjax遷移で、検索BOXから検索してからHomeに戻ると、なぜか次の遷移がおかしくなるという謎の現象が起きて、対症療法的に結局該当ケースのみJavaScriptで動的にAjax遷移をさせないようにしました。(原因は深く追ってません…)

Ajax遷移はキャッシュが効けばサーバアクセスが無いので、モバイルで電波状況が不安定な場合などには効果的にサクサク動かすことができていいんですけどね。これからの改善に期待です。

スマートフォンで東京の路線に関するTweetをリアルタイム検索できるサイトを作りました

iPhone、Android等のスマートフォンで、東京を走っている電車の路線に関するつぶやきをTwitterからリアルタイムで検索できるサイトを作りました。その名も東京+通勤+道中です。

朝の通勤や帰宅前のダイヤのチェックや、台風等で電車が止まった場合の情報収集などにお役立てください。

ところで今回初めてjQuery Mobileを使いました。(RC1が出たばかり!)
jQueryという名前が付いているのでJavaScriptでバリバリ作っていくのかと思ったら、読みこむだけで後はHTML要素の属性を見て勝手にいい感じにやってくれるというPrynスタイルでした。これはいいですね。jQuery UIよりさらにメソッドを進化した感じというか。

ついでにPCで見てもスマートフォンっぽく視えるようにしてみたんですけど、いかがですか?