フレッツの工事と mac の設定完了

とりあえず新しい ISP で繋いでみた。工事はものの 15 分ほどで終わり、うちの mac 達の設定も簡単に終わった。というか mac では設定する項目がない。なにもしなくても勝手になってる。人に優しい。設定はフレッツの付属 CD から設定用 html を開き、ユーザ名やパスワードを入力するだけ。あまりにも簡単。

ただ、その設定をする際に、フレッツ側ではなく ISP 側の入力されるべき情報が、ISP の説明書の判りづらいところに書いてあったのが少々難儀した。ページの一番上にどでかく書いてほしかったのに、下に小さく「入力するときはこれね」と書いてある。ちょっと焦ったわ。

あとフレッツ、その付属 CD を読み込んだときにファイル名が全部文字化けしてたぞ。なんだそりゃ。

フレッツ光の工事

本日はフレッツ光の工事。順調に行って、すぐにウェブへの接続が復帰するのか、少々心配。

雪

京都市内は本日の夕方、吹雪になり、この夜の時点でも吹雪ではないが雪が降り続いている。温暖化とうるさく言われるが、果たしてそうなんだろうかと思う。

桜の季節なのに。。。

ギョーザ事件の報道が怪し過ぎる

昨日のエントリーで書いた事件だけど、今日になって各所からコメントが発表されている。

現場となった工場の関係者、その周辺の人々、内閣の人間と、一様にコメントし、全てが「もう事件はほぼ解明」という趣旨のものばかりだ。どうも、どうも、うさんくさい。あんなにギョーザ事件になかなかコメントを出さなかった連中が、挙って発表しているというのが、信じ難い。

今まで日本に関係する中国人による犯罪など、本当に数多くあるが、ほとんどが闇に葬られ真相を究明する姿勢すらない。これだけの圧力に屈している日本は、本当に大丈夫だろうか。

バタークランチがなくなってる

ドーナツ・パイ・マフィン｜メニュー｜ミスタードーナツ

私がもう 15 年程好きだったバタークランチを最近全く見ないと思ったら、なくなってた。。。好きだったのに。。。

ギョーザ事件の容疑者拘束＝製造会社の元アルバイト－中国当局

ギョーザ事件の容疑者拘束＝製造会社の元アルバイト－中国当局

なんだこの今更感は。中国だけに、この拘束された男は偽物ではないかと思ってしまう。家族は当局が面倒を看るから逮捕されてみないか、みたいな茶番のニオイが。。。

もう 2 年経つのか。早いな。なにやってんだろ、自分。

直線接続点を miter とする限界を設定する(miterLimit) [html5 の Canvas を使ってみる：第卅五回]

lineJoin では接続点の形を bevel、round、miter に定義したが、それが未定義の場合、この miterLimit の値で bevel か miter かを設定できるみたい。
miterLimit で設定した値に線の太さの半分を掛けた値が miter で描画される限界値となる。接続点から miter として描画される先端までの距離よりも miterLimit の限界値が小さければ bevel として描画され、大きければ miter として描画される。

★html 側

<canvas id="miterLimit"></canvas>

★Javascript 側

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

// miterLimit の値を 1.4 に設定
  c.miterLimit = 1.4;
// 線幅 20 の直角二等辺三角形を、
// lineTo(); と closePath(); と lineWidth で描画
  c.beginPath();
  c.moveTo(30, 30);
  c.lineTo(100, 30);
  c.lineTo(100, 100);
  c.closePath();
  c.lineWidth = 20;
  c.stroke();
}

この三角形の右上の角で接続点から角の先端までの距離を考えてみる。線の太さが 10 なので、一辺が 10 の直角二等辺三角形として考えると、1:1:√2 の関係であり、10 * 1.414...となるので、14.14...となる。拡大した図を下記に載せてみる（下記は接続点から先端までの距離を示すために描画したもので、上記のソースとは関係ない）。


さて、この場合の限界値は miterLimit が 1.4 で線の太さが 20 なので、20 / 2 * 1.4 = 14 となる。その値よりも上記で割り出した 14.14...は大きいため、この場合、右上の角は bevel として描画される。他の 2 つの角は (180 - 90) / 2 = 45°となり、接続点から先端まで結んだ線を引くと、底辺が線の太さの半分である 10 で、45 / 2 = 22.5°の角を持つ三角形を作ることができる。このことから、接続点から先端までの長さは 10 / Math.sin(22.5 * Math.PI / 180) で 26.13...と値を求めることができる。この値と限界値を比べると、限界値の方が小さいので、右上以外の角は bevel で描画されることになる。


次に、miterLimit の値を 1.5 にしてみる。すると、先ほどの右上の角の値が 14.14...で、今回の限界値は 20 / 2 * 1.5 = 15 なので、限界値の方が大きくなる。よって右上の角は miter で描画されるが、他の 2 つの角は限界値の方が小さいので、依然として bevel で描画される。

// miterLimit の値を 1.5 に設定
c.miterLimit = 1.5;

最後に、miterLimit の値を 2.7 に設定する。今回の限界値は 20 / 2 * 2.7 = 27 であり、右上以外の角の値が 26.13...なので、どの角よりも限界値が大きくなる。よって、全ての角が miter として描画される。

// miterLimit の値を 2.7 に設定
c.miterLimit = 2.7;

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

W3C；
4.8.11 The canvas element — HTML 5

三井ダイレクト損保の契約者ページに Safari でアクセスできない

契約者ページ | 三井ダイレクト損保

そろそろバイクの任意保険継続の時期なので、ウェブで継続申し込みをしようと思ったけど、Safari でアクセスし、パスワードを入力しても入れない。何度やっても入れない。はて。登録してなかったかなとメールを漁ってみたけど、登録はしているようだ。しかし入れない。

