2024
11
26
2010
12
17
オブジェクトのプロパティを表示する関数
JSONPを利用する時、どのようなオブジェクトが返ってくるのか知りたい時があります。APIの仕様書を見れば、オブジェクトの構造はだいたい分かるのですが、たまに XML の仕様書だけ掲げられていて、実際には、JSONP の内容がそれとは違うことがあります。特に、 XML で繰り返し出現する要素が、JSON で配列で表現されていることが多いようです。
オブジェクトの構造が分からなければ、コールバック関数で処理の記述ができません。そこで、オブジェクトの構造を DL 要素内に表示する関数を考えてみました。
オブジェクトから順次プロパティを取り出し、プロパティのキーを DT 要素に、プロパティの値を DD 要素に割り当てます。
プロパティの値が オブジェクトの場合には、再帰処理を行います。こうすることにより、オブジェクトの内容がツリー状に表現されます。
生成した DL 要素が返ります。これをページ内の要素に、appendChild メソッド等で追加して下さい。
JSONPで返るオブジェクトの内容を表示することを目的としていますが、一般的なオブジェクトを対象とすることも可能です。ただし、一般的なオブジェクトに利用する時は、無限ループにならないよう注意が必要です。プロパティが参照するオブジェクト
が、自分自身だったりすると無限ループとなります。これに対する対策は施していません。そのような可能性のあるオブジェクトには、利用しないで下さい。
ソースコード
function propaties(obj){
var dl=document.createElement('dl');
if(obj==window||obj==document||obj==history){
var dt=document.createElement('dt');
var dd=document.createElement('dd');
dt.innerHTML=obj.toString();
dd.innerHTML=obj.valueOf();
dl.appendChild(dt);
dl.appendChild(dd);
}else{
for(k in obj){
var dt=document.createElement('dt');
var dd=document.createElement('dd');
dl.appendChild(dt);
dl.appendChild(dd);
dt.innerHTML=k;
var flg=false;
if(obj[k]&&typeof obj[k]=='object'
&&!obj[k].nodeType&&k!='mimeTypes'
&&k!='plugins'){
dd.appendChild(propaties(obj[k]));
}else if(obj[k]){
dd.innerHTML=obj[k].toString();
}else{
dd.innerHTML='[null]';
}
}
}
return dl;
}
PR
2010/12/17 (Fri.) Trackback() Comment(0) JavaScript
2010
12
08
抽出キーワードをタグクラウド風に表示。
最近、よくタグクラウドを見かけます。ただ目に映るというだけで、空に浮かぶ雲と同じで、あまり気にしたことはありません。けれども、面白いことは面白い。あらためてよく見てみると、なかなかよくできています。それぞれに若干違いがありますが、だいたい次のような特徴があります。
・重要度（頻出度）は、文字の大きさや色で表現される。
・順番はアルファベット順が多い。
アルファベットと利用度の両方でタグを検索できる仕掛けというわけです。
今回は、このタグクラウドに触発されて、文章中からキーワードを抽出して、それらのキーワードをタグクラウド的に表現する JavaScript に挑戦してみました。ただキーワードの順番は、出現回数優先としました。日本語をあいうえお順で並べ替えるのは困難だと思ったからです。
キーワードの抽出
まず、どのようにキーワードを抽出するかが問題となります。これについては、最初、Yahoo! Japan デベロッパーネットワークのテキスト解析：キーワード抽出API の利用を考えました。しかしながら、利用回数の制限（アプリケーションIDあたり24時間に５万回）があるため、今回は見送ることにしました。零細サイトでは十分な回数ですが、今、大量にキーワードを抽出するアプリケーションを開発中なので、そこでは利用できないと判断したのです。
そこで思いついたのが、漢字とカタカナだけに割り切るという方法です。日本語なら、これで相当いい線いけるでしょう。しかも、実装が容易です。正規表現で半角英数字や記号やひらがなを区切り文字に変換してしまえばよいのです。そして、その区切り文字で配列化し、各文字列の出現回数を調べるのです。
重要度の表現方法
各文字列の重要度は、その出現回数とします。データベースやAPIを利用しない限り、他に方法はないでしょう。そして、その重要度は、表示順序に加え、文字の大きさと色合いの両方で表現します。なお、同じ出現回数のものは、文字数の多い方を先に表示することにしました。場合によっては、1文字のものは表示対象から外してもよいかもしれません。
文字サイズは、表示領域の幅と高さを把握した上で全体の文字数から割り出します。
文字色は、カラーコードの配列を用意しておき、出現回数によってどれを適用するか決定することにしました。自動的に色調を計算させる案もありますが、今回は関数を探す時間がなかったので諦めました。
2010/12/08 (Wed.) Trackback() Comment(0) JavaScript
2010
12
03
HTMLテーブル簡易作成ツール
「サッカーフォーメーション図作成ツール」も、「トーナメント図作成ツール」もHTMLテーブルを利用したものです。それなら、もっと一般的なHTMLテーブル作成ツールも用意した方がよいと思いました。
上のテキストボックスにデータを入れてボタンを押すと、その下にデータがHTML化されて表示されます。HTMLのソースはその下のテキストボックスに入ります。とかく TR タグや TD タグが入り乱れる TABLE 内のソースも簡単に取得できます。
各列を表すクラス名をセルに設定しています。必要に応じて書き換えたり、スタイルシートで活用して下さい。
なお、サンプルのデータは、2010.11.17のFIFA RANKING です。
<
2010/12/03 (Fri.) Trackback() Comment(0) JavaScript
2010
11
18
2010
11
12
google.visualization.Table もどきを作る。
google.visualization.Table は、HTML文書でテーブルを表示する時に、とても便利なツールです。今回は、google.visualization.Table に似せたコンストラクタを作成してみましょう。そうすることで、Google Visualization の世界が少しはわかるかもしれません。
Table コンストラクタの書式
table=new neta.vis.Table(container)
引数は、コンボボックスを配置する先の HTML 要素です。TABLE要素を生成します。実際に内容を配置するには draw メソッドを実行します。
draw メソッドの書式
table.draw(dataTable, options)
draw メソッドの引数
draw メソッドの第一引数は、後述する DataTable オブジェクトです。
draw メソッドの第二引数は、オプションオブジェクトです。現在、この指定は無効です。
DataTable コンストラクタの書式
dataTable=new neta.vis.DataTable(dataSource, version)
Google Visualization において DataTable は、取り扱うデータを格納するとともに、それらのデータの追加、変更、削除、取得に関するメソッドを提供するオブジェクトです。ここで真似る neta.vis.DataTable コンストラクタでは、メソッドは未定義です。カラムのデータは A プロパティに、行のデータは F プロパティに格納します。
第一引数は、データソースです。ここでは、次の書式のオブジェクトが有効です。
{cols:[
{type:'データタイプ'},
{type:'データタイプ'}
],
rows:[
{c:[{v:値},{v:値, f:表示値},
{c:[{v:値},{v:値, f:表示値}
]
}
第二引数は、Google Visualization のバージョンです。ここでは、無効です。なお、Google Visualization の現行バージョンは 0.6 です。
記述例
neta.addListener(function(){
var table = new neta.vis.Table(
document.getElementById('div20101112'));
var dat=document.getElementById('data20101112');
var d2=neta.toD2(dat.value||dat.innerHTML);
var dataSource=neta.vis.d2toDataSource(d2);
var dataTable=new neta.vis.DataTable(dataSource);
table.draw(dataTable);
});
ここにおいて、neta.addListener は、ロード時に実行する関数を登録する関数、neta.toD2 は、文字列を二次元配列に変換する関数です。また、neta.vis.d2toDataSource は、二次元配列から dataSource オブジェクトを生成する関数です。
実行例
次のデータは、id属性が"data20101112"であるPRE要素の内容です。
1,A 2,B 3,C
上記のデータを読みとって、次にテーブルとして表示しました。
ソースコード
if(!window['neta']['vis'])window['neta']['vis']={};
(function(){
var a=neta.vis;
var E=neta.elements;
// DataTable
a.DataTable=function(dataSource, version){
this.Rb=version||0.6;
this.A=dataSource.cols||[];
this.F=dataSource.rows||[];
this.Va=null;
}
// Table
a.Table=function(container){
this.container=container||document.body;
this.element=E.element('table');
var self=this;
self.draw=function(dataTable,options){
options={};//undefined now
self.element.innerHTML='';
self.element.thead=E.element('thead');
self.element.thead.tr=E.element('tr');
for(var j=0;j<dataTable.A.length;j++){
var th=E.element('td',{
innerHTML:dataTable.A[j].label?dataTable.A[j].label:
''});
self.element.thead.tr.append(th);
}
self.element.thead.append(self.element.thead.tr);
self.element.tbody=E.element('tbody');
for(var i=0;i<dataTable.F.length;i++){
var tr=E.element('tr');
for(var j=0;j<dataTable.F[i].c.length;j++){
var td=E.element('td',{
innerHTML:dataTable.F[i].c[j].f?dataTable.F[i].c[j].f:
dataTable.F[i].c[j].v});
tr.append(td);
}
self.element.tbody.append(tr);
}
self.element.append([self.element.thead,self.element.tbody]);
self.container.appendChild(self.element);
}
}
a.d2toDataSource=function(d2){
var data={cols:[],rows:[]};
var len=d2[0].length;
for(var j=0;j<len;j++){
data.cols.push({type:'string'})
}
for(var i=0;i<d2.length;i++){
data.rows[i]={c:[]};
for(var j=0;j<d2[i].length;j++){
data.rows[i].c.push({v:d2[i][j]})
}
}
return data;
}
})();
スクリプトの収録先
neta.js neta.elements.js neta.vis.js2010/11/12 (Fri.) Trackback() Comment(0) JavaScript
