Ajax関連アンテナの変更点

※※このサイトは2012年頃より更新を停止しています。※※
追加された行はこの色です。
削除された行はこの色です。
Ajax関連アンテナへ行く。
#contents

*ちょくちょく目にとまったAjax関連記事(2007-06頃まで)

**2007-06-06 オープンソースのAjax Webデスクトップ「eyeOS 1.0」正式リリース
-''2007-06-06 オープンソースのAjax Webデスクトップ「eyeOS 1.0」正式リリース''
http://itpro.nikkeibp.co.jp/article/NEWS/20070605/273679/
「Webブラウザ上で動作するデスクトップ環境」らしい。
おもしろそうだね。

**2007-06-03 【PHP TIPS】 34. PEAR::HTML_AJAXでAjax
-''2007-06-03 【PHP TIPS】 34. PEAR::HTML_AJAXでAjax''
http://itpro.nikkeibp.co.jp/article/COLUMN/20070507/270078/

**2007-06-03 AJAXライブラリの話
-''2007-06-03 AJAXライブラリの話''
[[参考：あるSEのつぶやき：Ajaxライブラリまとめ>http://fnya.cocolog-nifty.com/blog/2006/08/ajax_76d4.html]]
ごっついっぱい情報がまとめられてる。

**2007-04-09 【PHP TIPS】 20. PHPからJSON作成を扱う
-''2007-04-09 【PHP TIPS】 20. PHPからJSON作成を扱う''
http://itpro.nikkeibp.co.jp/article/COLUMN/20070307/264116/
配列を簡単にオブジェクト化できるってスンバラスィね。

**2006-09-21 OpenAjax Allianceのメンバー数が53に，OpenAjax Hubは2007年初頭リリース
-''2006-09-21 OpenAjax Allianceのメンバー数が53に，OpenAjax Hubは2007年初頭リリース''
http://itpro.nikkeibp.co.jp/article/USNEWS/20060921/248624/
エンタープライズ分野の食いつきが早いね。

**2006-09-15 Ajaxアプリのビジュアル開発ツール，デファクトを狙いNTTデータがオープンソースとして公開へ
-''2006-09-15 Ajaxアプリのビジュアル開発ツール，デファクトを狙いNTTデータがオープンソースとして公開へ''
http://itpro.nikkeibp.co.jp/article/NEWS/20060915/248264/
どんどん進んでるな。

**2006/08/25 OutlookライクなAjax Webメール/スケジューラScalix，オープンソース化し日本上陸へ
-''2006/08/25 OutlookライクなAjax Webメール/スケジューラScalix，オープンソース化し日本上陸へ''
http://itpro.nikkeibp.co.jp/article/NEWS/20060825/246431/

**2005-12-21 Ajaxで携帯画面を狙え」，オープンウェーブがアピール
-''2005-12-21 Ajaxで携帯画面を狙え」，オープンウェーブがアピール''
http://itpro.nikkeibp.co.jp/article/NEWS/20051220/226535/

**2005-10-28 Ajaxの日本語入力のサービス事例
-''2005-10-28 Ajaxの日本語入力のサービス事例''
http://japan.cnet.com/news/media/story/0,2000056023,20089770,00.htm
ATOKだよ。
そうきたか。
面白くなりそうだ。

#br
#br
#br


*javascriptあれこれ

**javascriptでcookie操作や外部ファイル取り込みしてtable情報を扱いたい件の色々参考。
-''javascript と SQLite とか Google Gears について
SQLiteとかを実現できるようなライブラリがあったらいいなと思って調べてみると、目的とは違ってたけど、Google Gears という開発者向けサービスの記事を見つけた。
[[ITpro：第1回　そもそもGoogle Gearsって何？>http://itpro.nikkeibp.co.jp/article/COLUMN/20070911/281630/?P=1&ST=swd-tech]]
SQLiteをローカル端末に内臓して、javascriptのライブラリから操作する感じ。
BSDライセンスで配布するらしいので、誰でも使えていいかも。
さすがgoogle。
~あとこんな記事もあった。
[[Firefoxのsqliteデータベースの中身を表示する Storage Inspector>http://labs.gmo.jp/blog/ku/2007/08/firefoxsqlite_storage_inspector.html]]
Firefox2.0以降ではSQLiteと同等のDBエンジンが内部に組み込まれてるらしい。
~んで。
当初の目的にしてたことは、下記のページで公開されてるライブラリで代用することにした。
[[JavaScriptでクッキーを超簡単に使うライブラリ「Cookie Manager」>http://phpspot.org/blog/archives/2006/11/javascriptcooki.html]]
[[配布ファイル>http://210.150.94.35/kimiwiki/index.php?plugin=attach&pcmd=open&file=js_cookiesample.zip&refer=top]]
　
-''document.createElementとか''
アンカータグとかもcreateElementで扱えるみたいね。
[[参考：Side-B>http://side-b.sto.co.jp/weblog/archives/24]]
[[参考：とみぞーノート>http://wiki.bit-hive.com/tomizoo/pg/JavaScript%20%A5%AF%A5%ED%A5%B9%A5%D6%A5%E9%A5%A6%A5%B6%A4%CB%B4%D8%A4%B9%A4%EB%A5%E1%A5%E2]]
[[参考：Javascriptist>http://javascriptist.net/ref/document.createelement.html]]
[[参考：Javascript for CSS(8)>http://east.portland.ne.jp/~sigekazu/css/javascript8.htm]]
[[参考：クッキーの最大サイズ制限について>http://www.teria.com/~koseki/memo/cookie/cookie_4k.html]]
***様々サンプル
上記を踏まえ、いくつかサンプル。
-js_cookie.html
 <html>
 
 <head>
 <title>document.cookie document.createElement - cookieを扱って、指定タグでエレメント作成</title>
 
 <script type="text/javascript">
 <!--
 
 ////////////////////////////////////////////////////
 // cookie期限を指定する
 function putExpires(sec) {
     datetime = new Date();
     datetime.setTime(datetime.getTime() + sec * 1000);
     return datetime.toGMTString();
 }
 
 
 ////////////////////////////////////////////////////
 // cookie設定ボタンのアクション
 function putDemoCookieData(){
 	var name = "test";
 	var value = "hoge";
 	document.cookie = name+"="+value+"; expires="+putExpires(600);
 }
 
 
 ////////////////////////////////////////////////////
 // cookie削除ボタンのアクション
 function remDemoCookieData() {
 	var name = "test";
 	var value = "hoge";
 	document.cookie = name+"="+value+"; expires="+putExpires(0);
 }
 
 
 ////////////////////////////////////////////////////
 // cookieを表示
 
 function getDemoCookieData(){
 	return document.cookie;
 }
 
 function pushElem() {
 	var element = document.createElement('div');
 	element.id = "cookshow";
 	element.innerHTML = getDemoCookieData();
 
 	var PageBody = document.getElementsByTagName("body").item(0);
 	PageBody.appendChild(element);
 	// body要素にdivエレメントを追加
 }
 
 
 //-->
 </script>
 
 </head>
 
 <body>
 <input type="button" name="rem_butt" onClick="remDemoCookieData()" value="cookieを削除"><br />
 <input type="button" name="set_butt" onClick="putDemoCookieData()" value="cookieをセット"><br />
 <input type="button" name="show_butt" onClick="pushElem()" value="cookieを表示"><br />
 <br />
 
 
 
 <div name="cookshow"></div>
 
 </body>
 </html>
-js_table.html
 <html>
 
 <head>
 <title>document.createElement - table のエレメント作成</title>
 
 <script type="text/javascript">
 <!--
 
 ////////////////////////////////////////////////////
 // テーブル作成
 
 var hogehoge = {
     'apple' : 'りんご',
     'orange': 'みかん'
 };
 
 //
 // createForm
 //
 function createForm(){
     var oDiv   = document.getElementById('createTable');
     var oTable = document.createElement('table');
     var oTbody = document.createElement('tbody');
 
     for(var key in hogehoge){
         var oTr  = document.createElement('tr');
         var oTd1 = document.createElement('td');
         
         var oTd2 = document.createElement('td');
         var oInp = document.createElement('input');
     
         oInp.setAttribute("type","text");
         oInp.setAttribute("id",key);
         oInp.setAttribute("name",key);
         oInp.setAttribute("value",hogehoge[key]);
         
         var oTextNode = document.createTextNode(key);
         
         oTd1.appendChild(oTextNode);
         oTd2.appendChild(oInp);
         
         oTr.appendChild(oTd1);
         oTr.appendChild(oTd2);
         
         oTbody.appendChild(oTr);
     }
 
     oTable.appendChild(oTbody);
     oDiv.appendChild(oTable);
 }
 
 window.onload = function(event){
     createForm();
 };
 
 -->
 </script>
 
 <body>
 
 <div id="createTable"></div>
 
 </body>
 </html>
-js_fread.html
[[参考：prototype.js リファレンス>http://www.openspc2.org/JavaScript/Ajax/ref/prototype.js/index.html]]
[[参考：prototype.js リファレンス：CSV形式のデータを読み込み表示する>http://www.openspc2.org/reibun/JavaScript_technique/sample/11_etc/002/index.html]]
[[参考：prototype.js リファレンス：タブ区切り形式のデータを読み込み表示する>http://www.openspc2.org/reibun/JavaScript_technique/sample/11_etc/001/index.html]]
 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 <html>
 <head>
 <meta http-equiv="content-type" content="text/html;charset=utf-8">
 <title>JavaScript Sample</title>
 <link rel="stylesheet" type="text/css" href="main.css" media="all">
 <script type="text/javascript" src="./all_js/prototype.js"></script>
 <script type="text/javascript" src="./all_js/tabdata_table.js"></script>
 <script type="text/javascript">
 	<!--
 		window.onload = function(event){
 			// TABで区切られたデータが格納されたファイルを引数とすること
 			tabdata_tableView('./data/data_tab_sep.txt');
 		}
 	-->
 </script>
 </head>
 <body>
 <h1>タブ区切り形式のデータを読み込み表示する</h1>
 <div id="tableData">データを読み込み中....</div>
 </body>
 </html>
-data/
--data_tab_sep.txt
※文字コードUTF-8で保存すること。
 品名	価格	注釈
 Home Basic	27,090円	最低限のパッケージです
 Home Premium	31,290円	家庭用です
 Business	39,690円	ビジネス用途に
 Ultimate	51,240円	フルスペックのVistaです
-all_js/
--tabdata_table.js
※文字コードUTF-8で保存すること。
 function tabdata_tableView(fname){
 	var msec = (new Date()).getTime();
 	new Ajax.Request(fname, {
 		method: "get",
 		parameters: "cache="+msec,
 		onSuccess:function(httpObj){
 			var text = httpObj.responseText;
 			var LF = String.fromCharCode(10);
 			var TAB = String.fromCharCode(9);
 			var tabText = text.split(LF);
 			var tbl = "<table border='1'>";
 			for (var i=0; i<tabText.length; i++){
 				var cText = tabText[i].split(TAB);
 				tbl += "<tr>";
 				for (var j=0; j<cText.length; j++){
 					tbl += "<td>"+cText[j]+"</td>";
 				}
 				tbl +="</tr>";
 			}
 			tbl += "</table>";
 			$("tableData").innerHTML = tbl;
 		},
 		onFailure:function(httpObj){
 			$("tableData").innerHTML = "エラーで読み込めませんでした";
 		}
 	});
 }
--prototype.js
上述の例ではv1.5.1.1を使用している。
下記URLから適宜入手すること。
http://www.prototypejs.org/



#br
#br
#br


**Formがらみの表示

***hidden属性を楽にデバッグ表示
-''hidden属性を楽にデバッグ表示''
[[pocari.orgさんのページ>http://cl.pocari.org/2006-11-14-4.html]]


***GET引数取得して表示
-''GET引数取得して表示''
[[参考：S-MEMO（エスメモ）：JavaScriptでGETを取得する>http://www.s-memo.net/blog/2007/03/javascriptget_1.php]]
[[参考：JavaScriptリファレンス（オブジェクト別）>http://www.htmq.com/js/index.shtml]]
[[参考：Javascriptリファレンス : リンク :refQ.net>http://www.refq.net/programming/javascript/link/]]
[[参考：付録D URLエンコーディング(URLエンコード または URLエスケープ)>http://www.kinet.or.jp/hiromin/cgi_introduction/appendix/url_encode.html]]
[[参考：JavaScript Index メソッド、プロパティ、関数・リファレンス>http://www.scollabo.com/banban/jsindex/index.html]]

***様々サンプル
上記を踏まえてこんなんなった。
上記を参考にしてこんなん作った。
自分用メモだからむっちゃ適当。
-test.html
親フレームのGET引数を扱いたい場合
 getParentRequest()
を使う。
 <html>
 	<head>
 		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 		<title>javascriptデバッグ用</title>
 		<link rel="stylesheet" type="text/css" href="./all_css/HiddenView.css" />
 		<script language="javascript" src="./all_js/javascript.js"></script>
 	
 	</head>
 	<body>
 
 		<script language="javascript">
 			<!--
 				var	refeeee,locaaa;
 				refeeee = document.referrer;
 				//locaaa = location.href;
 
 				document.open();
 				document.write("GET引数を書き出します。<br />");
 
 				var get = getRequest();
 				document.write("<ul>げっと分解<li>test = ",get['test']," <li>mail = ",get['mail'],"</ul>");
 
 				//document.write("ろけーしょん : ");
 				//document.write(locaaa,"<br />");
 
 				document.write("りふぁら : ");
 				document.write(refeeee,"<br />");
 
 				document.close();
 			
 			// -->
 		</script>
 		<br />
 		<a href="./test.html?test=hoge&mail=hogetest@example.jp">このリンクをクリックして、リファラやGETパラメータを表示できるか？</a>
 
 		<hr />
 		<br />
 		<br />
 		<br />
 		<br />
 
 		hidden属性をリスト表示する。
 
 		<form action="./test.html" method="GET">
 			<input type="hidden" name="hoge_hidden" value="うふ">
 			<input type="hidden" name="moge_hidden" value="テスト">
 			<input type="hidden" name="hage_hidden" value="えへ">
 			<input type="hidden" name="hogu_hidden" value="pest">
 			<input type="submit" value="ぽちっとな。">
 		</form>
 <script type="text/javascript" src="./all_js/HiddenView.js"></script>
 <script type="text/javascript">
 window.onload = function() {
   new HiddenView();
 };
 </script>
 
 	</body>
 </html>
-all_js/
--javascript.js
// getRequest関数
 // HTTPのGETメソッドで渡されたパラメータを分割して配列に格納して返す
 // 完全にパクリです。
 // ソース(入手元)：http://www.s-memo.net/blog/2007/03/javascriptget_1.php
 // 入手元サイト：S-MEMO（エスメモ） ブログの2007年03月09日記事「JavaScriptでGETを取得する」
 	function getRequest(){
 	  if(location.search.length > 1) {
 	    var get = new Object();
 	    var ret = location.search.substr(1).split("&");
 	    for(var i = 0; i < ret.length; i++) {
 	      var r = ret[i].split("=");
 	      get[r[0]] = r[1];
 	    }
 	    return get;
 	  } else {
 	    return false;
 	  }
 	}
 
 // getParentRequest関数
 // 上記の getRequest関数で取得するはずの情報を、親フレーム側から取得する。
 	function getParentRequest(){
 	  if(parent.location.search.length > 1) {
 	    var get = new Object();
 	    var ret = parent.location.search.substr(1).split("&");
 	    for(var i = 0; i < ret.length; i++) {
 	      var r = ret[i].split("=");
 	      get[r[0]] = r[1];
 	    }
 	    return get;
 	  } else {
 	    return false;
 	  }
 	}
--HiddenView.js
 /*
  * HiddenView
  * Copyright (c) 2006 SUNAOKA Norifumi <http://pocari.org>
  *
  * HiddenView is freely distributable under the terms of an MIT-style license.
  */
 
 var HiddenView = function() {
     this.initialize();
 };
 HiddenView.prototype = {
     initialize: function() {
         var input = document.getElementsByTagName('input');
         var table = document.createElement('table');
         var tbody = document.createElement('tbody');
         
         var row = this.createRow([ 'Name', 'Value' ], true);
         tbody.appendChild(row);
         
         for (var i = 0, len = input.length; i < len; ++i) {
             if (input[i].type == 'hidden') {
                 var row = this.createRow([ input[i].name, input[i].value ]);
                 tbody.appendChild(row);
             }
         }
         table.appendChild(tbody);
         table.className = 'hv-table';
         table.setAttribute('class', 'hv-table');
         document.getElementsByTagName('body').item(0).appendChild(table);
     },
     createRow: function(values, header) {
         var row = document.createElement('tr');
         for (var i = 0, len = values.length; i < len; ++i) {
             var col = document.createElement(header ? 'th' : 'td');
             col.appendChild(document.createTextNode(values[i]));
             row.appendChild(col);
         }
         return row;
     }
 };
-all_css/
 /*
  * HiddenView.css - for HiddenView.js
  */
 table.hv-table {
 	border-collapse: collapse;
 	border: 1px #36c solid;
 }
 
 table.hv-table th {
 	font-weight: bold;
 	text-align: center;
 	color: #000;
 	background-color: #cfdbf3;
 	border: 1px #36c solid;
 	padding: 3px;
 }
 
 table.hv-table td {
 	color: #000;
 	background-color: #e5ecf9;
 	border: 1px #36c solid;
 	padding: 3px;
 }
TrackBack(594)
Ajax関連アンテナの変更点

サイトメニュー

管理操作

Ajax関連アンテナ の変更点

検索

サイトメニュー

管理操作

Ajax関連アンテナの変更点