よく見ると、エラーメッセージに「ページ遷移が正しくありません」とある。これは・・・どうやらシステムが動作してないなと思い、Firefox でアクセスすると、すぐに入ることができた。

では、他のブラウザはどうだろう。Safari がダメなので、当然 Chrome もダメ。Opera に至っては、非対応画面に切り替わる。そこに記載されているスペックを見ると、こんな環境だった。

Windows2000/XP/Vista/7
Microsoft Internet Explorer 6.0/7.0/8.0

まず、IE ユーザはだいぶと減ってきたのにこのスペック。Mac ユーザ全く無視のこのスペック。バイクに乗っている人で Mac ユーザは世界で私だけなのだろうか。Mac ユーザ軽視の非常にナンセンスなページである。

3 月 26 日はサブウェイの日

日本サブウェイ SUBWAY 3 月 26 日は、サブウェイの日。

サブウェイはファストフードの中でもかなり好きな部類。苦手な野菜を除くこともできるし、好きな野菜を増やしてもらうこともできる。私は野菜を全部入れて、さらにピーマンを多くしてもらう。ここ近年、どうもピーマンが好きで堪らない。

そんなサブウェイがこんなキャンペーンをやっていたなんて、恥ずかしながら知らなかった。明日は行きたいところだが、なにぶん京都には京都駅地下の一店舗しかなく、正直めんどくさい。四条河原町辺りにあればもう少し行くんだけど。。。

描画スタイルをスタックへ保持、取り出す(save・restore) [html5 の Canvas を使ってみる：第卅四回]

save(); で現在の描画スタイルを push し、restore(); ではそれを pop できるという。なんだか難しいけど、やってみる。ちなみに、W3C によると、利用できるのは以下のものらしい。

• The current transformation matrix


• The current clipping region


• The current values of the following attributes:
  strokeStyle
  fillStyle
  globalAlpha
  lineWidth
  lineCap
  lineJoin
  miterLimit
  shadowOffsetX
  shadowOffsetY
  shadowBlur
  shadowColor
  globalCompositeOperation
  font
  textAlign
  textBaseline

★html 側

<canvas id="save"></canvas>

★Javascript 側

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

// strokeStyle で線を青く、
// globalAlpha で透明度を 0 から 100 まで適用
// これを save(); でスタックに格納していく
  for (var i = 0; i <= 100; i++) {
    c.strokeStyle = "rgb(0, 0, 255)";
    c.globalAlpha = i/100;
    c.save();
  }

// save(); で格納したスタイルを取り出しつつ、
// x 軸に 1 ずつずらしながら線を描画
  for (var i = 0; i <= 100; i++) {
    c.restore();
    c.beginPath();
    c.moveTo(0+i, 0);
    c.lineTo(0+i, 100);
    c.stroke();
  }
}

すると、こうなる。右へいくほど透明度が 100 に近づくので、右へ向かって消えるグラデーションのようになる。


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

W3C；
4.8.11 The canvas element — HTML 5

Opera のダウンロード数増加

Choose Opera 日本支部 - ヨーロッパでは・・・

ちょっと前の記事だけど、ヨーロッパでの Opera ダウンロード数が増えたみたい。あの Windows に IE が同梱されているから不当だ！みたいな裁判を起こしたあれに由来する増加らしい。どこかにも書いてあったが、日本ではブラウザや検索エンジンのチョイスが世界標準からかけ離れている。何故だろうか。

すぐに頭をよぎるのは、日本は長い間に渡って鎖国を行っていた経験があるということ。昔の話と思うかもしれないし、確かに昔の話なんだけど、結構人の心には深く根ざしているかもしれない。

京都の人間は閉鎖的で心の壁を作っている、とよく言われる。関東でも言われるし、近畿でも言われる。これの原因となる出来事は鎖国よりもさらに古いことに起因している。源義仲にまで遡らなければならない。

当時、全国にいた武家には源氏由来の人たちもかなりいた。しかし源氏で権力を持つ者がいなかった。頭領であった源義家も平治の乱で姿を消しており、武家が自分の所領を安堵してもらうには、京の平家に奉公しなければならなかった。京への旅費も滞在費も全て自分持ち。そのようなこともあり、所領の安堵に命を賭けるということで「一所懸命」という言葉が誕生した。「一生懸命」は明らかに変である。一生に命を賭けるのは当たり前だし、必然的にそうなるからだ。さて、そんな戦争でもないのに自分の所領を守るのに苦労することから各地の武家の不満が噴出し、北陸に源義仲を頭領とした軍勢が誕生した。そして見事平家を蹂躙し、上洛を果たした。しかし、この軍勢は盗賊なども多く混じっていたため統率が取れておらず、京で様々な狼藉を働いた。民衆はもちろん、時の後白河上皇を始めとする公家も難儀し、遂には上皇の位打ちなる策略で義仲を腑抜けにした。そこへ源頼朝が遣わした武将である源義経が義仲を打ち破って上洛を果たした。この一連の出来事により、他の土地の者（義仲）が入って来て、新しい風に期待したものの、期待はずれ（義仲軍による狼藉）に終わったという経験が現在の京都の人にも感覚として残っていて、心の壁を知らず知らずに作ってしまう、、、らしい。

Opera から義仲へ、どうも話が変わってしまったが。

画像を背景として設定する(createPattern) [html5 の Canvas を使ってみる：第卅三回]

createPattern(); では指定した画像を css の background-image のように配置できるらしい。

★今回並べる画像

★html 側

<canvas id="createPattern"></canvas>

★Javascript 側

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

// drawImage(); で画像を配置
  var target = new Image();
  target.src = "pattern.png?" + new Date().getTime();
  target.onload = function() {
// 変数 target で指示した画像を
// 変数 img にパターンとして定義
// 引数の 2 つめの空は repeat と同義
    var img = c.createPattern(target, "");
// パターン定義した img を fillStyle として定義
    c.fillStyle = img;
// 指定されたパターンが見える範囲を定義
// ここでは rect(); で矩形を定義
    c.rect(10, 10, 100, 100);
    c.fill();
  }
}

