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 があまりマシンパワーに関係なく処理を行っているように感じられる。

図形を移動する(translate) [html5 の Canvas を使ってみる：第廿回]

translate(); を使って、一度描いた図形を移動できる。サンプルでは、x:50、y:50 を基点とした幅 100、高さ 50 の矩形を使用し、変形前を赤、変形後を青の線にしてみた。

★html 側

<canvas id="translate"></canvas>

★Javascript 側

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

// 赤い枠の矩形を rect(); と strokeStyleで描画
  c.beginPath();
  c.strokeStyle = "rgb(255, 0, 0)";
  c.rect(50, 50, 100, 50);
  c.stroke();
// 青い枠の矩形を rect(); と strokeStyleで描画
  c.beginPath();
  c.strokeStyle = "rgb(0, 0, 255)";
// x 軸に -20、y 軸に 30 移動
  c.translate(-20, 30);
  c.rect(50, 50, 100, 50);
  c.stroke();
}

すると、こうなる。


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

W3C；
4.8.11 The canvas element — HTML 5

図形を拡大・縮小する(scale) [html5 の Canvas を使ってみる：第十九回]

図形を拡大・縮小するには scale(); を使えば簡単にできる。この辺りも svg とよく似ている。サンプルでは、x:50、y:50 を基点とした幅 100、高さ 50 の矩形を使用し、変形前を赤、変形後を青の線にしてみた。

★html 側

<canvas id="scale"></canvas>

★Javascript 側

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

// 赤い枠の矩形を rect(); と strokeStyleで描画
  c.beginPath();
  c.strokeStyle = "rgb(255, 0, 0)";
  c.rect(50, 50, 100, 50);
  c.stroke();
// 青い枠の矩形を rect(); と strokeStyleで描画
  c.beginPath();
  c.strokeStyle = "rgb(0, 0, 255)";
// 横幅を 1.5 倍、高さを 0.5 倍に変更
  c.scale(1.5, 0.5);
  c.rect(50, 50, 100, 50);
  c.stroke();
}

また、scale(); を使用して拡大・縮小しても、矩形を描く基点となる座標は維持されず、指定した比率に従って基点が移動するようなので、補助線を引いてみた。すると、こうなる。


すると、x の座標は、元の 50 + 50 * (1.5 - 1) で 75 であることが判る。y の座標は同じように、50 + 50 * (0.5 - 1) で 25 となる。補助線はこの位置に引いている。

もう一度、比率を変えてみる。今度は横幅を 1.7 倍、高さを 0.8 倍に変更しちゃう。

// 横幅を 1.7 倍、高さを 0.8 倍に変更
  c.scale(1.7, 0.8);

これも、x の座標は 50 + 50 * (1.7 - 1) で 85、y の座標は 50 + 50 * (0.8 - 1) で 40 となっている。

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

W3C；
4.8.11 The canvas element — HTML 5

円形のグラデーションを付ける(createRadialGradient、addColorStop) [html5 の Canvas を使ってみる：第十八回]

createLinearGradient(); で線形グラデーションを塗ることをやったので、今回は円形のグラデーションを付けてみる。まずは、円の中を青と黒を使ってグラデーションを作ってみる。

★html 側

<canvas id="gradient"></canvas>

★Javascript 側

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

// 矩形を arc(); で描画
  c.beginPath();
  c.arc(50, 50, 50, 0, 2 * Math.PI, false);
// この円の中心である x:50、y:50 を中心にして、
// 半径が 0 の円と半径が 50 の円の間でグラデーションを指定
  g = c.createRadialGradient(50, 50, 0, 50, 50, 50);
// rgb で 0 の位置を青に指定
  g.addColorStop(0, "rgb(0, 0, 255)");
// rgb で最大の 1 の位置を黒に指定
  g.addColorStop(1, "rgb(0, 0, 0)");
// グラデーションを指定した g を fillStyle として塗りに指定
  c.fillStyle = g;
// 色塗りの指定
  c.fill();
}

すると、こうなる。


addColorStop(); の色指定を 16 進数にしてみる。

// 16 進数で 0 の位置を青に指定
  g.addColorStop(0, "#0000ff");
// 16 進数で最大の 1 の位置を黒に指定
  g.addColorStop(1, "#000000");

今までは createRadialGradient(); で指定する小さい方の円の半径が 0 だったが、これを半径 30 にしてみる。

  g = c.createRadialGradient(50, 50, 30, 50, 50, 50);

次に 3 色使ってみるために、青と黒の間に灰色を挟んでみる。addColorStop(); の第一引数を 0 と 1 の間で指定する。

// rgb で 0 の位置を青に指定
  g.addColorStop(0, "rgb(0, 0, 255)");
// rgb で 0.7 の位置を灰色に指定
  g.addColorStop(0.7, "rgb(200, 200, 200)");
// rgb で最大の 1 の位置を黒に指定
  g.addColorStop(1, "rgb(0, 0, 0)");

rgba で透明度を設定した値を addColorStop(); に入れ、青から透明になるようにしてみる。

// rgba で 0 の位置を青の透明化なしに指定
  g.addColorStop(0, "rgba(0, 0, 255, 1)");
// rgba で最大の 1 の位置を白の透明に指定
  g.addColorStop(1, "rgba(255, 255, 255, 0)");

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

W3C；
4.8.11 The canvas element — HTML 5

線形のグラデーションを付ける(createLinearGradient、addColorStop) [html5 の Canvas を使ってみる：第十七回]

fillStyle で色を塗ることをやったので、今回はグラデーションを付けてみる。まずは、矩形の中を青と黒を使ってグラデーションを作ってみる。

★html 側

<canvas id="gradient"></canvas>

★Javascript 側

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

// 矩形を rect(); で描画
  c.beginPath();
  c.rect(10, 10, 100, 50);
// グラデーションの方向を x:10、y:10 から
// x:100、y:10 の水平方向で指定
  g = c.createLinearGradient(10, 10, 100, 10);
// rgb で 0 の位置を青に指定
  g.addColorStop(0, "rgb(0, 0, 255)");
// rgb で最大の 1 の位置を黒に指定
  g.addColorStop(1, "rgb(0, 0, 0)");
// グラデーションを指定した g を fillStyle として塗りに指定
  c.fillStyle = g;
// 色塗りの指定
  c.fill();
}

すると、こうなる。


次に 3 色使ってみるために、青と黒の間に灰色を挟んでみる。addColorStop(); の第一引数を 0 と 1 の間で指定する。

// rgb で 0 の位置を青に指定
  g.addColorStop(0, "rgb(0, 0, 255)");
// rgb で 0.7 の位置を灰色に指定
  g.addColorStop(0.7, "rgb(200, 200, 200)");
// rgb で最大の 1 の位置を黒に指定
  g.addColorStop(1, "rgb(0, 0, 0)");

今度は垂直方向のグラデーションにしてみる。createLinearGradient(); の座標を垂直にすればいいだけ。

// グラデーションの方向を x:10、y:10 から
// x:10、y:50 の垂直方向で指定
  g = c.createLinearGradient(10, 10, 10, 50);
// rgb で 0 の位置を青に指定
  g.addColorStop(0, "rgb(0, 0, 255)");
// rgb で最大の 1 の位置を黒に指定
  g.addColorStop(1, "rgb(0, 0, 0)");

addColorStop(); の色指定を 16 進数にしてみる。

// 16 進数で 0 の位置を青に指定
  g.addColorStop(0, "#0000ff");
// 16 進数で最大の 1 の位置を黒に指定
  g.addColorStop(1, "#000000");

rgba で透明度を設定した値を addColorStop(); に入れ、青から透明になるようにしてみる。

// rgba で 0 の位置を青の透明化なしに指定
  g.addColorStop(0, "rgba(0, 0, 255, 1)");
// rgba で最大の 1 の位置を白の透明に指定
  g.addColorStop(1, "rgba(255, 255, 255, 0)");

最後に斜め方向のグラデーションにしてみる。これも createLinearGradient(); の座標を変更する。

// グラデーションの方向を x:10、y:10 から
// x:110、y:60 の斜め方向で指定
  g = c.createLinearGradient(10, 10, 110, 60);
