忍者ブログ

2024
11
23

[PR]

×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

2024/11/23 (Sat.)

2010
08
30

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
吹き出しを作る。Dynamic Icons - Google Chart Tools
マップピンを作る。Dynamic Icons - Google Chart Tools
天気予報画像を作る。Dynamic Icons - Google Chart Tools

これらの中には、アイコンの名前をパラメータとして指定する必要がるものがあります。アイコンの名前は、「Google Chart Tools / Image Charts (aka Chart API) Dynamic Icons の Image List」から選ぶように記載していました。

今回は、そのページを開くのは面倒という方(筆者自身ですが)のために、アイコン名を簡単に取得できるツールを作成しました。リストの中のアイコンをクリックすると、その名前がテキストボックスに表示されます。表示されたアイコンの名前をコピペして、パラメータに挿入しようというものです。


PR

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

2010
08
28

2010
08
27

マップピンを作る。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
吹き出しを作る。Dynamic Icons - Google Chart Tools
今回は、マップピン(Map Pin)を作成するすツールを紹介します。

下記のフォームにテキストやパラメータを入力して、「getPNG(Map Pin)」ボタンを押して下さい。入力した文字かアイコンを持つPNGイメージが作成されます。アイコンの指定がある場合は、文字は無効です。アイコンも文字もブランクの場合は影だけ表示されます。アイコンの指定がある場合、影だけの場合、文字が一文字だけの場合は、「xpin」というタイプのマップピンを作成します。「Style」を指定することで星マークを付けたり、左右に傾けたりすることができます。

文字が二文字目以上の場合には、「spin」という特別なマップピンが作成されます。
また、「Scale」を「0.5」、「Rotation」を「0」以外に指定した場合にも「spin」tとなります。「Scale」の数値を変えると拡大または縮小されます。「Rotation」を変えると回転します。逆さにするときは「180」です。
アイコンは、「Google Chart Tools / Image Charts (aka Chart API) Dynamic Icons の Image List」から、アイコンを選んで、その名前を入力して下さい。


上記のフォームでは作成しませんが、より簡単なパラメータの指定方法もあります。
「xpin」でも「spin」でもない、ただの「pin」タイプです。
その構文は、次のとおりです。「_withshadow」を削除すると、影なしになります。
●文字
http://chart.apis.google.com/chart?chst=d_map_pin_letter_withshadow&chld=
character|fill_color|text_color
●アイコン
http://chart.apis.google.com/chart?chst=d_map_pin_icon_withshadow&chld=
icon|fill_color
●影のみ
http://chart.apis.google.com/chart?chst=d_map_pin_shadow

2010/08/27 (Fri.) Trackback() Comment(0) Google Chart

2010
08
26

吹き出しを作る。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

2010
08
25

アイコン付の文字列画像を作成する。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

Links

ご注意

当サイトのスクリプトは、ブラウザが FireFox 3.0 であることを前提に作成されています。IE などでは正常に動作しないものがあります。

カテゴリー

ブログ内検索

最新記事

カレンダー

10 2024/11 12
S M T W T F S
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30

アーカイブ

RSS

最新CM

[04/15 jTemplate]
[05/22 寝太郎]

プロフィール

HN:
寝太郎
性別:
非公開

バーコード

P R

アクセス解析

リンク

NSM

コガネモチ

フリーエリア