動的アイコン

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

このページでは、URL を使用して作成できる、さまざまなコールアウト、バブル、ピン、その他のグラフィックの作成方法について説明します。

スタンドアロンの画像と同じ動的アイコン マーカーです。
https://chart.googleapis.com/chart?chst=d_bubble_icon_text_small&chld=ski|bb|Wheeee!|FFFFFF|000000

  1. はじめに
  2. 構文
  3. アイコンタイプ
  4. バブル
  5. 固定
  6. 楽しいスタイルのメモ
  7. 天気予報メモ
  8. 枠線付きフォント テキストのブロック（テキストのみ）
  9. 枠線付きフォント テキストのブロック（テキスト + アイコン）
  10. 使用可能なフラグとアイコンのリスト
  11. テキスト文字列
  12. シャドウ

はじめに

テキストと画像を組み合わせて、興味を引くさまざまなコールアウト、ピン、バブルを作成できます。このようなアイテムはダイナミック アイコンと呼ばれます。

テキストのみを含む大きなふきだし。 スタンドアロンの画像と同じ動的アイコン マーカーです。

構文

ルート URL: https://chart.googleapis.com/chart?

動的アイコンは、? 記号の後の次のパラメータをサポートしています。で置き換えてください。

パラメータ 必須または任意 説明
chst=<icon_string_constant> 必須

作成するアイコンの種類を記述します。

  • icon_string_constant - 作成するアイコンのタイプを表す文字列定数です。アイコンの選択方法については、以下のアイコンの選択をご覧ください。
chld=<icon_data> 必須

アイコンのサイズ、回転、テキスト、その他の必須データの記述に使用される特定のデータ。

  • icon_data - アイコンに適したパイプ区切り値のセット。このページのドキュメントでは、各アイコンタイプに必要な値について説明しています。

アイコンのタイプ

種類 例
バブル - 小さいまたは大きいテキストのバブルを選択します。アイコンの有無は選択できません。 アイコンとテキストを含む小さなバブル。
アイコンと 1 行のテキストを含む中程度のふきだし。
テキストのみを含む大きなふきだし
テキストのみを含む大きなふきだし。
ピン - ピンのタイプには、プレーン、スター付き、傾斜があり、アイコン、1 文字、または長いテキスト文字列を指定できます。 文字入りのプレーンピンアイコン付きのプレーンなピン
テキストと任意のタイトルを含むファンスタイルのメモ
タイトル、テキスト、天気アイコンを含む天気予報メモ
複数行からなる枠線付きテキスト ブロック、アイコンなし 枠線付きテキスト
アイコン付きの 1 行枠線付きテキスト ブロック

トップへ戻る

 

バブル

バブルには、大小、アイコンの有無、1 行のテキスト、複数行のテキストなど、さまざまな組み合わせがあります。バブルの種類とその構文を次の表に示します。各パラメータ値の説明については、次の表をご覧ください。

その他の注意事項:

  • バブルはすべて、入力したテキストの幅と高さに合わせてサイズ変更されます。
  • バブル定数は、_withshadow で終わるバリエーションをサポートします。_withshadow のバリエーションを使用すると、バブルの下にシャドウが追加されます。
テキスト icon 構文 シャドウのみ 例
1 行 × chst=
  d_bubble_text_small[_withshadow]

chld=
  <frame_style>|
  <text>|
  <fill_color>|
  <text_color>		 chst=
  [d_]bubble_text_small_shadow

chld=
  <frame_style>|
  <text>
chst=d_bubble_text_small
chld=
  bb|
  Launch+site|
  C6EF8C|
  000000
1 行 Yes chst=
  d_bubble_icon_text_small[_withshadow]

chld=
  <icon_string>|
  <frame_style>|
  <text>|
  <fill_color>|
  <text_color>		 chst=
  [d_]bubble_icon_text_small_shadow

chld=
  <icon_string>|
  <frame_style>|
  <text>
chst=d_bubble_icon_text_small
chld=
  wc|
  bb|
  Pay+Toilets|
  C6EF8C|
  000000
1 行 Yes chst=
  d_bubble_icon_text_big[_withshadow]

