Andy Mckeeは、もうすでにウィキペディアでも紹介されているほどのアーティストなのですが、2年ほど前からYouTubeやDiggなどネット発でその奏法と才能が話題になりブレークにつながったアーティストです。

彼の真骨頂はこのDriftingという曲でうかがい知ることができます。注目すべきはその一人三役的な奏法。両手でギターをパーカッションとして使っているばかりか、左手を逆手でベースラインにあてながら右手でメロディラインを弾いています。上述の『Africa』の700万回超もすごいのですが、このビデオはYouTubeで既に1700万回以上も再生されています。

こちらは同じ曲のライブでのビデオです。その昔（スキンヘッド以前）のビデオと比較してみると格段に技術を向上させ自信のみなぎった演奏になっているのがよく分かります。

こうした奏法の起源はハープギターを手に入れたことによるのかな？と下のビデオを見ていてふと思いました。おそらくこの曲はMichael Hedgesへのトリビュートだと思います（参考：Michael Hedges – Because It’s There）。The Friend I never met [ 会うことのなかった友 ]とは、1997年に事故死したマイケル・ヘッジズを指しているのでしょう。彼のプレイスタイルに相当な影響を与えたことをうかがい知れます。

彼の作品は以下のページで購入することができます。インディーズのアーティストが目詰まりしたフィルター（既存のマーケット）を介さずに大きなムーブメントを引き起こせたということは注目すべきことでしょうね。彼の今後の活躍もさることながら、また新たな才能がネットで発掘されて人々の琴線から琴線へと伝播することを強く望みます。

• http://www.andymckee.com/releases/
• http://www.candyrat.com/artists/andymckee/

Acid2とは、ブラウザがW3CのHTML4、CSS1、PNGなどの標準に対しどれほど準拠しているかをチェックすることができるテストです（※CSSについては現行CSS2.1に後継されています）。

下のリンク先ページで即ブラウザのテスト結果が分かります。ブラウザがテストの提示するソースコードの標準に準拠していれば、下のスクリーンショットのようなスマイリー君がレンダリングされます。ソースコードに対して間違った解釈をするとスマイリー君の顔は崩れ、ひどい場合には、赤色に表示される背景の中に顔のパーツが浮いていたりスクロールバーが現れたりと不気味な世界を演出してくれます。

Acid2でブラウザをテスト！

このスマイリー君がどのようなソースから構築されているのかはAcid2: The Guided Tourにて確認できます。Acidと名付けられている通り、重箱の隅をつついたような辛辣な項目が随所に見受けられます。

Acid3とは、Acid2でテストしたHTMLやCSSに加えてDOMやECMAScript ― JavaScriptなどに関わる標準 ― およびSVGのうちアニメーション機能などをテスト項目としているブラウザのベンチマーク的なテストです。XMLおよびスクリプトによる動的な振る舞いをも念頭に入れたところが主なポイントです(草稿段階のHTML5やCSS3などの一部も取り上げられています)。

Acid2同様、下のリンク先ページで即ブラウザのテスト結果が分かります。ブラウザがテストの提示するソースコードの標準に準拠していれば、下のスクリーンショットのようにレンダリングされます。100点を満点とした点数が表示されることとカラーリングされるはずの各ボックスに結果の程度が現れます。

Acid3でブラウザをテスト！（別窓表示してください）

以上に上げたテストのブラウザごとの結果はSOURCEFORGE.JPさんで紹介されています。その結果から必然的に導き出される問題も端的にまとめられているので、ここにそのまま引用させていただきました。まだ特集として連載されるのでウェブサイトのデザインに係わっている方には有用な情報になるかと思われます。

第1回　最新Webブラウザ、Web標準への対応度は？ /
最新Webブラウザに向けたWebサイト開発テクニック /

さて、これらの結果から、他のWebブラウザと比べIEは標準規格への対応が遅れている、ということが分かると思うが、このことはどのような問題となるだろうか。まず考えられるのが、「標準規格で用意されているリッチな機能がIEで非対応のため、利用できない」ということが挙げられる。たとえばCSS 2.1では、指定したテキストの前後に画像などの要素を表示する機能が備えられているが、これはIE 6では対応していない。そのため、Webサイトを構築する際に、IEを考慮してIE向けの特別な対処が必要となることも多い。IEは大きなシェアを持つため、無視できないのが現状だ。さらに、未だに標準への準拠度の低いIE 6を利用しているユーザーが多いのも頭を抱える1つの要因となる。