// rgb で 0 の位置を青に指定
  g.addColorStop(0, "rgb(0, 0, 255)");
// rgb で 0.7 の位置を灰色に指定
  g.addColorStop(0.7, "rgb(200, 200, 200)");
// rgb で最大の 1 の位置を黒に指定
  g.addColorStop(1, "rgb(0, 0, 0)");

どうも長方形では斜めのラインが対角線と等しくはならないみたい。こりゃ注意しないと。。。

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

W3C；
4.8.11 The canvas element — HTML 5

76歳の誕生日祝い一般参賀 「皆さん健やかに新年を」

76歳の誕生日祝い一般参賀　「皆さん健やかに新年を」

いつまでも、お元気でいらしてください。

透明度をまとめて指定する(globalAlpha) [html5 の Canvas を使ってみる：第十六回]

fillStyle で rgb を使えば透明化できるのは判ったけど、いくつか図形があり、まとめて同じ透明度を適用させてい場合があるかもしれない。そんな時は globalAlpha(); がいいみたい。

arc(); で描いた円を赤・青・緑に塗り、背景に rect(); で描いた灰色の矩形、透明化されているのが判りやすいように、lineTo(); で黒い線を描いてみる。

★html 側

<canvas id="globalAlpha"></canvas>

★Javascript 側

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

// 灰色の矩形を rect(); で描画
  c.beginPath();
  c.rect(0, 0, 100, 40);
  c.fillStyle = "rgb(200, 200, 200)";
  c.fill();
// lineTo(); で黒い線を描画
  c.beginPath();
  c.moveTo(0, 20);
  c.lineTo(100, 20);
  c.stroke();
// 透明度を 50% に指定
  globalAlpha = 0.5;
// arc(); で赤い円を描画
  c.beginPath();
  c.arc(20, 20, 10, 0, 2 * Math.PI, false);
  c.stroke();
  c.fillStyle = "rgb(255, 0, 0)";
  c.fill();
// arc(); で青い円を描画
  c.beginPath();
  c.arc(20, 20, 10, 0, 2 * Math.PI, false);
  c.stroke();
  c.fillStyle = "rgb(0, 0, 255)";
  c.fill();
// arc(); で緑の円を描画
  c.beginPath();
  c.arc(20, 20, 10, 0, 2 * Math.PI, false);
  c.stroke();
  c.fillStyle = "rgb(0, 255, 0)";
  c.fill();
}

すると、こうなる。


globalAlpha(); は、これが記述された以降に fill(); や stroke(); されている図形に対して有効なようなので、最初の灰色の矩形の前に globalAlpha(); を記述してみると、灰色の矩形も透明化される。


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

W3C；
4.8.11 The canvas element — HTML 5

影の位置を指定する(shadowOffsetX・shadowOffsetY) [html5 の Canvas を使ってみる：第十五回]

矩形に影の位置を操作みる。

前に書いた「影を付ける」の状態がこれ。



影を x 軸に 10、y 軸に 20 ずらした位置に設定する。

★html 側

<canvas id="shadowOffset"></canvas>

★Javascript 側

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

// 影付き三角形を lineTo(); と closePath(); と shadowBlur で描画
  c.beginPath();
  c.moveTo(0, 0);
  c.lineTo(100, 10);
  c.lineTo(20, 20);
  c.closePath();
  c.shadowBlur = 5;
// 影の位置を x 軸に 10 だけずらすよう定義
  c.shadowOffsetX = 10;
// 影の位置を y 軸に 10 だけずらすよう定義
  c.shadowOffsetY = 20;
// これらの座標に対して線を引く指令
  c.stroke();
}

すると、こうなる。


確認環境：
Safari 5.0、Chrome 5.0.375.70

正常に動作しなかった環境：
Firefox 3.6.3、Opera 10.53
ただし、Firefox と Opera 10.53 は shadowColor を指定すれば有効になる。

W3C；
4.8.11 The canvas element — HTML 5

Microsoft の検索エンジン『Bing』、商標権侵害で訴えられる

Microsoft の検索エンジン『Bing』、商標権侵害で訴えられる

MS が Bing を初めて半年以上経つ今頃訴えたの？みたいな感じはするが。誰かの差し金だろうか？

世界一人気のブラウザは『Firefox 3.5』？

世界一人気のブラウザは『Firefox 3.5』？

確かに、そう考えれば一位かもしれない。でももっともっとシェアを喰い尽くして、固有の version でなく銘柄として一位を取ることを期待する。私は特に Firefox マニアではない（プラグインも Firenug だけ。スキンは変えてる）ので、他の Chrome でも Safari でも Opera でもいいけど、とにかく、IE を排除することには賛成だ。

もちろん、IE が素晴らしいブラウザへと進化すれば話は別だが。

「たぶん」日米同盟は重要

さっき、News Japan の鳩ポポの映像でこんな台詞が。

「たぶん日米同盟は重要」

あまりにもひと事のように捉えていると思われる「たぶん」という冠詞。こんなのを首相としていいのか。いや、良くない。

なんだ「たぶん」て。そういえば小沢は「俺」とか言ってたな。民主党はこんな奴らばっか。

影に色を付ける(shadowColor) [html5 の Canvas を使ってみる：第十四回]

矩形の影に色をつけてみる。

半径 10 の円を 3 つ並べて描き、左から赤（rgb）・青（16 進数）・青（rgba で 50%）をつけてみる。

★html 側

<canvas id="shadowColor"></canvas>

★Javascript 側

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

// 1 つめの影付きの円を arc(); と shadowBlur で描画
  c.beginPath();
  c.arc(20, 20, 10, 0, 2 * Math.PI, false);
  c.shadowBlur = 5;
// 影の色を rgb で赤に設定
  c.shadowColor = "rgb(255, 0, 0)";
// これらの座標に対して線を引く指令
  c.stroke();

// 2 つめの影付きの円を arc(); と shadowBlur で描画
  c.beginPath();
  c.arc(50, 20, 10, 0, 2 * Math.PI, false);
  c.shadowBlur = 5;
// 影の色を 16 進数で青に設定
  c.shadowColor = "#0000ff";
// これらの座標に対して線を引く指令
  c.stroke();

// 3 つめの影付きの円を arc(); と shadowBlur で描画
  c.beginPath();
  c.arc(80, 20, 10, 0, 2 * Math.PI, false);
  c.shadowBlur = 5;
// 影の色を rgba で青の 50% に設定
  c.shadowColor = "rgba(0, 0, 255, .5)";
// これらの座標に対して線を引く指令
  c.stroke();
}

すると、こうなる。


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

どうやら、Firefox と Opera ではこの shadowColor を指定すれば、shadowBlur が機能するようだ。

W3C；
4.8.11 The canvas element — HTML 5

影を付ける(shadowBlur) [html5 の Canvas を使ってみる：第十三回]

矩形に影をつけてみる。

前に書いた「線を閉じる」の状態がこれ。



影のレベルを 5 に設定する。

★html 側

<canvas id="shadowBlur"></canvas>

★Javascript 側

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

// 三角形を lineTo(); と closePath(); で描画
  c.beginPath();
  c.moveTo(0, 0);
  c.lineTo(100, 10);
  c.lineTo(20, 20);
  c.closePath();
// 影のレベルを 5 に設定
  c.shadowBlur = 5;
// これらの座標に対して線を引く指令
  c.stroke();
}

すると、こうなる。


確認環境：
Safari 5.0、Chrome 5.0.375.70

正常に動作しなかった環境：
Firefox 3.6.3、Opera 10.53
ただし、Firefox と Opera では shadowColor を指定すれば有効になる。

W3C；
4.8.11 The canvas element — HTML 5

森永卓郎は眉中眉朝の売国奴である

今更だが。

本日の TV タックルを見たら、いつもと変わらぬ売国奴 vs 保守という構図だったが、森永卓郎はいつに変わらぬ売国奴ぶりを発揮していた。もちろん、民主党・社民党・共産党もそうだが。そこで森永が発言したこれ。

「ここは右翼の集まりか」