chld=
  <icon_string>|
  <frame_style>|
  <text>|
  <fill_color>|
  <text_color>		 chst=
  [d_]bubble_icon_text_big_shadow

chld=
  <icon_string>|
  <frame_style>|
  <text>
chst=d_bubble_icon_text_big
chld=
  snack|
  bb|
  $2.99+!|
  FFBB00|
  000000
複数行 × chst=
  d_bubble_texts_big[_withshadow]

chld=
  <frame_style>|
  <fill_color>|
  <text_color>|
  <text_line_1>
   |...|
  <text_line_n>		 chst=
  [d_]bubble_texts_big_shadow

chld=
  <frame_style>|
  <text_line_1>
   |...|
  <text_line_n>
chst=d_bubble_texts_big
chld=
  bb|
  FFB573|
  000000|
  Help+Wanted|
  Hours:+Midnight+to+3:00+AM|
  Good+pay,+interesting+work|
  Contact+V.+Helsing
複数行 Yes

chst=d_bubble_icon_texts_big[_withshadow]

chld=
  <icon_string>|
  <frame_style>|
  <fill_color>|
  <text_color>|
  <text_line_1>
   |...|
  <text_line_n>

chst=
  [d_]bubble_icon_texts_big_shadow
chld=
  <icon_string>|
  <frame_style>|
  <text_line_1>
   |...|
  <text_line_n>
chst=d_bubble_icon_texts_big
chld=
  home|
  bb|
  FFB573|
  000000|
  Haunted+House|
  Hours:+Midnight+to+3:00+AM|
  Ghouls,+Goblins,+and+Vampires|
  Bring+your+own+wooden+stake

構文

<アイコン文字列icon_string>
このドキュメントの最後に記載されているアイコンのいずれかを指定する文字列。
 
<frame_style>
テール方向。次のいずれかのテール方向の定数を選択します。
  • bb - バルーン フレーム、左下にテールバルーン フレーム、左下にテール

  • bbtl - バルーン フレーム、左上にテールバルーン フレーム、左上にテール

  • bbtr - バルーン フレーム、右上にテールバルーン フレーム、右上にテール

  • bbbr - バルーン フレーム、右下にテールバルーン フレーム、右下にテール

  • bbT - バルーン フレーム、テールなしバルーン フレーム（尾なし）

  • edge_bl - エッジフレーム、下端、左端にテールエッジフレーム、左端にテール

  • edge_bc - エッジフレーム、下端にテール、中央揃えエッジフレーム、下端の中央にテール

  • edge_br - エッジフレーム、下端にテールがあります。エッジフレーム、右下端にテール

  • edge_tl - エッジフレーム、上端と左端にテールエッジフレーム、上端、左端にテール

  • edge_tc - エッジフレーム、上端にテール、中央揃えエッジフレーム、上端中央のテール

  • edge_tr - エッジフレーム、上端にテール、右端にテール エッジフレーム、上端のテール、右端

  • edge_lt - エッジフレーム、左端の上端にテールエッジフレーム、左端の上端にテール

  • edge_lc - エッジフレーム、左端にテール、中央揃えエッジフレーム、左端中央にテール

  • edge_lb - エッジフレーム、左端の下端にテールエッジフレーム、左端の下端にテール

  • edge_rt - エッジフレーム、右端と上端にテールエッジフレーム、右端、上端にテール

  • edge_rc - エッジフレーム、右端にテール、中央揃えエッジフレーム、テール（右端）、中央

  • edge_rb - エッジフレーム、右端と下端にテール エッジフレーム、右端の下端にテール
<fill_colorfill_color>
ふきだしの塗りつぶしの色。HTML の 6 桁の 16 進数色コードで指定します。
<text_color>
テキストの色。HTML の 6 桁の 16 進数色コードで指定します。
<text>
1 行のバブルの場合は 1 行のバブルテキスト。スペースは + 記号で指定する必要があります。
<text_line_1>|...|<text_line_n>
1 行または複数行のテキスト（複数行のテキストバブル）。各行は | 記号で区切られています。最初の行がより大きく太字で表示されます。 スペースは「+」に置き換える必要があります。

シャドウのみ

バブルの場合は、上記の表に示す構文を使用して、独立型のシャドウを描画することもできます。例:

