Just Metal, Just Baroque.: 04/2010

4/30/2010

魚油のオメガ 3 脂肪酸、頭を良くする効果ない＝英研究

魚油のオメガ 3 脂肪酸、頭を良くする効果ない＝英研究

DHA って騒いでたけど、結局効果ないってこと？昔はなんの研究結果を元に騒いだんだろ。

[MySpace のデザインを変更する：第八回] 「ランキング」「ライブ」「掲示板」のデザインを変更する

★変更を記述するページ

ホーム > プロフィール変更もしくはデザイン変更 > アーティスト詳細の「バイオグラフィー」の「編集」
Profile > Edit Profile or Customize Profile > Musician Detail > Musician Bio > Edit

★変更方法
「ランキング」「ライブ」「掲示板」のある部分の背景を黒の透明度 70%、リンクテキストの色が青、hover 時の色を赤に設定する場合はこんな感じ。

まず table[id="musicJVNav"] .subnavItems でMySpace 側で設定している背景を消す。
次に table[id="musicJVNav"] でこの部分の背景を設定する。
あとは文字色の設定を記述する。
ちなみに「music」って画像は透過画像ではないので、残念ながら変更はできない模様。

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

★サンプル画面
WINGS OF FALLEN ANGEL on MySpace Music - Free Streaming MP3s, Pictures & Music Downloads

[MySpace のデザインを変更する：第七回] メニューバーのデザインを変更する

★変更を記述するページ

★変更方法
バーの背景を黒の透明度 70%、枠線が黒、せせり出てくるメニューの背景を白の透明度 80%、マウスが重なった際にはさらに白くする感じだとこんな具合で。

結構色々と設定しなければならなかった。
まず div[id="topnav"] でメニューバーの背景を変える。
次に、div[id="topnav"] ul, div[id="subnav"] ul の背景を透過させ、黒の枠を付ける。MySpace 側ではこの部分の border-top を none にしているので、それに従う。この場合、border で枠全体を指定し、border-top で none にする方が短くて済むのでこうしてある。
加えて、div[id="topnav"] ul li, div[id="subnav"] ul li でborder-bottom を指定し、メニュー項目の分割線を決める。
続けて div[id="subnav"] li で、せせり出てくるメニュー項目の背景を変える。
さて、div[id="subnav"] li a の幅を 140px で定義しているのは、なにも定義しないとメニュー項目の右側に僅かな余白ができているので、それを潰す目的で設定してある。
最後はメニューの文字色を定義しているものの、肝心のせせり出てくるメニュー項目の文字色は MySpace 側で !important 指定がされているので変えられず、メニューバーにマウスが重なったときの文字色しか変更できなかった。

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

★サンプル画面
WINGS OF FALLEN ANGEL on MySpace Music - Free Streaming MP3s, Pictures & Music Downloads

Mac で favicon（ico ファイル）を作成する

ウェブページの URL バーに表示されるアイコン、favicon の .ico ファイルを Mac で作成するのはとても簡単。フリーのツールなどをダウンロードする必要は全くない。標準ソフトで .ico の favicon を作成できる。

正方形に制作したアイコンを Mac 標準ソフトの「プレビュー」で開く。

（必要ならば）
「ツール > サイズを調整...」で幅と高さをそれぞれ 16px にする。

「ファイル > 別名で保存...」を選ぶ。

「フォーマット」を「Microsoft アイコン」にして保存する。

これだけでできる。会社在籍時は Windows だったのでそれほど苦はなかったが、自宅で作業をするようになり、Mac ででも favicon を作れなければ話にならないと思っていたが、Mac でこんなに簡単にできるなんて少し驚きだった。

★確認環境
Mac OS 10.6.3、プレビュー 5.0.2

Opera 10.53

ウェブブラウザ Opera | 高速かつ安全な多機能ブラウザ | 無料ダウンロード

Opera 10.52 がリリースされたらしいのでダウンロードしてみた。そういえば Opera は勝手にアップグレードしてくれないんだろうか。いちいちダウンロードしないといけないのが、ちとめんどくさい。

さて、Opera 10.50 pre-alpha が不調になって、Opera 10.10 にダウングレードしていたのだが、CSS3 の box-shadow が未対応状態に戻ったりしていた。今回の Opera 10.52 ではちゃんと対応になっていた。html5 の canvas への対応も進んでいるのだろうか。あとで見てみよう。

と、今見たら Opera 10.53 になってたので、またまたダウンロード。どう変わったのかは判らないが。

[MySpace のデザインを変更する：第六回] 検索ボックスのデザインを変更する

★変更を記述するページ

★変更方法（入力スペース）
背景を黒の透明度 50%、枠線は青だとこんな感じ。

background を使う場合は、background-color に !important を記述しないと反映されない。また、入力ボックスの背景や文字色は MySpace 側で !important が付いているために、残念ながら変更できない。

★変更方法（検索ボタン）
背景を黒の透明度 70%、枠線は青だとこんな感じ。

background も border も !important を付けないと反映されない。

★変更方法（「MySpace」を押したときに出るドロップダウンメニュー）
平常時は黒の透明度 20% を背景に持ち、hover 時にベタ黒の背景になるようにするにはこんな感じ。

まず、div[id="srchMenuListBox_Header"] li で MySpace 側で設定している背景を消し、余白を消している。ここでいぢっている li の中にある a は背景が設定可能だが、li 自身はまた変えられないので、li の部分を見せないために、余白は消さないといけない。
次に div[id="srchMenuListBox_Header"] li a でメニューの背景等を設定する。display: block; でブロック要素にし、padding を有効にする。これをしないと左右が余りにも詰まった感じがして息苦しい。
最後に div[id="srchMenuListBox_Header"] li a:hover で背景色を設定する。