違う。一般に（と思っている）「右翼＝危ない」というイメージは、元々左翼によって作られた。右翼が危ないという認識を国民に植え付け、左傾化させることが狙いであった。また、右翼には在日（極左）が多数在籍していることが、かつて「そこまで言って委員会」内で右翼幹部が発言している。森永はこの経緯を知ってか知らずか、発言をしている。

保守は必ずしも右翼ではない。

過去にも、日本は他国から攻められれば黙って殺されればいい、とか、竹島を朝鮮にあげればいい、とか、「日本人なら」考えられない発言が多い。

ちなみに、、、鳩ポポが子ども手当に所得制限をつけないと言ったそうだが、財源は・・・国債となる。ということは、いつか手当を与えられた分吸い上げられるということになる。

民主党政権を駆逐する奇蹟が起きてほしい。

線の接続点のスタイルを変える(lineJoin) [html5 の Canvas を使ってみる：第十二回]

線の接続点のスタイルを変えてみる。こちらも線が細いと判りにくいので、lineWidth で太さを 20 にする。

★html 側

<canvas id="lineJoin"></canvas>

★Javascript 側

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

// 線幅 20 の三角形を lineTo(); と closePath(); と lineWidth で描画
  c.beginPath();
  c.moveTo(20, 30);
  c.lineTo(100, 70);
  c.lineTo(20, 110);
  c.closePath();
  c.lineWidth = 20;
// 線の接続点のスタイルを bevel に定義
  c.lineJoin = "bevel";
// これらの座標に対して線を引く指令
  c.stroke();
}

すると、こうなる。黒の太線と同じ座標を通る赤線と、左の座標を通る縦の赤線を補助線として引いてみる。


では、これの構造を見てみる。今回は右の部分を拡大したような図形でやってみる。bevel は左上からの線と左下からの線が接続点で交差したときにできた隙間（下図の赤い部分）を補完した図形になる。


次に round を入れてみる。これにも補助線を引いてみる。

  c.lineJoin = "round";

これの構造も見てみる。round は左上からの線と左下からの線が交差した接続点を中心にし、線の太さを直径にした円形を補完した図形になっている。


最後に miter を入れる。これにも同様に補助線を引いてみる。

  c.lineJoin = "miter";

miter の構造は、左上からの線と左下からの線が接続点を無視して伸びているとし、その重なりあっている菱形を補完した図形になっている。


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

W3C；
4.8.11 The canvas element — HTML 5

線の両端のスタイルを変える(lineCap) [html5 の Canvas を使ってみる：第十一回]

今度は線の両端のスタイルを変えてみる。線が細いと判りにくいので、lineWidth で太さを 30 にする。

ただ、これはあくまでの線の端であり、三角形なり四角形なりの形の全ての端にスタイルを効かせるときは、lineJoin を使う。

★html 側

<canvas id="lineCap"></canvas>

★Javascript 側

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

// 太さ 30 の線を lineTo(); と lineWidth で描画
  c.beginPath();
  c.moveTo(50, 50);
  c.lineTo(100, 50);
  c.lineWidth = 30;
// 線の両端のスタイルを butt に定義
  c.lineCap = "butt";
// これらの座標に対して線を引く指令
  c.stroke();
}

すると、こうなる。判りやすいように補助線も引いてみる。横の赤線は黒い線の中心を通り、縦の 2 本の赤線は両端の座標を通っている。


この butt はデフォルト値で、端を丸くするには round を使う。これも同じ扱いの補助線を引いてみる。

  c.lineCap = "round";

これの構造を知るために、薄い黄色の補助円を描いてみる。両端を円の中心点にし、半径を黒い線の太さの半分とすると、ちゃんと重なる。


もう一つの値 square を入れてみる。これも同様の補助線を引いてみる。

  c.lineCap = "square";

これも構造を知るために、薄い黄色の補助矩形を描いてみる。両端を矩形の中心点にし、一辺の長さを黒い線の太さの倍とすると、ちゃんと重なる。


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

W3C；
4.8.11 The canvas element — HTML 5

線の太さを変える(lineWidth) [html5 の Canvas を使ってみる：第十回]

今まで図形を色々と書いてきたが、線の太さも変えられるようだ。

★html 側

<canvas id="lineWidth"></canvas>

★Javascript 側

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

// 三角形を lineTo(); と closePath(); で描画
  c.beginPath();
  c.moveTo(10, 10);
  c.lineTo(110, 20);
  c.lineTo(30, 30);
  c.closePath();
// 線の太さを 5 に定義
  c.lineWidth = 5;
// これらの座標に対して線を引く指令
  c.stroke();
}

すると、こうなる。


この lineWidth は、描画ポイントとなる座標を結んだ線を中心線として、その両側が太っていくことによって、線の太さとしている。以下は太さを 50 とした線に、中心線を赤で重ねたもの。


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

W3C；
4.8.11 The canvas element — HTML 5

今日のそこまで言って委員会

素晴らしかった。安倍元総理と櫻井よしこさんをゲストに迎えた、真の保守を考える、というようなもの。そこに西村眞悟氏、鴻池祥肇氏、安里繁信氏がパネラーとして加わり、大変素晴らしい回だった。非常に心地よく、保守政党である自民党に是非頑張ってほしいと強く感じた。

この番組は毎回録画もしているが、今回はロックをかけ、保存版にした。

星形を描く(lineTo+closePath) [html5 の Canvas を使ってみる：第九回]

それでは、これも検索結果になかったので、星形を描いてみる。

星形の各座標は、余弦定理を用いれば求めることができる。ここでは、枠線を青で、内部の色を 50% の青で塗った星を描いてみる。

★html 側

<canvas id="star"></canvas>

★Javascript 側

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

// 描画をすることを宣言
  c.beginPath();
// 上記を描画する function をコールする
// 引数：中心 x、中心 y、半径、線の色、塗る色、大小、対象
  star(70, 70, 50, "rgb(0, 0, 255)", "rgba(0, 0, 255, .5)", c);
// これらの座標に対して線を引く指令
  c.stroke();
}
function star(x, y, radius, strokeColor, fillColor, target) {
// 使用する角度θを定義
// 星の各頂点の角度の総和が 360°であることを利用
  var theta = 72 * Math.PI / 180;
// 頂点の座標を筆おろしとする
  target.moveTo(x, (y - radius));
// 右下の座標
  target.lineTo(Math.round(x + radius * Math.sin(2 * theta)), Math.round(y - radius * Math.cos(2 * theta)));
// 左上の座標
  target.lineTo(Math.round(x - radius * Math.sin(theta)), Math.round(y - radius * Math.cos(theta)));
// 右上の座標
  target.lineTo(Math.round(x + radius * Math.sin(theta)), Math.round(y - radius * Math.cos(theta)));
// 左下の座標
  target.lineTo(Math.round(x - radius * Math.sin(2 * theta)), Math.round(y - radius * Math.cos(2 * theta)));
// 左下の座標と頂点を閉じる
  target.closePath();
// 線の色をつける
  target.strokeStyle = strokeColor;
// 内部の色を塗る
  target.fillStyle = fillColor;
// 塗る指令
  target.fill();
// これらの座標に対して線を引く指令
  target.stroke();
}

すると、こうなる。


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

線に色を塗る(strokeStyle) [html5 の Canvas を使ってみる：第八回]

描いた線や図形の枠に色で塗ってみる。

今回は arc(); での円と rect(); での矩形も仲間に入れてみた。3 つの図形を判りやすいように、c1・c2・c3 と便宜上分けた。

★html 側

<canvas id="strokeStyle"></canvas>

★Javascript 側

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

// 三角形を lineTo(); と closePath(); で描画
  c1.beginPath();
  c1.moveTo(0, 30);
  c1.lineTo(100, 60);
  c1.lineTo(20, 70);
  c1.closePath();
// 線の色を rgb(255, 0, 0) の赤で指定
  c1.strokeStyle = "rgb(255, 0, 0)";
// これらの座標に対して線を引く指令
  c1.stroke();

// id: fillStyle で 2 次元描画を行うことの定義（2 つめ）
  var c2 = document.getElementById("fillStyle").getContext('2d');

