2009 年の集計結果

ablog PVランキング Top 50 powerd by Google Analytics に見習って、うちも集計結果をつけてみました。今回は「です」「ます」調で。手前味噌なので、あしからず。

◆◆Google Analytics による集計（開設〜2009/12/31）
◆タイトル別のコンテンツ

1. (15.96%) Just Metal, Just Baroque.


2. (8.43%) Mac 版 Google Chrome でのブックマークを編集・削除する (2009/11/26)


3. (6.82%) PHP4.x で XML を読み込み、データを利用する (2009/08/15)


4. (4.02%) iTunes 9 のホームシェアリング機能 - G3 マシンでもできた (2009/09/11)


5. (3.13%) 連想配列のキーによるソート (Javascript / php) (2009/09/30)


6. (3.04%) Google Analytics で自分や社内のアクセス、クローラのアクセスを排除する (2009/08/20)


7. (2.80%) 現在ページの URL を取得する php を用いての ssi (2009/11/06)


8. (2.74%) Opera 10 での RSS 表示 (2009/10/03)


9. (2.44%) Javascript(DOM) で入力チェックをし、php にデータを送る (2009/09/12)


10. (2.03%) CSS3 の text-overflow (2009/07/30)

なにかお役に立てるエントリーはありましたら幸いです。

◆キーワード

1. php4 xml 読み込み


2. php xml 読み込み


3. opera rss


4. php4 xml


5. itunes9 g3


6. 4gbpsを超えるwebサービス構築術


7. opera10 rss


8. chrome ブックマーク 編集 mac


9. php 連想配列 ソート


10. php クリアボタン

一応、google の検索結果にリンクを貼ってみましたが、10 位以内に入っているキーワードもあれば、下の方からかいくぐってアクセスいただいたキーワードもありますね。キーワードは組み合わせが無数にあるので、パーセンテージ表記は割愛しました。

◆ブラウザと OS

1. (30.73%) Internet Explorer / Windows


2. (21.10%) Firefox / Windows


3. (17.80%) Safari / Macintosh


4. (10.11%) Chrome / Windows


5. (7.40%) Chrome / Macintosh


6. (5.46%) Firefox / Macintosh


7. (3.99%) Opera / Windows


8. (0.51%) Opera / Macintosh


9. (0.51%) Safari / Windows


10. (0.44%) Firefox / Linux

IE がまだまだ多いのは残念ですが、30% 程でまだマシかなといった感じです。Opera の利用率が Mac と Win で激しく差があるのには驚きました。

◆全ての参照先

1. (79.67%) google / organic


2. (11.21%) (direct) / (none)


3. (3.96%) blogger.com / referral


4. (1.39%) d.hatena.ne.jp / referral


5. (0.48%) google.co.jp / referral


6. (0.48%) search / organic


7. (0.40%) search.goo.ne.jp / referral


8. (0.33%) s.luna.tv / referral


9. (0.29%) yahoo / organic


10. (0.26%) cpplover.blogspot.com / referral

google が圧倒的ですね。対して、Yahoo は悲惨ですね。0.29 て。

◆画面の解像度

1. (25.64%) 1280 x 1024


2. (19.05%) 1280 x 800


3. (15.13%) 1024 x 768


4. (9.60%) 1680 x 1050


5. (8.28%) 1920 x 1200


6. (6.63%) 1440 x 900


7. (3.04%) 1920 x 1080


8. (2.38%) 1600 x 1200


9. (1.72%) 1366 x 768


10. (1.50%) 1400 x 1050

もう、ウェブページの横幅は 800px を上限にせないかん！というのは古いようです。

今年一年、ありがとうございました。

図形を回転する(rotate) [html5 の Canvas を使ってみる：第廿一回]

rotate(); は、一度描いた図形を回転する。まず、x:0、y:0 の座標から幅・高さ共に 30 の正方形を 60°回転してみる。rotate(); では、x:0、y:0 を基点として与えられたラジアンでの角度を回転するので、ノーマルの状態だと回転後の図形の左部分が消えてしまうので、translate(); で x 軸の正方向に 100 ずらし、x 軸と y 軸のそれぞれ 0 のラインを補助線として引いてみる。

★html 側

<canvas id="rotate"></canvas>

★Javascript 側

onload = function() {
// 画面ロード時に描画を実行
draw();
};
function draw() {
// id: rotate で 2 次元描画を行うことの定義
var c = document.getElementById("rotate").getContext('2d');

// 回転前の赤い枠の矩形を rect(); と strokeStyleで描画
c.beginPath();
c.strokeStyle = "rgb(255, 0, 0)";
c.rect(0, 0, 30, 30);
c.stroke();
// 回転後の青い枠の矩形を rect(); と strokeStyleで描画
c.beginPath();
c.strokeStyle = "rgb(0, 0, 255)";
// 60°回転
c.rotate(60 * Math.PI / 180);
c.rect(0, 0, 30, 30);
c.stroke();
}

