このドキュメントでは、HTTP POST を使用して画像をリクエストする理由と方法について説明します。
概要
コードを使用して画像をリクエストする場合や、2,000 文字を超える URL が必要な場合は、HTTP POST を使用して画像リクエストを送信する必要があります。インフォグラフィック サーバーは HTTP POST を最大 16,000 長までサポートします。
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 リクエストへのレスポンスは、GET リクエスト レスポンスと同じ PNG 画像です。
ヒント: ブラウザはリクエストを特定の 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>
PHP を使用した POST リクエスト
ほとんどのサーバーサイド言語では、明示的な 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 の例よりも簡単です。たとえば、次に示すように、<img>
タグを使用して POST ページを指定するだけです。
another_page.html
<img width='300' height='300' src='imageserver-image.php'>