script google app comment form 3

データ取得

後はページをロードした際のコメントの読み込み、データを送信した際の再読込のコードが必要になる
基本的にはscript google app comment formと変わらない

例のsharing settingでシートのURLを取得し、script google app comment formのjavascriptのurlを書き換える

まず、htmlはこのような部位があり

					<section>
						<div id="comment">
							<h2>Leave your comments</h2>
...
...
...
							<div id="commentlog" class="clearfix">
								<ul id="commentlist"></ul>
							</div>
						</div>
					</section>

<ul id="commentlist"></ul>下に過去のログをつけているとする
すると、現在あるログより新しいログだけgoogleから取得するのでまず今あるhtmlでlaststampをとる
次にlaststampをdate型でgoogleに与えてそれより大きいものを取得する。現在ログを取得していない場合はnullになる可能性もあり、

 ($('#commentlist li:first-child').length)? 

でまずそれを確かめ

A > datetime \""+laststamp+"\"

でdatetime型にlaststampを指定する。Aとは「列1」のことで順にB=列2...

query.setQuery("select A,C,D where "+tmp+" B='"+藻類HOME+"' order by A desc limit 10");

は一般のSQLと同様にどこでかつ列Bが,,,として、order by Aで日付で並び替え descでそれを降順にし、先頭10個まで取り出している

function handleQueryResponseComment(response) {

以下で得られたマトリックスデータを操作し、dom、ここでは<ul id="commentlist"></ul>に追加していっているのはscript google app comment formとかわりない

	function comment() {
		var laststamp = $('#commentlist li:first-child').attr('timestamp');
		var query = new google.visualization.Query(
		"https://spreadsheets.google.com/ccc?key=0Ahx8FrCtx3TOdGl0WW94WnUtT0lKLXpzMWJHeDl5VkE&hl=en"
		);
		var tmp = ($('#commentlist li:first-child').length)?  " A > datetime \""+laststamp+"\" and ":'';
		query.setQuery("select A,C,D where "+tmp+" B='"+藻類HOME+"' order by A desc limit 10");
		query.send(handleQueryResponseComment);
	}

	function handleQueryResponseComment(response) {
		var data = response.getDataTable();
		var clist = $("#commentlist");
		for (var row = data.getNumberOfRows() -1 ; row >= 0; row--) {
			var li = $("<li />");
			var right = $("<div class='commentright'><img src='./img/48.jpg' /></div>");
			var left = $("<div class='commentleft' />");
			for (var col = 0, n = data.getNumberOfColumns(); col < n; col++) {
				//Timestamp
					var date = new Date(data.getFormattedValue(row,0));
					var divtimestamp = $("<div class='timestamp' />").append($("<span />").text(month[date.getMonth()]+' '+date.getDate()+' '+date.getFullYear()));
					var dateFormat = new DateFormat("yyyy-MM-dd HH:mm:ss");
					li.attr("timestamp",dateFormat.format(date));
				//Autor
					var spanautor = $("<span class='autor' />").text(data.getFormattedValue(row,1));
				//Data
					var spandata = $("<span class='data' />");
					spandata[0].innerHTML = (data.getFormattedValue(row, 2).replace(/(http[s]?:\/\/[\x21-\x7e]+)/gi, "<a href='$1'>$1</a>")).replace(/\n/gi, "<br />");
			}
			left.append(spandata);
			right.append(spanautor);
			right.append(divtimestamp);
			li.append(right);
			li.append(left);
			clist.prepend(li);
		}
	}

• DateFormatは追加ライブラリの機能dateformat.jsの機能 ^{http://www.enjoyxstudy.com/javascript/dateformat/}

このcomment()メソッドをファイル読み込みの発生時

			google.load("visualization", "1");
			google.setOnLoadCallback(init);

			function init() {
				mainmenu();
				comment();				
			}

とフォーム送信の実行時

		$.ajax({
			type: "POST",
			url: "https://spreadsheets.google.com/spreadsheet/formResponse?formkey=dGl0WW94WnUtT0lKLXpzMWJHeDl5VkE6MQ&ifq",
			
			success: function(msg) {
				$('#dummy').attr("src","");
				$('#entry_1').val('');
				$('#entry_2').val('');
				comment();
			}
		});

に行わせる。

以上

なお、

			  $.get("attc/comment.txt", function(data){
					   $('#commentform').html(data.replace(/\{\{\{title\}\}\}/,document.title));
			  });

というスクリプトをブラウザ読み込み時に行わせ、commentフォームのentry_0_singleの値を{{{title}}}としておくと動的にコメント対象のファイル名がそのファイルのタイトルに変更できます。

このように、静的なhtmlでもjavascriptとgoogle spreadsheetを使うことによって、メニューバーは愚かコメントからウィキまで作成可能です。が、しかし、検索エンジンのクローラがjavascriptを正しく実行するわけではないためそのjavascriptで作られた部分のデータはインデックスされず、結局はあまり公開性のあるウェブとして意味がありません ^{作成したjavascript+google docによるwikisystem}