すると、こうなる。青い扇形が 60°を示している。


次に、x:50、y:0 の座標から描いた同じ矩形を 60°回転してみると、こうなる。


x:0、y:0 だと判りにくかったが、回転前と回転後の矩形の基点は、x:0、y:0 から基点までの距離を半径とした円に沿って移動している。


回転前の矩形の上辺に沿った補助線を引き、その補助線ごと回転すると、実際に 60°動いたことが判りやすくなる。これも青い扇形が 60°を示している。


同じ矩形を 20°だけ回転してみる。青い扇形が 20°となっている。

// 20°回転
c.rotate(20 * Math.PI / 180);

今度は、x:0、y:50 の座標から描いた同じ矩形を 60°回転してみると、こうなる。


これも同じように矩形の基点までの距離を半径にした円に沿って移動している。


補助線を引いてみる。x:0、y:0 から回転後の青い矩形の左辺に向かって引いている灰色の補助線と y 軸との青い扇形が 60°であり、青い線も赤い線も円に接して引かれており、灰色の線と y 軸はそれぞれに対して垂直に引いてあるので、青い線・赤い線・灰色の線・y 軸でできた四角形の赤い扇形が 120°となる。これにより、赤い線と青い線が交わった青い扇形も 60°で等価となる。


では、同じ矩形を 37°だけ回転してみる。青い扇形が 37°となっている。

// 37°回転
c.rotate(37 * Math.PI / 180);

最後に、x:50、y:50 の座標から描いた同じ矩形を 60°回転してみると、こうなる。


これも矩形の基点である x:50、y:50 と x:0、y:0 との距離でできる円に沿っている。上では x や y の値をそのまま半径として使えたが、今回は赤い矩形の左上に、緑で x と y の値である 50 を一辺とした正方形を描いてみると、直角二等辺三角形なので半径は 50 * √2 ということになる。


さて、これも矩形の上辺に沿った線を引き、それごと回してみる。


これにも補助線を引いてみる。今回は赤い線と青い線が交わった青い角度と回転してできた角度の等価の証明が少しややこしい。
まず、緑の線はそれぞれの矩形の対角線を結ぶように x:0、y:0 から引いた線であり、赤い矩形の基点の座標が x:50、y:50 なので、x 軸と緑の線でできた緑の扇形は 45°となり、そこに回転の 60°が加わるので、残りの赤い扇形は 75°となる。ピンクの線は x 軸に並行で、回転後の青い矩形に接して引いてあり、このピンクの線と緑の線でできた赤い扇形は、錯角により先ほどの赤い角度と同じ 75°となる。また、この青い矩形の中をぶっ通している緑の線は対角線を結んでいるので、青い線と緑の線でできた緑の扇形は 45°となり、残りの青い扇形は 60°となる。最後に、赤い線と青い線が交わったところの青い扇形は、ピンクの線と青い線でできた先ほどの青い扇形の同位角で、かつ赤い線とピンクの線が並行なので等価となり、矩形を回転してできた青い扇形とも等価となる。


なんか、、、rotate(); の話ではなくなった気がする。。。

確認環境：
Safari 5.0、Chrome 5.0.375.70、Firefox 3.6.3、Opera 10.53

W3C；
4.8.11 The canvas element — HTML 5

Yahoo! オークションのファイルが破損してるな

私が作った Yahoo! オークション用のプログラムがどうもうまく作動しない。作動しないポイントは、Yahoo! 側から発信されているお知らせを取得するところ。

うん、rss 用の xml が破損してるな。
（2009/12/28 23:51:46 現在）

http://topic.auctions.yahoo.co.jp/notice/index.xml

中国、反体制作家に実刑 米国務省が「深い懸念」

中国、反体制作家に実刑　米国務省が「深い懸念」

こんな筋の通らない言論統制の激しい国と仲良くするなんて、現体制はどうかしている。日本国にはなんのメリットもない。今すぐ断絶すべきだ。

今年の入院中に 68 歳の男性とよく話していたが、そのとき、「アメリカの占領は、反って今の日本の繁栄をもたらしたと思っている」という言葉があった。直接な攻撃対象にならなかった京都だからこその言葉かもしれないが、なにか深い意味を内包しているように感じた。民主化の強力な推進は、プラスになったということだろう。

そのアメリカを軽視し、中国を重視するこの政権は、戦後稀に見る艱難だ。

