キャプチャを使わずスパムコメントをブロック

Spam block imageブログにコメントを残そうとするとき、人間だと証明するために、読みにくい文字や数字のキャプチャを解読した経験は誰もがあると思います。下のリンクは、読むキャプチャではなく、音声のキャプチャです。各ボタンを押して、数列を聞き取ってみてください。


MP3 | OGG


MP3 | OGG


MP3 | OGG

難しいでしょう? このサンプルは、編集もダウンサンプリングもしていない実際に使用されているものです。

大部分の人が必要としてるようですが、私もWordPressブログ上でスパムをブロックする必要がありました。でも私はキャプチャは使用しないことにしました。スパムは、読者にとって問題ではありませんが、キャプチャを使用することで、読者に煩わしい思いをさせてしまいます。目の良い人でも読むのが大変なのに、視力が弱い人や目の見えない人にとっては、もっと厄介です (将来年をとって視力が弱くなるケースも含みます)。明らかに、別のもっと良い方法を考える必要があります。

質問回答式キャプチャ

「2+7=」とか「落葉の季節は?」といったものが質問回答式キャプチャです。このようなテキストの場合、スクリーンリーダーと呼ばれるソフトを使うことによって、目の見えない人でも音で聞くことができます。そういう意味では便利ですが、質問が読者の理解できる言語でなければならない点は不便です。私のブログは、英語と日本語ですので、不便です。複数の答が考えられる場合もあります。たとえば、落葉の季節は (英語なら) autumnともfallとも答えることができます。

CSSで隠すフォーム・フィールド

これは、なにも書き込みをしないフィールドを作る方法で、そこにはleave emptyとメッセージを入れたりします。スパムボットはどのフィールドにも自動的に書き込みを行いますが、人間は書き込まないことを利用したものです。CSSは、人間からフィールドが見えなくするために利用できますが、スクリーンリーダー利用者やユーザ・スタイルを適用した人 (または全く適用しない場合) には「見えて」います。この方法もしばらく試しましたが、実際にはあまり効果がありませんでした。スパムボットは、本当に賢いですね。

サードパーティのスパム・ブロッキング・サービス

Akismetが一番良く利用されていますが、他のサービスもあります。それは、リモートサーバにコメントを送り、そこでスパムか否かを分析、分類するものです。この方法は効果がありそうですが、登録が必要だったり、スパムをブロックする目的によっては有料だったと思います。また、プライベートなコメントを送る環境には向きません。

IPアドレス・ブラックリスト

自前でも、他人から入手したものでも、リストを利用して、スパムを送ることが明らかなIPアドレスからのスパムコメントをブロックするのは簡単です。でも私はこの方法が好きではありません。その理由は2つあります。

  • 例えばVPN接続などの場合、1つのIPアドレスを複数のユーザで共有していることもあるし、スパム発信者が、こっそりと接続したコンピュータからコメントを送ることもできます。この場合、無実の人を罰することになってしまいます。そんなことはしたくありません。
  • 私のブログのスパムコメントを見る限り、同一のIPアドレスから送られたものは一つとしてありません。だからこの方法で効果があるかどうか疑わしいのです。

答えは?

結果として、私はあるスパムボットの研究に出会い、ネッド・バチェルダー氏 (おそらく他数名と共に) による素晴らしいスパムのブロック方法にたどり着きました。スパムコメントのほとんどは、リモートサーバから迅速に送られるので、コメントのフォームに独自のトークン信号を加え、コメントが投稿された時にそのトークン信号があるかどうかをチェックすることが可能です。試したところ、約2/3のスパムはブロックできました。まだ改良の余地はありますが、最初の試みとしてはまずまずでしょう。何度も手直しや検証をした結果、コメントをさらに分析をすることで、残りのスパムもほとんど捉えられることが分かりました。たとえば、ページの読み込みと投稿の時間のズレや、コメント内のリンク比率、過去のコメントと内容が似ているコメントなどを分析するのです。ついに満足出来ました。私のブログの直近100個のスパムコメントのうち、98個はフィルターにて検出され、ブロックされました。完璧ではないし、時間とともに効果が薄れてしまうかもしれませんが、ほぼ満足でいい妥協点だと思います。なにより読者が喜んでくれるのが一番です。