d_bubble_text_small マーカーの影
chst=
  d_bubble_text_small_shadow
chld=
  bb|Launch+site		 d_bubble_icon_text_small マーカーの影
chst=
  d_bubble_icon_text_small_shadow
chld=
  wc|bb|Pay+Toilets		 d_bubble_icon_text_big マーカーの影
chst=
  d_bubble_icon_text_big_shadow
chld=
  snack|bb|$2.99+!		 d_bubble_texts_big マーカーの影
chst=
  d_bubble_texts_big_shadow
chld=
  bb|Help+Wanted|
  Hours:+Midnight+to+3:00+AM|
  Good+pay,+interesting+work|
  Contact+V.+Helsing		 d_bubble_icon_texts_big マーカーの影
chst=
  d_bubble_icon_texts_big_shadow
chld=
  home|bb|Haunted+House|
  Hours:+Midnight+to+3:00+AM|
  Ghouls,+Goblins,+and+Vampires|
  Bring+your+own+wooden+stake

 

トップへ戻る

 

固定

アイコンや短いテキスト文字列を使って、さまざまなピンを作成できます。使用可能なピンタイプは次のとおりです。

ピンのタイプ バブル定数 例
1 つの文字またはアイコンを含むプレーンなピン

chst=d_map_pin_letter[_withshadow]
chst=d_map_pin_icon[_withshadow]

 文字入りのプレーンピンアイコン付きのプレーンなピン
1 つの文字またはアイコンが付いた傾斜/星付きピン

chst=d_map_xpin_letter[_withshadow]
chst=d_map_xpin_icon[_withshadow]
スケーラブルで回転可能な複数行のピン chst=d_map_spin スケーラブルで回転可能なピン

 

1 つの文字またはアイコンを含むプレーンなピン

小さなアイコンまたは 1 文字を入れることができる小さな直立ピンです。

文字の構文

chst=d_map_pin_letter[_withshadow]
chld=<character>|<fill_color>|<text_color>

アイコンの構文

chst=d_map_pin_icon[_withshadow]
chld=<icon_string>|<fill_color>
<文字>
[テキストピンのみ] 1 つのテキスト文字。
<アイコン文字列icon_string>
[アイコンのピンのみ] このドキュメントの最後に記載されているアイコンのいずれかを指定する文字列。
<fill_colorfill_color>
ふきだしの塗りつぶしの色。HTML の 6 桁の 16 進数色コードで指定します。
<text_color>
[テキストピンのみ] テキストの色（HTML の 6 桁の 16 進数色コード）。

シャドウのみ

このピンタイプに対してのみシャドウを描画するには、次の構文を使用します。

chst=d_map_pin_shadow

chld パラメータは、シャドウのみには必要ありません。

例


chst=d_map_pin_letter_withshadow
chld=A|FF0000|0000FF
chst=d_map_pin_letter
chld=%E5%8D%B1|FF0000|000000
chst=d_map_pin_icon
chld=camping|ADDE63
chst=d_map_pin_shadow

 

トップへ戻る

 

1 つの文字またはアイコンを含む傾斜付きピン/星付きピン

左または右に傾けるか、星を重ね合わせることができる小さなピンです。ピンのコンテンツには、1 つの文字または小さなアイコンを使用できます。

文字の構文

chst=d_map_xpin_letter[_withshadow]
chld=<pin_style>|<character>|<fill_color>|<text_color>|<star_fill_color>

アイコンの構文

chst=d_map_xpin_icon[_withshadow]
chld=<pin_style>|<icon_string>|<fill_color>|<star_fill_color>
<pin_style>
ピンのスタイル。次のいずれかの定数を選択します。
  • pin
  • pin_star
  • pin_sleft
  • pin_sright
<アイコン文字列icon_string>
[アイコンピン] このドキュメントの最後に記載されているアイコンのいずれかを指定する文字列。
<文字>
[テキストピン] 1 つのテキスト文字。
<fill_colorfill_color>
ふきだしの塗りつぶしの色。HTML の 6 桁の 16 進数色コードで指定します。
<text_color>
[テキストピン] テキストの色（HTML の 6 桁の 16 進数色コード）。
<star_fill_color>
[星のピン] 星の塗りつぶし色。HTML の 6 桁の 16 進数色で表します。

