東京通勤道中のAdSenseをレスポンシブにしてみた

Google AdSenseにレスポンシブなサイズがあると聞き、試しに+東京+通勤+道中+の広告をレスポンシブにしてみました。PCで見ると横長でちょうどいいんですが、幅を狭めたら正方形の大きな広告になり、コンテンツがファーストビューに入らないかも…。

AdSenseをいじったのは久しぶりですが、コードもだいぶかわってたんですねー。

東京通勤道中を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で治るはず…だといいな。)

Page View Boardが新しいGoogle AppEngineのQuotaにひっかかった

Google AppEngineで動かしているサイト内アクセスランキングWidgetのPage View Boardが、急に機能しなくなりました。ソースコード公開用Wiki等で使います。正確に言うと、ランキングに表示される1週間のアクセス数が、急に少ない数字になってきたのです。

原因は、どうやら11/7からのGoogle AppEngineの価格改定に伴う無料枠の変更の影響のようです。
AppEngineのDashboardを見ると、「Datastore Write Operations」が100%で赤くなっていて、さらに、「Your application is at or near its free resource limits.  You should enable billing to avoid service interruption.」というメッセージも。

いきなり課金されないのは幸いです。

この変更はもちろん知っていたのですが、それでも自分のアプリがQuotaにひっかかるとは思っていませんでした。けっこうアクセス数のあるサイトでも使われ始めたことも原因の1つのようです。

対策として、とりあえずアプリをコピーしてもう1つ作り、自分のサイトではコピーしたのを使うようにしました。
これで元のアプリの方もQuotaに制限を回避できるようになればよいのですが…。

 

スマホで見られる写真地図の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の公開は禁止しています。)

+東京+通勤+道中+をAndroid Marketで公開しました

東京近郊の電車の路線に関するつぶやきをTwitterからリアルタイム検索する+東京+通勤+道中+を、Androidアプリ化して、Android Marketで公開しました。

こちらです → 東京+通勤+道中 – Android マーケット

インストールしてみると分かりますが、アプリを起動するとWebブラウザを立ち上げて東京+通勤+道中のWebサイトを表示するだけです。(よくあるなんちゃってネイティブアプリです…。)
まあブラウザを起動してお気に入りから選ぶよりはちょっと楽ですね。

余談ですが、アプリの詳細(アクセス許可)を見ると、アプリでは使っていないはずのSDカードやUSBストレージやWi-Fi状態の表示にアクセスする場合があるとなぜかなっています。
Manifestあたりをもう少しきちんといじらないとダメなんでしょうね。もしバージョンアップすることがあったら調べてみます。

ということで、よかったらインストールしてみてください!

東京+通勤+道中 – Android マーケット

 

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

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

主な変更点は、

  • 東京の電車の路線名だけでなく、他の路線名や駅名、その他どんなキーワードでも検索できるように検索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で見てもスマートフォンっぽく視えるようにしてみたんですけど、いかがですか?

たしざん、ひきざん、かけざんの練習ができるページを作りました

小学校低学年向けに、たしざん、ひきざん、かけざん(九九)の練習ができるページを作りました。

けいさんのれんしゅうです。

計算の種類と、計算に使う数字の範囲を指定して「スタート」をクリックすると、ひたすら問題が表示されます。

子どもが気が散らないように、なるべく余分なものを表示しないようにしました。

ご活用ください。