// 重ねる円を arc(); で描画
  c2.beginPath();
  c2.arc(80, 60, 50, 0, (360 * Math.PI / 180), false);
// 線の色を rgb(0, 0, 255) の青で指定
  c2.strokeStyle = "rgb(0, 0, 255)";
// これらの座標に対して線を引く指令
  c2.stroke();

// id: fillStyle で 2 次元描画を行うことの定義（3 つめ）
  var c3 = document.getElementById("fillStyle").getContext('2d');

// 重ねる四角形を rect(); で描画
  c3.beginPath();
  c3.rect(60, 30, 50, 50);
// 線の色を rgb(0, 255, 0) の緑で指定
  c3.strokeStyle = "rgb(0, 255, 0)";
// これらの座標に対して線を引く指令
  c3.stroke();
}

すると、こうなる。


で、fillStyle と同様に、色の値は CSS のフォーマットで指定するので、rgba を用いて、半透明にすることもできる。ここでは、赤い三角の色を 30% に、青い丸の色を 50% に、緑の四角の色を 20% にしてみる。

  c1.strokeStyle = "rgba(255, 0, 0, .3)";
  c2.strokeStyle = "rgba(0, 0, 255, .5)";
  c3.strokeStyle = "rgba(0, 255, 0, .2)";

これも transparent を指定すれば、透明になる。が、塗りつぶしなしで線に transparent 指定をしてしまうと、当たり前だが描画されなくなってしまうので、fillStyle で rgba(0, 0, 255, .1) で 10% だけ青を塗り、判りやすくしてみる。

  c2.strokeStyle = "transparent";
  c2.fillStyle = "rgba(0, 0, 255, .1)";
  c2.fill();

もちろん 16 進数でも可能。

  c1.strokeStyle = "#ff0000";
  c2.strokeStyle = "#0000ff";
  c3.strokeStyle = "#00ff00";

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

W3C；
4.8.11 The canvas element — HTML 5

色で塗る(fillStyle) [html5 の Canvas を使ってみる：第七回]

描いた図形に色で塗りつぶしてみる。

色を塗ったときに判るように、図形を重ねて描いてみる。2 つの図形を判りやすいように、c1・c2 と便宜上分けた。

★html 側

<canvas id="fillStyle"></canvas>

★Javascript 側

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

// 1 つめの三角形を lineTo(); と closePath(); で描画。
  c1.beginPath();
  c1.moveTo(0, 30);
  c1.lineTo(100, 60);
  c1.lineTo(20, 70);
  c1.closePath();
  c1.stroke();
// 色を rgb(255, 0, 0) の赤で指定
  c1.fillStyle = "rgb(255, 0, 0)";
// 色を塗る命令
  c1.fill();

// id: fillStyle で 2 次元描画を行うことの定義（2 つめ）
  var c2 = document.getElementById("fillStyle").getContext('2d');

// 2 つめの三角形を lineTo(); と closePath(); で描画。
  c2.beginPath();
  c2.moveTo(60, 0);
  c2.lineTo(70, 90);
  c2.lineTo(30, 100);
  c2.closePath();
  c2.stroke();
// 色を rgb(0, 0, 255) の青で指定
  c2.fillStyle = "rgb(0, 0, 255)";
// 色を塗る命令
  c2.fill();
}

すると、こうなる。


で、色の値は CSS のフォーマットで指定するので、rgba を用いて、半透明にすることもできる。

// c1 の fillStyle を rgba で色を 30% にする
  c1.fillStyle = "rgba(255, 0, 0, .3)";
// 同じように、c2 の fillStyle を rgba で 50% にする
  c2.fillStyle = "rgba(0, 0, 255, .5)";

transparent を指定すれば、透明になる。例えば、上に乗っかってる青い図形を透明にしてみる。

  c2.fillStyle = "transparent";

おなじみの 16 進数でも可能。

  c1.fillStyle = "#ff0000";
  c2.fillStyle = "#0000ff";

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

W3C；
4.8.11 The canvas element — HTML 5

内閣支持続落、47％に＝不支持3割超す－時事世論調査

内閣支持続落、47％に＝不支持3割超す－時事世論調査

遂に来た。嬉しい。

矩形を描く(rect) [html5 の Canvas を使ってみる：第六回]

矩形を描くのはとても簡単。長方形や正方形なら、lineTo(); でいちいち指定するよりも速いし間違えにくい。この辺りも SVG とよく似ている。

★html 側

<canvas id="rect"></canvas>

★Javascript 側

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

// 描画をすることを宣言
  c.beginPath();
// 座標 x:10、y:10 を基点にして、
// 幅 100、高さ 50 の矩形を描く
  c.rect(10, 10, 100, 50);
// これらの座標に対して線を引く指令
  c.stroke();
}

すると、こうなる。


上記の場合、stroke(); を記述しなければ、白くて枠のない矩形が描画される。fillStyle で色を塗っておけば、その色だけの矩形を描くことができる。

また、rect(); はパスを描くわけではないので、beginPath(); は宣言しなくても描画できるが、宣言しないと他で使おうとしている strokeStyle などに影響を受けるようなので、記述しておいた方がいいと思う。

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

W3C；
4.8.11 The canvas element — HTML 5

弧を描く(arcTo) [html5 の Canvas を使ってみる：第五回]

ではちょっと判りにくい「弧を描く」をやってみる。

★html 側

<canvas id="arcTo"></canvas>

★Javascript 側

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

// 描画をすることを宣言
  c.beginPath();
// 筆おろしの座標を x:0、y:80 に定義
  c.moveTo(0, 80);
// 座標を x:100、y:80 まで引く筈の線を
// x:20、y:20 へ向けて、半径 30 で弧を描く
  c.arcTo(100, 80, 20, 20, 30);
// これらの座標に対して線を引く指令
  c.stroke();
}

すると、こうなる。


しかしこれでは判りにくいので、補助線（x:0、y:80 から x:0、y:100 までの直線）を引いてみる。


このグニャっとなっている弧を伸ばすと、引いた補助線と重なるということになる。なので、arcTo(); の第一・第二引数は「伸ばした際の到達点」と考えて差し支えないと思う。そして、グニャっとなった弧の先端から向かっている座標が、arcTo(); の第三・第四引数となる。第五引数の半径分を確保できるだけ、グニャっと曲がるようである。なので、この半径を 10 に変えると、こうなる。

  c.arcTo(100, 80, 20, 20, 10);

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

正常に動作しなかった環境：
Opera 10.53

W3C；
4.8.11 The canvas element — HTML 5

米軍基地を対馬へ

ふと思ったんだが、米軍基地を対馬へ移転させるのはどうなんだろう。朝鮮・中国という反日国家から日本を守るためには、有益な気がする。もっとも、日本を朝鮮・中国に乗っ取らせようとしている現政権ではダメだと思うが。

対馬こそ、日本が守らなければならない領土だと思っている。弘安の役の際、本土上陸の前に、壱岐・対馬が蹂躙された。この惨劇を表す言葉として、今でも残っているのが「ムクリコクリ」。「ムクリ」とは蒙古で、「コクリ」が高麗であり、この両国から日本は攻められていた。そう、現代の中国・朝鮮である。

遥か昔から目をつけられていた対馬を、今こそ、守るべきである。

扇形を作る(moveTo+arc+closePath) [html5 の Canvas を使ってみる：第四回]

次はなににしようかと思ってて、arc(); では円を描くをやったが、扇形はどうすれば描けるのか、と。検索結果を見ても、どうもそれらしきメソッドはないように見える。

ということで、扇形を作る function を作ってみた。moveTo(); と arc(); と closePath(); を使って描ける。

中心座標が x:70、y:70 で、半径が 50、水平から 60°上にずれた傾きを持ち、角度が 90°の扇形を描く。

/* 2009/12/19 edit */
第七回と第八回で色を塗ることもやったので、色を塗る処理も追加してみた。

★html 側

<canvas id="fan"></canvas>

★Javascript 側

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

// 描画をすることを宣言
  c.beginPath();
