為替チャートをブログパーツ風にする

前回，為替レートをグラフ化できるようになったので，今度はそれをブログパーツ風にHTMLから自由に埋め込めるようにしてみた．→ グラフのページ

方針

HTMLに為替チャートを埋め込む方法だが，考えてみたところこんな感じだろうか．

方法	概要	特徴
JavaScriptインクルード	チャート部分をdocument.write()で出力するような外部JavaScriptファイルを用意して，HTMLからはそのファイルを<script src>で取り込むことによって表示する	画像だけでなく任意の内容を出力できる
iframe	チャート部分を出力する外部HTMLファイルを用意して，HTMLからはそれを<iframe>で取り込んで表示する	画像だけでなく任意の内容を出力できる．JavaScriptは不要
画像リダイレクト	表示したいチャートの画像ファイルを用意して，HTMLから<img src>で取り込んだ代表画像ファイルを表示したいチャートの画像ファイルにリダイレクトすることによって，表示する	画像しか表示できない．単なる画像表示でありJavaScriptも特別なタグも要らないので，WikiなどのCMSから扱いやすい．

今回は，チャートの画像だけなので，もっとも単純な画像リダイレクト方式にすることにした．

こういう風にして，チャート図を埋め込むことができます．

米ドルのチャートを設置する例．画像サイズ=200x70

<a href="http://kamoland.com/kawase/chart.html">
<img src="http://kamoland.com/kawase/vc/200x70/USD.png" alt="米ドル対円のチャート(最近1ヶ月)" border="0">
</a>

chart.htmlへのリンクは任意です．別にこれで被リンクを稼いでSEOをやろうなどとは思っていませんので．．．

<img src="～"> を使って，

http://kamoland.com/kawase/vc/(1)/(2).png

を，以下のパラメータで呼び出します．

パラメータ	名前	説明	例
(1)	画像サイズ	表示する画像のサイズです．横方向のピクセル数 x 縦方向のピクセル数です	200x70
(2)	通貨名	対円のレートを表示する通貨名です．以下の6通貨を使えます．(AUD:オーストラリアドル，CAD:カナダドル，EUR:ユーロ，GBP:英ポンド，NZD:ニュージーランドドル，USD:米ドル)	EUR

chs=200x70&cht=lc&chco=ff0000&chxt=x,y&chxl=0:|2008-09-26|2008-10-25|1:|90|110&chd=s:vwxqwwsusjiecgfmiejiijfXWN

です．

vc/(1)/(2).png で呼び出されるCGIでは，このパラメータを必要に応じて(画像サイズなど)書き換えた結果を使ってURLを生成し，そのURLへの302リダイレクトのレスポンスを返します
これによって，このCGIの代わりにGoogle Chart APIによって描画されたチャートのグラフが表示されることになります
CGIの呼び出しは，以下のようなリライトによって行われています

RewriteEngine on
RewriteRule ^/kawase/vc/([0-9]+x[0-9]+)/([A-Z]+).png$ /kawase/vc.cgi?sz=$1&c=$2 [PT]

最終的にはvc.cgiを，vc.cgi?sz=(1)&c=(2)というパラメータで呼び出すわけですが，パラメータを含んだり拡張子が画像でない場合はWikiなどから画像として扱えない場合があるため，このようにリライトすることで静的な画像ファイルのURLに見せかけています．

ChartAPIにリダイレクトするために，vc.cgiがHTTPレスポンスとして出力するLocationヘッダの内容で，はまりました．このLocationヘッダにおいては，ChartAPIのパラメータに含まれるコロン「:」を「%3A」に変換したものを返すようにしました．

どうもHTTPレスポンスのLocationヘッダの値にコロン「:」が含まれると，それを受け取ったブラウザがGETをかける時に，勝手にコロンの後に空白(スペース)を追加するのです．

具体的には，リダイレクトさせるために以下のようなレスポンスを返すと，

Location: http://chart.apis.google.com/chart?chs=200x70&amp;cht=lc&amp;chxt=x,y&amp;chxl=0:|2008-09-26|～

受け取ったブラウザは，次のリクエストを送信します．

GET /chart?chs=200x70&amp;cht=lc&amp;chxt=x,y&amp;chxl=0: |2008-09-26|～

見ての通り，

chxl=0:|2008-09-26～

が，

chxl=0: |2008-09-26～

になっており，こうなるとGoogle側でエラーになってグラフは得られません．

そのため，このエラーを回避するために，

chxl=0:|2008-09-26～

ではなく

chxl=0%3A|2008-09-26～

というレスポンスを返すようにしています．こうすれば，ブラウザはGoogleに対して

chxl=0:%3A|2008-09-26～

というリクエストを送信し，正常にグラフが得られます．

(※CGIによるリダイレクトの方法については，短縮URLの実装などを参照．)