私は、これをWordPress用スパム・ブロッキング・ブラグインとして組み立てました。そしてソースコードはここで見ることができます。ユーザからは見えず、サイト・オーナーにとってはメインテナンス・フリーです。お気に入りいただいた人は、ぜひWordPressのディレクトリに良いレビューを書いていただけるととてもうれしく思います。

W3Cのスタッフになりました!

W3Cのロゴ皆さんにご報告したいことがあります。お陰様で今日から、W3Cのスタッフになりました!

Opera Softwareでの素晴らしい4年間を過ごした後に何が最善の道か考えるのは難しかったですが、W3Cの一員としてオープンWebに貢献できること、日本に未だいられることが夢のようです。

慶應義塾大学湘南藤沢キャンパス慶應大学の湘南藤沢キャンパス(SFC)を拠点にしています。ここは東京からやや離れており、木々に囲まれたアヒルのいるのどかなところです。既に会ったり、話したりした日本、世界各地にいる新しい同僚はとても歓迎してくれましたので、すっかり馴染んでいます。

これから取り組む仕事は W3Cのミッションと発展に関連するデベロッパー、企業、メディアとのコミュニケーションを組み合わせるものとなります。それと、Webやテレビ、自動車、サイネージなど、デバイスに関連したグループと連携しながらの、よりフォーカスされた仕事もあります。

ここに至るまでに頂いた数々のご理解ご協力に感謝いたします。微力ながら全ての人のためのプラットフォームとしてのWebに尽力できればと思っております。

jQueryなしのTwitter Bootstrap

Twitter Bootstrap web page私はTwitter Bootstrapを使えば使うほど好きになっています。ただ何かを表示したり隠したりするような単純な操作にもjQueryが必要なのは残念です。jQueryは素晴らしいライブラリですが、サイトにとって利点がなければ無駄になり、Webページに不要なバイト数を増やすことになります。対策として、Bootstrap専用の代替的な軽量スクリプトを作ってみました。

ダウンロードはこちら

このスクリプトを使うには、以下のように、jQueryやBootstrapプラグインスクリプトの代わりに、Webページ上に(できれば下のところに)ただ置いておくだけです。

    ...
    <script src="bootstrap-without-jquery.min.js"></script>
  </body>
</html>

ページを読み込む時間が速くなるからパフォーマンスが改善されるというメリットがあります。当然ながらjQueryやBootstrapプラグインでできることすべてが可能になるわけではありませんが、以下の機能であればこれで十分でしょう。

  • ドロップダウンメニューの動作
  • 閉じることができるアラートボックス
  • いわゆる「ハンバーガー」ボタンでトリガーされる、スライド式ナビゲーションメニュー

Internet Explorer 8など、様々なモバイル、デスクトップのブラウザで試しましたが、動作するかしないかに関するレポートをいただければありがたく存じます。JavaScriptを必要とするBootstrapの構成要素が別にあるかもしれませんので、需要があれば (あるいはプルリクエストを送っていただくこともできます)、サポートさせていただきます。ブラウザサポートに関する詳細などはGitHubのページにあります: github.com/tagawa/bootstrap-without-jquery

テスト用のデモページも用意しました。いつでも、フィードバック大歓迎です!

デジタルサイネージの例(動画)

デジタル・サイネージ(Digital Signage)とは、表示と通信にデジタル技術を活用して平面ディスプレイやプロジェクタなどによって映像や情報を表示する広告媒体である。

デジタルサイネージは世界中で成長している業界で、特にここ日本とお隣りの韓国では強く関心を集めています。ごく最近では、地元企業が、Web技術の構築とともにデジタルサイネージに、より焦点を当てるようになっています。しかし、実際に着手するには、現在の標準(HTML5、CSS3、SVG、他)では、Webベースサイネージが抱えるすべての問題に対処していない、といった懸念がみられます。このような理由から、Web-based Signage Business GroupW3Cコミュニティの一部として設立されました。>

さらに具体的な行動を実際に起こす前に必要な事を完全に理解するには、使用法と実際の例が必要になります。デジタルサイネージがどれほど多様か、という点ですら過小評価されていることが多々あるため、ここでは極東の興味深い例をいくつかご紹介します。

独創的なサイズの360度ディスプレイ

東京のヒカリエにあるこのディスプレイの解像度は何と約4,000 x 100ピクセルです!コンテンツは主にフロアガイド、イベント情報、横型の時計等で、繰り返し表示されています。この背中合わせのディスプレイは、時に同期し、時に異なるコンテンツを表示します。

