授業の準備

(1)googleで無料で簡単にホームページが出来るサービスがあるのをご存知ですよね?
私も、あるのは知っていたのですが、使ったことはありませんでした。今、後期の生物分子の授業の準備をしていて、授業用にいいかな、と思い試してみました。

googleで無料で簡単にホームページが出来るサービスがあるのをご存知ですか?

上記HPには、次の様に書いてあります。
////
ワンクリックでページを作成
HTML は不要
デザインをカスタマイズ
情報のアクセスと共有の設定
無料 しかも幾つでも作成可能です
登録には、gmailが必要ですがgmailも無料ですので、もっていない方は収得しましょう
////

早速作ってみました。
https://sites.google.com/site/furuyard/home
確かにWord操作感覚で、HPを作れました。(HPはテストで、内容はありません)

(2)fusion tables(2013/5/28)へ質問(クエリ)を行うJavascriptを作ってみました。
この情報はネットに乏しいので、載せておきます。

プログラムは、5/28のfusion tableで、学生数を入力すると、その情報が表示されます。

2つ作りました。(コピペして~.htmlというファイルにすると実行できます。コピペで全角に化ける文字は直して下さい)
(a)は素直な方法ですが、何故かクエリの「ALLのWHERE “”」をやってくれません。
(b)は完璧ですが、トリッキーで感心しません。
(もうここまでで、深追いはしません)

(a)
<html>
<head>
<meta charset=”UTF-8″>
<title>Fusion Tables Query from Javascript</title>
<link href=”/apis/fusiontables/docs/samples/style/default.css”
rel=”stylesheet” type=”text/css”>
<script type=”text/javascript” src=”http://www.google.com/jsapi”></script>
<script type=”text/javascript”>
google.load(‘visualization’, ‘1’, { packages: [‘table’] });

function drawTable() {
var students = document.getElementById(‘students’).value;
var Query = new google.visualization.Query(             “http://www.google.com/fusiontables/gvizdata“);
Query.setQuery(“SELECT Text,Location,Number,Date,image FROM 1D4SbrvpKDxPMVh5BOsy0NkbFbOYMxi8ADZ0P49M WHERE Number=” + students);

Query.send(function(response) {
var table = new google.visualization.Table(
document.getElementById(‘visualization’));
table.draw(response.getDataTable(), {
showRowNumber: true
});
});
}

google.setOnLoadCallback(drawTable);
</script>
</head>
<body>
<div>
<label>Students Number: </label>
<select id=”students” onchange=”drawTable();”>
<option value=””>All</option>
<option value=”120″>120</option>
<option value=”660″>660</option>
<option value=”1960″>1960</option>
</select>
</div>
<div id=”visualization”> </div>
</body>
</html>

(b)
<html>
<head>
<meta charset=”UTF-8″>
<title>Fusion Tables Query from Javascript</title>
<link href=”/apis/fusiontables/docs/samples/style/default.css”
rel=”stylesheet” type=”text/css”>
<script type=”text/javascript” src=”http://www.google.com/jsapi”></script>
<script type=”text/javascript”>
google.load(‘visualization’, ‘1’, { packages: [‘table’] });

function drawTable() {
var query = “SELECT Text, Location, Number , Date, image FROM 1D4SbrvpKDxPMVh5BOsy0NkbFbOYMxi8ADZ0P49M”;
var students = document.getElementById(‘students’).value;
if (students) {
query += ” WHERE Number = ‘” + students + “‘”;
}
var queryText = encodeURIComponent(query);
var gvizQuery = new google.visualization.Query(             ‘http://www.google.com/fusiontables/gvizdata?tq=’ + queryText);

gvizQuery.send(function(response) {
var table = new google.visualization.Table(
document.getElementById(‘visualization’));
table.draw(response.getDataTable(), {
showRowNumber: true
});
});
}

google.setOnLoadCallback(drawTable);
</script>
</head>
<body>
<div>
<label>Students Number:</label>
<select id=”students” onchange=”drawTable();”>
<option value=””>All</option>
<option value=”120″>120</option>
<option value=”660″>660</option>
<option value=”1960″>1960</option>
</select>
</div>
<div id=”visualization”></div>
</body>
</html>

(3)今日のお仕事
来週の授業(プログラミングと基本情報)の資料を作る(9:00~16:00)。
物置から発見したテニスラケットを、ガットとグリップの交換に出す。