残念ながら文字色は !important 設定がなされているために変更できない。

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

★サンプル画面
WINGS OF FALLEN ANGEL on MySpace Music - Free Streaming MP3s, Pictures & Music Downloads

[MySpace のデザインを変更する：第五回] 「About」「フレンド一覧」「フレンドコメント」のデザインを変更する

★変更を記述するページ

★変更方法
幅 390px、テキストの先頭にアイコン（20px 20px）を付け、padding でアイコンなどとの余白を確保し、白い破線を下に引く場合はこんな感じ。

「フレンドコメント」の部分は、「About」や「フレンド一覧」と幅が違うので、これだけ適用させたいものがある場合は下記を併せて記述する。

.friendsComments .orangetext15 {
長さなど;
}

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

★サンプル画面
WINGS OF FALLEN ANGEL on MySpace Music - Free Streaming MP3s, Pictures & Music Downloads

[MySpace のデザインを変更する：第四回] アーティスト名のデザインを変更する

★変更を記述するページ

★変更方法
テキストの先頭にアイコン（20px 20px）を付け、padding でアイコンなどとの余白を確保する場合はこんな感じ。

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

★サンプル画面
WINGS OF FALLEN ANGEL on MySpace Music - Free Streaming MP3s, Pictures & Music Downloads

[MySpace のデザインを変更する：第三回] リンクテキストの色を変更する

★変更を記述するページ

★変更方法

!important を付けてはいるが、既に MySpace 側で !important 指定が存在するので、ところどころは変わらない。それが悔しいところ。

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

★サンプル画面
WINGS OF FALLEN ANGEL on MySpace Music - Free Streaming MP3s, Pictures & Music Downloads

[MySpace のデザインを変更する：第二回] 内容部分の背景を変更する

★変更を記述するページ

★変更方法

私はこのメインコンテンツ部分を黒の 70% で透けさせているので、下記のようになる。

body > table > tbody > tr > td {
background: rgba(0, 0, 0, .7);
}

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

★サンプル画面
WINGS OF FALLEN ANGEL on MySpace Music - Free Streaming MP3s, Pictures & Music Downloads

[MySpace のデザインを変更する：第一回] 背景画像を設定する

★変更を記述するページ

★変更方法

これだけでは実際の内容部分の外しか変わらないので、内容部分を透けさせて背景画像を見せたい場合は以下を併せて記述する。枠線が邪魔に見えることもあるので、一緒に枠線を消しておく。

table, tr, td {
background: none; background-color: transparent; border: none;
}
table table table, table tr {
background: none; background-color: transparent; border: none;
}

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

★サンプル画面
WINGS OF FALLEN ANGEL on MySpace Music - Free Streaming MP3s, Pictures & Music Downloads

MySpace のデザインを変更する

MySpace のデザインをリニューアルしたので、この際に備忘録を兼ねて各部のデザイン変更を記していきたいと思う。

[MySpace のデザインを変更する：第一回] 背景画像を設定する

[MySpace のデザインを変更する：第二回] 内容部分の背景を変更する

[MySpace のデザインを変更する：第三回] リンクテキストの色を変更する

[MySpace のデザインを変更する：第四回] アーティスト名のデザインを変更する

[MySpace のデザインを変更する：第五回] 「About」「フレンド一覧」「フレンドコメント」のデザインを変更する

[MySpace のデザインを変更する：第六回] 検索ボックスのデザインを変更する

[MySpace のデザインを変更する：第七回] メニューバーのデザインを変更する

[MySpace のデザインを変更する：第八回] 「ランキング」「ライブ」「掲示板」のデザインを変更する

[MySpace のデザインを変更する：第九回] 「コンタクトメニュー」のデザインを変更する

[MySpace のデザインを変更する：第十回] 「フレンドコメント」のデザインを変更する

[MySpace のデザインを変更する：第十一回] MySpace に Google Analytics を適用する

★サンプル画面
WINGS OF FALLEN ANGEL on MySpace Music - Free Streaming MP3s, Pictures & Music Downloads

4/28/2010

中国人はサッカー観戦で笛を使用

先ほど BS 朝日で ACL の予選リーグ最終戦を見ていたが、中国ではサッカー観戦で笛を使用するらしい。審判が使用する笛と同じような音のするやつだ。もちろん、その笛が吹かれれば主審の笛かどうか判らないことがある。それを平然とするのが中国人。いや、平然というかそれが選手にとって迷惑なものだと理解していない。もしその笛を使用禁止にすると通達が出たとしても、まぁ運営に関わっている人間も中国人だから出さないだろうが、「今まで使えたのに何故使えないのか」とやめることはないだろう。

この前の上海万博のリハーサル模様を見ても判る。リハーサルだからメインの催し物などやっていないし、見られる訳がない。なのに「見られないなら何故呼ぶ？」と言って会場に突入する。意味が判らない。フランスでこの目で見たことだが、ヴェルサイユ宮殿の内部には触れないようにと綱が張ってある。これを乗り越えたのが中国人観光客。警備にこっぴどく怒られていたのは言うまでもない。

しかし今日の西野監督の意図はなんだったのだろうか。勝つつもりであれば、河南をナメ過ぎていたとしか言えない。現有戦力のベストメンバーである二川・明神・加地を控えにするなんてどう考えてもおかしい。2 位通過を元々狙っていたのではないだろうか。二川・明神は後半から入ったが、替えるなら大塚・星原だろう。そして最後に投入されたのも横谷。若手に経験を、みたいな感じに思えて仕方ない。次のリーグ鹿島戦に温存したかったとしても、戦力を抑え過ぎたと思う。

4/26/2010

映画「アマデウス」での嘘？