隣り合わせの広告と情報ディスプレイ

これも東京からの例で、デジタルサイネージ利用の対比です。左側の画面は、15秒と30秒の広告を集めたものを、事前に決められた順序と頻度で表示しています。右側の画面は、電車の情報を、例えば日本語が先で英語が2番目という具合に、時間指定のミニループで表示しています。しかし、これは停車駅に到着するなどの外部トリガーによって中断するようになっています。

透明の製品ディスプレイ

私は、この韓国の例を紹介せずにはいられません — とてもかっこいいのです!これは韓国にいるRich Tibbett(リッチ・ティベット)さんによって目撃されたもので、一件シンプルな時間指定ループのように見えますが、興味深い点がいくつかあります。この透明の画面は明らかに一つですが、歪曲したビデオの使用、そしてそれが付随するアニメーションと完全に同期していなければならない点です。

追加: サイネージ+自動販売機

もしあなたが他にも興味深い例をご存知でしたら、コメント欄にご自由にリンクを残してください。

アクセシビリティ対応のWordPress子テーマ(Twenty Twelve用)

簡単な概要: WordPress (ワードプレス)のTwenty Twelveテーマ用のアクセシブルな子テーマを作成しました。以下が詳細です。

WordPressのアクセシビリティについて

最近自分のブログをWordPressに替えました。セルフホストがコントロールの幅を広げるからです。今のところ、WordPressに感心しています。特に、プラグインと、利用可能なテーマの数に感心しています。でも、アクセシビリティに対応したテーマの数が少ないことに少し驚きました。今現在、1,741の公式テーマがありますが、「accessible」もしくは「accessibility」で検索した時に出てくるのは5つのテーマだけです。

ライアンさんの記事を参考にして、現在のWordPressのデフォルトテーマであるTwenty Twelve用の似たような子テーマを作成しました。蓋を開けてみると、Twenty Twelveは既に良い出来に見えるし、前のバージョンからは相当良くなっています。でも、もう少し調整があっても良いと感じています。以下が、私が変更、もしくは書き換えた部分の概要です。

子テーマの変更

style.css

  • リンクに下線 (アンダーライン) を強制的に付けて、ホバーとフォーカスでのリンクを削除した (選択されたアイテムをはっきりと表示するため)。
  • ボタン、リンク、その他のテキストのコントラストを高めた (低視力のユーザーのためと、昼間の屋外使用のため)。
  • 自動ハイフネーションを削除した (スクリーンリーダーによる間違った発音を避けるため)。

header.php

  • フロントページを表示している時に、サイトのタイトル近くにあるリンクとバナーのイメージを削除した。
  • サイトンの設定を変えれば、説明の見出し (ヘディング) だけを表示する。

content.php

  • 投稿リストの見出し (ヘッディング) を、<h1>から<h2>へ変えた。

footer.php

  • 「ページのトップへ戻る」リンクをフッターに加えた。

Accessible OneTwo Themeアクセシビリティの専門家ではありませんが、これらの変更が全てのユーザーにとっての閲覧のしやすさにつながっていると信じています (望んでいます!)。
このテーマ自体は、GitHubからダウンロードできます。GitHubから、改善点などの提案を聞かせてもらえると嬉しいです。もしくは、以下のコメント欄から提案などを聞かせてください。ついでに、WordPressのテーマでは、Accessible OneTwoとして提出してあるので、将来的にはもっと大勢の人に利用してもらえると願っています。

HTML5 Canvas:円を描く時のパフォーマンス

この記事はHTML5 Advent Calendar 2012の13日目のエントリーになります。

Canvasのクリスマスツリーもう少しでクリスマスなので、HTML5 の canvas でクリスマスツリーに飾り玉を描こうかなと思いました。色んな方法を考えながら、Stack Overflow に「円を円形グラデーションだけで描けるよ」というコメントを見つけました。

ご存知だと思いますが、canvas で円を描くには普通 arc()を使います:

// 普通の円の描き方
ctx.beginPath();
ctx.arc(x, y, radius, 0, Math.PI * 2, true);
ctx.fillStyle = 'rgba(195, 56, 56, 1)';
ctx.fill();
ctx.closePath();

