前回,為替レートをグラフ化できるようになったので,今度はそれをブログパーツ風に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&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の実装などを参照.)

kamolandをフォローしましょう


© 2017 KMIソフトウェア