// 上記を描画する function をコールする
// 引数：中心 x、中心 y、半径、傾き、角度、線の色、塗る色、大小、対象
  fan(70, 70, 50, -135, 90, "rgb(0, 0, 255)", "rgba(0, 0, 255, .5)", true, c);
}
function fan(x, y, radius, tilt, angle, strokeColor, fillColor, bool, target) {
// 筆おろしの座標を定義
  target.moveTo(x, y);
// arc の startAngle と endAngle はラジアンを使うので、
// 円周率に角度を乗算し、180 で除算する。
// プラス値だと下向きになり、なんか不自然なのでマイナス値。
// endAngle は傾きと角度を加えないとうまく描画されない。
  target.arc(x, y, radius, -(tilt * Math.PI / 180), -((tilt + angle) * Math.PI / 180), bool);
// 弧を閉じる
  target.closePath();
// 線の色をつける
  target.strokeStyle = strokeColor;
// 内部の色を塗る
  target.fillStyle = fillColor;
// 塗る指令
  target.fill();
// これらの座標に対して線を引く指令
  target.stroke();
}

すると、こうなる。


bool 値を false にすると、指定した扇形を抜いた形になる。

  fan(70, 70, 50, 60, 90, false, c);

傾きを 20°にし、角度を 140°にすると、こうなる。

  fan(70, 70, 50, 20, 140, true, c);

下向きするには、傾きを水平からのマイナス値を入れる。

  fan(70, 70, 50, -120, 60, true, c);

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

線を閉じる(closePath) [html5 の Canvas を使ってみる：第三回]

パスの筆おろしの場所と、最終地点を結ぶ線を引いてみる。

前に書いた「線を引く」の状態がこれ。



そこで、線を繋いでみる。

★html 側

<canvas id="closePath"></canvas>

★Javascript 側

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

// 描画をすることを宣言
  c.beginPath();
// 筆おろしの座標を x:0、y:0 に定義
  c.moveTo(0, 0);
// 線を引く座標を x:100、y:10 に定義
  c.lineTo(100, 10);
// もひとつ線を引く座標を x:20、y:20 に定義
  c.lineTo(20, 20);
// 最終地点の x:20、y:20 から x:0、y:0 を結ぶ
  c.closePath();
// これらの座標に対して線を引く指令
  c.stroke();
}

すると、こうなる。


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

W3C；
4.8.11 The canvas element — HTML 5

円を描く(arc) [html5 の Canvas を使ってみる：第二回]

次に、円を描いてみる。

★html 側

<canvas id="arc"></canvas>

★Javascript 側

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

// 描画をすることを宣言
  c.beginPath();
// 中心座標が x:50、y:50、半径が 30、
// 0°の位置から 180°の半円を描画
// 2π以上が円周の描画として扱われるため、
// 角度を乗算すると同時に 180 で除算する必要がある
  c.arc(50, 50, 30, 0, (180 * Math.PI / 180), false);
// これらの座標に対して線を引く指令
  c.stroke();
}

すると、こうなる。


また、arc の最後の引数を true に変えると、こうなる。

  c.arc(50, 50, 30, 0, (180 * Math.PI / 180), true);

上記の場合、stroke(); を記述しなければ、白くて枠のない円が描画される。fillStyle で色を塗っておけば、その色だけの円を描くことができる。但し、上記のように 2π 未満の場合は、円周の端と端を直線で繋ぐように塗られてしまうので、扇形を描きたい場合は 扇形を作る を参照。

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

W3C；
4.8.11 The canvas element — HTML 5

今日の歴史秘話ヒストリア「平清盛」が気分悪い

中国を大事にしろ、男は草食系が良い、と国益にならぬことをあたかも正しいかのように言っている。NHK だけに、プロパガンダのニオイがプンプンする。

宋との貿易は国益のためではなく、平家の繁栄にためにやっただけであって、国として中国を大事にしていたわけではない。平家は血縁を大事にし過ぎ、さらに公卿になったが故に武家闘争の感覚を失い、繁栄が長続きしなかった。番組の後半には、平家がもっと続いていれば貿易の利益により日本が繁栄し、時代が変わったかもしれないとあったが、大きな落とし穴がある。

元寇である。宋は平家と貿易をしようがしまいが、元に滅ぼされる。その後、1274 年と 1281 年に元寇が起こる。その元寇や元からの使者への対処をしたのは、鎌倉幕府である。もし平家政権が存続し、その対処を求めるとなると、逆に危うかったと思われる。何故なら平和ボケした平家は、日本がかつて経験したことのない「他国による侵略」を防げたとは思えない。根っからの武家である源氏であったからこそ、退治でき、現在の日本があるように思う。

平家は日本を興隆させる夢を追うというような筋書きだが、地方の土地所有者がその土地の所有権を保持するためには、自腹で長期間、京に行き平家へのタダ働きを強いられていた。この所業のどこに、国の繁栄を願う姿があろうか。また、福原への遷都も肯定的に描いているが、様々な造営に狩り出された庶民の苦しみを全く描いていない。遷都は常に庶民の艱難を伴う。

さらに、戦争において、源氏の戦略に対して「今までのルールを無視して」とか「武士にあるまじき行為」とか言っているが、戦争は勝たなければ意味はない。そのための戦略であるのに、源氏をキチガイのように扱っている NHK こそが頭オカシイ。それと、屋島の戦いを何故すっ飛ばしているのだろうか。あれこそが、平家の無能さを露出した戦いであるのに。

で、平清盛は全て実力で最高権力まで握ったとあったが、そこに後白河上皇の清盛を有頂天にさせ、結果堕落させるという陰謀があったことを忘れてはいけない。所謂、位打ちと呼ばれるものである。

別に平家が嫌いで源氏が好きというわけでもないのだが、あまりにも平家を肯定的に描き過ぎている。

で、気分が悪いなら何故この番組を見るのかって？いや、こういう展開だとは知らなかった。。。

線を引く(lineTo) [html5 の Canvas を使ってみる：第一回]

やっぱりまずは「線を引く」から。

★html 側

<canvas id="lineTo"></canvas>

★Javascript 側

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

// 描画をすることを宣言
  c.beginPath();
// 筆おろしの座標を x:0、y:0 に定義
  c.moveTo(0, 0);
// 線を引く座標を x:100、y:10 に定義
  c.lineTo(100, 10);
// もひとつ線を引く座標を x:20、y:20 に定義
  c.lineTo(20, 20);
// これらの座標に対して線を引く指令
  c.stroke();
}

すると、こうなる。


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

W3C；
4.8.11 The canvas element — HTML 5

html5 の Canvas を使ってみる

html5 では Canvas という、Flash はもう用済みなのでは、と巷で騒がれているほどのものが定義されている。まぁまだ Flash の方が使いやすいと思うけど、今後に期待という感じか。SVG の精神を受け継いでいるような雰囲気なので、SVG をやったことのある人はとっつき易い・・・かもしれない。

そこで、実際に Canvas を使ってみて、やってみたもん順に紹介していきたいと思う。

1. 線を引く(lineTo)


2. 円を描く(arc)


3. 線を閉じる(closePath)


4. 扇形を作る(moveTo+arc+closePath)


5. 弧を描く(arcTo)


6. 矩形を描く(rect)


7. 色で塗る(fillStyle)


8. 線に色を塗る(strokeStyle)


9. 星形を描く(lineTo+closePath)


10. 線の太さを変える(lineWidth)


11. 線の両端のスタイルを変える(lineCap)


12. 線の接続点のスタイルを変える(lineJoin)


13. 影を付ける(shadowBlur)


14. 影に色を付ける(shadowColor)


15. 影の位置を指定する(shadowOffsetX・shadowOffsetY)


16. 透明度をまとめて指定する(globalAlpha)


17. 線形のグラデーションを付ける(createLinearGradient、addColorStop)


18. 円形のグラデーションを付ける(createRadialGradient、addColorStop)


19. 図形を拡大・縮小する(scale)


20. 図形を移動する(translate)


21. 図形を回転する(rotate)


22. 塗りつぶしテキストを書いてみる(fillText)


23. 枠線でできたテキストを書いてみる(strokeText)


24. テキストの色を変える(fillStyle・strokeStyle)