例えば SVG と比べるとちょっと面倒くさい感じがするかも知れません。円形グラデーションを使うのが良いアイディアと思い、それぞれのやり方のパフォーマンスの違いが知りたくなりました。

// 円形グラデーションで円の描き方
var gradient = ctx.createRadialGradient(x, y, 0, x, y, radius);
gradient.addColorStop(0.95, 'rgba(195, 56, 56, 1)');
gradient.addColorStop(1, 'rgba(195, 56, 56, 0)');
ctx.fillStyle = gradient;
ctx.fillRect(x - radius, y - radius, x + radius, y + radius);

この canvas テストページで速さの違いが実際に見えます。

やっぱり arc() より円形グラデーションの方が遅いです。何倍も遅い!テストページを作る前、これに気付くべきでしたが、まぁ、どうせなので3Dっぽい球の描き方も調べる気になりました。

Canvas で球を描くには主に二つの方法があります:

  1. 円形グラデーションを利用する
  2. 既存の画像を利用する
// 円形グラデーションでの描き方
var gradient = ctx.createRadialGradient(x, y, 0, x, y, radius);
gradient.addColorStop(0, 'rgba(255, 255, 255, 1)');
gradient.addColorStop(0.2, 'rgba(255, 85, 85, 1)');
gradient.addColorStop(0.95, 'rgba(128, 0, 0, 1)');
gradient.addColorStop(1, 'rgba(128, 0, 0, 0)');
ctx.fillStyle = gradient;
ctx.fillRect(x - radius, y - radius, x + radius, y + radius);
// 既存の画像での描き方
var img = new Image();
img.src = 'images/baubles.png';
ctx.drawImage(img, x, y, width, height);

先ほどと同じように円形グラデーションの方が数倍遅いみたいです。しかし円形グラデーションの利点はもちろんその効果が動的に作られているため、JavaScript で変更することができます。一方画像を使う場合、ソフトで画像を前もって作る必要があります。JavaScript での編集ができませんが、大きさなら変更できます。色を変更したい時はこの二つの方法のいずれかが使えます:

  1. 複数バージョンのある sprite 画像を利用する。
  2. 白黒の画像を利用し、arc() で半透明のオーバーレイを適用する。

ところで画像のダウンロード時間も忘れてはいけませんので、ユーザを待たせないように画像のプリロード(先読み)がおすすめです。

前述の canvas テストページでそれぞれの速さの比較ができます。

テストから分かるように、半透明オーバーレイの方法は少し遅いですが、色の変更がもっと自由にできます。ただ、元々の画像よりコントラストが少し悪くなります。我慢できる位であるかどうかは皆様にお任せします!。

まとめ

結局簡単なアプリや力のあるデバイスなら速さの違いは気付く程ではないかも知れませんが、アニメーションを使う時、高速ゲームを作る時、もしくはTV用のアプリを作る時、パフォーマンスが重要になります。色々な選択肢がありますので、私からのアドバイスは下記の通りです:

  • 円が描きたい時、arc()を使いましょう。
  • 3Dっぽい球が描きたい時、画像を使いましょう(プリロードを忘れずに)。
  • 色んな色の球が描きたい時、sprite 画像を使いましょう。
  • 動的に色が変わる球が描きたい時、半透明オーバーレイのある画像を使ってみましょう。
  • 円形グラデーションは必要な時だけに使いましょう。

最後にもう一つ学んだことですが、やっぱり数千個の飾り玉のあるクリスマスツリーはオシャレじゃない!

更新:

TwitterでMarceloさんが良いアイディアをつぶやきました。隠されているcanvasに円形グラデーションで円を描いて、それをdrawImage()で元々のcanvasに数回描くというアイディアでした。これで画像を前もって作る必要がないし、動的に色を変えることも可能です。しかも既存画像にdrawImage()を使うよりもパフォーマンスが良いです!(円形グラデーションの描く時間を除けば。)コードはこんな感じです:

// いわゆる「バッファー」canvasを作るけど、ページに追加しない
var tmpCanvas = document.createElement('canvas');
var tmpCtx = tmpCanvas.getContext('2d');

// ここで必要なグラデーションを用意する(上記のサンプルみたいに)

// さきほどの「バッファー」canvasから元々のcanvasに描く
ctx.drawImage(tmpCanvas, x, y, width, height);

