儚く散ってしまったが、大きな夢を抱かせてくれた。駒野には気を落とすなと言いたいが、今はきっと無理だろう。だけど、駒野がいなければ決勝トーナメントにすら行けなかったかもしれない。日本代表の選手には感謝の念しかない。
ただ、最後に森本を見たかった。是非遠藤のように、この悔しさをバネに森本には次回の大会で活躍してほしい。
今はただ、ありがとう。残った日本代表は、西村主審と相楽副審。これはこれで誇りに思う。次はどの試合で笛を吹くのだろうか。
6/30/2010
6/29/2010
iPhone、iPad、iPod touch の User Agent と php での振り分け
自分用の備忘録として、iPhone、iPad、iPod touch の User Agent を残そうと思う。
ただ、私は iPod touch しかなく、iPhone と iPad は他所に掲載されていた情報に、iOS4 の情報を上書きして、下記に載せてみた。iPod touch の User Agent は実際に表示させた結果なので、間違いはない。「like Mac OS X;」の後に続く言語は、機器ごとに異なる。
おまけに、php での振り分け方も。
ただ、私は iPod touch しかなく、iPhone と iPad は他所に掲載されていた情報に、iOS4 の情報を上書きして、下記に載せてみた。iPod touch の User Agent は実際に表示させた結果なので、間違いはない。「like Mac OS X;」の後に続く言語は、機器ごとに異なる。
- iPhone
Mozilla/5.0 (iPhone; U; CPU iPhone OS 4_0 like Mac OS X; en) AppleWebKit/532.9
(KHTML, like Gecko) Version/4.0.5 Mobile/1A543a Safari/419.3 - iPad
Mozilla/5.0(iPad; U; CPU iPhone OS 4_0 like Mac OS X; en-us) AppleWebKit/532.9
(KHTML, like Gecko) Version/4.0.5 Mobile/7B314 Safari/531.21.10 - iPod touch
Mozilla/5.0 (iPod; U; CPU iPhone OS 4_0 like Mac OS X; de-de) AppleWebKit/532.9
(KHTML, like Gecko) Version/4.0.5 Mobile/8A293 Safari/6531.22.7
おまけに、php での振り分け方も。
$agent = $_SERVER['HTTP_USER_AGENT'];
if (preg_match("/^iPhone|iPod|iPad/i", $agent)) {
// 処理
}
if (preg_match("/^iPhone|iPod|iPad/i", $agent)) {
// 処理
}
6/27/2010
Canvas でローディングイメージ（読み込み中の画像）のアニメーションを作成する [html5 の Canvas を使ってみる：第卌五回]
Flash ではなく Ajax 等でのローディングイメージは画像を用いていたが、Canvas でもできるので、作ってみた。30° で 12 回転させ、その際に 12 で割っていった透明度を加えて行くと、くるくる回って見える。今回、よくあるこんな形がくるくる回るようにしてみた。
また、大きさ・色・回転の速さを自由に変えられるようにしてあるので、場面に応じて使えると思う。背景はもちろん透明にした。
★html 側
★Javascript 側
すると、こうなる。
次に大きさを 100 にしてみる。
次は色をグレー rgb(150, 150, 150) にしてみる。
今度は回転の速さを 100 ミリ秒にしてみる。
最後に、背景を黒くした上で、色を白 rgb(255, 255, 255) にしてみる。下地の黒の影響を受けないことが判る。
確認環境：
Safari 5.0、Chrome 5.0.375.70、Firefox 3.6.3、Opera 10.53
また、大きさ・色・回転の速さを自由に変えられるようにしてあるので、場面に応じて使えると思う。背景はもちろん透明にした。
★html 側
<canvas id="loading"></canvas>
★Javascript 側
function draw() {
// id: loading を変数 e に代入
e = document.getElementById("loading");
// e で 2 次元描画を行うことの定義を変数 c に代入
c = e.getContext('2d');
// 透明度を入れる配列を変数 alphas に定義
alphas = new Array();
// 大きさ（Canvas のサイズ）を指定
len = 30;
// 色を rgb 形式で指定
color = "rgb(0, 102, 255)";
// Canvas のサイズを変更
setCanvasSize();
// 速さをミリ秒で指定
loadingTimer = setInterval(drawLoadingImage, 50);
}
// サイズを変えないとデフォルトの Canvas サイズが残り、たまに厄介なことになるので変更
function setCanvasSize() {
e.width = len;
e.height = len;
// サイズの半分を変数 r に代入
r = len / 2;
// 1 つの形の大きさを定義
w = Math.round(len * 0.1);
h = Math.round(len * 0.25);
// rgb 形式で入力された色を、透明度の手前でぶった切り、変数 colorRGB へ代入
var n = color.indexOf(")");
colorRGB = "rgba(" + color.substr(4, (n - 4));
// rotate(); の性質上、x:0、y:0 で回転させた方が良いので、
// x:0、y:0 で描画させるものを Canvas の中央へ setTransform(); で移動
c.setTransform(1, 0, 0, 1, r, r);
}
function drawLoadingImage() {
// 描画されているものを clearRect(); で消去
c.clearRect(-r, -r, (r * 2), (r * 2));
for (var i = 0; i < 12; i++) {
// alphas の値が揃っていなければ（最初の描画時）、alphas に透明度を追加
if (alphas.length < 12) alphas.push(i / 12);
// colorRGB の後ろに透明度を付けて透明度付きの色を定義
thisColor = colorRGB + "," + alphas[i] + ")";
// fillStyle で色を指定
c.fillStyle = thisColor;
// strokeStyle で枠線に transparent を指定し無効化
c.strokeStyle = "transparent";
// 描画開始
c.beginPath();
// 上記の形を lineTo(); と quadraticCurveTo(); と closePath(); で描画
c.moveTo((0 - w / 4), (r - h));
c.quadraticCurveTo(0, (r - h - w / 2), (0 + w / 4), (r - h));
c.lineTo((0 + w / 2), (r - w / 3));
c.quadraticCurveTo(0, (r + w / 3), (0 - w / 2), (r - w / 3));
c.closePath();
// fill(); と stroke(); で色付け
c.fill();
c.stroke();
// 次のために rotate(); で 30° 回転させておく
c.rotate(30 * Math.PI / 180);
}
// alphas の最後の要素を取得し、削除し、先頭へ追加
alphas.splice(0, 0, alphas[11]).pop();
}
// 描画を止める処理
function stopLoading() {
clearInterval(loadingTimer);
}
// id: loading を変数 e に代入
e = document.getElementById("loading");
// e で 2 次元描画を行うことの定義を変数 c に代入
c = e.getContext('2d');
// 透明度を入れる配列を変数 alphas に定義
alphas = new Array();
// 大きさ（Canvas のサイズ）を指定
len = 30;
// 色を rgb 形式で指定
color = "rgb(0, 102, 255)";
// Canvas のサイズを変更
setCanvasSize();
// 速さをミリ秒で指定
loadingTimer = setInterval(drawLoadingImage, 50);
}
// サイズを変えないとデフォルトの Canvas サイズが残り、たまに厄介なことになるので変更
function setCanvasSize() {
e.width = len;
e.height = len;
// サイズの半分を変数 r に代入
r = len / 2;
// 1 つの形の大きさを定義
w = Math.round(len * 0.1);
h = Math.round(len * 0.25);
// rgb 形式で入力された色を、透明度の手前でぶった切り、変数 colorRGB へ代入
var n = color.indexOf(")");
colorRGB = "rgba(" + color.substr(4, (n - 4));
// rotate(); の性質上、x:0、y:0 で回転させた方が良いので、
// x:0、y:0 で描画させるものを Canvas の中央へ setTransform(); で移動
c.setTransform(1, 0, 0, 1, r, r);
}
function drawLoadingImage() {
// 描画されているものを clearRect(); で消去
c.clearRect(-r, -r, (r * 2), (r * 2));
for (var i = 0; i < 12; i++) {
// alphas の値が揃っていなければ（最初の描画時）、alphas に透明度を追加
if (alphas.length < 12) alphas.push(i / 12);
// colorRGB の後ろに透明度を付けて透明度付きの色を定義
thisColor = colorRGB + "," + alphas[i] + ")";
// fillStyle で色を指定
c.fillStyle = thisColor;
// strokeStyle で枠線に transparent を指定し無効化
c.strokeStyle = "transparent";
// 描画開始
c.beginPath();
// 上記の形を lineTo(); と quadraticCurveTo(); と closePath(); で描画
c.moveTo((0 - w / 4), (r - h));
c.quadraticCurveTo(0, (r - h - w / 2), (0 + w / 4), (r - h));
c.lineTo((0 + w / 2), (r - w / 3));
c.quadraticCurveTo(0, (r + w / 3), (0 - w / 2), (r - w / 3));
c.closePath();
// fill(); と stroke(); で色付け
c.fill();
c.stroke();
// 次のために rotate(); で 30° 回転させておく
c.rotate(30 * Math.PI / 180);
}
// alphas の最後の要素を取得し、削除し、先頭へ追加
alphas.splice(0, 0, alphas[11]).pop();
}
// 描画を止める処理
function stopLoading() {
clearInterval(loadingTimer);
}
すると、こうなる。
次に大きさを 100 にしてみる。
len = 100;
次は色をグレー rgb(150, 150, 150) にしてみる。
color = "rgb(150, 150, 150)";
今度は回転の速さを 100 ミリ秒にしてみる。
loadingTimer = setInterval(drawLoadingImage, 100);
最後に、背景を黒くした上で、色を白 rgb(255, 255, 255) にしてみる。下地の黒の影響を受けないことが判る。
color = "rgb(255, 255, 255)";
確認環境：
Safari 5.0、Chrome 5.0.375.70、Firefox 3.6.3、Opera 10.53
同じアジアだから朝鮮なぞを応援しろ？
NHK のワールドカップの実況がモロ朝鮮寄り。全く意味が判らない。南朝鮮なぞ応援する日本人などいるのだろうか。メディアに洗脳されたオバハンくらいだろう。大抵の人は朝鮮なぞどうでもいいのである。気持ち悪いほど朝鮮に寄っている。対戦相手のことなどオマケ程度にしか言わない。主役は朝鮮。こんなスタンス。こんな局が我々の血税で飯を喰っているなぞ、本当に嫌気が差す。どの国の国営放送局なのか。こうなったらキチンと「KHK」と改名してほしい。日本のフリして敵国サイドにあるなぞ、糞フトバンク同様、追放すべきだ。
そして、「同じアジアだから応援して当たり前」とか脳漿が垂れ流れているようなことを言う者がいる。なら訊くが、アルゼンチンに「同じ南米だからブラジルを応援しろ」とか、フランスに「同じ欧州だからイングランドを応援しろ」とか、イランに「同じ中東だからイラクを応援しろ」とか、そんなん筋が通ると思うか。もし実際に言ったとしても「お前、頭オカシイのか」と言われ、それ以降は普通に接してもらえないくらいの緊迫感が漂うと思う。
日本人は日本人であるべきで、日本を愛して当然。友好国でもない国の肩を持つ義理は一切ない。一切ない。
そして、「同じアジアだから応援して当たり前」とか脳漿が垂れ流れているようなことを言う者がいる。なら訊くが、アルゼンチンに「同じ南米だからブラジルを応援しろ」とか、フランスに「同じ欧州だからイングランドを応援しろ」とか、イランに「同じ中東だからイラクを応援しろ」とか、そんなん筋が通ると思うか。もし実際に言ったとしても「お前、頭オカシイのか」と言われ、それ以降は普通に接してもらえないくらいの緊迫感が漂うと思う。
日本人は日本人であるべきで、日本を愛して当然。友好国でもない国の肩を持つ義理は一切ない。一切ない。
6/25/2010
日本代表、決勝トーナメント進出
当初は 2 勝してグループステージ突破など、思ってもみなかった。本当に嬉しい。
なによりも、今まで国際大会の大きな舞台に何故か運がなかった遠藤が、とりあえず 3 試合に出られたのと、1 点叩き込んだことが嬉しかった。悔しかった前回のワールドカップとオリンピックを考えると、本当に感動した。遠藤があれだけ喜ぶのも、よく判る。そして、遠藤は自分でも「ヘディングは苦手」と公言しているように、ヘディングシュートはほんの数回しか見たことはないし、昨日のように飛び込んでまでヘディングシュートなど、見たことがなかった。それだけ遠藤の心が躍っていたということではないだろうか。
しかし本田のフリーキックも見事だった。あの弾道を見たとき「これは入るかもしれない」と頭をよぎった。他の試合で欧州勢は直接フリーキックを決められていないのに、本当に素晴らしい 2 発だった。岡崎の 3 点目も本田によるごっつぁんゴールだったが、岡崎にラストパスを送るまでの本田の切り返しとノールックパスには身震いをした。あの大舞台で、あの時間帯で、あれだけ冷静にプレイできるのだから、もう凄まじいとしか言いようがない。
松井が試みた前半のシュートが実は大きかったのではないかと思う。実にトリッキーなシュートだったが、あれでチームとしての攻撃魂に火が点いたかもしれない。このシュートだけではなくフリーランニングやドリブルなど彼の得意とするものが良く出ていたと思う。持久力をもっとつけると、さらに欠かせない選手になると思う。途中交替が多いからなぁ。
大久保もここ最近は非常に攻撃的だし、J リーグのときよりもフェアプレイをしているので、彼の左サイドとしての役割は固定されたんではないだろうか。長谷部のボランチも大きいし、ドイツでの経験が彼のキャプテンという役割にとてもプラスに働いていると思う。長友もよく走ったしよくシュートを撃ったし、とても良かったが、どうもドリブルで中へ入って行ってシュートコースを探して撃つという一連の動きにはどうもひっかかる。それはそれでいいのだが、毎回同じような感じになっているので、そのシュートを撃つと見せかけて、フリーでいる味方へのパスを選択すれば、相手は翻弄され、得点に繋がるかもしれない。右の駒野も安定しているし、攻め上がりもするし、とても良かった。岡田はそろそろ教え子であるという感情的な理由だけで今野を使うのを辞めた方がいいと思う。守備固めなら岩政の方が断然いいのに。あの時間帯なら上がることも要求してなかっただろうし。今野がワールドカップに呼ばれ、使われているのが全く理解できないが、デンマーク戦ではその今野が機能してなかったのが良かった。
そして、直前の壮行試合でもぎ取った正 GK の川島の非常にアツいプレイも冴えていた。PK でのシュートをキャッチこそできなかったが、完全に読み通りの位置だったし、彼に救われた場面は数知れない。中澤も日本の壁として素晴らしい働きをしているし、田中だって無駄な攻め上がりもせずに同じく壁となって防いでいる。自分のゴールへシュートもしていないので、あのクセは一体なんだったんだろうか。さらに阿部が今回、とてつもなくいい働きをしている。彼がいるのといないのでは、日本の守備の安定度が全く違う。
いや本当に素晴らしい。
さて、フランスは「今大会の Les bleus（レ・ブルー）は Japon だ」と言ったりしないだろうか。
なによりも、今まで国際大会の大きな舞台に何故か運がなかった遠藤が、とりあえず 3 試合に出られたのと、1 点叩き込んだことが嬉しかった。悔しかった前回のワールドカップとオリンピックを考えると、本当に感動した。遠藤があれだけ喜ぶのも、よく判る。そして、遠藤は自分でも「ヘディングは苦手」と公言しているように、ヘディングシュートはほんの数回しか見たことはないし、昨日のように飛び込んでまでヘディングシュートなど、見たことがなかった。それだけ遠藤の心が躍っていたということではないだろうか。
しかし本田のフリーキックも見事だった。あの弾道を見たとき「これは入るかもしれない」と頭をよぎった。他の試合で欧州勢は直接フリーキックを決められていないのに、本当に素晴らしい 2 発だった。岡崎の 3 点目も本田によるごっつぁんゴールだったが、岡崎にラストパスを送るまでの本田の切り返しとノールックパスには身震いをした。あの大舞台で、あの時間帯で、あれだけ冷静にプレイできるのだから、もう凄まじいとしか言いようがない。
松井が試みた前半のシュートが実は大きかったのではないかと思う。実にトリッキーなシュートだったが、あれでチームとしての攻撃魂に火が点いたかもしれない。このシュートだけではなくフリーランニングやドリブルなど彼の得意とするものが良く出ていたと思う。持久力をもっとつけると、さらに欠かせない選手になると思う。途中交替が多いからなぁ。
大久保もここ最近は非常に攻撃的だし、J リーグのときよりもフェアプレイをしているので、彼の左サイドとしての役割は固定されたんではないだろうか。長谷部のボランチも大きいし、ドイツでの経験が彼のキャプテンという役割にとてもプラスに働いていると思う。長友もよく走ったしよくシュートを撃ったし、とても良かったが、どうもドリブルで中へ入って行ってシュートコースを探して撃つという一連の動きにはどうもひっかかる。それはそれでいいのだが、毎回同じような感じになっているので、そのシュートを撃つと見せかけて、フリーでいる味方へのパスを選択すれば、相手は翻弄され、得点に繋がるかもしれない。右の駒野も安定しているし、攻め上がりもするし、とても良かった。岡田はそろそろ教え子であるという感情的な理由だけで今野を使うのを辞めた方がいいと思う。守備固めなら岩政の方が断然いいのに。あの時間帯なら上がることも要求してなかっただろうし。今野がワールドカップに呼ばれ、使われているのが全く理解できないが、デンマーク戦ではその今野が機能してなかったのが良かった。
そして、直前の壮行試合でもぎ取った正 GK の川島の非常にアツいプレイも冴えていた。PK でのシュートをキャッチこそできなかったが、完全に読み通りの位置だったし、彼に救われた場面は数知れない。中澤も日本の壁として素晴らしい働きをしているし、田中だって無駄な攻め上がりもせずに同じく壁となって防いでいる。自分のゴールへシュートもしていないので、あのクセは一体なんだったんだろうか。さらに阿部が今回、とてつもなくいい働きをしている。彼がいるのといないのでは、日本の守備の安定度が全く違う。
いや本当に素晴らしい。
さて、フランスは「今大会の Les bleus（レ・ブルー）は Japon だ」と言ったりしないだろうか。
6/23/2010
Time Machine を初めて使った
今日、写真のサイズを弄んでいたら、縮小したサイズで誤って上書きしてしまった。これはクライアントからの写真であり、同じ写真は他になかった。う〜ん・・・と少し焦ったが、Time Machine が有効であることを思い出した。
Time Machine を起動すると、Finder が表示された。その Finder の向こう側に 1 時間前の Finder が見えている。上書きしちゃったのはついさっき。なので、その 1 時間前の Finder をクリックし、該当の写真の情報を見ると、サイズ変更前だった。機能を考えると当然だが、ホッとした。無事復元し、元に戻った。Time Machine 様様だ。
これは便利だ。やっておいて良かった。
Time Machine を起動すると、Finder が表示された。その Finder の向こう側に 1 時間前の Finder が見えている。上書きしちゃったのはついさっき。なので、その 1 時間前の Finder をクリックし、該当の写真の情報を見ると、サイズ変更前だった。機能を考えると当然だが、ホッとした。無事復元し、元に戻った。Time Machine 様様だ。
これは便利だ。やっておいて良かった。
写真をまとめて拡大・縮小したい場合
カメラからコンピュータに移した写真達、サイズが非常に大きくてウェブページやらブログやらに掲載できない場合がある。例えば今日、とあるウェブページを制作していたが、そこにクライアントが催しで映した写真を掲載しようとした。しかしサイズがデカくてどうにもならない。いちいち Photoshop を立ち上げて、自動処理させるのは、少しめんどくさい。そこで、「プレビュー」の出番。
普通に画像のサイズ変更でも使えるが、カメラで撮った写真は撮影するときにサイズを変えていなければ、サイズが一定なので、このようなやり方で一気に変更できる。もちろん、縦型と横型の写真があると思うけど、その場合は、縦型なら縦型だけを Finder で選んで処理し、もう一度横型だけを処理するようにしても、時間はほとんどかからずに済む。
OS X の進化でかなり便利になった。Windows ではできない、Mac ならではの実にスマートなやり方。
実行環境：
Mac OS 10.6.4、プレビュー 5.0.2
- Finder で縮小したい写真を選択していく。すると選んだ複数の写真ファイルがハイライトされた状態になる。
- 右クリックをして「このアプリケーションで開く」から「プレビュー」を選ぶ。もし「プレビュー」が Dock にある状態なら、選択したファイルをその「プレビュー」アイコンにドラッグする。
- 「プレビュー」の右側に写真の一覧が上下にリストされているので、そのリストのどこかをクリックした上で、Command と A キーを同時に押すか、「編集」から「全てを選択」を選ぶ。右側にリストがない場合は、「表示」から「サイドバー」、「サイドバーを表示」を選ぶと、リストが表示される。
- ファイルが全て選択された状態で、「ツール」から「サイズを調整」を選び、好みのサイズを入力し、「OK」を押す。もし写真の元々のサイズが違う場合は、「幅」や「高さ」に「複数の値」と表示される。
- さて、サイズが変わったので、「ファイル」から「すべてを保存」を選び、保存する。これで全ての写真のサイズが変更された。
普通に画像のサイズ変更でも使えるが、カメラで撮った写真は撮影するときにサイズを変えていなければ、サイズが一定なので、このようなやり方で一気に変更できる。もちろん、縦型と横型の写真があると思うけど、その場合は、縦型なら縦型だけを Finder で選んで処理し、もう一度横型だけを処理するようにしても、時間はほとんどかからずに済む。
OS X の進化でかなり便利になった。Windows ではできない、Mac ならではの実にスマートなやり方。
実行環境：
Mac OS 10.6.4、プレビュー 5.0.2
Subscribe to:
Posts (Atom)