25. テキストの最大表示幅(MaxWidth)を指定する(fillText・strokeText)


26. テキストの方向を指定する(textAlign)


27. テキストのスタイルを変更する(font)


28. テキスト描画の基準位置を変更する(textBaseLine)


29. 画像を読み込む(drawImage)


30. 読み込んだ画像の一部を切り貼りする(getImageData・putImageData)


31. 読み込んだ画像にマスクをかける(clip)


32. 四角形で指定した矩形を削除する(clearRect)


33. 画像を背景として設定する(createPattern)


34. 描画スタイルをスタックへ保持、取り出す(save・restore)


35. 直線接続点を miter とする限界を設定する(miterLimit)


36. Illustrator のような三次ベジェ曲線を描く(bezierCurveTo)


37. Illustrator のような二次ベジェ曲線で角丸の四角や微妙な円を描く(quadraticCurveTo)


38. 指定した座標が描画された範囲に入っているか調べる(isPointInPath)


39. 塗りつぶし矩形を描く(fillRect)


40. 枠を塗った矩形を描く(strokeRect)


41. 重ねた画像の表示の仕方を指定する(globalCompositeOperation)


42. 矩形に変換マトリクスを加える(transform)


43. 矩形に新規変換マトリクスを加える(setTransform)


44. Canvas 下地の描画範囲を設定する(width・height)


45. Canvas でローディングイメージ（読み込み中の画像）のアニメーションを作成する

マイクロソフトが知財侵害で謝罪、「外注先の中国企業が違反」

マイクロソフトが知財侵害で謝罪、「外注先の中国企業が違反」

中国の企業に外注なんかしてはダメだ。モラルなど全くない。警備員でさえ、グルになって窃盗をしている国だからだ。このような国の「副」主席が陛下に謁見など、もってのほかだし、甚だ遺憾だ。陛下も心を痛めておられると思う。民主党は国賊である。

このご時世、中国産で気にしないのは、烏龍茶ぐらいじゃないか？

特例会見「元首相が要請」＝前原国交相が指摘

特例会見「元首相が要請」＝前原国交相が指摘

なんだ、なんて言うんだ、こんな時は。

ああ、そうか、あれか。

無茶苦茶だな。

一国の「副」主席が相手だったら、今の状況、小沢が妥当。皇族は関係ないだろう。誰が言ったにせよ、現在の政権として、妙な政治利用のために連れ回さないでいただきたい。

ふたご座流星群

今、ベランダに出ていたら、東の空に物凄い光が落ちた。言葉では言い表せないくらいの大きさの流星だった。全身、頭の先までイボが出た。もう一つ、光は普通ながらもやはり流星を見た。

空が晴れている場所の人は、東の空を見つめたら、今、見られるかもしれない。

Google の検索結果がなんか変

検索語句：総務副大臣が首相批判＝天皇特例会見「やめた方がいい」

この語句で検索を行い、ページ下の Gooooooooogle の数字や「次へ」を選んで表示させると、ページ上部の薄いブルーの帯右側に「1 - 10 件目」と表示された。また、下部の Goooooooooogle も 1 ページ目に戻っているが、URL には「&start=（アイテムの開始番号）」とある。なんでや？

なお、Safari、Firefox、Opera では上記検索語句の後ろを「方」まで削除した以下でも再現します。
検索語句：総務副大臣が首相批判＝天皇特例会見「やめた

対して Chrome では、同様に「が」まで削除した以下でも再現します。
検索語句：総務副大臣が首相批判＝天皇特例会見「やめた方

上記の各種ブラウザでの検索語句から以下の検索語句までの間であれば、ページ下部の「次へ」で 2 ページ目への動作は正常に行われた。
検索語句：総務副大臣が首相批判＝天皇特例会見「やめた方がい

再現環境：
OS：Mac OS 10.6.2
Browser：Chrome 4.0.249.30、Firefox 3.5.5、Safari 4.0.4、Opera 10.10
再現時刻：2009/12/14 19:27

第 39 回同志社女子大学学芸学部音楽学科定期演奏会

第 39 回同志社女子大学学芸学部音楽学科定期演奏会

ここ 10 年の間に数回行っている。去年は行けなかったので、今年は行ってみたが、やはり良い。1,000 円という安さも、外部の人間であるにも関わらず、学科の定期演奏会に何度も足を運ばせている理由の一つだ。今日は比較的前の方へ行った（その辺りしか空いていなかったという理由が大きいが）のだが、演奏者を近くで見ると、色々と勉強になる。場所としてはヴィオラの近くで、普段はお目にかかれないヴィオラをよく見ることもできたし、ヴァイオリンに代表される弦楽器の演奏方法やらを間近で見ることは、収穫だった。

これからも前の方で見よう。

総務副大臣が首相批判＝天皇特例会見「やめた方がいい」

総務副大臣が首相批判＝天皇特例会見「やめた方がいい」

民主党が天皇陛下蔑視の精神を持っていることなど、容易に想像できる。日本の天皇という位は世界でもローマ法王と並ぶ地位であるとのことを、昔なにかの番組で見た。そのような陛下を、いち共産国家の「副」主席と会見など、誠に遺憾である。畏れながら、主席が出る程度の人間ではないということを、アピールするためだけの会見になる。これを書いているだけで腹が立ってくる。

民主党に政権が変わってなにか良かったことはあったか？

戦後の昭和 22 年以来、国債が税収を上回ったことはなかった。しかし過日発表された報道では、国債が税収を上回るという。戦争はあったか？なのに何故上回る？昨年の恐慌でもこのような事態にはならなかった。明らかに民主党の責任ではないか。

さらに先日の参政権問題が勃発し、沖縄の問題も悪化した。アメリカからは敵視されてしまっている。二酸化炭素削減 25% という非現実的な数値を国際舞台で豪語してしまった上は、実施できなかった場合の非難は避けられない。

ニッポンの危機だ。

鳩ポポは早く逮捕されなさい。秘書の不祥事は政治屋の不祥事だと、昔アンタは言い放った。なら、自分の言に従うべきだ。

鹿島に勝った！

ようやく勝てた。うれしい。やはり山崎は素晴らしい。来年は先発で使ってほしいなぁ。二川が FW 登録なのには驚いた。

さぁ、次は川崎を破った仙台だ！

参政権法案「来年現実に」＝韓国で講演、植民地支配は謝罪－民主・小沢氏

参政権法案「来年現実に」＝韓国で講演、植民地支配は謝罪－民主・小沢氏

遂にこの瞬間が来てしまった。民主党が政権であることに恐れを抱く法案の内の一つだ。

古今数多くの戦争があったが、戦勝国が敗戦国に賠償を行った事実はなく、さらに日本は朝鮮とコトを構えたことがあっただろうか。近代史にはない。昔には元寇の際に朝鮮が日本侵略のために 7,000 人を派兵したことと、白村江に朝鮮南部の百済を救いに朝鮮北部の新羅と戦ったくらいではないか。どこに賠償の責任がある？

さらに併合の結果として、朝鮮は日本に被害を被ったのであろうか。否である。様々な発展に寄与し、現在の国力の基礎を築いたのは日本である。その日本に対して何故謝罪が必要なのか。併合反対派であった伊藤博文を暗殺したのは、朝鮮人である安重根である。その結果、併合が進んだ。当時は肯定していた併合を、何故終わったら否定するのか。

外国人参政権などは諸悪の根源でしかなく、オランダの例を見れば、国が廃れるのは実証されている。このような法案が可決されてしまえば、日本であるのに政治その他を朝鮮が握っているという非常に由々しき事態となる。

参政権は必要ない。謝罪も必要ない。賠償も必要ない。必要なのは朝鮮との断絶である。

国家反逆罪はないのか。是非民主党・社民党に適用してほしい。これらは旧大逆罪にもあたり得るのである。

標的はワシントン！Ｇ大阪がＦＷ補強に動く

標的はワシントン！Ｇ大阪がＦＷ補強に動く