すると、こうなる。矩形などをパターンで塗りつぶすのではなく、パターンを見せる範囲をあとから矩形などで定義するようだ。


次に空だった 2 つめの引数に repeat-x を入れてみる。

// x 軸のみへの繰り返し
var img = c.createPattern(target, "repeat-x");

今度は repeat-y を入れてみる。

// y 軸のみへの繰り返し
var img = c.createPattern(target, "repeat-y");

次に no-repeat を入れてみる。

// パターン画像の繰り返しなし
var img = c.createPattern(target, "no-repeat");

最後に repeat を入れ、空だった最初の例と同じになるか試してみる。

// パターン画像を繰り返す
var img = c.createPattern(target, "repeat");

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

正常に動作しなかった環境：
Firefox 3.6.3

W3C；
4.8.11 The canvas element — HTML 5

無線 LAN ルータの設定

4 月から利用する ISP を変更するんだけど、この新規契約の特典で無線 LAN ルータとハードディスクをもらった。ハードディスクはまだ接続してないけど、無線 LAN ルータの設定を先ほど行った。うちは Mac 3 台を使っているので、有線だと結構床の上が大変なことになってしまい、無線 LAN 環境は必須で、今までは ISP のオプションだった無線 LAN 環境でやっていた。

さて、一昨日ハブを買ったので、それを使って床の配線をさらに整備しつつ、ルータを設置。ルータの説明書には色々とコンピュータでの設定が書かれていた。しかし Windows の説明ばかりなので、全く役に立たない説明書だ。なんだかたくさん設定しないといけないみたいだ。やはりめんどくさいな、Windows は。

さて、Mac の設定は非常にあっけなかった。ルータの側面に貼ってあるシールには、ネットワーク名とパスワードが書いてある。メニューバーにある AirMac のアイコンをクリックし、ネットワーク名を選び、パスワードを入力する。これだけ。

ネットワーク名は勝手に検索してくれるし、パスワードさえ入力すれば、その後も勝手にやってくれる。Windows を使っている時は、そういう気配りを全く感じなかった。Mac は人に優しいコンピュータだ。

阪急京都線の列車種別が納得いかない

停車駅のご案内｜阪急電鉄

先日、3/14 に大阪・京都・兵庫を走る阪急電鉄のダイヤ改正が行われた。今回は京都線に「摂津市駅」という新駅開業があるため、ダイヤグラム上では非常に重要な意味があるんだと思う。しかし、納得がいかない。

ここ 10 年ほど、阪急は電車の種別で迷走し続けている。10 年ちょい前以前、京都線には特急・急行・普通という 3 種類しかなかった。しかも特急は、大阪の十三から京都の大宮までの間、全く停車せず、何十もの駅をすっ飛ばしていた。「急ぐ」を具現した感じだったが、10 年ちょい前に快速やら準急やらが現れては消えていた。停車駅もほぼ各駅だったり、急行とほとんど差がなかったりとコンセプトがよく判らなかった。凄まじく急ぐ特急も、高槻に停まり、桂に停まり、と徐々に停車駅が増えていった。さらにここ数年間は、特急系列が複数存在していたが、それぞれがやはり微妙な停車駅の差だけだった。

最も納得のいかないポイントが 2 点ある。1 点目は、現在の種別に急行が存在しないことだ。いや、別に急行が愛おしいわけではない。狂おしいわけでもない。特急や快速急行や準急が存在するのに、急行が存在しないからだ。快速急行はそのままだけど、特急は特別急行の意であり、準急は準急行の意である（英語表記は Semi-Express と書かれている）。どちらも急行を前提に名付けられた名称だ。であるのに、急行が存在しないというのは筋が通らない。喩えて言うなら、海老があってこその海老フライなのに、肝心の海老が入っていないようなものだ。

もう 1 点は、かつては凄まじいくらいに幾つもの駅をすっ飛ばしていた、実に男気溢れていた特急の価値が今ではもう非常に薄く、停車駅の安売りが行われ続けていることだ。数年前までの勢いは既になく、今はもうかつての急行とほぼ同じ程度に成り下がっている。長岡天神に停車する意味はあるのだろうか。まぁこれは駅近くにある某宗教の圧力ではないかと推測する。淡路も停車の必要を感じないし、今回の改正で茨木まで停車するようになってしまった。そして、以前の強力な特急でも停車していた大宮がここ数年見放されている。もう迷走としか言えない。

実にローカルな話題で申し訳ない。

Versailles World Tour 2010 -Method of Inheritance- at Kyoto Muse

Versailles World Tour 2010 -Method of Inheritance- at Kyoto Muse

一昨日の 3/16 に Versailles のワールドツアー京都編に行ってきた。ライヴは DREAM THEATER の初武道館公演の 2004 年以来、ライヴハウスになると 2000 年頃以来の久しぶりだった。クラシックコンサートは毎年のように行っているが。。。

曲目の順番は憶えていないが、演奏曲は以下の通り、、、だったと思う。オープニング SE は予想通りに「Sound in Gate」だった。

「JUBILEE」

• 全曲

「Prince & Princess」

• 全曲（SILENT KNIGHT 含む）

「Noble」

• Aristocrat's Symphony


• zombie


• After Cloudia


• The Revenant Choir

「Lyrical Sympathy」

• Shout & Bites


• BEAST OF DESIRE


• The Red Carpet Day


• Sympathia

