前回，為替レートをグラフ化できるようになったので，今度はそれをブログパーツ風に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 |
注意事項
- 個人が自宅サーバで提供していますので，無保証です
- いつサーバが止まって画像が出なくなるかわかりませんし，予告無く提供を取りやめる可能性もありますのでご注意ください
内部動作について
為替情報
- 為替レートの情報は，毎日citibankのサイトから取得しています．お昼頃に自動取得しています
- 各通貨の仲値(TTM)をグラフ化しています
グラフの作成方法
- グラフの作成には，Google Chart APIを使っています
- そのため，もしGoogle Chart APIのサービスが止まると，このチャートグラフは出なくなります
グラフの表示方法
- Chart APIで為替チャートを表示するために必要なパラメータを，毎日の為替レート取得時にカモランド内部で生成しています．例えば10/25のUSDであれば，
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&cht=lc&chxt=x,y&chxl=0:|2008-09-26|〜
受け取ったブラウザは，次のリクエストを送信します．
GET /chart?chs=200x70&cht=lc&chxt=x,y&chxl=0: |2008-09-26|〜
見ての通り，
が，
になっており，こうなるとGoogle側でエラーになってグラフは得られません．
そのため，このエラーを回避するために，
ではなく
というレスポンスを返すようにしています．こうすれば，ブラウザはGoogleに対して
というリクエストを送信し，正常にグラフが得られます．
(※CGIによるリダイレクトの方法については，短縮URLの実装などを参照．)
]]>
