2024
11
23
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
25
トーナメント図作成ツール
今日は、アジア大会サッカーの決勝戦ですね。予選リーグを全勝で突破、決勝トーナメントも勝ち抜いてきたU-21日本代表、金メダルを手にすることができるでしょうか。相手はユースの世界大会で優秀な成績を残したUAEです。トーナメント開始前には、韓国か北朝鮮が決勝戦の相手だと思っていましたがハズレました。それ以上に手強いということでしょう。
さて、今回はその予想をしたときに作成したトーナメント表作成ツールを公開します。
テキストボックスの中に、トーナメントの上から下にカンマで区切った文字列を入力して、ボタンを押すとトーナメント表が作成できます。
IEでは、想定通りに表示されないかもしれません。その場合、FireFoxなどの他のブラウザでご覧下さい。
2010/11/25 (Thu.) Trackback() Comment(0) Google Visualization
2010
11
18