(c)SOURCEFORGE.JP

問題はやはりIEです。後発のGoogle Chromeがほぼ難なく発進していることと比較すれば、もはや対応が遅れているというより対応に無関心であると言わざるを得ないでしょう。いまだにIE6ユーザーが多い（バージョンアップをしっかり促していない)ということがそのことを如実に証明しています。

今『IE用に別のスタイルシートを用意する』といった意見がまことしやかに語られています。しかしながら、ただ他のブラウザと分離すればいいというわけではなく、IEの場合、各バージョン毎に違った指示を与えなければいけないといった問題があります（IE5に関していえばさらにMac用とWin用とで振る舞いが違うケースがある）。

IE8がCSS2.1で全く問題がなければこうした無駄も少なくて済むはずなのですが、まだまだ疑わしいところがありそうです。個人で楽しむだけのレベルならば放置しても問題がないでしょうが、クライアントを抱えたウェブサイトの制作者となると、ブラウザ側の問題を制作者側の問題に転嫁される蓋然性も高いことと思われます。

否、もはやこれらは問題ではなく既成事実として捉えている（こんなの慣れっこ）といったところなのかな？

jQuery系のJavaScriptを選んだのは、

などから、どうもIEではjQuery系のJavaScriptを使う場合はjQuery系一本でいかないと具合が悪いのではないかと思われたからです。実際、jQuery系一本にしてみたところ挙動不審が収まったので全くの的外れではないように思われます。

jQueryが悪いのか、それともIEが悪いのか？私は専門家ではないので分かりませんが、FirefoxをはじめとしたSafari、Operaなどのモダンブラウザや新鋭Google Chromeなどでは問題なくページ表示されていたので、やはりIEのスクリプトに対する融通性が悪いのだと思われます。

jQuery idTabsでは色々なヴァリエーションのタブメニューが紹介されています。そのうちの一つ、タブがスクエアでページ部がフェードインするタイプのものをここで取り上げます。

jQuery idTabsのサンプル

HEADセクション内

jquery.idTabs.jsのダウンロードページ：
http://www.sunsean.com/idTabs/#t3
jquery.jsのダウンロードページ：
http://docs.jquery.com/Downloading_jQuery

<script type="text/javascript" src="jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="jquery.idTabs.min.js"></script>

BODYセクション内

<div id="squaretab" class="pack">
  <ul>
    <li><a href="#b-1" class="selected">1</a></li>
    <li><a href="#b-2">2</a></li>
    <li><a href="#b-3">3</a></li>
    <li><a href="#b-4">4</a></li>
  </ul>
  <div>
    <p id="b-1">コンテンツ1</p>
    <p id="b-2">コンテンツ2</p>
    <p id="b-3">コンテンツ3</p>
    <p id="b-4">コンテンツ4</p>
  </div>
</div> 

<script type="text/javascript">
  $("#squaretab").idTabs(function(id,list,set){
    $("a",set).removeClass("selected")
    .filter("[@href='"+id+"']",set).addClass("selected");
    for(i in list)
      $(list[i]).hide();
    $(id).fadeIn();
    return false;
  });
</script>

※起動部分のスクリプトの置き場所はメニューの直下がベターだと思います。

サンプルは以下の通りに設定しています。

#squaretab {
        width: 460px;
}

#squaretab ul {
        float: left;
        display: block;
        width: 60px;
        height: 60px;
        overflow: hidden;
        list-style: none;
        background: #3399cc;
}

#squaretab ul li {
        float: left;
}

#squaretab ul li a {
        display: block;
        width: 30px;
        height: 30px;
        color: #ffffff;
        text-align: center;
        line-height: 2.2;
        text-decoration: none;
}

#squaretab ul li a:hover {
        color: #336699;
        background: #ffffff;
}

#squaretab ul li a.selected {
        color: #ffffff;
        background: #336699;
}

#squaretab div {
        float: right;
        width: 400px;
        height: 60px;
        color: #ffffff;
        background: #3399cc;
}

#squaretab p {
        padding: 10px 35px;
}

.pack:after {
        content: ".";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
}

/* Hides from IE-mac \*/
* html .pack {
        height: 1%;
}
/* End hide from IE-mac */

*:first-child+html .pack {
        min-height: 1px;
}

10月に入ってGoogleの広告の記事を立て続けに目にしています。イメージ検索に広告挿入テストの件、YouTubeへの購入リンクの件、ゲーム向け広告「AdSense for Games」そしてGoogle Mapsの件。