先ほど、録画しておいた「名曲探偵アマデウス」の「Eine Kleine Nacht Musik（アイネクライネナハトミュジーク）」を見ていたときに思った。1984 年に公開された傑作映画「アマデウス」の中に嘘があったと。もちろん、名曲探偵側の主張が真実であったら、という前置きと、実に細かい点ではあるが。

映画「アマデウス」での冒頭にこんなシーンがある。年老いたサリエリが巡回に来た神父にピアノを弾いて聴かせる。最初のいくつかはサリエリが作曲したものだったが、神父は「知らない」と言う。数曲そんな問答があった末に、サリエリが弾いた曲に神父が反応し、ピアノが奏でるメロディーと一緒に口ずさみ、「知っている！大好きな曲です。あなたが作曲されたとは」とサリエリに告げる。しかしそれはモーツアルトの「Eine Kleine Nacht Musik」で、サリエリはガッカリする。。。

さて、名曲探偵ではこのような主張が行われた。この「Eine Kleine Nacht Musik」は、作曲された 1787 年以降随分とこの曲が演奏された記録がなく、ほとんどの人は存在を知らなかった。ただ、SP レコードが段々と流布していった 1930 年代にようやくこの曲が多くの人の耳に届くようになった、と。SP レコードの片面の再生時間は 4 分しかなく、「Eine Kleine Nacht Musik」は各楽章がその片面に全て収まるのでよく録音され、販売されたらしい。

ということは、サリエリの没年が 1825 年なので、映画中の神父の反応は脚本によって作られたフィクションであると結論付けることができる。もちろん、このサリエリと神父の会話すらがフィクションだと予想されるので、今更言ったところで、なんの役にも立たないのだが。

4/25/2010

平山相太の不思議

昨日は万博で平山のプレイを生で見た。実に不思議だ。何故彼はプロでやっていけるのだろうか。

動きはおじいちゃんみたいだ。なにかこう、潤滑油が欠けているロボットのような感じ。例えばフェイントにしても安田の 10 分の 1 くらいの動作スピードしかないからすぐにボールを相手に渡すことになる。昨日も山口は平山があたふたしている隙に簡単にボールを出していた。

走らない。普通サッカー選手が走ると言えば、加地やら佐々木やらの爆走をイメージするけど、ひょこひょこと移動するだけで直進性が全くない。他の選手がその選手なりのイメージで平山にボールを出すときがあるが、そのイメージは一般的な走力を元にしてパスを出しているらしく、平山だと全く追いつけない。昨日は頭を抱えた場面もあり、ゴール裏からの失笑を買っていた。

体が弱い。ボールを追いかけていくときに相手選手と競い合いながら追う場面をよく見るが、平山はすぐに当たり負けをする。昨日も加地にすぐボールを渡していた。

足下が弱く、走力がなく、体幹が弱く、シュート精度も悪く、連携もできない。常に口が半開きで脳もツルツル、海外へ行ってもすぐにホームシックで帰って来たことからも、精神力もない。こんなのを「選手」としてよく FC 東京は使っているな。

昨日ガンバが初勝利を収めた要因の一つには、この平山が 90 分間出場していたこともあると思う。もし助っ人と石川の 2 トップで来られていたら、きっと完封はできなかったような気がする。

4/22/2010

Samsung の製品を買ってはいけない

本日の報道ステーションで Samsung が出てきた。今回はその Samsung の製品を買ってはいけないという話をしてみたい。

私は 5 年前、ドイツへ出向した。ドイツでの業務に SVG に関することがあり、社内で対応できる人間が少なく、その少ない中 SVG に関わっていた私に打診してきたのだが、当時他の部署からも誘いがあったし、自分でやりたいこともあったので、断っていた。が、ドイツという魅力もあり、コイントスをしてドイツへ行くという面が出たら行くと言った。そしたら 3 回やって 3 回ともその面が出たので行くことにした。出向先はドイツにある Samsung Mobile のヨーロッパ本部だった。その頃はそれほど朝鮮嫌いではなかった。

そして現にその本部で仕事をしている間、嫌でも Samsung 社員の仕事に対する姿勢を見ることになった。私たちがいた部屋は大部屋で、30〜40 人くらいがいた。その中で日本人は私たちのチームの 10 人弱だったので、他は全て朝鮮人の Samsung 社員。

私たちはインターネットに関わる仕事なので、当然インターネットにはよく繋ぐ。しかし非常に繋ぎにくくなることがよくあった。しばらくは何故だろうと思うだけで仕方ないとしていたのだが、チームの一人が偶然その繋ぎにくくなる原因を発見した。Samsung 社員は皆ネットゲームに興じており、それに回線のほとんどを占有されていたことが原因だった。時折朝鮮人から歓声が上がったり、一人の社員の席に集まったりしていたこともあったのだが、それはなんと、ネットゲームで高得点が出たからということだった。

静かにしている Samsung 社員もいた。ネットゲームはしておらず、仕事をしていると思っていた。が、偶然コンピュータの画面が目に入った。実はネットで配信されているドラマを見ていた。

そのような社員で開発された製品を使うなど、微塵も考えられない。むしろ今提示されている Samsung 製品の値段も高過ぎると思う。そのフロアにいた全員がこのような業務態度だったので、おそらく他の Samsung Mobile に限らず Samsung 本体も同じ光景だろう。しかしこのような糞企業が、南朝鮮の GDP の 4 分の 1 を担っている。実に気持ち悪い。

Samsung 社員がいつ仕事をしているのか。全く判らない。

バッカス（バッコス）はギリシャ神話ではない！

【地球百景】ヨーロッパ古城散歩 #2「ドイツ　～時代を超えて生きる王～」