シャドウのみ

このピンタイプに対してのみシャドウを描画するには、次の構文を使用します。

chst=d_map_xpin_shadow

chld=<pin_style>

例


chst=d_map_xpin_letter
chld=pin_star|A|FF0000|000000
chst=d_map_xpin_letter
chld=pin_sleft|A|FF0000|000000
chst=d_map_xpin_icon
chld=pin_sleft|bank-dollar|52B552
chst=d_map_xpin_shadow
chld=pin_sleft

トップへ戻る

 

スケーリングと回転のあるテキストピン

このピンは、長いテキスト文字列を含めるように手動でスケーリングできます。ピンの回転サイズを調整したり、フォントのサイズや色を変更したりすることもできます。

構文

chst=d_map_spin
chld=<scale_factor>|<rotation_deg>|<fill_color>|<font_size>|<font_style>|<text_line_1>|...|<text_line_n>
<スケール係数scale_factor>
ピンサイズを指定するスケーリング ファクタ。これは正の浮動小数点数です。0.5 はスケーリングされていないピンのサイズです。0.25 はそのサイズの半分、1 はそのサイズの 2 倍、というようになります。
<rotation_deg>
ピンの回転（度数）。正の値と負の値を指定できます。垂直ピンには 0 を指定します。
<fill_colorfill_color>
ふきだしの塗りつぶしの色。HTML の 6 桁の 16 進数色コードで指定します。
<font_size>
テキストのフォントサイズ（ピクセル単位）。
<font_style>
標準テキストの場合は「_」（アンダースコア）、太字テキストの場合は「b」を使用します。
<text_line_1>...<text_line_n>
| 文字で区切られた 1 行または複数行のテキスト。

 

例


chst=d_map_spin
chld=1.7|180|C6E7DE|11|_|Raindrop
chst=d_map_spin
chld=2.1|0|FFFF42|13|b|Kumquats
chst=d_map_spin
chld=3|45|FFFF42|11|_|First+line|Second+line

トップへ戻る

 

楽しいスタイルのメモ

矢印スタイルのメモ

付箋や考えの吹き出しなど、ノベルティ テンプレートでさまざまなテキストメモを作成できます。必要に応じて、メモにタイトル行を含めることができます。

このメモはサイズが固定されており、テキストのサイズに合わせて拡大または縮小されることはありません。

構文

chst=d_fnote_title OR chst=d_fnote
chld=<note_type>|<note_size>|<text_color>|<text_alignment>|<text_line_1>|...|<text_line_n>
キスト
タイトル付きのメモの場合は d_fnote_title を指定し、タイトルなしのメモの場合は d_fnote を指定します。タイトル付きのメモでは、テキストの 1 行目がタイトルの書式設定（大きい太字）になります。
<note_typenote_type>
メモの形状を説明する文字列。以下の表にあるメモタイプの文字列のいずれかを選択します。
<メモのサイズnote_size>
1（大きいメモ）または 2（小さいメモ）。テンプレートのサイズは固定されています。テンプレートがテキストに合わせて拡大または縮小することはありません。両方のサイズでテストして、テキストがより見やすいかを確認します。
<text_color>
テキストの色。6 桁の 16 進数色コードです。アルファ値は使用できません。
<テキスト_位置揃えtext_alignment>
ヘッダーを含むすべてのテキストの配置。次のいずれかの値を選択します。
  • l - （'L'）左揃え
  • h - 中央揃え
  • r - 右揃え
<text_line_1>| ...|<text_line_1 text_line_1line_n>
メモのテキスト。| 文字を使用して改行します。chst=d_fnote_title の場合、テキストの最初の行がタイトルとして書式設定されます。

メモタイプのテンプレート

メモ テンプレートでは、次のテンプレートがサポートされています。それぞれの note_type 文字列がテンプレートの下に表示されます。

注: テキスト文字列では大文字と小文字が区別されます。


arrow_d

balloon

pinned_c

sticky_y

taped_y

thought

 

例