つまり、円や玉をたくさん描く時はこの方法が一番お勧めです。Marceloさん、サンキュー!

HTML5、CSS3 で作るポラロイド風写真

HTML5 Advent Calendar の12日目です。
本来のAdvent Calendarとは、12月1日からクリスマスの25日まで、カードに作られた窓を1日に1つずつ開けていくというものです。一方、技術系の Advent Calendar は、12月1日から25日までの間、毎日違う人が特定のテーマに沿ってブログ記事を書くというものです。ここでは、「HTML5」がテーマになります。他にも面白い記事が公開される予定ですので興味のある方は是非チェックしてみてください:http://atnd.org/events/21987

五つのステップでブログとかに活用できるポラロイド風の写真を HTML5 と CSS3 で作りたいと思います。似たサンプルがあっちこっちにありますが、もう少し本物っぽくなるように第5段階でアニメーションの追加があります。
完成すればこういうふうになります: HTML5、CSS3 のポラロイド風写真

さぁ、スタートしましょう!

1. まずは HTML5

ポラロイド風写真その1最初にマークアップを用意しましょう。HTML5 ではいくつかの新しい要素があります。どれをどういうふうに使うかは混乱しやすいですが、一つの簡単な要素は <figure> です。画像かビデオに使う要素で、実はそれだけであまり利点がなさそうですが、画像やビデオに説明の文章がある場合、<figcaption> との併用で役立ちます。使い方はこんな感じです:

<!-- HTML ファイル -->
<figure id="polaroid">
  <img src="santa.jpg" alt="本物のサンタさん">
  <figcaption>Merry Christmas !</figcaption>
</figure>

現在のブラウザはこれで満足していますが、IE の古いバージョンでは HTML5 要素に CSS の摘要できません。解決方法の一つは Remy Sharp 氏が作った簡単な JavaScript です:

<!-- HTML ファイル -->
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

2. 次はポラロイド風に

ポラロイド風写真その2ポラロイド写真のような効果はもちろん白い紙が必要なので、画像の周りにマージンを追加し、背景を白にします:

/* CSS ファイル */
#polaroid {
  background: #fff;
  color: #111;
  display: block;
  height: 425px;
  margin: 2em auto;
  width: 350px;
}
#polaroid img {
  border: solid 1px #ddd;
  margin: 24px;
}
#polaroid figcaption {
  display: block;
  font-size: 32px;
  line-height: 1;
  text-align: center;
}

ところで、HTML5 パーサーの入っていないブラウザは <figure><figcaption> みたいな要素が認識されず、インライン要素として扱われます。そのため、display: block; を指定します。そうすると、IE6 でもポラロイドっぽく見えます。

3. CSS3 で面白く

ポラロイド風写真その3やっと CSS3 の番になりました。細かい効果を追加するともう少し本格的になります。例えば影の引用、少しの回転、そして角を微妙に丸くしましょう:

/* CSS ファイル */
#polaroid {
  box-shadow: 0 2px 4px #777;
  border-radius: 3px;
  -webkit-transform: rotate(5deg);
  -moz-transform: rotate(5deg);
  -ms-transform: rotate(5deg);
  -o-transform: rotate(5deg);
  transform: rotate(5deg);
}

多くの CSS3 プロパティの長所は古いブラウザで表示されなくてもデザインが崩れることは殆どありません。ただ、最も最新のプロパティができるだけ多くのブラウザで表示されるように、上記みたいにベンダープレフィックスが必要になります。

4. 一言メッセージをおしゃれに

ポラロイド風写真その4今のところ、結構完成に近い感じがしますが、画像の下にあるメモはメモらしくないですね。ここでウェブフォントを使いましょう。ウェブフォントを使う時はもちろん利用する許可が必要です。このデモに使うフォントは Jesús Gorriti がコピーライト無しで公開している Gorri Sans です。

ウェブフォントは IE6 を含めてたくさんのブラウザで使うことができますが、ちょっとしたコツが必要です。Paul Irish 氏、Richard Fink 氏や Ethan Dunham 氏が色んな環境でテストして、一つの結果としてはこのコードがあります:

/* CSS ファイル */
@font-face {
  /* Font source: http://gorriti.com/2009/02/05/mi-aportacion-al-mundo-brutista/ */
  font-family: 'GorriSans';
  src: url('GorriSans.eot?') format('eot'), url('GorriSans.woff') format('woff'), url('GorriSans.ttf') format('truetype');
}
#polaroid figcaption {
  font-family: GorriSans, arial, sans-serif;
}