今、録画していた上記番組を見ており、昔ドイツへ出向していた際に同僚と観光したマルクスブルクが登場したりして、気分よく見ていたのだが、バッハラッハという街の紹介でガッカリした。この街の名前の由来は、ギリシャ神話に出てくる酒の神バッカスに由来するという。私はバッハラッハへ行ったことはない。街の由来も知らない。しかしこの紹介を聞いた瞬間、思わず叫んでしまった。

「バッカスはギリシャ神話ではない！」

ローマ神話の登場人物？だ。ギリシャ神話でのデュオニュソスに相当する。どうもギリシャ神話とローマ神話を混同し、双方の登場人物をごちゃ混ぜにしていることが多いように思う。何故このように固有名詞の使い方を曖昧にする人が多いのだろうか。Apple 社の iTunes のことを「あいちゅーん」と最後の s を言わない人も多い。固有名詞は他と区別し、優位性を保持していると思っている。言葉がどんどんと軽微に扱われていくことを私は大変危惧している。

バッカスはギリシャ神話ではない。ローマ神話だ。ついでに言うと、ヴィーナスもローマ神話だ。

Adobe、iPhone向けFlashを断念　Androidにシフトへ

Adobe、iPhone向けFlashを断念　Androidにシフトへ

結局、この段階で Apple は Flash の前途に見切りをつけたという感じだろうか。まぁ Flash 自体が Adobe の昔からの商品ではないため、それほど両者の関係が悪化するとは思えないが。。。

動画や音楽は html5 で再生できるし、動的なメニュー等も Ajax を使えばいい。だから Flash はいらないという判断か。個人的にも Flash は最近広告でしょっちゅう使われ、しかもそれの読み込みや再生を待つこともあるので、別にいらないんじゃないかと思ってはいた。モバイル Safari は以前から Flash への対応を求められており、全くその様子がなかったが、遂に態度を明らかにしたという感じ。

元巨人監督の堀内恒夫氏が自民党から比例代表候補として出馬

Twitter / 谷垣禎一: 先ほど元巨人監督の堀内恒夫さんにわが党の比例代表候補 ...

今更このようなことでいいのだろうか。
平沼新党や舛添新党など分裂することによって、民主党に早くも嫌気が差した人はどこに投票すればいいのか迷うのではないだろうか。迷うということはそれだけ票が分かれるということなので、次回の選挙で民主党を蹴落とすことはできるのだろうか。今は麻生太郎氏もしくは安倍晋三氏を総帥にして、自民党内左派を追い出し、保守勢力として一枚岩になるべきかと思われる。

なので、この堀内氏への依頼は現状を改善することができるのか疑問だ。堀内氏の求心力がどうこうという意味ではなく、自民党はすぎやまこういち氏や小林よしのり氏に協力を申し出るべきではないか。

4/20/2010

html5 の audio / video の音量を設定したり再生時間を求めたりする

mp3 プレイヤを作る上で欠かせないものの一つになる、音量の設定や再生時間の取得。これも html5 の video / audio 要素の機能に javascript 側で操作できる。

例えば、html 側で次のような audio ソースが定義されているとする。

id:mp3 の音源を変数 audio として定義しておく。

// id:mp3 を変数 audio として定義
var audio = document.getElementById("mp3");

さて、この xxx.mp3 の音量を設定したいときは、こんな感じで。

// volume を 0.5（0〜1 の数値）に設定
audio.volume = 0.5;

次に、現時点での再生時間を取得したい場合は、次のように記述する。ここでは変数 playTime に代入することとするとこんな感じ。

// 現在の再生時間を変数 playTime に代入
playTime = audio.currentTime;

最後に、この音源全体の時間を取得したいときはこんな感じ。変数 audioLength に代入してみる。

// 音源全体の時間を変数 audioLength に代入
audioLength = audio.duration;

jai - javascript audio interface

NHK の IT ホワイトボックスにガッカリな件

NHK IT ホワイトボックス II 第3回 ::ブラウザーが変わってきてるって本当？

録画していたものをさっき見た。Google の及川氏が出演されていたし、内容はとても良かったと思うけど、一点。。。

これはあくまでも IT 番組やろ？IT を専門に扱う番組やろ？それなのに、それなのにだ。何故「ホームページ」と言うのか。専門番組であるにも関わらず、何故誤用をそのまま通そうとするのだ？

例えば、経済専門の番組の解説部分でしきりに「ドイツ経済論」と言っていたとする。しかし実はマルクス経済論だったりするのとモデルは同じ。尤も、マルクス経済論など雲の上の理想空想論に過ぎないので、それを語るような番組はないけど。

友人曰く「もう日本的にはホームページで通ってしまっていて、和製英語化している。だから仕方ない」と言うが、それだからこそ、正す必要があると強く感じる。江戸幕府の弊害だった鎖国政策により、日本人の外国語に感じる壁は非常に高い。鎖国から解放されてからまだ 150 年も経っていないので、まだ外国語に対する壁が高いのはある意味仕方ないのかもしれない。しかし英語のメールを読める人が多くいれば、今インドが外注先として受けているアメリカの開発案件を、多少時差がマッチしないが日本で取れたかもしれなかった。例え幼稚園から英語スクールに通わせたとしても、これだけ日本に英語圏で全く通じない和製英語が溢れていれば、幼年時の英語教育は無駄になってしまうかもしれない。メディアはもうずっと前から「グローバル化」と叫んでいるが、そのためには巷に溢れさせた和製英語をメディア自らが使うのを辞め、正しい言葉を広めていく必要がある。

官営放送である NHK。またもやガッカリだ。

4/19/2010

html5 の audio / video で最初から再生する

