インフォグラフィックのスタートガイド

重要: 動的でインタラクティブな Google グラフは積極的にメンテナンスされていますが、静的な Google Image Charts は 2012 年に正式にサポートを終了しました。2019 年 3 月 18 日に無効にいたしました。

このページでは、インフォグラフィック サーバーを使用して画像を作成する基本的な方法について説明します。

インフォグラフィックの利用ポリシー

インフォグラフィックについて、1 日あたりのリクエストの数に制限はありません。ただし、Google は不正とみなされた使用をブロックする権利を有します。

  1. スタートガイド
  2. 最適化
    1. 読み込み時間を改善する
    2. POST の使用

スタートガイド

インフォグラフィック サーバーは、URL GET または POST リクエストに応答して画像を返します。画像の種類やサイズなど、グラフィックの作成に必要なすべてのデータが URL に含まれています。たとえば、次の URL をコピーしてブラウザに貼り付けます。

https://chart.googleapis.com/chart?chs=150x150&cht=qr&chl=Hello%20world

表示される画像は、「Hello World」というフレーズの QR コード表現です。フレーズを自分の名前に変更して、ブラウザを更新してください。たったこれだけです。

URL についてもう少し詳しく説明すると、次のようになります。

https://chart.googleapis.com/chart?chs=150x150&cht=qr&chl=Hello%20world

  • https://chart.googleapis.com/chart? - すべてのインフォグラフィック URL は、このルート URL で始まり、その後に 1 つ以上のパラメータと値のペアが続きます。必須パラメータとオプション パラメータは各イメージに固有です。イメージのドキュメントをご覧ください。
  • chs - 画像のピクセル単位のサイズ(<width>x<height> の形式)
  • cht - 画像の種類: 「qr」は QR コードを表します。
  • chl - エンコードするデータ。URL エンコードする必要があります。

最適化

画像の最適化には、以下のようなものがあります。

画像が多いページの読み込み時間を短縮する

ページ内の画像の数が少ない場合は、標準のベース URL https://chart.googleapis.com/chart で問題ありません。画像が複数ある場合は、chart.apis.google.com の直前に 0 ~ 9 の数字とドットを追加できます。ページ上の各画像に異なる数値を指定すると、ブラウザはより多くの画像が順番に読み込まれるのを待たずに、同時に読み込もうとします。ただし、これが必要になるのは、1 つのページに 5 つ以上の画像を読み込む場合に限られます。次に例を示します。

  • http://0.chart.apis.google.com/chart?cht=...
  • http://1.chart.apis.google.com/chart?cht=...
  • http://2.chart.apis.google.com/chart?cht=...
  • ...

POST の使用

URL の長さは 2K に制限されているため、画像にそれを超えるデータがある場合は、GET ではなく POST を使用する必要があります。(GET は、ブラウザの URL バーに画像の URL を入力するか、ウェブページの <img> 要素のソースとして使用するときに使用します)。POST を実行するには、PHP や PERL などの別の言語による追加のプログラミングが必要です。

POST は、プログラムでページを生成するときにも使用できます。

POST を使用して画像をリクエストする方法を確認する。