アンプの真空管トラブルで開演が少し遅れたが、2 時間半ほどのライヴだった。私の中では「メタル」にカテゴライズしているのだが、世間は「ヴィジュアル系」らしいので、多かれ少なかれ周囲のノリはどういったものなのかと不安を感じながら開演を待った。私はペンライトを左右とか前後に大きく振るというノリは、少年少女合唱団のようで好きではない。そういうものがないことを期待した。今までの行っていたライヴではそのようなことは一切なかったのだが、「ヴィジュアル系」というものが酷くひっかかる。

会場外で待っているときから気になっていたのだが、何人か造花の薔薇を持っていた。なんだろうと思っていたが、あとで判明した。確かにペンライトはなかった。しかし、薔薇ライトだったのだ。造花が妖しく光っていた。さらに、2,000 円もするらしい。凄まじい商売根性を感じた。

さて、ノリの話だが、ヘッドバンギングは想定していたが、それほどオーディエンス全体で振る行為はなかった。他の時間になにがあったかと言うと、、、阿波踊りだ。何故か、阿波踊りだ。私は昔、神奈川県大和市で行われた阿波踊り大会に出演したことがあり、5 時間ほどに渡って連の一員として市内を練り歩いたが、その時に教えてもらったような本当の阿波踊りではなく、手だけをクネクネと阿波踊り仕様にしている人が割と多かった。かなり度肝を抜かれた。メタルに阿波踊りは、残念ながら私の頭になかった。一切なかった。

そして、左右や前後に薔薇ライトや手を振る行為も、あった。前後は若干激しく行われていたので、そのとき前にいた人が手を後ろに振った際に、その人の指が私の口に挿入されたことは内緒だ。ちょっと歯茎を打って痛かったが、気にしてはいられない。おしくら饅頭が始まったからだ。Kyoto Muse に限らずライヴハウスはオールスタンディングが多いので、自分の立ち位置など定まっている事はない。津波のように前後左右に流される。中盤からは思考回路が吹っ飛ぶほど揉みくちゃにされた。

メタルバンドのライヴと思って行くと、ついていけないと思った。中でも、MC に対するごく一部のオーディエンスの反応が、一番ドン引きした。笑い方が度を越えており、以前連行された経験があるマルチ商法の集会のようだった。それもあったし、周囲から伸びている手を見ていると、どうも宗教団体のように感じたことも否めないが、人気バンドとはこんなものなのかもしれない。実に不思議な空間だった。

演奏に関しては、思った程の爆音でなくて良かった。ただ、裏で鳴らしているストリングスなどのキーボードパートが非常に聞こえにくかったのは残念かなと思った。

決して Versailles の煽り方やオーディエンスの行動を非難しているつもりはない。メタルバンドやクラシックコンサートしか行ったことのない私が客観的に見たヴィジュアル系ライヴの姿だ。来月には大阪でのライヴがあるので、今回を踏まえた上で臨もうと思う。

四角形で指定した矩形を削除する(clearRect) [html5 の Canvas を使ってみる：第卅二回]

clearRect(); では指定した四角形の矩形を削除することができる。四角形という画一的な形だけになにに使うかがよく判らないけど、やってみる。

★html 側

<canvas id="clearRect"></canvas>

★Javascript 側

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

// arc(); で青い円を描画
  c.beginPath();
  c.arc(60, 60, 50, 0, 2 * Math.PI, false);
  c.fillStyle = "rgba(0, 0, 255, .7)";
  c.fill();
  c.stroke();

// x:45、y:55 の座標 から幅 30px、
// 高さ 10px の矩形で削除
  c.clearRect(45, 55, 30, 10);
}

すると、こうなる。


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

W3C；
4.8.11 The canvas element — HTML 5

読み込んだ画像にマスクをかける(clip) [html5 の Canvas を使ってみる：第卅一回]

clip(); を使えば、illustrator のようにマスクをかけることができるらしい。以前にやった 星形をマスクに指定し、表示してみる。

★html 側

<canvas id="clip"></canvas>

★Javascript 側

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

// 星形で赤い星形を作る
  star(70, 70, 50, "rgb(255, 0, 0)", "rgb(255, 0, 0)", c);
// 上記の星形を clip(); として定義
  c.clip();

// drawImage(); で画像を配置
  var target = new Image();
  target.src = "DasEnde.jpg?" + new Date().getTime();
  target.onload = function() {c.drawImage(target, 30, 30);}

// 星形の function は 該当のエントリー に記載
}

すると、こうなる。


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

W3C；
4.8.11 The canvas element — HTML 5

国境なき記者団が「ネットの敵」発表 中国など12カ国

国境なき記者団が「ネットの敵」発表　中国など12カ国

中国・北朝鮮が「敵」で南朝鮮が「監視対象」か。近隣にこれだけの危険な国が揃っているのだから、日本はリアルで危ない。民主党政権のせいで万が一、人権擁護法案なぞ通った日にゃ我が日本国も監視対象になってしまうかもしれない。

しかしこの「監視対象」にオーストラリアやタイ、マレーシアが挙がったことに驚いた。その国々から受ける印象で、ウェブの事情は推し量れないものだなと思った。対して、社会主義国歌や中東の国が多いことは、印象通りという感じ。

あと、7〜8 年前に、私が所属していたグループにブルガリア大使館の秘書も所属していたのだが、話の流れの中でその秘書から「ブルガリアはパソコンが非常に少ないから送る運動をしたい」とあり、色々と調べた結果、ブルガリアにパソコンを送っても、解体されて武器にされることもある、ということから送るのを断念した経験がある。そのブルガリアは今回の「敵」にも「監視対象」にも挙げられていないので、少しホッとした。

Firefox 3.6 のリンクをタブで開く時に以前の一番右にしたい

今日 Firefox を 3.6 へアップデートさせたけど、リンクをタブで開いたときに今までは一番右側へ生成されたものが、現在のタブのすぐ右側に生成されてしまう。ずっと「一番右」に慣れていたものだから、戸惑うな。。。設定にもコントロールできるところがないみたいだけど、動作保証外操作で今まで通りに戻せる。