html5 では Flash を使わなくても audio やら video やらを再生できるけど、どうも javascript 側で play() や pause() はあるけど、stop() がない。再生は play() でできるし、一時停止も pause() でできる。で、実際のオーディオ機器やソフトでの表示でよくある「■」に相当する命令がないのかなと探した。stop() とかあればすぐに判るけど、ないのかなと。

あった。load() を使えば再生を停止して、次回の play() 時には先頭から再生してくれる。

4/12/2010

Google マップから北朝鮮が消滅？ネットで話題に

Google マップから北朝鮮が消滅？ネットで話題に
実際の Google Map

本当に消えている。。。しかし、記事の中に「Bing地図など、他社の地図サービスでは、北朝鮮の地図はとくに問題なく表示されているようだ」とあるが、そりゃそうだろ。Bing = MicroSoft ≒ 朝鮮なんだから。Yahoo! Japan = 朝鮮なんだから。

ただ、北朝鮮がなんか仕掛けたのか、Google の政治的意図なのかどうかは全く判らんが、あくまでも「地図」なんで、表示されておくべきじゃないのか？地図に罪はないだろ。

4/11/2010

京都知事選現職・山田啓二氏が当選確実

京都知事選現職・山田啓二氏が当選確実

私も夕方に投票に行ったが、どうもおもしろくない。自公民各党の支援を受けた現職・山田啓二氏と、共産党がゴリゴリ推している門氏の一騎討ち。市民から見ると、結果は告示日に既に見えていた。そんな中での投票はやはり、こう、ワクワク感がない。前回の衆議院選挙は日本全体を巻き込んだ選挙戦争であり、いち選挙区であっても各候補者がお互いを削りあい、私としては投票する候補者は決まっているものの、誰が勝つのかという点に関してはワクワクしていた。しかし今回は。。。

なんかこう、マッタリとした選挙だった。

重ねた画像の表示の仕方を指定する(globalCompositeOperation) [html5 の Canvas を使ってみる：第卌一回]

globalCompositeOperation では、この記述前に描画した矩形の上に、記述後に描画した矩形を載せた際に発生する重なり具合についてあれこれと指定できるみたいだ。

★html 側

★Javascript 側

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

// fillStyle で緑の塗りを指定
  c.fillStyle = "rgb(0, 255, 0)";
// fillRect で塗りつぶした矩形を描画
  c.fillRect(40, 0, 20, 150);
// globalCompositeOperation の値を source-over に指定
  c.globalCompositeOperation = "source-over";
// fillStyle で青の透明度 50% の塗りを指定
  c.fillStyle = "rgba(0, 0, 255, .5)";
// fillRect で塗りつぶした矩形を描画
  c.fillRect(0, 50, 100, 20);
}

すると、こうなる。source-over では両方が描画されるので、緑と薄い青でできた十字架が描画される。重なっている部分は重ねた青の矩形（the source image）が順位として上に表示される。重ねている青い矩形は透明度を与えてあるので、重なり具合がよく判る。

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

次に source-atop にしてみる。これは重ねられた緑の矩形（the destination image）の領域のみ表示され、重なった部分は重ねた青の矩形（the source image）が順位として上に表示される。

c.globalCompositeOperation = "source-atop";

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

次に source-in にしてみる。これは重ねた青の矩形（the source image）の領域の内、重なった部分のみが表示され、表示される矩形は重ねた青の矩形（the source image）となる。青い矩形を透明にしてあるので、重ねられた側の緑色が透けて見えていないことが判る。

c.globalCompositeOperation = "source-in";

確認環境：
Firefox 3.6.3、Opera 10.53

正常に動作しなかった環境：
Safari 5.0、Chrome 5.0.375.70（両方とも重ねられた緑の矩形も表示されてしまっている）

次に source-out にしてみる。これは重ねた青の矩形（the source image）の領域の内、重なっていない部分のみが表示される。

c.globalCompositeOperation = "source-out";

確認環境：
Firefox 3.6.3、Opera 10.53

正常に動作しなかった環境：
Safari 5.0、Chrome 5.0.375.70（両方とも重ねられた緑の矩形も表示されてしまっている）

次からは source の部分を destination に変えた値を入れていく。まずは destination-over をやってみる。これも両方が描画されるが、重なった部分は重ねられた緑の矩形（the destination image）が順位として上に表示される。緑に透明度が影響していないことが判る。

c.globalCompositeOperation = "destination-over";

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

次に destination-atop にしてみる。これは重ねた青の矩形（the source image）の領域のみ表示され、重なった部分は重ねられた緑の矩形（the destination image）が順位として上に表示される。

c.globalCompositeOperation = "destination-atop";

確認環境：
Firefox 3.6.3、Opera 10.53

正常に動作しなかった環境：
Safari 5.0、Chrome 5.0.375.70（両方とも重ねられた緑の矩形も表示されてしまっている）

次に destination-in にしてみる。これは重ねられた緑の矩形（the destination image）の領域の内、重なった部分のみが表示され、表示される矩形は重ねられた緑の矩形（the destination image）となる。

c.globalCompositeOperation = "destination-in";

確認環境：
Firefox 3.6.3、Opera 10.53

正常に動作しなかった環境：
Safari 5.0、Chrome 5.0.375.70（両方とも重ねられた緑の矩形も表示されてしまっており、さらに緑の矩形に透明度が影響している）

次に destination-out にしてみる。これは重ねられた緑の矩形（the destination image）の領域の内、重なっていない部分のみが表示される。

c.globalCompositeOperation = "destination-out";

正常に動作しなかった環境：
Safari 5.0、Chrome 5.0.375.70、Firefox 3.6.3、Opera 10.53（重なった部分も表示されている。透明度の影響か？）