おりしも金融恐慌の話題に世間の目が向いていたこの時期。まるで小賢しい批判を交すために、この時期を狙い広告表示を既成事実化したかのようにも感じられます。

しかしながら、主たるターゲットにGoogle Androidユーザー層を想定しているとするならば、こうした広告事業の積極的な開拓展開はGoogle Android普及に沿った織り込み済みの流れであると思われます。

サイトをターゲットにした場合の広告リンクからのビジターの動きですら、そうでない場合のビジターの動きと明らかに違います。それゆえ、キーワードに地域が加わる場合の広告によるコンバーション率は相当高いものなのでしょう。おまけに地図を利用しているとなると、まさにそのユーザーの検索対象は具体的なアクションの一歩手前の状態であると容易に想像できます。

広告が具体的な収益に結びつくことはGoogleの顧客にとっては望ましいことであり、その露出度が高まることはGoogleがボランティア団体でないことの証です。ただし、Google Androidとの絡みを考慮すると、狭いディスプレイ上での広告のロケに限界があります。そうかといって顧客満足度を無視するわけにはいかないので、今回のケースでは、地図の下部にテキスト広告を表示させざるを得なかったと見るべきなのかもしれません。

• Google Maps
• Google
• SEM

下のサンプルはロイターのジャンルごとのニュース更新情報を表示しています。ニュースに限らず、サイトをCMSとして利用する場合など、ユーザー情報の表示（おそらくできると思うのですが・・・）に便利なスクリプトだと思われます。

ページのヘッドセクションに挿入するコードは3つです。そのうちの一つはGoogleのAJAX Feed APIを利用します。GoogleのAJAX Feed APIを利用するためにはGoogleのAPI keyが必要です（API keyはドメイン毎に取得しなければいけません）。API keyを含んだURIにてAJAX Feed APIを呼び出すことになります。

残りの二つのJavaScriptであるgfeedfetcher.jsとgajaxscroller.jsはgAjax RSS Pausing ScrollerのStep2にてindicator.gifとともにダウンロードできるようになっています。尚、著作権表示を要求されているので注意が必要です。

下のスクリプトコードをHTML上の表示したい場所に記述します。コード内の1行目でidとclassを指定することによりCSSでのスタイリングが可能となります。

<script type="text/javascript">

var newsfeed=new gfeedpausescroller("rss-roll-4", "rss-roll-4class", 8000, "_new")
newsfeed.addFeed("テクノロジー", "http://feeds.reuters.com/reuters/JPTechnologyNews")
newsfeed.addFeed("マーケット", "http://feeds.reuters.com/reuters/JPMarketNews")
newsfeed.addFeed("ビジネス", "http://feeds.reuters.com/reuters/JPBusinessNews")
newsfeed.displayoptions("datetime snippet")
newsfeed.setentrycontainer("p")
newsfeed.filterfeed( 15, "label")
newsfeed.entries_per_page(3)
newsfeed.init() 

</script>

上記のスクリプト中の赤字の部分が設定値になります。パラメーターの設定内容は以下の通りです。

大袈裟にマーカーを大きくしておきました。中央に配置したつもりなのですが、Safariで見るとちょっと右寄りに表示されています。

Phongという名で紹介されていますが、1972年に発表されたAtari社のpong（ポン）をもじったものだと思われます。非常にレトロなゲームなのですが、編集中にもかかわらずやりすぎてしまって随分と時間を浪費してしまいました（汗）コート上でクリックするとスタートします。かなりのレスポンスが必要なのでレトロなゲームであるからといってなかなか侮れません。ラケットはフレーム上でマウスを上下に動かすことによって操作します。

興味深いのは、ゲームの要素であるコートやラケットやボールがHTMLとCSSでできていることです（DHTMLだから当たり前なのですが）。<div>タグにIDを付けてposition:absolute;にしているところがなるほどと思わせます。これはマリオのHTMLゲーム版が実現する日も近いのかもしれません。以下は私がCSSのセレクタ上で色を変えてみたものです（プレーヤー側のラケットのサイズも5px伸ばしています）。

以下はレトロゲームを人によって表現されたものです。この出演者さんたちは最後のクレジットでPIXELS（ピクセル）と紹介されています。
www.notsonoisy.com