1. URL バーに「about:config」と入力し、return キーもしくは enter キーを押す。


2. もし「動作保証外になります！」と言われたら「細心の注意を払って使用する」をクリックする。


3. 「フィルタ」のボックスに「browser.tabs.insertRelatedAfterCurrent」と入力する。


4. 1 行だけ現れるので、その行をダブルクリックして右の項目の「値」を「false」にする。

あと、関係ないけど、環境設定画面の文字がフニャフニャしてる。。。

ヤット（遠藤保仁）はポルトガル語を喋れるのか

G 大阪"痛恨ドロー"今季公式戦初勝利逃す ACL

この記事を見ると「遠藤とポルトガル語でコミュニケーションを取り」とあった。ヤット（遠藤保仁）はポルトガル語を喋れるのか。。。在籍していたブラジル人から少しずつ学んだんだろうな。素晴らしい。

読み込んだ画像の一部を切り貼りする(getImageData・putImageData) [html5 の Canvas を使ってみる：第卅回]

drawImage(); で読み込んだ画像の一部を読み込み、別の場所に貼り付けるということを、getImageData と putImageData を使ってやってみる。
判りやすいかどうか不明だけど、一度画像全体を読み込んで表示し、その上に白い透明の矩形でかぶせ、さらに上に切り取った画像を載せて、切り取った部分だけ白くならないような画像にしてみる。

★html 側

<canvas id="getImageData"></canvas>

★Javascript 側

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

// drawImage(); で画像を読み込む
  var target = new Image();
  target.src = "DasEnde.jpg?" + new Date().getTime();
  target.onload = function() {
    c.drawImage(target, 30, 30);
// 画像を x:35、y:35 から 50px の正方形分だけ
// 変数 img に格納
// この第 1・2 引数はあくまでも基点からの座標で、
// 画像の左上端からの座標ではない
    var img = c.getImageData(35, 35, 50, 50);
// rect(); で画像にかぶるように矩形を描画
    c.rect(30, 30, 100, 100);
// fillStyle で白い透明を矩形に塗る
    c.fillStyle = "rgba(255, 255, 255, .85)";
    c.fill();
// 基点から x:35、y:35 の座標に上記で格納した img を配置
    c.putImageData(img, 35, 35);
  }
}

すると、こうなる。

ちなみに、上記の例で白い矩形を載せたあとに getImageData(); を記述すると、白い矩形まで一緒に格納してしまうので、こういう使い方をしたい場合は注意しないと。。。

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

W3C；
4.8.11 The canvas element — HTML 5

画像を読み込む(drawImage) [html5 の Canvas を使ってみる：第廿九回]

drawImage(); を使って画像を読み込んでみる。

★html 側

<canvas id="drawImage"></canvas>

★Javascript 側

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

// 変数 target をイメージオブジェクトと定義
  var target = new Image();
// "DasEnde.jpg" をソースとして指定
// ファイル名の後にタイムスタンプを付け、
// キャッシュで読み込まれるのを防止
  target.src = "DasEnde.jpg?" + new Date().getTime();
// x:30、y:30 の座標に配置
// その際に画像が読み込まれてから処理を実行
  target.onload = function() {c.drawImage(target, 30, 30);}
}

すると、こうなる。画像を配置する座標を通る水平線を補助線として引いてみた。


以前にやってみた rotate(); も使って、画像を 10° 回転させてみる。

// 10° 回転
c.rotate(10 * Math.PI / 180);
var target = new Image();
target.src = "DasEnde.jpg?" + new Date().getTime();
target.onload = function() {c.drawImage(target, 30, 30);}

最後に、線形グラデーションもを上に重ねて、右側へいく程背景の白に馴染むようにしてみる。

var target = new Image();
target.src = "DasEnde.jpg?" + new Date().getTime();
target.onload = function() {
// この function の中に書かないと、
// グラデーションが先に描画され画像が乗っかるため、
// 期待通りにならなくなる。
  c.drawImage(target, 30, 30);
  c.rect(30, 30, 100, 100);
  g = c.createLinearGradient(30, 30, 130, 30);
  g.addColorStop(0, "rgba(255, 255, 255, 0)");
  g.addColorStop(1, "rgb(255, 255, 255)");
  c.fillStyle = g;
  c.fill();
}

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

W3C；
4.8.11 The canvas element — HTML 5

テキスト描画の基準位置を変更する(textBaseLine) [html5 の Canvas を使ってみる：第廿八回]

テキストを描画するときの基準となる位置を textBaseLine で指定できるようなので、やってみた。

★html 側

<canvas id="textBaseline"></canvas>

★Javascript 側

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

// textBaseLine を bottom に指定
  c.textBaseline = "bottom";
// 「あいう漢字 abcdefgAZ」という文字を、
// fillText(); で配置
  c.fillText("あいう漢字 abcdefgAZ", 10, 80);
}

すると、こうなる。textBaseLine を指定したテキストの上に何も指定しないテキストも一緒に描画し、テキストを配置する座標を通る水平線を補助線として引いてみた。ちなみに、判りやすいようにテキストには 1.5em と fantasy を指定している。


★ブラウザごとの解釈

☆Firefox 3.6.3、Opera 10.53
W3C の画と比べても正常動作と思われる。Opera はやや下に来ているが。。。
☆Safari 5.0、Chrome 5.0.375.70
W3C のウェブページに掲載されている画と説明文を比較すると、bottom は「The bottom of the em square」となっているが、各ブラウザの実行結果はこの画の bottom of bounding box となっているようだ。WebKit 系の Safari と Chrome はさらに下に来てしまっているように感じる。

