このドキュメントでは、HTTP POST を使用して画像をリクエストする理由と方法について説明します。
概要
コードを使って画像をリクエストする場合、または 2,000 文字を超える URL が必要な場合は、HTTP POST を使用して画像リクエストを送信する必要があります。インフォグラフィック サーバーは、最大 16K の長さの HTTP POST リクエストをサポートします。
最も基本的な種類の POST リクエストの例（<form> 要素を使用したもの）を次に示します。
この画像は、実際には <iframe> でホストされているページです。フォームコードは次のとおりです。
<form action='https://chart.googleapis.com/chart' method='POST'> <input type='hidden' name='cht' value='qr' /> <input type='hidden' name='chs' value='300x300' /> <input type='hidden' name='chl' value='This is my QR code'/> <input type='submit' /> </form>
有効な POST リクエストに対するレスポンスは PNG 画像であり、GET リクエストのレスポンスと同じです。
ヒント: 一部のブラウザは特定の URL へのリクエストをキャッシュに保存するため、POST パラメータを変更しても、ブラウザは実際には画像サーバーへの再クエリを行いません。このため、頻繁に変更される画像を再読み込みしようとすると問題が発生することがあります（テスト中に問題が発生することがあります）。この問題を回避するには、POST URL の末尾に ?chid=value を追加します。この場合、value はリクエストごとに変更されます。画像サーバーはこのパラメータを無視し、ブラウザはクエリを再送信し、キャッシュ バージョンを再読み込みするのではなく、
POST を使用するにはいくつかの方法がありますが、いずれの方法でも、ページコードまたはページをホストするサーバーのいずれかに追加のコーディングが必要になります。POST を使用するには、通常、画像ごとに個別のページを作成し、<iframe> を使用するか、<img> タグとして、これらのページをメインページに埋め込むかリンクします（下記を参照）。
JavaScript と PHP の両方で POST を使用する例を次に示します。
POST リクエストに JavaScript を使用する
JavaScript POST リクエストを行う最も簡単な方法は、<input> 要素に画像データを含むフォームをホストするページを作成し、そのページの onLoad() ハンドラでそのページのリクエストを POST 送信することです。これにより、ページは画像 PNG に置き換えられます。この画像をホストするページに、<iframe> を使用してこのページを含める必要があります。画像ページのコードは次のとおりです。
注: 以下のサンプルでは、URL 内の変化する値に設定された chid パラメータが含まれています。これにより、上記のヒントで説明した理由により、ブラウザが更新されます。画像が頻繁に変更されない場合は、そのパラメータを追加する必要はありません。
post_infographic.html
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type='application/javascript'>
// Send the POST when the page is loaded,
// which will replace this whole page with the retrieved image.
function loadGraph() {
var frm = document.getElementById('post_form');
if (frm) {
frm.submit();
}
}
</script>
</head>
<body onload="loadGraph()">
<form action='https://chart.googleapis.com/chart' method='POST' id='post_form'
onsubmit="this.action = 'https://chart.googleapis.com/chart?chid=' + (new Date()).getMilliseconds(); return true;"> <input type='hidden' name='cht' value='qr' />
<input type='hidden' name='cht' value='qr' />
<input type='hidden' name='chs' value='300x300' />
<input type='hidden' name='chl' value='This is my QR code' />
<input type='submit' />
</form>
</body>
</html>
<form> 要素を使用する場合は、文字列を URL エンコードする必要はありません。
この画像は、次のようにホストページで <iframe> を使用して別のページに読み込めます。
another_page.html
<iframe src="post_infographic.html" width="300" height="200"></iframe>
POST リクエストに PHP を使用する
ほとんどのサーバーサイド言語は明示的な POST リクエストをサポートしています。PHP を使用して POST リクエストを行う例を次に示します。この例は、150 個のランダムな値を持つ QR コードを生成するページを示しています。これを自分で使用するには、$qrcode 配列をカスタマイズして独自の値を含めます。
注: 以下のサンプルでは、URL 内の変化する値に設定された chid パラメータが含まれています。これにより、上記のヒントで説明した理由により、ブラウザが更新されます。イメージが頻繁に変更されない場合は、そのパラメータを追加する必要はありません。
imageserver-image.php
<?php
// Create some random text-encoded data for a QR code.
header('content-type: image/png');
$url = 'https://chart.googleapis.com/chart?chid=' . md5(uniqid(rand(), true));
$chd = 't:';
for ($i = 0; $i < 150; ++$i) {
$data = rand(0, 100000);
$chd .= $data . ',';
}
$chd = substr($chd, 0, -1);
// Add image type, image size, and data to params.
$qrcode = array(
'cht' => 'qr',
'chs' => '300x300',
'chl' => $chd);
// Send the request, and print out the returned bytes.
$context = stream_context_create(
array('http' => array(
'method' => 'POST',
'content' => http_build_query($qrcode))));
fpassthru(fopen($url, 'r', false, $context));
?>
この画像を埋め込む方法は JavaScript の例よりも簡単です。これは、以下に示すように、POST ページを <img> タグでポイントするだけであるためです。
another_page.html
<img width='300' height='300' src='imageserver-image.php'>