日記/2009-12
<< | 2009-12 | >> | ||||
S | M | T | W | T | F | S |
1 | 2 | 3 | 4 | 5 | ||
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 | 31 |
2009-12-27
jQfloatingmenu プラグイン
JavaScriptライブラリjQueryを用いたFreeStyleWiki用のプラグイン。
ダウンロードはこちらから。
フローティング・メニューを表示するプラグインです。本サイトの左側に表示されている、Menuのページに記載してあります。
Menuのページのソースは以下の通り。
{{jqfloatingmenu}} {{jqaccordion}} {{div_begin class="acdn_header"}} !!!Topic {{div_end}} {{div_begin class="acdn_content"}} *テクノ名盤200+α …… 中略 …… {{include_html あわせて読みたい}} {{jqaccordion end}} {{jqfloatingmenu end}}
jQaccordion プラグインの書式がダサくてわかりにくいですが、要するに、ページの頭に {{jqfloatingmenu}} を、ページの最後尾に {{jqfloatingmenu end}} を記せばOKです。
上記のプラグインは、それぞれ、「<div id="floatingmenu">」、「</div>」というHTMLタグに置換されます。この#floatingmenuというidについて、以下のようなスタイルを設定してください。
#floatingmenu { position: absolute; top: 0px; }
バグ
- まだ原因を探ってませんが、「「Wikiメニューにアイコン画像を表示するプラグイン」をjQueryでドック風に」を使用しない場合には、Wikiメニューがうまく表示されないようです。
- デバッグは今後の宿題ということで。すいません。
- IEだと遅い。なかなかついてこないというか。firefoxとかChromeでは問題ないスピードなんですが。
- これもなぜだか分かりません。すいません。
参考および関連情報
- jQueryでメニューを固定位置に追随させる:Live floating menu
- 本プラグインはこのページの内容そのまま。ありがとうございます。
- FreeStyleWikiの本家のサイトのBugTrack-request/93 フロートするメニュー
- このページを見て本プラグインを作成してみました。
注意点
- このフローティング・メニューを実現しているDimensions Pluginの機能は、jQuery 1.2.6でCoreに入っています。よって、1.2.6以降のバージョンのjQueryを用いれば、別途dimensions.jsをインストールする必要はありません。
- 当初、#floatingmenuに設定するスタイルを、「position: relative;」と誤って記載していましたが、正しくは「position: absolute;」でした。
2009-12-9
gvamt2 プラグインのキャッシュ対応
gvamt2 プラグインがあまりに遅いので、キャッシュ対応しました。
一度ジオコーディング(住所から緯度経度への変換)したらその結果を保存しておいて、次回以降のマップ表示の際には保存しておいた座標データを用います。表示のたびにジオコーディングしないため、表示の高速化につながりますし、ジオどすのAPIには一日あたりの呼び出し回数制限もあるため、ジオコーディングの回数を減らすことは有意義であると思います。
2009-12-7
京都アート探訪
またもやマップを作ってしまいました。
美術手帖908号(2008年6月号)の特集「京都アート探訪」の特別付録「日本美術&現代アート 京都ガイドマップ2008」を参考に作成しました。
さらに、またもや泥縄でプラグインも作成しました。
住所を与えると地図を表示するgvamt プラグイン、gvamap プラグインでは、GoogleのAPIでジオコーディング(住所から緯度経度への変換)を行っています。しかしながら、京都の住所、例えば「京都府京都市中京区三条通堀川西入ル一筋目角」などという通り名で記された住所だと、GoogleのAPIはうまく変換してくれません。さあ困った。
でも、そこは世の中よくしたもので、こんな時のために使える「ジオどす」というWebAPIが提供されています。このAPIを用いることで、先に挙げたような、通り名で表記された京都の住所もジオコーディングすることができました。
で、この京都の通り名対応のプラグインは以下の二つです。従来のプラグインを改造して、京都の通り名対応にしてもよかったのですが、速度の問題等もありまして、別モノとして作成してしまいました。詳細は各プラグインのページをご覧ください。
京都ガイドマップ
いつか、私が選んだ見どころをまとめた京都ガイドマップを作りたいですねえ。
関連リンク
- ジオどす
- 京都通り名ジオコーダAPI。ニッチな用途ですが、だからこそ便利。ありがとうございます。
- 京都アートマップ
- 本マップにも載っている京都のギャラリー13軒が共同で開催しているアート・イベント。残念ながら今年(2009年)は開催されなかったようです。
2009-12-6
いつか、行きたい植物園
暇にあかせて、またマップを作りました。
今回はBRUTUSの632号(2008年2月1日号)の特集「植物園に包まれたい。」の「いつか行きたい植物園。」で選ばれている「日本の植物園10選」、「世界の植物園10選」をそれぞれマップにしてみました。選者は大場秀章東大名誉教授。
先に作成したgvamap プラグインでは、海外の住所を与えるとうまく表示できないことがあった(文字コードの関係か?)ので、gvalt プラグイン同様に緯度、経度を与えて1ヶ所だけポインタを表示する、gvalmap プラグインを新たに作成しました。なんだか泥縄で嫌になります。
*gvalmap プラグイン
日本の植物園10選
世界の植物園10選
2009-12-5
日本の博物館ベスト
マップ作りが面白くて、手元にある雑誌から、また作ってしまいました。
今回はBRUTUSの644号(2008年8月1日号)の特集「博物館♥ラブ」の最後にまとめられているマップを参考にしました。セレクトはBRUTUS編集部。取り上げられているのは51箇所。
ページごとにおのおのの博物館についての、地図、画像、ウェブ、それぞれの検索結果を載せていますが、YLSMap プラグインではうまくジオコーディング(住所から緯度経度への変換)ができず、地図が表示されないところが何箇所もあったので、YahooじゃなくてGoogleのAPIで地図を表示するプラグイン(gvamap プラグイン)も作成してみました。と言っても、かなりの手抜きで、本来は複数のポインタを地図上に表示するためのGoogle Visualization APIのMapを使って、1ヶ所だけポインタを表示する、というもの。いつかきちんとGoogle Map APIを叩くプラグインも作成したい……。
日本のおすすめ博物館
2009-12-3
全国公営ギャンブル競技場マップ
「Google Visualization APIのMapとTableを用いたプラグイン」を作成したときに、サンプルデータとして、須田鷹雄「いい日、旅打ち。」の巻末に載っている「競技場マップ」を参考にして、競馬場と競輪場の全国位置図を作った。
ついでに、残りの競艇、オートレースについてもマップを作成してみた。これで公営ギャンブル種目完全制覇。
なお、競馬、競艇、オートについてはgvamt プラグインでマップを出力したため表に住所が載っているが、競輪だけはgvalt プラグインを用いたので、住所の代わりに緯度経度情報が載っている(プラグイン利用例のサンプルであるため)。ご了承願いたい。
「いい日、旅打ち。」にも、「公営競技が不況の波に飲まれ、存在そのものが危うくなりつつある」と書かれている。マップ作成データは「いい日、旅打ち。」記載のものに準拠(2009年9月時点の情報)したが、すでに花月園競輪は2009年度末での廃止が決定している。今後も、マップ上にはポインタがあるのに開催されていないという「元競技場」が増えていくのかもしれない……。
2009-12-2
Google Visualization APIのMapとTableを用いたプラグイン
FreeStyleWikiの本家のサイトに投稿されている、BugTrack-plugin/215のCardForm プラグインで用いる書式の複数のカードに記されたデータ群を、地図と表に表示するプラグインを作成してみました。
表示には、Google Visualization APIのMapとTableを用いています。
注意点
- 使用できるプラグインは、gvamt2 プラグイン、gvalt プラグインの2種類になりました。
- Google Maps APIキーは不要となりました。
- 例えば「京都府京都市中京区三条通堀川西入ル一筋目角」のような京都の通り名のジオコーディングに対応したgvamt2 プラグイン、
gvamap2 プラグインを使用するためには、ジオどすのAPIキーを登録する必要があります。 - プラグイン内部でユーティリティー関数としてCardForm プラグインのものを使っていますので、必ずこれをインストールしてください。
インストール
- あらかじめCardForm プラグインをインストールしておきます。
- 以下のファイルをダウンロードします。
- gva06.zip(146)
- 京都の通り名に対応したgvamt2 プラグイン、
gvamap2 プラグインを使用するためには、さらに以下の作業が必要です。- ジオどすのAPIキーを登録します(参照)。
- GeodosuID.pmの9行目に記載のある変数「$key」に登録したAPIキーを設定します。
- 以下のモジュールをlib以下にインストールします。
- plugin以下にインストールします。
gvamt2 プラグイン
インストール手順等は「Google Visualization APIのMapとTableを用いたプラグイン」のページを参照のこと。
使い方は、gvamt プラグインとまったく同じ。
通り名で記された京都の住所に対応しています(当然、普通の住所にも対応しています)。
わざわざgvamt プラグインと別のプラグインにしたのは、このプラグインが遅いため。
京都市内の住所を取り扱わない場合には、従来通りgvamt プラグインを使ってください。
一度ジオコーディング(住所から緯度経度への変換)したらその結果を保存しておいて、次回以降のマップ表示の際には保存しておいた座標データを用います。これにより表示の高速化がはかられ、2回目以降の表示ではgvamt プラグインよりも高速です(gvalt プラグイン相当)。
キャッシュファイルが存在しないか、プラグインが記載されているページの更新日時がキャッシュファイルよりも新しくなるか、いずれかの場合にはジオコーディングを行いキャッシュファイルを作成します。それ以外の場合には、キャッシュファイルに保存されている座標データを用い、改めて変換を行うことはありません。
以下は、各々のカードの記載の例(西本願寺のデータが記された「KyotoArt/3」のページのソース)。
*Address: 京都府京都市下京区堀川通花屋町下ル本願寺門前町60 *Name: 西本願寺 {{cardnavi KyotoArtMap}} !!GoogleMap …… 以下略
この様な書式のカードに記された「通り名で記された京都の住所」と「名前」からなるデータ群を、以下のような書式で、ジオどすで普通の住所に変換後、Google Visualization APIを用いて表示します。
{{gvamt2 KyotoArt,500,500,5,hybrid,10}}
「KyotoArt」はデータが記されたカードのベースネーム。
「500」「500」は、マップ領域のサイズ(それぞれ「横の画素数」「縦の画素数」)。省略可能。省略するとそれぞれ「400」「300」になります。
「5」はマップ領域のズームの設定。「0」が最小(地球全体)で「19」が最大。省略可能。省略すると自動的にそれなりの値が設定されます。
「normal」は表示されるマップのタイプ。「normal」で地図、「satellite」で衛生写真、「hybrid」で両者を重ね合わせたもの。省略すると「normal」が指定されます。
「10」は表の行数。指定した行数で表のページングを行います。省略すると全行表示します。
gvalt プラグイン
gvamt プラグインは「住所」と「名前」の組でしたが、Google Visualization APIのドキュメント(こちらのNote)によると、「住所文字列より、緯度と経度のペアの方が、特にデータ量が大きい場合には、表示が早い。データ量が大きい場合には、緯度と経度のペアを使用することを勧める」とのこと。
このため、「緯度」、「経度」、「名前」の組のデータを表示する、gvalt プラグインも作成してみました。
ですが、結局のところ、両方を同じページに表示すると重いので、別ページにしました。
こちらのページをご覧ください。
参考情報
- Google Visualization API
- Visualization: Map
- Visualization: Table
- 本プラグインは上記のページのサンプルコードを丸ごとパクっただけ。ありがとうございます。
- CardForm:カード型データベースのためのプラグイン群
- Google Visualization APIで使うデータソースとしてはGoogle SpreadSheetsなどが想定されていますが、FreeStyleWikiなんで、これを使うことにしました。ありがとうございます。
- 経度・緯度の表し方と変換
- プラグインでは使ってませんが、サンプルデータ作成の際に上記ページの変換式を使用しました。YahooMap プラグインでは(というかYahooでは)日本測地系が、gvamt2 プラグイン、gvalt プラグインでは(というかGoogleでは)世界測地系が、それぞれ用いられているため。ありがとうございます。
- ジオどす
- 京都通り名ジオコーダAPI。ニッチな用途ですが、だからこそ便利。ありがとうございます。
履歴
- 2009/12/05に、gvamap プラグインを追加。ついでに書式を一部修正。
- 2009/12/06に、gvalmap プラグインを追加。
- 2009/12/07に、gvamt2 プラグイン、gvamap2 プラグインを追加。ついでに表のページングに対応。
- 2009/12/09に、gvamt2 プラグインのキャッシュ対応。
- 2013/12/28に、gvamt2 プラグイン、gvalt プラグイン以外のプラグインを削除(Google Visualization APIの仕様変更のためか、動作しなくなってしまったため)。