イングランド、日本と対戦へ＝Ｗ杯サッカー強化試合で

イングランド、日本と対戦へ＝Ｗ杯サッカー強化試合で

イングランドにとってはサンドバッグ候補なんだろうな。。。
しかし日本代表にとってはとてもいいカードだと思う。あまり勝てる気はしないが、良い試合に期待。

Opera 10.5 pre-alpha for Labs

Opera 10.5 pre-alpha for Labs

Opera 10.5 の pre-alpha 版がリリースされたようなので、早速ダウンロードしてみた。そして、先ほどの新マシンでの Javascript の処理スピードをやってみた。まぁ、この 10.5 pre-alpha の比較のためにさきほど急遽やったのだが。。。

今回は Javascript のエンジンが Futhark から Carakan に変更されており、そのスピードの差異を調べたいと思い、立て続けにテストしてみた。その結果がこちら。

その一 のスピード
テスト概要：getElementById vs getElementsByTagName
Opera 10.10 の結果：
getElementById: 9.4 ミリ秒
getElementsByTagName: 8.2 ミリ秒

Opera 10.5 pre-alpha の結果（10 回実行した平均値）：
getElementById: 6.0 ミリ秒
getElementsByTagName: 4.2 ミリ秒

その二 のスピード
テスト概要：if else vs switch
Opera 10.10 の結果：
if else: 26.6 ミリ秒
switch: 26.1 ミリ秒

Opera 10.5 pre-alpha の結果（10 回実行した平均値）：
if else: 16.5 ミリ秒
switch: 16.2 ミリ秒

う〜ん、速くなってる！やるな、Opera・・・。しかも、今までエントリーに書いた html5 の canvas を確認してまわったけど、Opera 10.10 ではどうやっても無効だった shadowBlur と shadowOffset が、Firefox と同じように shadowColor を併記すれば有効になるよう修正されていた！

ただ、、、私にとっては大事なことなんだけど、Opera は右クリックしながら左クリックをするとブラウザの「戻る」となり、逆をすると「進む」になる機能が、働いてはいるんだが、context menu が出てきてしまう。マウスジェスチャでももちろん「戻る」「進む」はできるが、たまに手元が発狂してタブが開いてしまったり、再読み込みしてしまうので、クリックジェスチャをもう 7 年ほどお世話になっていたので、少々残念。

新マシンでの Javascript の処理スピード

以前、その一 と その二 でやった処理スピードを新マシンで検証し、マシンの違いでどのくらい速くなるかを計測してみた。以前は PowerPC 上でインストールできなかった Chrome も入れてみた。

その一 のスピード
テスト概要：getElementById vs getElementsByTagName
以前の結果：
◆Safari 4.0.2
　約 340 ミリ秒付近
◆Firefox 3.5.1
　約 3300 ミリ秒以上
◆Opera 10.00 beta 2
　約 30 ミリ秒未満

今回の結果（10 回実行した平均値）：
◆Safari 4.0.4
　getElementById: 40.5 ミリ秒
　getElementsByTagName: 42.1 ミリ秒
◆Firefox 3.5.6
　getElementById: 588.3 ミリ秒
　getElementsByTagName: 619.6 ミリ秒
◆Opera 10.10
　getElementById: 9.4 ミリ秒
　getElementsByTagName: 8.2 ミリ秒
◆Chrome 4.0.249.43
　getElementById: 41.4 ミリ秒
　getElementsByTagName: 42.2 ミリ秒

その二 のスピード
テスト概要：if else vs switch
以前の結果：
◆Safari 4.0.2
　約 340 ミリ秒付近
◆Firefox 3.5.1
　約 3300 ミリ秒以上
◆Opera 10.00 beta 2
　約 30 ミリ秒未満

今回の結果（10 回実行した平均値）：
◆Safari 4.0.4
　if else: 117.8 ミリ秒
　switch: 115.9 ミリ秒
◆Firefox 3.5.6
　if else: 1683.3 ミリ秒
　switch: 1690.0 ミリ秒
◆Opera 10.10
　if else: 26.6 ミリ秒
　switch: 26.1 ミリ秒
◆Chrome 4.0.249.43
　if else: 124.6 ミリ秒
　switch: 122.7 ミリ秒

前者のテストでは Safari で約 8 倍、Firefox でも約 5 倍スピードアップしていた。後者のテストでは、Safari で約 3 倍、Firefox で約 2 倍となった。処理にとっては if else や switch の方が簡単ということだろうか。

そしてもう一つ、この結果で判ったこととして、Opera では前者のテストで約 3 倍、後者のテストではあまりスピードアップがなかった。これは Opera があまりマシンパワーに関係なく処理を行っているように感じられる。