今度は lighter にしてみる。これは両方の矩形が表示されるが、重なった部分はそれぞれの色を加算したものとなる。今回は透明度があると判りづらかったため、青の矩形の透明度をなしに、rgb(0, 0, 255) としている。さらに十字架の交差点右下に、色を加算した rgb(0, 255, 255) の矩形も一緒に描画してみた。

c.globalCompositeOperation = "lighter";

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

次に copy にしてみる。これは重ねた青の矩形（the source image）のみがそのまま表示される。

c.globalCompositeOperation = "copy";

確認環境：
Opera 10.53

正常に動作しなかった環境：
Safari 5.0、Chrome 5.0.375.70、Firefox 3.6.3（全て重ねられた緑の矩形も表示されてしまっている）

最後に xor にしてみる。これは両方の矩形の領域の内、重なった部分以外が表示される。

c.globalCompositeOperation = "xor";

正常に動作しなかった環境：
Safari 5.0、Chrome 5.0.375.70、Firefox 3.6.3、Opera 10.53（矩形から透明度を除くと全て正常動作を行うが、今回のように透明度を与えたると、重なった部分まで表示してしまう）

どうも、矩形に透明度を与えることで、透明度を与えられていない矩形にも影響を及ぼすのではないかという気がする。xor だけでなく、destination-atop や destination-in、destination-out においても透明度の影響を受けている。W3C の説明文中にある「opaque」は透明度についての記述ではないと思うけど。。。どうなんだろ。

W3C；
4.8.11 The canvas element — HTML 5

4/10/2010

枠を塗った矩形を描く(strokeRect) [html5 の Canvas を使ってみる：第卌回]

fillRect に引き続き、今度は strokeRect(); と strokeStyle で枠線を塗りつぶした矩形を描画してみる。

★html 側

★Javascript 側

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

// strokeStyle で赤の透明度 50% に枠の色を指定
  c.fillStyle = "rgba(255, 0, 0, .5)";
// 枠を塗りつぶした矩形を描画
  c.strokeRect(10, 10, 100, 50);
}

すると、こうなる。

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

W3C；
4.8.11 The canvas element — HTML 5

塗りつぶし矩形を描く(fillRect) [html5 の Canvas を使ってみる：第卅九回]

fillRect(); と fillStyle で塗りつぶしの矩形を描画してみる。

★html 側

★Javascript 側

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

// fillStyle で青の透明度 80% に塗りを指定
  c.fillStyle = "rgba(0, 0, 255, .8)";
// 塗りつぶし矩形を描画
  c.fillRect(10, 10, 100, 50);
}

すると、こうなる。rect(); と違い、最後に 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

4/09/2010

指定した座標が描画された範囲に入っているか調べる(isPointInPath) [html5 の Canvas を使ってみる：第卅八回]

isPointInPath(); では、引数で指定した座標が描画されている矩形等の範囲に入っているかを調べ、boolean で返すらしい。

★html 側

★Javascript 側

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

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

// 変数 result に x:50、y:50 が描画範囲内かの結果を代入
  var result = c.isPointInPath(50, 50);
// font で大きな文字を指定
  c.font = "bold 1.5em Times New Roman";
// fillText(); で結果を入れた変数 result を直線の下に描画
  c.fillText(result, 25, 70);
}

すると、こうなる。描画されているのは x:0、y:50 から x:100、y:50 までの直線で、問うてる座標は x:50、y:50 なのでこの直線が通っていることになり、結果 true が描画される。

次に、問う座標を y 軸に -1 して x:50、y:49 として、直線が通っていない箇所を指定する。結果は false と描画される。

// 変数 result に x:50、y:49 が描画範囲内かの結果を代入
var result = c.isPointInPath(50, 49);

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

正常に動作しなかった環境：
Opera 10.53
最初の期待値が true の場合も false と表示されてしまう。

W3C；
4.8.11 The canvas element — HTML 5

4/08/2010

鳩山由紀夫と源義仲

ふと思った。鳩山由紀夫と源義仲は似ている。顔の造形は知らん。しかし状況やモデルがとてもよく似ている。

当時の京の人間は、支配していた平家（自民党）をうんざりだと思っていた。そこへ源義仲（鳩）が戦に勝ち（衆院選圧勝）、京に君臨することになった。
しかし義仲（鳩）の軍（民主党員）は盗賊（社会党）の残党であったりコソ泥（政治経験ゼロ党員）も含まれる烏合の衆であり、そもそも義仲（鳩）は軍（民主党員）の統率をできるようなタマではなく、狼藉（献金違反等）が絶えず起こり続けた。
さらにブレーンであった源行家（汚沢）は他勢力（中国や朝鮮）の顔色ばかりを伺い、民のことなどそっちのけ。
遂には後白河上皇を幽閉（陛下を政治利用）しようとし、結局は瓦解した。
そして、京の人々に残ったのはなにか。人間不信（政治不信）である。

歴史は繰り返すのだなと思った。

Illustrator のような二次ベジェ曲線で角丸の四角や微妙な円を描く(quadraticCurveTo) [html5 の Canvas を使ってみる：第卅七回]

bezierCurveTo(); では、三次ベジェ曲線を描いてみたが、次に quadraticCurveTo(); で二次ベジェ曲線を描いてみる。

★html 側

★Javascript 側

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

// 描画をすることを宣言
  c.beginPath();
// 筆おろしの座標を x:0、y:100 に定義
  c.moveTo(0, 100);
// x:50、y:20 を座標とするアンカーポイントを持つ、
// x:100、y:100 までの二次ベジェ曲線を描画
  c.quadraticCurveTo(50, 20, 100, 100);
// これらの座標に対して線を引く指令
  c.stroke();
}

すると、こうなる。上記で指定したアンカーポイントの座標に向かう赤い補助線も引いてみた。