ワシントン 34 歳やぞ。別に 34 歳が動けないという意味ではないけど、レアンドロみたいに若い人を取って、長年一緒にやっていこうというスタンスには感じられない。いつも言っているが、宇佐美を使うとか、家長を戻すとか、いくつか選択肢はあると思う。外国人もキーパーで雇うとかディフェンダーで雇うとか、いつも前ばかりを外国人補強対象にしているのが気になる。この前の試合だって山崎は素晴らしい動きで 2 点ともお膳立てを作っていたし、ルーカスも調子いいし。

宇佐美を使ってほしいなぁ。今年は何回かしか出られなかったけど、そのときは凄くゴール裏も盛り上がるし。

リップを使う量

昔いた会社の上司の話。その人は夜中にどうも盛り上がったらしく、そのときいた同僚と何故か腕相撲をし、その同僚の腕を折ってしまった人なのだが、その上司がある日、唇が乾燥で切れてしまったようで、リップを購入したという。私はリップを使ったことがないので、使用量については全く判らないのだが、この上司はどう考えても多かったように思う。

その上司が運転する車で客先の行き帰りにリップをつけていた現場を見た。1 回や 2 回ではない。何度も見た。そこで聞いてみた。

「なんでそんなにつけるんですか？」
「つけたハナから舐めてしまうねん」
「んじゃもう結構使ったってことですね」

一日にリップの半分を消費するらしい。

当ブログの検索エンジン参照元

なにげなく Google Analytics の画面を見ていて、検索エンジン参照元という項目を見てみたのだが、驚いた。日本では Yahoo! が全盛を誇っている筈なのに、なのに、である。

Yahoo! からの検索エンジン参照元は、僅か 0.17%。

正直、驚いた。

DTP の手伝い

先月からちょくちょくと先輩の印刷屋に DTP の手伝いをしに行っているのだが、当然のことだが、DTP の仕事は Web の仕事にはないリスクを持っている。逆も然りで、Web の仕事には DTP の仕事にないリスクを持っている。

例えば我々はその Web のリスクを理解し、リスクを冒さないようにうまく対処していくようにしようとするので、リスクのイメージを掴めている分、必要以上にリスクに身震いしながら仕事をすることはない。しかし、違う業種であるリスクは、我々の経験外や想像外のこともあり、考えただけでもゾッとするような感覚を憶えることがある。

一番簡単な例で言えば、DTP は刷り直しが普通は利かない。ミスを含んだまま印刷や製本を行うと、多くの実費を伴って再履行しない限り、そのミスが世に出たまま永遠に打ち消すことはできない。これは Web の仕事から見れば異常な程に危惧を感じる。DTP 業務の人から「Web は修正できるから羨ましい」と言われることは少なくない。しかし、「修正できる」ことは別方面でのリスクを孕んでいる。

「修正できる」機会があるということは、ミスを行う機会も同じだけあるということになる。だからサイトリリース時に比べて精神的負担は低いとは言え、毎回緊張の場面があるということである。

違う業種の人と話をするのは、実に勉強になるし、聞いただけのことだが、ある意味、経験にも繋がる。

Mac 版 Google Chrome ベータ版がついに本日リリース

Mac 版 Google Chrome がついにリリース

Mac 版 Chrome の情報をメールで知らせてもらうというものに登録していたのだが、全く来たことがなく、ちょっと不審に思っていたが、先ほど Google からメールが来て、遂にベータ版がリリースされたとのこと。
早速ダウンロードしてみた。まぁ今までの開発版の最新をいつも使っているのであんまり変化はないが、やはり嬉しい。しかし「ダウンロードマネージャ」はいつになったら有効になるのだろうか。いつまでも構成ファイルをいじるのはめんどくさいし、あまり好ましくない。

賃貸マンションからバイクを撤去せよとの話

先日、住んでいる賃貸マンションの管理会社からお手紙が届いた。簡単に言うとこんな感じ。

「駐輪シールを貼ってないのはスクラップにするよ」

何回もこういうお手紙は来たし、別に不思議なことはない。しかしこの文中に私を激昂させる文言があった。

「当マンションは 50cc を超えるバイクを停めることは許されていない」
「一人一台の駐輪に限り認められるので、それを超える駐輪は認めない」

当方の事情はこうだ。買い物等近場に行く時は自転車、それよりも遠い場合はバイクを利用している。Kawasaki ZXR250 でブイブイ乗っている。そして何よりも、最初に契約する際に確認を取った上で駐輪しているということだ。私としては249cc のバイクを停められるのかどうかは訊いておくに越したことはないと思い、4 年半前の契約時に担当者に確認している。その担当者の名前も控えている。賃貸契約書にも今回のような注意書きはなに一つない。そして、今までの駐輪撤去の際にも何も言われたことはない。しかし今回「50cc を超えるバイクは停めること能わず」と言われた。ちなみに今住んでいる物件を検索し、他の紹介会社のウェブページを見ると、「大型バイク駐輪可能」とある。完全に矛盾している。さらに、四輪と自転車の併用は認められるのに、二輪と自転車はダメだと言う。四輪を買えない家庭が仕方なしに原付を使っていることも否定されているわけだ。

そこで、管理会社に電話をしてみた。20 コール待ったが出ない。まぁトイレに行っているかもしれないし、来客かもしれないと思い、5 分後に改めて電話をかけた。すると今度は 2 コールで出た。

色々と言ってやった。
契約時に 249cc のバイク駐輪を認められていること、今まで一人複数台所有していても一度も何も言われなかったこと、他の紹介会社のウェブページでは駐輪可能となっていること、四輪との併用は認められることがかえって矛盾を招いていること、まるで不法駐輪のように書かれている紙がマンション内に出回って迷惑していること、契約書にはなにもそれらしきことが書いていないこと。

「私、担当ではないので、確認して折り返しお電話します」

出た。「担当ではないので」。どこの悪徳業者だ。
まぁ数時間後に電話がかかってきて、駐輪 OK となったが、いたく心証が悪い。残念ながら引っ越しを検討することにしよう。

業務で Web の絡みもある人間が「ブラウザってなに？」

Microsoft、Web ブラウザ選択画面をランダム順に

私は何度も言っているように、マイクロソフトが大嫌いだ。加えて IE などは死滅すればいいと思っている。だから、こういう措置は歓迎する。

しかし、やり方がちょっと。。。

Apple は自分の OS で Safari をデフォルトとし、Google は同じように Chrome にする。だから MS も IE をデフォルトとしてなんら筋として間違っていないし、Opera は OS を自前で作ってデフォルト化させる方がしっくり来るだろう。この話題の初期は「おもろい展開やな」と思っていたが、ここまで来るとちょっとヤリ過ぎな気がする。

そういえば前の会社で信じられない会話があったのを思い出した。
業務に Web も含まれる奴と社長の会話。

社長「お前、Firefox が入ってないのか？」
奴「へっ？（社長に対してもこういう物言いをする）」
社長「いや、だから、Firefox は入ってないのか？」
奴「なんスかそれ」
社長「ブラウザだ」
奴「なんスかそれ」
社長「・・・」

Mac で複数のファイルの情報を見る

Mac ではファイルの「情報を見る」際に、Command + i や、右クリックから「情報を見る」、画面最上部の「ファイル」メニューから「情報を見る」などの動作を行って実行するが、複数のファイルの情報を見たいときや、アクセス権をいっぺんに変えたい場合、大変だ。複数のファイルを選択し「情報を見る」をしてしまうと、例えば 30 ファイルを選択している時は、30 ものウィンドウが開いてしまう。

そこで、「インスペクタ」として見ると、複数ファイルをまとめた情報が出る上、ウィンドウは 1 つだけなので、便利。さて、その「インスペクタ」とやらをなかなか見つけられない。先程の「情報を見る」動作に Option キーを加えれば表示される。

★複数のファイルの情報（インスペクタ）を見る

• Command + Option + i


• 右クリックのメニューで Option キーを押しながら「インスペクタを表示」をクリック


• 画面最上部の「ファイル」メニューで Option キーを押しながら「インスペクタを表示」をクリック

これでファイルをどれだけ選択してようと、作業に時間がかかることはない。

個人事業主(屋号入り口座)では UFJ のインターネットバンキングを無料で使えない

