asahi.comでSilverlight動画配信開始

Posted on 2008-02-28 by seckie

同僚に教えられて、素直にスゲー！と思ったのでご紹介させていただきます。

本々asahi.comは動画配信自体はやっていたみたいです。Silverlight導入以前と導入後の動画を、スクリーンショットで比較してみました。

Before:
After:

って、アレッ！？自宅の環境にはプラグインが入っていなかったのか・・・。

では、プラグインを導入して・・・
まず必ずご確認ください、と書いてある「ライセンス条項」を開いてみます。

ソフトウェアのインストールにこういうものは付きものですが、なんのこっちゃわからない素人が導入するにはやはり敷居が高く感じます。「必ず読め」と書いてあるわけですからね・・・（確かに読まないといけませんが）。
「同意してインストール」ボタンを押すと、「Silverlight.exe」ファイルのダウンロードが開始されます。そしてこれを実行して、初めてインストール処理が開始されます（少なくとも私の自宅のWindowsXP環境ではそうでした）。ダウンロードされたら自動実行するくらいの方が、親切なのではないかと私は思いますが、その辺はどうなんでしょう。

そんなこんなでインストールが完了し、ブラウザを再起動します。
そして動画をいざ閲覧。こんな風になっていました。

画質が格段に上がっているのが分かります。そしてフルスクリーンモードがすごい。Webサイト見てることを忘れるかも。気になる方は、実際にasahi.comでご体験ください。

Silverlightは良いものだということが改めて分かりました。asahi.comのようなサイトが導入に踏み切ったことによって、一般層のユーザーにもプラグインの導入が進むと良いですね・・・。

IE7への自動更新が開始されました

Posted on 2008-02-13 by seckie

Windows XPにWindows UpdateでIE7が自動インストールされるようになりました。
そういえば、今日からでした。IE6の記事なんて書いている場合じゃありません。

参考リンク：
Windows Internet Explorer 7: 自動更新インストールのお知らせ

↑「Internet Explorer 7 自動更新画面ツルっとまるわかりコーナー」が分かりやすくて良い感じです。

[IE6]ブロック要素を中央寄せにするために、text-alignを使う件

Posted on 2008-02-13 by seckie

ブロック要素を中央寄せにレイアウトする場合、左右marginをautoに設定するのが正しいCSSの書き方ですが、IE6の過去互換モードではこれが正しく動作しないのは有名です。

スクリーンショット：text-align:centerを使わずに中央寄せしようとすると

そこで、IEのために親ボックスにtext-align:centerを適用し、中央寄せにするというバッドノウハウと呼べなくもないテクニックが当たり前のように使われています。

text-alignプロパティは継承されますから、親ボックスにtext-align:centerを設定した場合、子孫ボックスではtext-align:leftと改めて設定して値を上書きすることがほとんどです。このtext-alignの上書きが面倒なのはもちろんですが、意図しない子孫要素にまで影響が及んでしまうので、できるならこのテクニックは使いたくないなー、というのが私の考えです。そこで、text-align:centerを使わずになんとかしようというアイデアをご紹介します。

親ボックスが div#wrapper で幅400px、中央寄せにしたい子ボックスが div#content で幅300pxという例でコードを考えていきます。次のコードは、text-align:centerを使った一般的なものです。

div#wrapper {
width: 400px;
text-align: center;
}
div#content {
width: 300px;
margin: 0 auto;
text-align: left;
}

これを以下のようにすることで、text-align:centerを使わずに、同じ表現をすることができます。

div#wrapper {
width: 400px;
}
div#content {
width: 300px;
margin: 0 auto 0 50px;
}

実際に中央寄せにした場合に左右に空くmarginを計算し、子ボックスの左marginに設定してやり、右marginはautoにします。これで、text-align:leftのまま、主要なブラウザ全てで中央寄せを実現できます。
このコードをIE6の互換モードで表示したのが、次のスクリーンショットです。（実際は見やすくするためにbackground-colorやpaddingも併用しています）

スクリーンショット：text-align:centerを使わずに中央寄せ

ただし、弱点もあります。親ボックスが幅固定のレイアウトに限って有効なテクニックなので、リキッドレイアウトやエラスティックレイアウトでは使えないのはもちろん、body要素が直接含むボックスには使えない（body要素はウィンドウサイズによって幅が変わるため）という点です。
幅固定レイアウトでは絶大な（？）威力を発揮します。

ちょっとしたCSSのアイデアなのですが、あまり使ってる人見かけないな?と思ったのでご紹介しようと思いました。

JavaScriptのオブジェクトシステムについての、現時点での私の理解

Posted on 2008-02-06 by seckie

JavaScriptでは全てのデータをオブジェクトで表現できる

通常はリテラル（スクリプト文中に直接データを書き込んだもの）で表現するデータを、JavaScriptではオブジェクトとしても表現できるようになっています。（厳密にはリテラルで書いたデータとオブジェクトで書いたデータは異なるものですが、その説明は省略）

リテラルで表現した場合と、オブジェクトとして表現した場合の比較
	リテラルで表現した場合	オブジェクトとして表現した場合
数値	`100`	`new Number(100)`
文字列	`"fuga"`	`new String("fuga")`
真偽値	`true`	`new Boolean(true)`
配列	`["foo","bar"]`	`new Array("foo","bar")`
正規表現	`/fuga/`	`new RegExp("fuga")`
オブジェクト	`{}`	`new Object()`
関数	`function(foo) {alert(foo)}`	`new Function("foo","alert(foo)")`

プロパティについて

オブジェクトはその内部にプロパティを持つことができます。オブジェクト名とプロパティ名をドットで繋げることプロパティを呼び出せます。
例えば Array オブジェクトは length というプロパティを持ち、オブジェクト名.lengthとすることで、この配列オブジェクトの持つ要素の数を取り出すことができます。

var hoge = new Array("foo","bar");
alert(hoge.length) // 2 が表示される

length のようなものは Array オブジェクトに最初から組み込まれているプロパティなので、特に自分で定義しなくてもいきなり使うことができます。もちろん自分でプロパティを作ることもできます。

プロパティを作るには、作成したオブジェクトに .（ドット）を付けてプロパティを定義します。

var hoge = {};
hoge.x = 100;
alert(hoge.x); // 100 が表示される

もしくは、オブジェクトを作成する際にオブジェクトリテラル形式で定義します。

var fuga = {x: 100, y: 50}
alert(fuga.x + fuga.y); // 150 が表示される

コンストラクタとインスタンス

「オブジェクトで表現した」場合、new XXX()という文になりますがこれはXXX()というコンストラクタから新たなオブジェクトを作る、という意味となります。コンストラクタとは新たなオブジェクトを作る雛形のようなものであり、コンストラクタから作られたオブジェクトをインスタンスと呼びます。

JavaScriptでは関数をコンストラクタとして使うことができます。関数を定義する際、this.XXXという書き方でプロパティを定義しておくと、そのプロパティはインスタンスにも引き継がれます。

// hoge()コンストラクタを作成
// hoge()のプロパティとして x=100 を定義
function hoge() {this.x = 100;}
// hoge()コンストラクタからfugaオブジェクトを作る
// fugaオブジェクトはhoge()コンストラクタのインスタンスとなる
var fuga = new hoge()
// hoge()コンストラクタから x=100 プロパティが
// 継承されているので 100 が表示される
alert(fuga.x)

今回はこの辺までで。
prototypeチェーンについてはまだ勉強中・・・。

Continue reading →