次に、左のアンカーポイントの先っちょを x:30 にずらしてみたらどうなるかやってみた。

c.quadraticCurveTo(30, 20, 100, 100);

さらに、同じく左のアンカーポイントの先っちょを y:150 にずらしてみたらどうなるか。

c.quadraticCurveTo(50, 150, 100, 100);

さて、角丸の四角をこの quadraticCurveTo(); を使って描ける。幅も高さも 100px の正方形の角を 10px 分丸めるとすると、角を quadraticCurveTo(); で描画するので、直線部分である 80px 分を lineTo(); で描画することになる。

// 描画をすることを宣言
c.beginPath();
// 筆おろしの座標を x:10、y:0 に定義
c.moveTo(10, 0);
// lineTo(); で x:90、y:0 へ直線を描画
c.lineTo(90, 0);
// x:100、y:0 を座標とするアンカーポイントを持つ、
// x:100、y:10 までの二次ベジェ曲線を描画
c.quadraticCurveTo(100, 0, 100, 10);
// lineTo(); で x:100、y:90 へ直線を描画
c.lineTo(100, 90);
// x:100、y:100 を座標とするアンカーポイントを持つ、
// x:90、y:100 までの二次ベジェ曲線を描画
c.quadraticCurveTo(100, 100, 90, 100);
// lineTo(); で x:10、y:100 へ直線を描画
c.lineTo(10, 100);
// x:0、y:100 を座標とするアンカーポイントを持つ、
// x:0、y:90 までの二次ベジェ曲線を描画
c.quadraticCurveTo(0, 100, 0, 90);
// lineTo(); で x:0、y:10 へ直線を描画
c.lineTo(0, 10);
// x:0、y:0 を座標とするアンカーポイントを持つ、
// x:10、y:0 までの二次ベジェ曲線を描画
c.quadraticCurveTo(0, 0, 10, 0);
// これらの座標に対して線を引く指令
c.stroke();

最後に、quadraticCurveTo(); を 4 回使って、微妙な円を描いてみる。

// 描画をすることを宣言
c.beginPath();
// 筆おろしの座標を x:50、y:0 に定義
c.moveTo(50, 0);
// x:100、y:0 を座標とするアンカーポイントを持つ、
// x:100、y:50 までの二次ベジェ曲線を描画
c.quadraticCurveTo(100, 0, 100, 50);
// x:100、y:100 を座標とするアンカーポイントを持つ、
// x:50、y:100 までの二次ベジェ曲線を描画
c.quadraticCurveTo(100, 100, 50, 100);
// x:0、y:100 を座標とするアンカーポイントを持つ、
// x:0、y:50 までの二次ベジェ曲線を描画
c.quadraticCurveTo(0, 100, 0, 50);
// x:0、y:0 を座標とするアンカーポイントを持つ、
// x:50、y:0 までの二次ベジェ曲線を描画
c.quadraticCurveTo(0, 0, 50, 0);
// これらの座標に対して線を引く指令
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

Illustrator のような三次ベジェ曲線を描く(bezierCurveTo) [html5 の Canvas を使ってみる：第卅六回]

bezierCurveTo(); では、Illustrator のような三次ベジェ曲線を描けるらしい。

★html 側

★Javascript 側

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

// 描画をすることを宣言
  c.beginPath();
// 筆おろしの座標を x:0、y:100 に定義
  c.moveTo(0, 100);
// x:20、y:20 を座標とするアンカーポイントと、
// x:80、y:20 を座標とするアンカーポイントを持ち、
// x:100、y:100 までの三次ベジェ曲線を描画
  c.bezierCurveTo(20, 20, 80, 20, 100, 100);
// これらの座標に対して線を引く指令
  c.stroke();
}

すると、こうなる。上記で指定したアンカーポイントの座標に向かう赤い補助線も引いてみた。

次に、左のアンカーポイントの先っちょを x:50 にずらしてみたらどうなるかやってみた。

c.bezierCurveTo(50, 20, 80, 20, 100, 100);

最後に、左のアンカーポイントの先っちょを y:150 にずらしてみたらどうなるか。