因みに上記のフォントフォーマット(EOT式、WOFF式など)への変換は、Font Squirrel の @font-face ジェネレーターをおすすめします。

5. フェードイン効果の追加

いよいよ最後の仕上げになりましたが、それはもちろん写真の現像です。本物のポラロイド写真みたいに、このデモの写真が目の前でゆっくりと現れます。JavaScript を使うことが可能ですが、CSS のみの方法でやってみましょう。アニメーションそのものは簡単であり、画像の透明度にトランジションを利用します。つまり、1分の間、opacity が 0(透明)から 1(不透明)に変わります。

どのトランジションでも、二つ以上の状態が必要です。この場合、ページ自体が第1状態になり、第2状態を作るには target の疑似要素(pseudo-element)を使います。トランジションを起動するには、<body> 要素に「demo」という ID を加え、ページの URL にも「#demo」を追加します。そうすると、ページがロードする時、画像が透明の状態から段々画像が見える target の状態に変わります。

<!-- HTML ファイル -->
<body id="demo">
  ...
</body>

/* CSS ファイル */
#polaroid img {
  opacity: 0;
  -webkit-transition-duration: 60s;
  -moz-transition-duration: 60s;
  -ms-transition-duration: 60s;
  -o-transition-duration: 60s;
  transition-duration: 60s;
}
#demo:target #polaroid img {
  opacity: 1;
}

完成したデモ: kyokodaniel.com/tech/css3/polaroid/index.html#demo

さぁ、これで更にクリスマスの雰囲気になったでしょうか?来年の HTML5、CSS3などのウェブ技術の発展が楽しみですね。皆さん、have a Merry Christmas and a Happy New Year!

SVG のお勧めの資料

Man painting a pictureSVG は新しい技術ではありませんが、最近けっこう注目されています。私もちょっと触ってみています。今のところは SVG のゲーム位置情報のサンプルだけですが、勉強するにはよく参考にする3つのホームページを見つけました。自分はまだ初心者レベルですが、ここで私にとっての最も役に立つ資料を紹介したら面白いかなと思いました。下記の資料は全部英語ですが、コードが多いなので文章を読まなくても勉強になるでしょう。

  • SVGBasics
    それぞれのページは短いですが、SVG の基本ならとても見やすいです。タグ名の綴りや属性の使い方を忘れた場合は役に立ちます。
  • carto:net
    上記の SVGBasics ほど見やすくないですが、説明は細かく書いてあります。私がよく読む部分は Manipulating SVG Documents Using ECMAScript です。なぜなら Internet Explorer 9 は SVG をサポートしますが、アニメーション用の SMIL は対応していません。このため、IE でも動く SVG のアニメーションを作りたいのであれば、JavaScript を利用する必要があります。
  • SVG Essentials
    さすが O’Reilly さん。本全体をオンラインで公開しています。相変わらずとてもプロフェッショナルな感じであり、コードのサンプルや画像が多いです。ちなみに印刷版もあります

Opera の社員ですからもちろん弊社の開発者向きの SVG 記事集も忘れずに。最後に、右上の画像は Nicu Buculei さんの作品であり、無料な SVG 画像をたくさん提供しています。

他の資料、又は参考にできるサンプルやデモをご存知であれば、是非コメントでお知らせください!

iPadの競争はどうなっているでしょう?

iPad を使うとやはり市場には余地があるとすぐに分かります。仕事に使うには最適ではないでしょうが、リビング、又は台所でネットサーフィンするにはパーフェクトです。しかし、個人的には Apple社の厳しいエコシステムに入りたくないので、競争会社が開発しているデバイスはとても興味深いです。2010年5月時点、タブレットの状況は以下のようです。

RIM

最近の噂によると、BlackBerry で知られているリサーチ・イン・モーション(RIM)社は「BlackPad」というコード名のあるタブレットを開発しています。Hon Hai社に8.9インチのディスプレイを注文したようです。iPad より小型で薄く、2011年に発売されるでしょう。

http://www.bbleaks.com/2010/05/blackberry-tablet-is-real.html

Dell

Dell社は2つのタブレット(7インチと10インチ)を開発しているという噂があります。2010年4月にMTV NetworksのGreg Clayman氏よりこのつぶやきがありました:

