寝太郎の江戸風呂。ね！

[PR]

2024/11/22 (Fri.)

吹き出しを作る。Dynamic Icons - Google Chart Tools

Google Chart Tools/Image Charts(aka Chart API)の Dynamic Icons については、これまで次の記事を掲載してきました。
「文字列を画像にする。Dynamic Icons - Google Chart Tools」
「文字列に枠を付けた画像を作成する。Dynamic Icons - Google Chart Tools」
「アイコン付の文字列画像を作成する。Dynamic Icons - Google Chart Tools」
今回は、文字列を吹き出し(Bubble)で囲んだ画像を作成するすツールを紹介します。
私は、「バブルテキスト(Bubble Text)」と呼んでいます。下記のフォームにテキストやパラメータを入力して、「getPNG(Bubble Text)」ボタンを押して下さい。入力したテキストとアイコンを持つPNGイメージが作成されます。アイコンは、「Google Chart Tools / Image Charts (aka Chart API) Dynamic Icons の Image List」から、アイコンを選んで、その名前を入力して下さい。アイコンが要らない場合は「Icon」の欄はブランクにして下さい。


テキストをパイプ「|」で区切れば、マルチライン(複数行）にすることができます。この場合、「Size」を「small」に指定しても「big」で出力します。

2010/08/26 (Thu.) Trackback() Comment(0) Google Chart

アイコン付の文字列画像を作成する。Dynamic Icons - Google Chart Tools

前々回の「文字列を画像にする。Dynamic Icons - Google Chart Tools」では、
Google Chart Tools/Image Charts(aka Chart API)の Dynamic Icons を利用して、文字列をアウトラインフォントのようにして画像で返すツールを記事にしました。今回は、文字列にアイコンを加えて画像にして返すツールを紹介します。
「Outline Font Text Blocks（icon）」というタイプの画像作成ツールです。私は、「アイコンテキスト」と呼んでいます。下記のフォームにテキストやパラメータを入力して、「getPNG(Icon Text)」ボタンを押して下さい。入力したテキストを持つPNGイメージが作成されます。テキストはシングルライン(改行なし）のみです。アイコンは、「Google Chart Tools / Image Charts (aka Chart API) Dynamic Icons の Image List」から、アイコンを選んで、その名前を入力して下さい。


なお、アイコンの指定がない場合は、エラーとしないで、アイコンのない文字列のみをアウトラインにした画像を返すようにしています。ただし、文字は中央で、ボールドに固定です。これは、前々回の「文字列を画像にする。Dynamic Icons - Google Chart Tools」で利用した「Outline Font Text Blocks（no icon）」というタイプの画像作成ツール(私は「Outlined Text」と呼んでいます。）を使っています。この場合は、テキストをパイプ「|」で区切れば、マルチライン(複数行）にすることができます。

2010/08/25 (Wed.) Trackback() Comment(0) Google Chart

文字列に枠を付けた画像を作成する。Dynamic Icons - Google Chart Tools

前回の「文字列を画像にする。Dynamic Icons - Google Chart Tools」では、Google Chart Tools/Image Charts(aka Chart API)の Dynamic Icons を利用して、文字列をアウトラインフォントのようにして画像で返すツールを記事にしました。今回は、文字列を矢印や吹き出しで囲んだ画像にして返すツールを紹介します。
「Fun Style Note」というタイプの画像作成ツールです。下記のフォームにテキストやパラメータを入力して、「getPNG(Fun Style Note)」ボタンを押して下さい。入力したテキストを持つPNGイメージが作成されます。


Fun Style Notes は現在、次の６種類です。
大きさは、それぞれ大小の２種類が用意されています。下に表示しているのは小さい方です。


記事の中の強調したいところや注意点を表現する場合に便利ですね。

2010/08/24 (Tue.) Trackback() Comment(0) Google Chart

文字列を画像にする。Dynamic Icons - Google Chart Tools

Google Chart Tools/Image Charts(aka Chart API)には、Dynamic Icons というアイコンを作成するための API があります。その中に文字列をアウトラインフォントのようにして画像で返すツールが用意されています。返される画像は PNG イメージです。

文字列は、UTF-8 で URLエンコードする必要があります。いちいち「encodeURIComponent で文字列を UTF-8でURIエンコード。」を使ってエンコードしてから、URL を組み立てるのは面倒なので、一気に画像を作成するツールを作成しました。


複数行にしたいときは、テキストをパイプ「|」で区切って下さい。

2010/08/23 (Mon.) Trackback() Comment(0) Google Chart

Google Map Chart にタイトル、凡例などを追加する。

前々回の「Google Chart Tools の Map Chart で日本地図。」、前回の「都道府県を色分けした地図を作る。」と続き、Google Chart Tools/Image Charts(aka Chart API) の Map Chart を使って、国、地域の形を作りました。今回は、これらに標題や凡例、フラグなどを用いて情報を付け加えましょう。

題材には、今年の夏の甲子園を取り上げましょう。
まず、優勝の沖縄、興南高校です。

http://chart.apis.google.com/chart
?cht=map:fixed=26,127.5,27,129
&chs=200x100
&chld=JP-47
&chco=999999|FF0000&chm=fChampion,000000,0,1,10
&chdl=%E8%88%88%E5%8D%97
&chtt=%E7%86%B1%E9%97%98+
%E5%A4%8F%E3%81%AE%E7%94%B2%E5%AD%90%E5%9C%92|
2010

チャート上にマーカーを付加するには、chmパラメータを使います。最初の１文字はマーカーの種類です。「f」はフラグです。2文字目以降にフラグの入れる文字列、色、系列、系列の何番目か、大きさをカンマで区切って指定します。

chdlパラメータは、凡例です。日本語は UTF-8 でURLエンコードする必要があります。私は「encodeURIComponent で文字列を UTF-8でURIエンコード。」で変換しました。

chttパラメータは、チャートタイトルを指定します。 これも日本語は、UTF-8 でURLエンコードする必要があります。スペース文字には「+」改行はパイプ「|」を使います。

続いてベスト８です。

http://chart.apis.google.com/chart
?cht=map:fixed=31,129,46,146
&chs=400x300
&chld=JP-14|JP-28|JP-12|JP-07|JP-43|JP-13|JP-15
&chco=999999|FF3300|FF6600|FF9900|FFCC00|FFFF00|FFFF33|FFFF66
&chdl=%E6%9D%B1%E6%B5%B7%E5%A4%A7%E7%9B%B8%E6%A8%A1
|%E5%A0%B1%E5%BE%B3%E5%AD%A6%E5%9C%92|
%E6%88%90%E7%94%B0|
%E8%81%96%E5%85%89%E5%AD%A6%E9%99%A2|
%E4%B9%9D%E5%B7%9E%E5%AD%A6%E9%99%A2|
%E9%96%A2%E6%9D%B1%E4%B8%80|
%E6%96%B0%E6%BD%9F%E6%98%8E%E8%A8%93

2010/08/22 (Sun.) Trackback() Comment(0) Google Chart