c.bezierCurveTo(20, 150, 80, 20, 100, 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

4/06/2010

ガンバ大阪ペドロ・ジュニオール、Sport Club do Recife へ移籍決定

Pedro Júnior é o novo reforço do Leão

開幕からリーグ戦を勝てないガンバだが、遂にペドロに動きが現れた。母国ブラジルのクラブへ移籍するらしい。記事によると先週の土曜午後にはサインしたらしい。

所属クラブであるガンバのユニフォームを叩き付けた代償は、J のクラブからも「ユニフォームを叩き付ける奴はいらない」というように日本での移籍先が難航した結果になって現れた。

さて、空いた外国人枠をどのように消費するのだろうか。もう FW はいいんじゃないか？できれば加地の後継者として右サイドバックを望む。

4/05/2010

携帯電話の SIM ロック、解除を要請へ--総務省

携帯電話の SIM ロック、解除を要請へ--総務省

もし SIM フリーになれば個人的にはとても嬉しい。糞フトバンクと契約しなくても iPhone を使えるようになるかもしれないからだ。どうも先日来、この SIM フリーに対して抗議しているのは糞フトバンクだけど、そりゃそうだろうなと思う。

私が望んでいるように、糞フトバンクと契約せずに iPhone を使いたい、もしくはディズニーモバイルを使いたいという人は結構いるように思う。そのユーザから料金を吸い上げるチャンスがなくなるし、妥協して糞フトバンクと契約していたユーザは元のキャリアに戻ることになれば、かなりの収入減になる見込みになると思う。それだけ、魅力的な端末と揃え、広告に金をかけてきた証でもある。ただ、その妄想的な手段でしか囲い込みを果たせていないのが、糞フトバンクの現状だ。そして、この SIM フリーになることによって、我々ユーザは大きな恩恵を受けることになる。それは料金だ。

現在の携帯電話利用料金が高いのは、糞フトバンクのアクセスチャージが高いことに起因している、というのは有名な話だ。アクセスチャージというのは例えば、au ユーザである A さんが docomo ユーザである B さんに電話をしたとする。すると着信させるためには、B さんの電話にたどり着くために docomo 回線の中を徘徊する必要がある。その時の回線使用料として、au は docomo に支払うことになる、という仕組み。糞フトバンクはこの他社へ請求することになるアクセスチャージが高い。請求されたキャリアは、その分を利用料引き上げという措置により賄う。これで au と docomo の料金が高くなり、「ではウチも」ということで糞フトバンクも便乗値上げを行う。

要は、糞フトバンクの利用者が増えれば増える程、利用料はどんどん上がっていくという構図になる。従って、前述したように、魅惑的な端末を docomo や au ユーザが糞フトバンクと契約せずに使えるようになると、この糞フトバンクからアクセスチャージされる回数が減り、その分料金を安くできるという理屈になる。

尤も、現時点でも糞フトバンク携帯には電話をかけないようにすれば、SIM フリーにならなくても可能かもしれないが。糞フトバンク、ダメ、ゼッタイ。

さらに、何度も言っているが、糞フトバンクは日本人から吸い上げる料金には、糞フトバンクを使っている在日朝鮮人の料金も含まれている。あなたが支払っている料金は、どっかの在日の分も一緒に支払っているのだ。SIM フリーになって糞フトバンクが携帯電話業界撤退に値する打撃を与えられることを期待する。

SIM フリーは日本国にとって、利益となる。

4/04/2010

外部ドメインのファイルを XMLHttpRequest と php で読み込む

普通に XMLHttpRequest で外部ドメインのファイルを読み込めるのは、現在確認している限りでは、Mac ローカル環境と Safari しかない。これは Dashboard で使用する widget のためなのかもしれないが、ローカル Mac と Safari の組み合わせでなら可能だ。しかし php を使えば、XMLHttpRequest 単体では読み込めない外部ドメインのファイルも読み込むことができる。これにたどり着くまでに色々と調べたりしたけど、どれもソースが長かったり jquery を使ったりとめんどくさいものが多かったが、この手法ではかなり簡単に実現できる。

javascript を含んだ html を test.html、XMLHttpRequest によって読み込まれる php を test.php とする。

★html（test.html）

★javascript（test.html）

★php（test.php）

// XMLHttpRequest で読み込むファイル名の
// ? 以降の url を取得
$fileName = $_SERVER["QUERY_STRING"];
// url を読み込み、php 内で展開する
readfile($fileName);

Safari、Firefox、Chrome で確認済み。Opera は調子悪いので未確認。

4/02/2010

Time Machine を使ってみる

アップル - Mac OS X - Mac OS Xとは？ - Time Machine

Mac OS 10.5 からは Time Machine という自動バックアップの機能が OS に付属している。初回のバックアップは全てをコピーするので時間はかかるが、以降は差分ファイルのみを自動でバックアップしてくれる。とてつもなく便利な機能。システム環境設定に書いてある「Time Machine では次のものが保存されます」を書いてみると、こんな感じ。

過去 24 時間の 1 時間ごとのバックアップ

過去 1 か月の 1 日ごとのバックアップ

過去のすべての月の 1 週間ごとのバックアップ

何故今更、初めて使ってみるのか。残念ながらうちには外付け HDD がなかったので、使うにも使えなかった。しかしこの前の ISP 新規契約でキャンペーンとしてもらえたので、今日初めて実装してみた。その初回のバックアップが約 30 分後（一度キャンセルしたため。実際はすぐに初回は始まる）なのだが、Apple が喧伝しているように、本当にバックアップ中も作業を続けられるような環境を維持できるのかを見てみたい。

しかし Time Machine の画面は秀逸過ぎる。言葉を失う。

04/03/2010 edit ---------------------
いつの間にかバックアップが終わっていた。その間も特に遅いといった感じもなく作業することができた。とても素晴らしい機能だ。

Opera 10.5 pre-alpha for Labs が強制終了する

どうも Opera 10.5 pre-alpha for Labs が調子悪い。今日ちょっと再起動しようと思って Opera を落としたときに、やけに時間かかるなと思っていたけど、再起動後に立ち上げようとすると、立ち上がった瞬間に強制終了する。先ほどはソフトウェアアップデートをしたので再起動をまたしたけど、やっぱりおかしい。

一応 Opera には報告を送っておいたけど、どうなるんだろか。

I double-clicked the Opera icon, and I can see the browser window just a moment, but after the moment, Opera was forced to close. I tried after rebooting my computer, but this problem is still alive.
Environment; Mac OS 10.6.3

4/01/2010

私は罰金を感じている。

下らない話題だが、google 翻訳で「I feel fine.」と打ち、日英翻訳を行うと、「私は気分がいい。」となる。
I feel fine. を google 日英翻訳

私の「I」を小文字の「i」に変えて「i feel fine.」とすると、「私は罰金を感じている。」となる。
i feel fine. を google 日英翻訳

どうも google 翻訳は、アルファベット使用言語同士なら強いけど、そうでない日本語を絡めた翻訳には弱い気がする。

4/30/2010

4/28/2010

4/26/2010

4/25/2010

4/22/2010

4/20/2010

4/19/2010

4/12/2010

4/11/2010

4/10/2010

4/09/2010

4/08/2010

4/06/2010

4/05/2010

4/04/2010

4/02/2010

4/01/2010

About Me

Links

Get Browser

Labels

Blog Archive