毎月初めに入金確認をしに行っているが、めんどくさいのでインターネットバンキングで今後はやろうと思っていた。しかし、UFJ のサイトからどう申し込んでも、「おたくの口座ではできない」と怒られる。仕方ないので店舗に行って事情を話すと、できない理由が判った。

屋号が入った名義では個人のインターネットバンキングを申し込めない。

したいのならば、月 2,100 円の法人向けサービスを使いなさいねと諭された。うーん、便利なのか不便なのか判らん。近くに UFJ しかないから解約することは全く考えていないけど。

K-1 GP 2009 決勝

なんか久しぶりに K-1 を見てる。爽快だ。

ただ、シュルトは「SEMMY」だから「セーム」とは言わないと思うが。

あと、藤原紀香以下チャラチャラした 3 名、全くいらない。不要。無駄。歓声があまりにも一方的過ぎで公平さに欠ける。スポーツ系番組でのジャニーズと同じくらい不要。無駄。

ガンバ、ホーム最終戦

何故、松代が出てきたのか。藤ヶ谷はどこか具合が悪かったんだろうか。そんな風には見えなかったが。。。この前、なんか引退記事みたいなのが出てガンバ側が急いで記述違いを公表するという、引退の話でもあるのだろうかと思うようなことが松代に関してあっただけに、「ひょっとして引退だから出てきたのか？」って思ったが、そうでもなさそう。よく判らん。

そして、播戸・・・トラップ大きすぎ。

監督が高らかに宣言したように、来週は「絶対に負けられない試合」だから、頑張って。

テレ朝グッズのサイトのポリシーが糞な件

さっきグランプリシリーズのロゴを検索してて、下記の検索結果となった。

フィギュア グランプリシリーズ ロゴ - Google 検索

この一番上（2009/12/4 現在）のページがテレ朝グッズのページなのだが、これをクリックすると、いきなりアラートが出て、さらに内容に少し驚かされる。

URL を見てみる。
http://ropping.tv-asahi.co.jp/top/member/CPmAddFavGoods_001.jsp?GOODS_NO=21604
AddFav とある。そら「お気に入りに追加された」とか出るわ。こんなページが検索に引っかかるようにしていいんだろうか。

グランプリシリーズのロゴが Firefox に見える

フィギュアのグランプリシリーズをテレビで見ているが、このシリーズで使っているロゴがどうも Firefox に見えて仕方がない。

テレビ朝日│フィギュアスケート　2009/2010
firefox - Google 画像検索

Googleが日本語入力システム参入 β版無料公開

Googleが日本語入力システム参入　β版無料公開
Google 日本語入力 - ダウンロード

早速ダウンロード（Ver. 0.8.187.0）してみた。今はそのシステムで入力している。特に問題はない。Mac OS X では、よく変換した履歴を、入力しているときに Tab キーで選べるようになっているが、そのシステムも同じように実装されている。

ことえりよりもいいと思ったところは、設定画面の「General」タブ内で、「Space input style」を選べること。選択肢は「Follow input mode（現在の入力モードに従う」「Fullwidth（常に全角）」「Halfwidth（常に半角）」という 3 種類。私は全角のスペースを用いることはまずないので、常に半角でスペースが入力されるのは、とてもありがたい。あと、「Advamced」タブ内では、各種数字や記号の入力モードも設定できる。これも全角の数字や記号（括弧とか以外）を使うことはないので、「Halfwidth」を選び、常に半角化するようにした。

逆にちょっと難点なのは、ことえりでは、文字を入力し、変換の一発目で選んだ語句はそのまま入力されるが、変換で何度か候補を選んで決定した場合は、そのまま入力されずに変換可能な状態で残る。この場合は変換候補決定と語句の入力という動作のために Return キーを 2 度押す必要があるのだが、変換を間違えた時に役立っていた。Google のシステムは全て一発で入力されてしまうので、変換間違いのときに、語句を削除し、もう一度入力・変換する必要がある。これが少々めんどくさい。

あと、設定画面でセレクトメニューをクリックすると、そのメニューの背景がちょっとおかしくなるが、これはまだ仕方ないという感じだろうか。

ちなみに、Chrome と同じくこれも Google にデータを送られるらしいので、気になる人は設定を無効にできる。

ちょっと、このシステムをしばらく使ってみる。慣れるか、ことえりに戻るか。

Bing の地図検索で日本海が「East Sea」になっている件

Bing での日本広域地図

日本海が「East Sea」になっている。これは酷い。一応「Sea of Japan」はあるが、樺太の方に追いやられている。。。なんだこれは。

ちなみに、Google Map ではどうか、、、海の名称の記載がない。うまく逃げたな。
Yahoo! はどうだろうか、、、「日本海」および「竹島」と記載がある。しかし使いづらいな。

まぁマイクロソフトなんて、XBOX での竹島問題があるくらいだから、こうなることに不思議はないが。朝鮮人が上層部にいると見境なく日本への陰湿な攻撃をしてくるな。国連は大丈夫か？

「Windowsブラックスクリーン問題はパッチと無関係」、MSが結果公表

「Windowsブラックスクリーン問題はパッチと無関係」、MSが結果公表

大変だな、Windows は。
昔、同僚が WIndows Update をしたら、マシンがイカれ、再インストールする羽目になったと嘆いていたのを思い出した。

Yahoo!は下降の一途へ--GoogleとBing、検索市場でさらにシェアを拡大

Yahoo!は下降の一途へ--GoogleとBing、検索市場でさらにシェアを拡大

なんで日本てこんなに Yahoo! が人気なのか、正直 1 ピコメートルも理解できない。ゴチャゴチャしてるし、ユーザの視点にたったインターフェイスを構築できていないし、朝鮮糞フトバンク直伝の隠蔽体質だし。Yahoo! 本家から yahoo.com ドメインも使わせてもらえない日本の Yahoo! は、糞だと思うが。

日本の Yahoo! が提供しているサービスで、他の企業の同サービスの方が優れていることなんて、多々ある。メールも地図もカレンダーも Google の方が優れているし、乗り換え案内は駅探の方が良い。天気予報は livedoor で充分。自分の優れているところを作ろうとしないのだろうか。なんでもごちゃまぜにして、中途半端なサービスで人を惑わせているだけではないか。

日本の Yahoo! が良かったのは、10 年前までだ。

アップル、喫煙者のMacを修理拒否

アップル、喫煙者のMacを修理拒否

なんだか、やり過ぎなように思う。
確かに昔、会社で Windows を開けて臭かったことはあったけど、それで吸われる有害物質の量なんて、喫煙者が生涯に蓄積するものと比べて極めて少ないんじゃないのか？だったら気にし過ぎだと思うし、過剰反応だろう。第一、その拒否されるくらいの状態のマシンって、担当者が修理するマシンの内、どのくらいの頻度なのかって話にもなる。その「拒否される状態」の割合と作業時間に吸う有害物質の量を計算して、「拒否するに妥当な」数値を叩き出しているって言うのか？

ジェラードの手洗いくらいに過敏だと思う。

グーグル、Mac版Chromeのベータ版を間もなくリリース

グーグル、Mac版Chromeのベータ版を間もなくリリース

早くリリースされないかと心待ちにしている。インストールしてある開発版をほぼ毎日使っている。多少なりとも使用した感じは以下の通り。

ページ表示時、URL バーには URL が表示されているが、この時になにか検索しようとすると、今の URL を消して語句を入力する必要がある。もちろんこうやって使うために設計・実装されていると思うけど、どうにも慣れない。
あと、Firefox もだけど、履歴の機能が Safari に比べて著しく劣る。「ああ、そういえば昨日アクセスしたな」と思って履歴を探って呼び出せるのが Safari、履歴の数が異様に少なくて毎度がっかりするのが Chrome と Firefox。Opera は履歴を気にする程使えてないな。
あとブックマーク画面も Safari が他の追随を許さないほど、使いやすい。

そういえばこの前 Chrome のブックマークを右クリックしたらメニューが出てきた。

なんか、Chrome リリースを楽しみにする内容になる筈が、Safari ムッハな内容になってしまった。