次に、ideographic を指定する。ideographic は表意文字で、いわば漢字のこと。

// textBaseLine を ideographic に指定
  c.textBaseline = "ideographic";

★ブラウザごとの解釈

☆Firefox 3.6.3、Opera 10.53
W3C の画と比べても正常動作だと思われる。
☆Safari 5.0、Chrome 5.0.375.70
bottom と同じような描画になってしまっている。

次に、alphabetic を指定する。

// textBaseLine を alphabetic に指定
  c.textBaseline = "alphabetic";

★ブラウザごとの解釈

☆Safari 5.0、Chrome 5.0.375.70、Firefox 3.6.3、Opera 10.53
W3C の画と比べても正常動作だと思われる。

次に、middle を指定する。

// textBaseLine を middle に指定
  c.textBaseline = "middle";

★ブラウザごとの解釈

☆Opera 10.53
「Z」の文字を見れば、真ん中かなと思う。
☆Safari 5.0、Chrome 5.0.375.70、Firefox 3.6.3
なんかどれも真ん中っぽくないけど。。。

次は、hanging。

// textBaseLine を hanging に指定
  c.textBaseline = "hanging";

★ブラウザごとの解釈

☆Safari 5.0、Chrome 5.0.375.70、Opera 10.53

W3C の画だと、文字の上辺少し下に線が来ている。hang の意味を考えると、そんな解釈になる気もする。吊るすってことなので、物体を吊るすときは物体全部が吊るすもの（紐など）より下にあるのではなく、物体の上から少し下に吊るすものの支点がある感じだから。んで、WebKit 系は文字の上に来ている。W3C の説明で言う top of em square ってことかな。Opera は少し上だが。。。
☆Firefox 3.6.3
これは如何に。文字の下に線が来とるではないか。

最後に、top。

// textBaseLine を top に指定
  c.textBaseline = "top";

★ブラウザごとの解釈

☆Safari 5.0、Chrome 5.0.375.70、Opera 10.53
これも、W3C の説明で言う top of bounding box になってるみたい。
☆Firefox 3.6.3
近いけど、これが hanging って感じ。

W3C；
4.8.11 The canvas element — HTML 5

サポーター席に中国旗（ガンバ vs 河南建業 ACL 2010/03/10）

本日の ACL ガンバと河南建業（中国）の選手入場前、サポーターの集う A ホーム席に、突如大きな中国旗を持った人が現れ、手前の階段から奥の階段へ向かって通路を歩いていた。真上にあるスクリーンにも映し出されていたため会場は騒然となった。私もサポーターの一員なので、比較的近いところで見かけたが、そこにいる全ての人が最初「？？？」ってなっていたと思う。誰も声が出なかったから。やがて混乱の中から立ち直り、異変と認識し、ブーイングが各所から浴びせられたが、悠然と歩いていた。

中国人とはどういう神経をしているのだろうか。無神経という言葉があるが、ピッタリではないか、と改めて感じた。

こんな国が隣にあり、毎年軍事力を増やしているなんて、悪夢でしかない。

if の () 内って結構融通がきく件

知らなかった。たまたま、できるかなと思ってやってみたらできた。if の直後に続く () の中って = とか != とか > とかじゃなくてもいけるのね。

なにかのチェックをする function があって、それは return で答えを返してくるとする。その function を呼び出す記述を if のあとの () の中に書いても、きちんと評価してくれた。例えばこんな感じで。

// 渡された str の中身をチェック
function check(str) {
// 変数 err を false にする
  var err = false;
// str が b 以外だったら err を true にする
  if (str != "b") err = true;
// err を結果として返す
  return err;
}

// 変数 str に c を入れる
var str = "c";
// 上記の check() を if 内で呼び、true の場合に error と表示する
if (check(str)) alert("error");

卒業式：校務違反で男子 3 人出席させず 兵庫県立高

卒業式：校務違反で男子 3 人出席させず 兵庫県立高

私も頭髪検査のある学校に 6 年いたので状況はよく判る。私の学校は、髪が「耳にかからない」「まゆげにかからない」というこの学校の規定はもちろんのこと、「襟足が指で摘めない程度まで刈り上げる」こともあった。染髪などもっての他。月に一度頭髪検査があり、そこで注意を受けたものは数日以内に規定内への髪型にすることを求められる。学年が上がっていくと、毎月のことなので、頭髪検査の日に規定違反をしていると殴られるようになる。

しかし、別に不服はなかった。規定で定められており、毎月同じ基準で検査されているし、その規定の頭髪で生活を困難にすることも当然ないので、意義立てする理由がなかった。話が頭髪から離れるが、カッターシャツの下に柄シャツを着ることも違反となっており、ある冬の日、発覚した生徒は上半身裸で運動場を走らされるということもあった。これも当の本人を含め、恨みに持つようなこともなく、「見つかった」と笑い話に付し、それ以降違反することもなかった。例えば怪我等で学校規定の革靴でなく運動靴で来たら異装許可証がないと入れないし、遅刻したら入室許可証が必要だった。でも不便に思うことはなかった。

第一、学校での校則は、社会での集団行動を生徒に根付かせるためという役割があるので、この記事のようなことも、違反すれば罰則があるというのは至って自然だし当然のことだと思う。不満を寄せた親が異常なだけで、別段おかしいことはないと思う。

番組でよく使われるテロップなどについて

「温暖化」米で懐疑論…政府間パネル失策続き

