寝太郎の江戸風呂。ね！

[PR]

2024/04/30 (Tue.)

国の色分け地図

Google Chart Tools / Image Charts (aka Chart API)  の Map Charts を利用して、国を色分けした地図を作成しましょう。
題材は、2011年のサッカー・アジアカップの出場16か国です。


グループステージは、4グループに分けて争われます。
それぞれのグループを4色で色分けしました。
日本が属するのはBグループで、青色で表示しています。
サウジアラビア、シリア、ヨルダンという中東でも西側の国と同一グループです。
各グループ２位までが決勝トーナメントに出場できます。
開催は2010年1月。日本の活躍を期待します。

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

Google Spreadsheets のフォーム機能を利用して　掲示板を作成する。

Google Spreadsheets には、フォーム( Form )機能というものがあります。それは、データの入力用のページを作成するというものです。そして、そのデータの入力用のページを知っている人は、誰でもそのシートにデータを入力することができます。Google のアカウントを持っていなくても、またログインしていなくても入力できるというのが特徴です。

メールに埋め込んで、アンケートを集めるというような使い方が考えられています。

一方、Google Spreadsheets は、非公開、限定公開、一般公開というように閲覧権限を区分することできます。この閲覧制限とフォーム機能を組み合わせることによって、プライベート用、グループ用、パブリック用に分けて、データ登録場所を作ることができます。

今回は、公開シートを利用した公開掲示板「Public Message Board」を作成してみました。

■　リンク先
Public Message Board

これは、公開している　Google Spreadsheets の「Public Message Board」でフォーム「Public Message Board」を作成して、それぞれを1つのページ内に表示させるようにしたものです。簡易掲示板といった趣です。

これを応用して非公開のシートで同じようなものを作成すれば、自分だけが見るプライベートメッセージや コメントの受付などに活用できるでしょう。

今回は、iframe を用いた簡便な方法でメッセージを表示しましたが、Google Visualization API などを利用すれば、もっと見栄えのあるものになるでしょう。その辺りについては、勉強しながら、順次考えていきたいと思います。

2010/09/03 (Fri.) Trackback() Comment(0) Google Spreadsheets

Google の Virtual Keybord を使ってみる - Google Web Elements

Google のサービスに「Google Web Elements」というものがあります。Google が開発したサービスを自分のウェブページに埋め込めるというものです。その中で、面白いと思ったのが、「Virtual Keybord Element」です。

これをウェブページに埋め込むと、キーボードがページ上に出現します。そして、そこで入力した文字をテキストボックスに入れることができます。

Virtual Keybord Element を用いたハングルのバーチャル・キーボードのサンプルを作成してみました。

このVirtual Keybord Element 上で「ᄒ」「ト」「ᄂ」と連続して打つとテキストボックスに「한」という文字が現れます。続いて「ᄀ」「┬」「ᄀ」と打つと「ᅡᅡᅡᅡ국」に、「ᄋ」 「┤」と打つと「어」となります。３文字合わせると「한국어」となって、ハングルっぽくなります。ハングルの学習に使えそうですね。

2010/09/02 (Thu.) Trackback() Comment(0) Google Web Elements

Google Visualization Table を利用して簡単にテーブルを作成する。

dataTable

「Google Ajax API 動的ロード」では、Google Ajax API を動的にロードする方法があることを紹介しました。今回は、その具体的な例として、「visualization」パッケージを動的にロードして利用するツールの一例を示します。題材にしたのは、ページにテーブルを作成する「Google Visualization : Table」です。

皆さんは、WEBページにテーブルを作成するとき、面倒だと思ったことはありませんか?簡単なテーブルであっても、TABLE要素を記述して、TR要素を各行ごとに記述して、さらにセルの数だけ、TD要素を入れなければなりません。サンプルページ「dataTable.html」のテーブルは、そういうことはしていません。テーブルを挿入したい場所に次の記述をしているだけです。

<script
src="http://blog.cnobi.jp/v1/blog/user/c1c990de467ed4f31a60b43ae3632205/1283339276"
title=
"string:name;number:age;boolean:true|Nancy;36;false|Alice;17;false|Cozy;28;true">
</script>

データ部分は、SCRIPT要素のtotle属性に記述しています。このtitle属性を読み取って、Google Visualization の dataTable に放り込むことによって、テーブルを作成しています。データの各行は、パイプ「|」で区切っています。そして、各セルはセミコロン「;」で区分しています。一行目だけは特殊で、カラムのデータタイプとラベルをコロン「:」で関連つけています。

「http://blog.cnobi.jp/v1/blog/user/c1c990de467ed4f31a60b43ae3632205/1283339276」のソースコードを読めば、前回説明したような形で動的ロードを利用していることが分かります。今回は、その処理内容については、詳しく説明しませんが、動的ロードが非常に便利なものらしいことは、わかるかと思います。

2010/09/01 (Wed.) Trackback() Comment(0) Google Visualization

Google Ajax API 動的ロード

Google Ajax API を利用するには、まず HEAD要素内に次の記述をすることとされています。

<script type="text/javascript"
src="http://www.google.com/jsapi?key=ABCDEFG"></script>

このような静的記述の他に、Google Ajax API には、動的に Google AJAX API を導入する方法が用意されています。 その説明は「Google AJAX API の使用 - 動的ロード」にあります。

動的ロードを利用すれば、HTMLと Google Ajax API を分離し、プラグインのような形で JavaScript アプリケーションを提供することが可能になります。

では、動的ロードの流れを簡単に説明しましょう。

１　SCRIPT要素の生成とHEAD要素への追加
document.createElement('script')で SCRIPT要素を生成します。
そして、その src属性を
"http://www.google.com/jsapi?key=ABCDEFG&callback=loadPackage"
のように指定します。
callbackパラメータを記述することで、Google Ajax API　のロード後にそのコールバック関数が実行されます。
生成した SCRIPT要素をHEAD要素に追加します。

２　コールバック関数
上記の src要素で記述したコールバック関数を定義します。
通常、パッケージをロードする記述をします。
マップパッケージをロードする場合には、次のような記述になります。

function loadPackcage(){
google.load("maps", "2", {"callback" : packageLoaded});
}

ここで大事なのは、google.load の３番目の引数であるオブジェクトの中で、 　　パッケージのロード後に実行する関数を callback オプションで指定することです。

３　パッケージロード後実行関数
パッケージのロード後に実行される関数を定義します。
function packageLoaded() {

}
ロードされたパッケージのクラスを利用して、処理を記述します。

このように二度に渡ってコールバック関数を利用することによって、Google Ajax API を利用することができます。

次回は、この動的ロードによる Google Ajax API の利用例を紹介しましょう。

2010/08/31 (Tue.) Trackback() Comment(0) Google Ajax API