説明 例
タイトルのメモ: chst=d_fnote_title。テキストの最初の行がタイトルとして使用されます。サイズは大きいメモ（1）です。
chst=d_fnote_title
chld=pinned_c|1|004400|l|Joe's|Today+2-for-1+!|555-1234
タイトルなしのメモ: chst=d_fnote.テキストは中央揃えで配置されます。
chst=d_fnote
chld=thought|1|0088FF|h|Why+am+I+here?

昔のジョークの便利なテンプレート。
chst=d_fnote
chld=arrow_d|1|000000|h|Your|shoe's|untied

トップへ戻る

 

天気予報のメモ

天気インジケーターのアイコンからメモを作成できます。楽しいスタイルのメモと同様のレイアウトですが、テキストの色は常に黒で、テキストは常に左揃えになり、1 ～ 3 行のテキストしか表示されません。

このメモはサイズが固定されており、テキストのサイズに合わせて拡大または縮小されることはありません。

構文

chst=d_weather
chld=<note_type>|<weather_icon>|<title>|<line_2>|<line_3>
キスト
d_weather は天気情報を示します。
<note_typenote_type>
このメモに使用するテンプレート。上記の楽しいスタイルのノートリストに記載されているノートの文字列のいずれかを使用します。
<天気情報アイコンweather_icon>
以下の表に示す天気アイコン文字列のいずれか。1 つのメモで 1 つの天気アイコンを使用できます。
<title>|<line_2>|<line_3>
タイトルと、最大 2 行のテキスト（この追加のテキスト行は省略可能です）。タイトルをより大きく、太字にします。

天気アイコン

以下に、サポートされている天気アイコンのリストを示します。各アイコンの weather_icon の文字列を示しています。

注: テキスト文字列では大文字と小文字が区別されます。


clear-night-moon

cloudy-heavy

cloudy-sunny

cloudy

rain

rainy-sunny

snow

snowflake

snowy-sunny

sunny-cloudy

sunny

thermometer-cold

thermometer-hot

thunder

windy

 

例

説明 例
taped_y スタイル テンプレートにタイトルと 2 行が示されている天気メモ。

chst=d_weather
chld=taped_y|sunny|Barcelona|max+25°C|min+15°C
冬への願い事。

chst=d_fnote
chld=thought|sunny|I+wish...

トップへ戻る

 

枠線付きフォント テキストのブロック（テキストのみ）

 

矢印スタイルのメモ

白地に枠線付きテキストのブロックを作成できます。テキストとアイコンを使用する場合は、アイコンをサポートする単一行の種類の使用を検討してください。

構文

chst=d_text_outline
chld=<text_fill_color>|<font_size>|<text_alignment>|<outline_color>|<font_weight>|<text_line_1>|...|<text_line_n>
<テキスト_fill_colortext_fill_color>
テキストの塗りつぶしの色。これは 6 桁の 16 進数色コードです。アルファ値は使用できません。
<font_size>
フォントサイズをピクセル単位で指定する数値。
<テキスト_位置揃えtext_alignment>
ヘッダーを含むすべてのテキストの配置。次のいずれかの値を選択します。
  • l - （'L'）左揃え
  • h - 中央揃え
  • r - 右揃え
<outline_color>
テキストの枠線の色。これは 6 桁の 16 進数色コードです。アルファ値は使用できません。
<font_weight>
標準テキストまたは太字テキスト。標準テキストにはアンダースコア「_」、太字テキストには「b」を使用します。
<text_line_1>| ...|<text_line_1 text_line_1line_n>
メモのテキスト。| 文字を使用して改行します。chst=d_fnote_title の場合、テキストの最初の行がタイトルとして書式設定されます。

 

例



chst=d_text_outline
chld=FFCC33|16|h|FF0000|b|Mad+Scientist|Boo

chst=d_text_outline
chld=FF65BB|20|h|00FF00|_|Freshly+Made+Pie

トップへ戻る

 

 

枠線付きフォント テキストのブロック（テキスト + アイコン）

1 行の枠線付きテキストと、ブロックの上、左、下、右にアイコンを作成できます。アイコンが不要な場合は、枠線付きフォント テキストのブロックを使用してください。

構文