Tic Tac Toe（チックタックトゥー）とは、日本では「三目並べ」とか「OXゲーム」などと呼ばれているおなじみのゲームです。まずはプレーヤーが先行。マスのうちどれか一つをクリックするとゲームが始まります。スコア表の下のボックスでレベルを選択することができます。

Game Board

※ここでは<table>タグを使って3×3のマスを表現しています。Dynamic Driveさんで公開されているものをそのまま使うとHTMLがValidにならないので、CSSも用いて若干コードを修正しています。またスクリプトは切り離して別ファイル化し、WordPressのプラグインHeadSpace2を使ってこのポストの時だけ呼び出すように設定しています。

「コンピューターは決して負けません」とある通り、すでに不敗法が成立しているゲームです。プレイしているうちにその不敗法もお気づきになられると思います。ここでそれを明かしてはゲームがつまらなくなってしまいますので、どうしても知りたい方は下のリンクを踏んでみてください。

三目並べの不敗法/枯れたゲームの必勝法

先日、ロバート・デ・ニーロとメリル・ストリープ主演の映画『恋におちて（Falling in Love）』を観たのですが、その中でロバート・デ・ニーロ扮する主人公がゲーム・センターでこのTic Tac Toeをやっているシーンがありました。1984年作なので映画の中のゲーム機も当然古いのですが、電光でOXが表示されるまではまだ理解できるとしても、その対戦相手がコンピューターではなくニワトリだったことにはかなり驚かせられたものです。

• 

  Googleガジェット – Tic Tac Toe

• 

  アメリカの児童教育用サイトです。
  FunBrain.com – Tic Tac Toe Squares

• 

デジタル一眼レフカメラなんて今まで目もくれなかったはずの私の目を奪ったのがロイターのニュースでした。

注目の動画撮影は、オートフォーカス機能が付いていないので三脚を付けての撮影が推奨されています。けれども、本来のデジタル一眼レフカメラとしての機能も幅広いユーザー層を満足させるスペックを備えているので、あとは価格との相談、魅力的な製品であることに間違いはありません。個人的には、ちょっとしたPVを取り入れたホームページ制作に一台で二役買ってくれそうだな、などと空想を拡げてしまうところです。

D90が、写真にしろ動画にしろミクロからマクロ、はたまた魚眼イメージまで多彩な表現ができることを、Nikonのサイトで確認できます。特にボケ味を活かしたサンプルムービーは必見。

• NIKON | D90 | HOME　（D90の特別サイト－英語）
• NIKON | D90 | SAMPLE MOVIE
• D90 – デジタル一眼レフカメラ | ニコンイメージング（日本語）

ロイターに限らず特集を組んでいるサイトは数多いですね。特に熱心なのがヨーロッパのような気がします。こちらはどうやらオランダの一眼レフカメラ専門のサイトが制作した動画です。

逆にSoulを感じられないのが日本のメディア界や日本国内での反応。まあ、ネットでの商売は楽天とYahoo!に任せとけばいいってことでしょうけど、個々の製品の個性をダイナミックに感じられず何となく寂しい気がします。優秀な人はたくさんいるはずなんだけどな・・・。

YouTubeでも既にD90を使った動画を数多く見ることができます。こちらはU.S .NAVYのBlue Angelsチームの航空ショーをとらえた動画です。

こちらは日本の方の投稿。立体駐車場から降りるところを車内から撮影したシーンですが、D90の視線をクールに感じることができます。

このガジェットは、今のところテストバージョンなのですが、サイトへの訪問者がサーバーから404 HTTP ステータスエラー（ページが存在しない）を返された場合に、単なるエラーの報告にとどまらず代替的なサイト情報を付加してくれます。具体的には以下のような機能があります。

ウェブマスターツールでは、カスタムの404ページを用意してこのガジェットを組み込むことにより、404ページを返された訪問者が他サイトへ移動してしまうことを防ぐ可能性を示唆しています。Googleがこういったサービスを提供しているということは、よほど顕著なデータがあるということですね。

設定はとても簡単でAdSense広告などと同様、スクリプトのコードを404ページの任意の位置に貼り付けるだけです。スタイルシートの活用によりリンク色や各種サイズなどを変更することができます。

WordPressでは新たに404ページを用意しなくても、ループ内に<?php else: ?>を追加して条件と一致しない時のソースコードを書き込むだけで、サイトデザインと同様の404ページを作ることができます。このサイトの404ページは以下の画像のとおりです。ウェブマスターツールでは、さらに「最もポピュラーなページ」などのリンクをページ内に追加することを推奨しています。