さて、なにかと騒がしい温暖化が人間の悪行によって引き起こされているというのは事実だろうか。多少以前よりも暖かい気候が多くなっているのは確かだろうが、少なくとも私は、地球の長いスパンの中で今は単に暖かい時期に入ったのかもしれないというだけのような気がする。氷河期のようなさっぶいさっぶい時期もあれば、暖かい時期もある。先日長い長い論争に決着がついた恐竜絶滅原因についても、隕石だということに帰着した。隕石がぶつかり、恐竜が絶滅するような変化があっても、地球は生きてきた。そう簡単に星というものはダメにならないのだと思っている。そして、なにかとエコエコと騒ぎ立て、エコが全て善であるかのような世論誘導は如何なものかとも思う。
ゴミ分別だって、燃えるゴミにプラスチックが混ざることによって、「よく燃える」ことは事実だし、よく燃えない方が空気のためではないだろう。日本ではディーゼルエンジンが忌諱されているが、エコ大国であるドイツでは、ディーゼル車が多く走っているのを見た。不審に思っていたが、ディーゼルの方が環境には良いのだという。

ただ、私は資源を大切に使うことに関しては大賛成だ。限りあるということを考えれば、エコバッグとかアイドリングしないとかはとてもいいことだと思う。

しかし、番組ではよくテロップを使っている。このテロップというのは一回限りの使用であとはどうなる？ゴミにしかならないではないか。そのゴミを毎回毎回増やしているのは、エコエコうるさいメディアである。限りある資源を、そんなくだらないことに大量に消費している。ここに矛盾を感じるし、腹立たしい。あと、テロップ上にある紙をペリペリ剥がすという場面もよく見る。これもゴミではないか。結局はエコなど商売でしかないということを表しているに過ぎない。私は生まれ変わっても、テロップにはなりたくない。

たかじんの委員会や世界ふしぎ発見などで使用しているような電子式にするのが一番資源の無駄遣いではないと思う。少なくとも、小さな黒板とチョークとか、砂鉄が入っているボードと金属のペンとか、小さなホワイトボードとペンとか、これらに変えるだけで資源の無駄消費を抑えられると思う。

内閣支持率 37.7% に低下、JNN 調査

内閣支持率 37.7% に低下、JNN 調査

どんどん下がっているなぁ。先の衆議院総選挙で民主党に入れた人は、騙されたことに気づいたんではないかと思う。遂に自民党支持が民主党を越えた。しかしこれは「やはり自民党の方がいい」という声ではなく、「自民党もダメ、民主党もダメ」という声が多いために、ようやくこの時期になってひっくり返ったのではないか。そこで一気に存在を浮上させたのが、「頑張れ日本！　全国行動委員会」であり、代表に就任した田母神氏ではないだろうか。この大会には、我らが安倍晋三氏や平沼赳夫氏などの保守重鎮が出席したことも、今の日本が危機であることを表しているように思える。少なくとも自民党政権時には、このような運動はあまりなかった。もし新党を立ち上げることになれば、非常に期待を持てると思う。
ついでに、この前たかじんの委員会に出ていた田村氏は、先月？に出演した際に「民主党に入るつもりだろ」と散々パネリストに訊かれたときに、うやむやな返事をしていたが、やはりという目で見られていた。果たして彼が民主党の内部に入り、彼の主張通り、民主党を変えることができるのか、ちびっと注目。

そして、民主党が日本の主権を渡そうとしている一翼である南朝鮮についてのこんな記事も出回っている。

鳩山首相が「賠償の用意」？＝韓国紙
韓国軍が自衛隊に勝った！ メディアの報道に国防省が苦言

ホントにこんな国と仲良くする必要があるのだろうか。微塵も感じない。前にも言ったけど、確かに隣の国なのだから、共存共栄できればそれに越したことはない。しかし、残念ながらそれに全く値しない。
賠償賠償と言うが、日本は朝鮮半島に文明をもたらしたあの併合の際にどれだけの投資をしたか。そしてそれ以降どれだけの回数、日本にたかり、ゆすってきたか。闇金融となんにも変わらないではないか。参政権や人権擁護法案で、事実上日本に対して差し押さえをしようとしている。差し押さえられる理由はなにもない。

そのような暴力団国家に主権を渡そうとしている民主党は、売国奴である以外、何者でもない。

php で文字列の後ろ n 文字をカットして取得・表示する

RSS を php で表示しようとしたときに、pubDate が「 +0000」で終わっていることはよくあることだと思うけど、この後ろの部分を除いて表示したいときに、いちいち文字列の長さを勘定して切ったりするよりも、substr で簡単にできる。

例えば、「0123456789」という文字列の後ろ 3 文字をカットして表示する場合は、substr の 3 つめのパラメータを以下のように記述する。

$str = "0123456789";
echo substr($str, 0, -3);

// 表示結果
0123456

負の値を入れるだけで、狙った位置で切ってくれる。ん〜便利。

「インターネット・エクスプローラー 6」の葬儀、しめやかに

「インターネット・エクスプローラー 6」の葬儀、しめやかに

なんか、ユーモア好きなアメリカって感じと同時に、時代の流れを感じる。とりあえず、透明 png を正しく表示すらできない IE6 は早く滅ぶべきだ。

そして、IE チームがこの式に花を贈っているのもまたおもしろい。
Microsoft IE team sends flowers for Internet Explorer 6 funeral

愛子さま：強い不安感などで学校休む 同学年に乱暴な子

愛子さま：強い不安感などで学校休む 同学年に乱暴な子

こりゃ日本史始まって以来の一大事だな。もっと進めば戦前の大逆罪でいじめっ子は極刑だ。近い将来、現在いじめている子どもとその近辺が腹痛を起こして日々に不安感を持つようになると思うが。

いやしかし、皇族が学校でいじめに遭うだなんて、、、ショックも甚だしいわ。

2 ちゃんねる攻撃で米企業が FBI と法的措置検討 損害 2 億 2 千万円

2 ちゃんねる攻撃で米企業が FBI と法的措置検討　損害 2 億 2 千万円

なんだか「またかよ」で済まずに大事になってきた。サイバー攻撃自体は CNN でも報道されているみたいだが、この記事には見落としがあった。