Sending this from a Dell Streak. This device is a amazing.

http://www.engadget.com/2010/04/16/dells-7-inch-and-10-inch-streak-tablets-leaked/

HP

HP社のSlateは2010年1月のCESで発表されました。当時のOSはWindows 7でしたが、HP社がPalm社を買収してから、タブレットのOSはwebOSの方が最適ではないかという意見が多いです。

Lenovo

Lenovo社は既にタブレットの経験がありますが、2010年夏に発売される「IdeaPad U1」が特に面白そうです。

http://shop.lenovo.com/us/landing_pages/products/new-product-showcase

Nokia

まだ噂だけですが、タッチデバイスの経験のあるNokia社は2010年の10月か11月にタブレットを発売するかもしれません。

http://www.reuters.com/article/idUSTRE63534S20100407

Samsung

WindowsがインストールされているSamsung社のQ1は2007年に登場しましたが、2010年の後半に発売されるタブレットを開発しているみたいです。

http://apcmag.com/samsung-to-release-slate-pc.htm

東芝

東芝は2つのタブレットを開発していると2010年4月に発表しました。一台はAndroid、もう一台はWindows 7、しかも画面は2つだそうです。

http://www.engadget.com/2010/04/15/toshiba-reveals-more-tablet-details-confirms-windows-and-androi/

他にもタブレットの噂はいくつかありますが、とにかく早く発売していほしい!

更新:

あらっ、評価の高い Archos を忘れてしまいました!既にいくつかのタブレットがあり、Windows も、Android も利用しています。次のデバイスを楽しみにしています…

http://www.archos.com/products/ht/index.html?country=us&lang=en

Media Queries でデバイスの対応

あるWebサイトは iPhone 専用のバージョンがあります。しかし、Opera Mini が Apple さんの App Store に入りましたので、iPhone ユーザのブラウザは必ずしも Safari だけではありません。

あるWebサイトはモバイル専用のバージョンがあります。しかし、iPad みたいなタブレットなどが現れるとモバイルと呼ばれるデバイスがファジーになりました。

いろんなデバイスのため、複数のWebサイトバージョンを別々に作って、管理するのが大変。このため、一つのサイトをいろんなデバイスや画面の大きさに対応するの方が楽だと思います。

以前、HTML5 をサポートしないブラウザでも Modernizr を使って HTML5 が利用できることについて書きました。JavaScript の window.innerWidth も画面の幅を判断して機能のカストマイズができます。ところがデザインはどうすれば良いでしょう?CSS3 がオタスケマーンになります!

CSS は handheld, print, screen などという media の種類がありますが、メディアクエリ(Media Queries)という似たこともあります。条件付きの CSS なのである種類のデバイスのためにページのデザインが簡単に変更できます。例えば、iPhone を含めた狭い画面(~320px)のあるデバイスは下記のコードが使えます:

インラインCSSの場合:

@media screen and (max-device-width: 320px) {...}

外部CSSの場合:

<link rel="stylesheet" type="text/css" href="mobile.css"
  media="screen and (max-device-width: 320px)">

同じように device-width: 768px にすれば iPad(768×1024)のに最適なデザインが作れます。しかし、パソコン意外の殆どのデバイスは iPhone や iPad ではないことを忘れないようにしましょう。Nexus One みたいな多くのスマートホーンの解像度は 480×800 であり、Wii みたいな多くのテレビ関連のデバイスは画面幅が 800 ピクセルです。開発する時はやはり特定なデバイスではなく、デバイスのある種類を考えながらデザインした方が良いでしょう。

いくつかのメディアクエリの使い方がありますが、参考のため、メディアクエリのサンプルを作ってみました。是非いろんなデバイスを使って、それともブラウザを狭くして見てください。(※ Internet Explorer は対応されていません)画面の幅に合わせてデザインが変わり、ある部分が消えたり、表示したりするはずです。下の写真では同じページがノートパソコン、iPad、iPod Touch (もちろん Opera Mini です!)に表示されています。

メディアクエリのサンプル

Web開発者にとっての良いところはページのデザインは CSS で変わります。HTML が変わりません。つまり、JavaScript と共に CSS3 のメディアクエリを利用すれば一つだけのWebサイトで多くのユーザを満足させることができます。

関連資料