オブジェクトのメンバを見る

色々とJavaScriptで書いていると、オブジェクトのメンバを見たくなることがあります。他のことをやっていて偶然気付きました。他にも紹介されていると思いますが、メモしておきます。

for(var i in this) {
 alert(i);
}

ただし、注意しないと大量のメンバが表示されて、OKボタンを押すだけで飽きてしまいます（笑）
また、Mac OS X上のSafari 5でしか動作確認していません。ご注意ください。

もう一つの表<table>の描き方

表の描画はinsertRowやinsertCellを使わずに以下のようにもできます。Model、View、Controllerを考えるともう少し工夫が必要ですが、こんな事もできるという意味で紹介します。ただし、Mac OS X上のSafari 5とFirefox 3.6.3でしか動作確認していません。ご注意ください。

createElementはJavaScriptでHTMLを生成する時に良く使用される方法ですが、当然<table>でも利用できます。また、この方法であれば<th>を直接生成できます。この例では先頭行で<th>を使用してその後に<td>を置いています。

また、ここでは表の定義に配列を使用しています。for( i in fooArray )を使って行を生成していますので、testTable関数に行数と表のタイトルとセル幅を与えるだけで作表します。CSSの設定はclassName、その他の各行やセルの設定はsetAttributeが使えます。たとえば、setAttribute('contenteditable', true)とすれば、表の中身を書き換えられるようになります。さらに、addEventListenerでイベント駆動もできます。

window.onload = function(){
 argTable = {
  numberRow: 5,
  myMenue: {
   "key": 35,
   "input date": 100,
   "item name": 200,
   "item number": 100
  }
 }
 myTable = new testTable(argTable);
 delete argTable
}

function testTable(arg) {
 var myTable = document.createElement('table');
 myTable.setAttribute('border', '1');
 var myTr = document.createElement('tr');
 for (var index in arg.myMenue) {
  var myTh = document.createElement('th');
  myTh.innerHTML = index;
  myTh.setAttribute('width', arg.myMenue[index]);
  myTr.appendChild(myTh);
 }
 myTable.appendChild(myTr);

 for (var i = 0 ; i < arg.numberRow ; ++i) {
  var myTr = document.createElement('tr');
  for (var index in arg.myMenue) {
   var myTd = document.createElement('td');
   myTd.innerHTML = 'test';
   myTd.setAttribute('width', arg.myMenue[index]);
   myTr.appendChild(myTd);
  }
  myTable.appendChild(myTr);
 }
 document.body.appendChild(myTable);
}

insertRowとinsertCell

JavaScriptで表を扱う時の関数insertRowやinsertCellですが、よく紹介されている方法とは少々異なる使い方のメモです。ただし、Mac OS X上のSafari 5とFirefox 3.6.3でしか動作確認していません。ご注意ください。

insertRowやinsertCellはJavaScriptで表を描画する時に利用される命令の一つで、insertRowにより表に一行追加でき、insertCellではセルを一つ追加できます。例えばinsertCell(n)としてnに数値を渡すと、nの位置にセルを挿入します。このnをinsertCell()またはinsertCell(-1)とすると行の一番最後にセルを追加します。サンプルコードなどで表を描画する時にループ文を利用しますが、この時に逐一nの値を与える必要はなく、insertCell(-1)とするだけで描画できます。これはinsertRow()でも同じです。

さらに、insertCell()では<td>タグが生成されます。しかし、先頭項目などを表す<th>タグを直接生成する命令は見あたりません。代案としてinsertCell()で<td>タグを生成して、その中身を設定する時にouterHTMLを使用することで<th>タグを間接的に生成できます。

上記の方法をまとめて例を書くと以下のようになります。

testData = new Array(10, 12, 15, 43);
--- some codes ---
for (var index in testData) {
 var myTh = myTr.insertCell(-1);
 myTh.outerHTML = "<th>" + index + "</th>";
 --- some codes ---
}
delete testData;

ただし、Safari 5ではinsertCell(-1)としないとindexの順が逆になる場合があるようです。

文字の大きさ

MacBook Pro 17"を購入しました。プロセッサをi7に、またハードディスク ドライブをシリコン ドライブ（ソリッド ステート ドライブ）に交換するなどしています。

起動して一番に思った事は「文字が小さい」

初期設定の解像度では12ポイントの文字が小さくて、老眼が進行している私には読みにくくなっています。WYSIWYGで有名になったMacintoshも、今や紙に印刷するのではなく、コンピュータ上で自分の好きな大きさにして読み書きするので、文字の大きさにポイントを用いる意味が無くなってしまいました。

ただ、自分が読みやすい文字の大きさとは、書きやすい文字の大きさとは、などと余計な事を考えなくてはならなくなりました（笑）

平安時代などの古い手紙の写真を見ると、書かれた文字に多少の大小はあってもかなり大きなものでした。それが、江戸時代の版画技術の向上（欧州の印刷技術の向上）などにより、大量の印刷物が市場に流通するようになり、それに伴って貴重で高価な紙の量を減らし経費を削減するために、読むための文字の大きさが小さくなった…ように思います。

また、鉛筆や万年筆の登場で小さな文字が書けるようになり、さらにシャープペンシル、ボールペンで加速化されました。

それがコンピュータ技術により、好きな大きさの文字で書いて、好きな大きさの文字で読むようになった、と言う事でしょう。

実際、ノートPCにシリコン ドライブを搭載することで、故障を心配することなく読み書きできるようになりました。さらに、iPhoneやiPod touchで読み書きする場所や時間などの制約が少なくなり、iPadでそれが加速化されようとしています。

iPhoneやiPod touchで書いて送信した文章はその内容に関係なく、書いた場所と時間は自動的に記録されますので、その統計だけでも大量の情報を未来に残す事になります。68億ある世界人口の四分の一でもTwitterなどインターネットで何かを書くようになれば、世界はどうなるのか？などと夢想します。

Safari 5の互換性

データベースは変更せずに動きましたが、以下のようなタグで表示されるテキスト フィールドの幅が変わりました。

< input id="xxx" size="12" type="text" />

Safari 5のデータベース

Safari 5をダウンロードしてデータベースを試した結果。少なくとも、私がSafari 4を使って試しに書いたデータベースを開く事が出来ました。

また、[環境設定]の[セキュリティ]で[データベースを表示]ボタンを押して表示されるデータベースのリストが改善されました。今までは開いたデータベースのみを表示したのですが、Safari 5では開かなくても表示されるようになりました。Safari 4ではこれが不便でした。

[開発]メニューの[エラーコンソールを表示]で表示されるウィンドウで、データベースを表示する機能は今までと同様です。データベースを開いた状態で、上欄から[ストレージ]を選択して、左欄から[データベース]を選択すると、データベース名やテーブル名が表示され、ウィンドウ内にデータが表示されます。

ただし、[ストレージ]に便利な機能が追加されていました。開いているページのCOOKIEの詳細を表示してくれます。これが標準で付いているのは便利そうです。

Apple - HTML5

私が2007年の資料に手こずっている間に、Appleは現在のHTML 5などの技術を使ったデモを発表しています。

Apple - HTML5
http://www.apple.com/html5/

Appleお得意の見た目のきれいさと、そのための技術には唖然とします。