差分表示


[[前回>為替レートをGoogleChartAPIでグラフ化]],為替レートをグラフ化できるようになったので,今度はそれをブログパーツ風にHTMLから自由に埋め込めるようにしてみた.
[[前回>為替レートをGoogleChartAPIでグラフ化]],為替レートをグラフ化できるようになったので,今度はそれをブログパーツ風にHTMLから自由に埋め込めるようにしてみた.→ &link(グラフのページ,http://kamoland.com/kawase/chart.html)

//parent=時事,その他/Blog
*方針
HTMLに為替チャートを埋め込む方法だが,考えてみたところこんな感じだろうか.

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

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

*設置例
こういう風にして,チャート図を埋め込むことができます.

&ltitle(米ドルのチャートを設置する例.画像サイズ=200x70);
--(
<a href="http://kamoland.com/kawase/chart.html">
<img src="http://kamoland.com/kawase/vc/200x70/USD.png" alt="米ドル対円のチャート(最近1ヶ月)" border="0">
</a>
--)
#img(http://kamoland.com/kawase/vc/200x70/USD.png,l)
#img(,c)

chart.htmlへのリンクは任意です.別にこれで&link(被リンクを稼いでSEOをやろう,http://web-tan.forum.impressrd.jp/e/2008/10/01/4073);などとは思っていませんので...

*仕様
<img src="〜"> を使って,
--(
http://kamoland.com/kawase/vc/(1)/(2).png
--)
を,以下のパラメータで呼び出します.

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

*注意事項
-個人が自宅サーバで提供していますので,無保証です
-いつサーバが止まって画像が出なくなるかわかりませんし,予告無く提供を取りやめる可能性もありますのでご注意ください

*内部動作について
**為替情報
-為替レートの情報は,毎日&link(citibankのサイト,http://www.citibank.co.jp);から取得しています.お昼頃に自動取得しています
-各通貨の仲値(TTM)をグラフ化しています

**グラフの作成方法
-グラフの作成には,&link(Google Chart API,http://code.google.com/intl/ja/apis/chart/);を使っています
-そのため,もし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の実装]]などを参照.)


© 2019 KMIソフトウェア