Kim-Asada rivalry spurs global cyber-warfare

4 段目に 2008 年の VANK サーバー事件のことが書かれてあるが、まるで日本人が率先して攻撃したかのように書かれている。しかしこれも朝鮮側からの攻撃にたまりかねた仕返しだった。「remind you」と使うなら、この事を書いてほしかった。日本人はそのような性格をしていない。外交で侮辱されて Prince of Wales を撃沈させた程の怒りはもう使えないような気がする。また、「サイバー攻撃は東アジアの文化だ」のように書かれているが。。。そして、日本人が文句を言っていたのは、優勝者及びその演技に対してではなく、採点についてだろう。金メダルは仕方ない。ただ、点数が異常だというものだったと思うが。。。

この CNN の記事にはコメントがついているが、Donnihon 氏のコメントが非常に日本寄りだな、、、本人は日本人ではないが、と断っているが。何故ロシアのサイトを攻撃しないのかとか、アンタ達は正真正銘犯罪者だなとか、浅田真央の方が良かったぜとか。2ch を an innocent web site と言っているのはおもしろかったが。

仙谷・前原・原口 3 閣僚が遅刻 予算委開会 15 分遅れる

仙谷・前原・原口 3 閣僚が遅刻 予算委開会 15 分遅れる

1 点だけ。。。

『「ツイッターやってたんじゃないか」とヤジが飛んだ。』

学生の会話か・・・？

なんだか 2ch に繋がらないと思ったら

ISP を変えたいので 2ch でなにか情報はないかと思っていたが、どうも昨日今日と繋がりにくかった。どうやら、朝鮮人の仕業らしい。

ヨナきっかけ！韓国から２ちゃんねる攻撃

実際に演技を見ていないのだが、優勝者のプレイはノーミスで素晴らしいものだったらしい。それならば金メダルを浅田真央が取れなくても特に異論はない。しかし人の声によると余りにも点差が激しかったらしい。海外でも浅田真央との点差に疑問を呈す声があり、安藤美姫との点差も考えにくいほどの差があるようだ。プルシェンコも浅田真央を擁護していたらしいし。審判が朝鮮に買収されたという話が上がってもそうおかしくはない。審判席を撮っていた映像を公開したバンキシャに対してイチャモンをつけるのも、なにか疾しいことがあるからだろう。そして、この話が盛り上がるのは 2ch。ということを考えると、この朝鮮人の行動に理由をつけられる。

しかし、事実かは判らないが、記事によると 1 万人が関わったという。F5 連打という作業をする暇でかつ危険な朝鮮人がそれだけいるということに、救いようのない、どうしようもない現実を感じる。

第一、何回も言うが、朝鮮が併合に対して文句を言える立場にないことは、世界的にも明らか。意味が判らない。笑止千万。国を挙げて歪めた歴史教育をしてきただけはある。国がそうする根拠すら不明だが。

mixi を退会した

退会理由に Naver との連携、及び招待制の廃止を書いた。別に mixi にアクセスしなければいいだけかもしれないが、なんかスッとした。

しかしヘルプからいくつかのリンクを辿ってやっと退会できるという導線の細さに驚いた。

mixi、本日より登録制に移行 ～ 招待無くても入会可能に

mixi、本日より登録制に移行 ～ 招待無くても入会可能に

今までアカウントは残していたが、そろそろ本気で考えた方がいいなぁ。マルチやら宗教やらのユーザが増えて、荒れていくと思う。元々招待制だったからここまで大きくなったと思うけど。。。

それよりも、記事本文中で言及されている「招待状なしで新規登録した場合、マイミクシィが 0 人の状態となるため、いくつかの機能が利用できない」ということに疑念が湧く。私がいつも使っている MySpace は登録制なんだけど、初期からサポートみたいなユーザとフレンドになった状態で始まる。そういうことを mixi もすれば機能どうこうってことにならないと思うけど。。。

運転トラブルで暴行、死なせる＝出頭の 43 歳男を逮捕－京都

運転トラブルで暴行、死なせる＝出頭の 43 歳男を逮捕－京都

私は殺した方の男の肩を持つ気はない。ただ、一方的に責められる事件ではないと思っている。この男は「軽トラックを道路表示に従って一時停止させた」とあるからだ。道路交通法を守った行為にクラクションを鳴らし、威嚇した、殺された方の 72 歳の所業も責められるに値すると思っている。

私は今まで 10 年ほど、道路交通法の存在意義というものを考えてきた。道路交通法を軽視する運転者が非常に多い。一時停止の停止線できちっと止まった車を見たことがあるだろうか。私はない。教習所でも免許センターでの講習でも、「停止線で止まることで事故を防ぐことができる」と教官は熱く語っているのに、誰も止まろうとしない。また、車線変更で方向指示器をちゃんと点滅させる運転者もほぼいない。少し点滅させる、もしくは全く点滅させない、と言った具合である。もう一度教本を読んでいただきたい。そのやり方で免許を取ることはできるだろうか。

そして、四輪以上にマナーが悪いのは、スクーターである。排気量の大小に関わらず、最悪である。先ほどの停止線や方向指示器は車を遥かに越える酷さであるし、マフラーの改造によって下痢音を撒き散らし、オーディオまで使って騒音を鳴らしている。甚だ、タチが悪いし、頭がイカれていると思う。乗っている奴は見るからに脳漿ダダ漏れの奴が多く、股下が短い、今回のオリンピック開幕前に騒がせたスノーボードの奴のような男が多い。そういう奴がまた、よく hip hop を垂れ流しているので、私の嫌いなポイントが全て関連づけられる。

道路交通法は、道路を利用する者全てについて、自分や相手を守るための法律だと思っている。それを守らないことはどういうことか。きちんとこの法を守れば、事故は半分以上減ると思う。