Ajax関連アンテナ のバックアップの現在との差分(No.4)
※※このサイトは2012年頃より更新を停止しています。※※
- バックアップ一覧
- 差分 を表示
- ソース を表示
- バックアップ を表示
- Ajax関連アンテナ へ行く。
- 追加された行はこの色です。
- 削除された行はこの色です。
この頃気になるAjax。 ちょくちょく目にとまった記事を残していってみようか。 #contents **2006-09-21 *ちょくちょく目にとまったAjax関連記事(2007-06頃まで) -''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'' http://itpro.nikkeibp.co.jp/article/COLUMN/20070507/270078/ -''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作成を扱う'' http://itpro.nikkeibp.co.jp/article/COLUMN/20070307/264116/ 配列を簡単にオブジェクト化できるってスンバラスィね。 -''2006-09-21 OpenAjax Allianceのメンバー数が53に，OpenAjax Hubは2007年初頭リリース'' http://itpro.nikkeibp.co.jp/article/USNEWS/20060921/248624/ エンタープライズ分野の食いつきが早いね。 #comment **2006-09-15 Ajaxアプリのビジュアル開発ツール，デファクトを狙いNTTデータがオープンソースとして公開へ -''2006-09-15 Ajaxアプリのビジュアル開発ツール，デファクトを狙いNTTデータがオープンソースとして公開へ'' http://itpro.nikkeibp.co.jp/article/NEWS/20060915/248264/ どんどん進んでるな。 #comment **2005-12-21 Ajaxで携帯画面を狙え」，オープンウェーブがアピール -''2006/08/25 OutlookライクなAjax Webメール/スケジューラScalix，オープンソース化し日本上陸へ'' http://itpro.nikkeibp.co.jp/article/NEWS/20060825/246431/ -''2005-12-21 Ajaxで携帯画面を狙え」，オープンウェーブがアピール'' http://itpro.nikkeibp.co.jp/article/NEWS/20051220/226535/ #comment **2005-10-28 Ajaxの日本語入力のサービス事例 -''2005-10-28 Ajaxの日本語入力のサービス事例'' http://japan.cnet.com/news/media/story/0,2000056023,20089770,00.htm ATOKだよ。 そうきたか。 面白くなりそうだ。 #comment #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属性を楽にデバッグ表示'' [[pocari.orgさんのページ>http://cl.pocari.org/2006-11-14-4.html]] -''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; }
