鉄道なブログパーツ「どこかの駅」

 プログラム, ,
 公開日:2012年6月20日 / 更新日:2017年4月14日

enchant.jsを利用して、
今度はアプリっぽいものを作ってみることにしました。

enchant.jsにはBox2Dのプラグインがあるので、
AS3版のBox2Dを利用して作ったFlashな「ロト6選択機」
移植しようかとも思ったのですが、
同じものを別な形式で作っても面白くないので、
その昔に思いついたアイデアを実現してみることにしました。

それは、
wikipediaの「日本の鉄道駅一覧」のページから
ランダムにどこかの駅の情報を取得して、
駅舎の写真とかを表示するというような感じです。
んで、
ブログパーツとして使えるようにサイズは小さめにして、
wikiやGoogleMapへのリンクを設けることにしました。
アプリの名前はずばり「どこかの駅」にしました(^_^;)

作業的には以下のような感じ。
XMLHttpRequestで該当ページを取得してresponseを解析。
必要な情報を収集して表示する。
ただしXMLHttpRequestはクロスドメインではうまくいかないので、
自前のプロクシを経由して回避しています。
プロクシについてはこちらを参考にさせていただきました。

実際にやってみると、
検索するDOMタグのパターンの見極めに苦労したりして、
ページの解析には結構手間取りました。
また概ねテンプレ通りに記述されているようなのですが、
微妙に異なる表記パターンがあるので調整も必要でした。
当初は隣接駅の情報も取得しようとしたのですが、
パターンが多岐に渡るので断念しました。
結局、安定して採取できそうな以下の情報に絞りました。
駅名、駅名の読み、駅舎の画像、位置情報の4つです。
位置情報以外は必須とし、
それらを採取できなかった駅は対象外にすることにしました。

さて、そんなこんなで大体プロトタイプができたので、
Chrome以外のブラウザでの動作をチェックしたら、
問題が・・・嗚呼(T_T)

一つは、Operaでの表示がおかしい。
position:absoluteなDOMエレメントのleftやtopが更新されたら、
描画も更新されるはずなのに、なぜか更新されないパターンがある。
エレメントの追加順序を変えるとうまく行ったりすることもあって謎。
Operaのバグ? あるいはなんか最適化のミスか?
はたまた自分のPCの環境がおかしいのか?
でも他のブラウザではうまく描画されてるしなぁ・・・。
とりあえず、Operaだけ一部のアニメ演出は無しにしました。

もう一つはIE9、こっちの方が問題。
responseXMLにquerySelectorやquerySelectorAllが無い!?
documentのDOMにはあるのに、なぜかresponseXMLのDOMには無い・・・。
なんで?
これだからIEは、小一時間問い詰め・・・(以下略)(^_^;)
調べてみると、innerHTMLやstyleなどよく使いそうなプロパティも
responseXMLのDOMには無いようです。
どうやらresponseXMLのDOMには、
最小限のプロパティやメソッドしか実装されてないっぽい?
それにしてもquerySelectorが使えないのは痛い。
getElementsByTagNameとgetAttributeでちまちまやるしかないのか・・・。
めんどい・・・。
ああそうだ! jQueryがあるじゃないか!!
というか始めから使っとけ(^_^;)
あっさり解決しました。
セレクタの表記方法がCSSのと異なる場合があるけど、
それさえ注意しとけば問題なし。

ということで、
長々と書いてしまいましたが、
とりあえず完成したのを右サイドに貼り付けてあります。
ブログパーツとして使うには、以下のスクリプトを埋め込んでください。
(※8月5日 スクリプトを短くするために少し変更しました)

ちなみに、「日本の鉄道駅一覧」から
なぜかこの桟橋にたどりつけてしまいます(^_^;)
テストしてたら偶然みつけました。

★2017年4月14日追記。
wikipediaのページの内容が変わったようで、
うまく動かなくなっていたようです(^_^;)
動くように改修しました。

★2015年7月13日追記。
動作エラーが起きていました。
やり方を変えてどうにか動くようにしました。
サーバー側で何か設定が変わった?
セキュリティ関係?
残念ながら情報不足で原因不明です。
う~む・・・(;´Д`)

★2014年1月3日追記。
@pagesがCloudFlareを導入したためか、なんか動かなくなっていたのを改善。
たぶん原因はここで書いてあるような感じっぽい・・・。

タグ: , ,

コメント投稿