chst=<icon_position_string>
chld=<text>|<font_size>|<font_fill_color>|<icon_name>|<icon_size>|<icon_fill_color>|<icon_and_text_border_color>
<icon_position_string>
テキスト ボックス内でアイコンを表示する場所を指定します。次のいずれかの値を選択します。
  • d_simple_text_icon_below - アイコンをボックスの下部に配置します: アイコンが画面下部に表示されます。
  • d_simple_text_icon_above - アイコンをボックスの上部に配置します: クリックします。
  • d_simple_text_icon_left - アイコンをボックスの左側に配置します。（左のアイコン）。
  • d_simple_text_icon_right - アイコンをボックスの右側に配置します。（右のアイコン）。
<text>
表示するテキスト。1 行のみ。スペースには「+」を使用します。
<font_size>
フォントサイズをピクセル単位で指定する数値。
<font_fill_colorfont_fill_color>。
テキストの塗りつぶしの色。6 桁の文字列で指定します。アルファ値はサポートされていません。
<icon_name>
このドキュメントの最後に記載されているアイコン名のいずれか。
<icon_size>
アイコンの高さ（ピクセル単位）。サポートされる値は、12、16、24 です。
<icon_fill_color>
アイコンの色。6 桁の文字列で指定します。アルファ値はサポートされていません。
<icon_and_text_border_color>
アイコンとテキストを囲む枠線の色。6 桁の文字列で指定します。アルファ値はサポートされていません。

トップへ戻る

使用可能なフラグとアイコンのリスト

以下の画像は、適切なパラメータを使用してダイナミック アイコンに使用できます。

注: テキスト文字列では大文字と小文字が区別されます。

注: 使用できるアイコンのサイズは、12、16、24 のみです。

基本的なアイコン

Glyphish.com のアイコン

これらのアイコンは Joseph Wain / glyphish.com によるものです。この作品はクリエイティブ・コモンズ表示 3.0 米国ライセンスにより使用許諾されています。

フラグ

以下は、一部の国や地域のフラグです。

トップへ戻る

テキスト文字列

リクエストで送信される表示テキストはすべて UTF-8 でエンコードしてから、URL でエンコードする必要があります。これは、URL セーフでない文字にのみ影響します（URL セーフな文字のほとんどは、a ～ z の英字の大文字と小文字、および短い句読点です）。たとえば、文字「è」は UTF-8 で URL エンコードされた値は「%C3%A8」、中国語の文字の「駅」は「%E9%A7%85」です。ほとんどのブラウザでは、エンコードされていない値を URL 文字列（例: 「駅」）で使用でき、バックグラウンドでエンコードされます。 ただし、画像 URL を表示しているブラウザがこれを行わない場合もあります。そのため、通常は、テキスト文字列内の ASCII 以外の文字をすべて UTF-8 で URL エンコードすることをおすすめします。なお、これはふきだしやピンに表示されるテキストにのみ適用されます。URL 構文に含まれる &、| などの文字には適用されません。

シャドウ

多くのアイコンにシャドウを付けたり、アイコンそのものを使用せずに一部のアイコンにシャドウを描画したりすることもできます。

影付きアイコン 影付きピン

これらのアイコンの多くは、シャドウの有無にかかわらず描画できます。シャドーイングを利用するオプションがある場合は、アイコン名に _withshadow で終わるバージョンと、その末尾がない別のバージョンがあります。シャドウが必要かどうかに応じて、いずれかの末尾のアイコンを指定できます。

中程度のテキストふきだしと、シャドウありとシャドウなしのピンの例を以下に示します。

シャドウなしのふきだし
chst=d_bubble_icon_text_big		 影付きふきだし
chst=d_bubble_icon_text_big_withshadow
アイコン付きのプレーンなピン
chst=d_map_pin_icon		 アイコン付きのシンプルな影付きピン
chst=d_map_pin_icon_withshadow

自立型シャドウ シャドウのみ

一部のアイコンタイプでは、シャドウ自体を描画できます。この方法は、グラフィック上で複数のシャドウが重なっているアイコンを使用していて、アイコンが近すぎて一方の影が別のグラフィックに重なってしまっている場合に便利です。シャドウのみを描画できるかどうかについては、特定のアイコンタイプのドキュメントをご覧ください。

トップへ戻る