STICKY POST
Monday, 26. October 2009, 01:00:00
Hello!
2009年8月、Opera Japan に入社したウェブエヴァンジェリストのダニエルです。
イギリスから来たウェブデザイナー、プログラマー、システム管理者の経験を持っている geek です。
このブログのキーワードはどっちかというと「HTML5」、「CSS3」、「SVG」等です。つまり、最新のウェブスタンダード。
特に皆さんとウェブ技術の知識を share したいと思い、お互いの tech の勉強、発見、遊びが楽しみです。
同僚の
Bruce Lawson によると、「ウェブは単一のベンダーがコントロールするには、あまりにも重要なプラットフォームなのです。」（"The web is too important a platform to be in the hands of any single vendor."）。その通りです。オープンなウェブが更に採用されるように、「めざましTech」で少しだけでも貢献したいと思います。
よろしくお願いします！
Friday, 4. December 2009, 08:23:14
イベント, HTML5
昨日の「HTML5 を使ってみよう」のイベントへ来ていただいた方々、本当ありがとうございました。
皆様のおかげで面白く、楽しい勉強会ができたなと思います。その場で見たプレゼンをもう一度見たい方、または参加できなかった方のため、HTML5 マークアップについてのプレゼンの PDF を公開しました：
http://people.opera.com/danield/presentations/html5/html5-markup.pdfその後の HTML5 化に使った資料も公開しましたので、是非参考にしていただきたいと思います。
Before:
http://people.opera.com/danield/presentations/html5/ramen_HTML4/index.htmlAfter:
http://people.opera.com/danield/presentations/html5/ramen_HTML5/index.html改善できるところは色々あると思いますので、アイディアやコメントを楽しみにしています。
来年できるイベントを今から考えますので、その時も宜しくお願いいたします。
Once again, thank you!
Thursday, 12. November 2009, 07:28:36
イベント, HTML5
Good news!
日本のウェブ開発者コミュニティーのために無料なイベントを開催いたします！HTML5 の経験があまりない方、話は聞いたけどまだ使ってみていない方が対象者であり、HTML5 の利点や使い方を楽しみながら紹介するのが目的です。
Opera の日本オフィスで HTML5 についてのプレゼンテーションを行い、今回は日本滞在の HTML 担当主任、Mike Smith 氏が W3C としての考え方を教えて下さいます。
詳細は下記のようになります：
イベント名：HTML5 を使ってみよう！
日時：2009年12月3日（木） 19:00～21:00（開場 18:30）
場所：Opera Japan のブレイクルーム。〒153-0063 東京都目黒区目黒 1-24-12 オリックス目黒ビル 9階 (
地図)
入場料：無料
人数：40人（先着順）
対象者：HTML5 に興味を持っているウェブ開発者
内容：Mike Smith、
W3C、HTML 担当主任
テーマ："HTML5: The Web platform as an application runtime environment" 「HTML5：ウェブプラットフォームがアプリケーションランタイム環境になる」（英語、日本語通訳あり）
Daniel Davis、
Opera Software、ウェブエヴァンジェリスト
テーマ：ライブでウェブページのHTML5化（日本語）
上記のプレゼンテーションの他にも、話す時間やネットワーキングの時間はたっぷりあります。楽しいイベントができることを期待しています。
申し込みはメールで行っております。参加したい方はお早めに「HTML5 イベントの参加希望」の件名で「contact-japanアットopera.com」までご連絡下さい。待ってま～す！
更新（11月24日）：沢山の希望者、ありがとうございます！
「HTML5 を使ってみよう！」のイベントが満席になりましたので、これで申し込みを終了したいと思います。
今回参加できない方は申し訳ありませんが、来年もイベントの開催を考えていますので、又宜しくお願い致します。
Thursday, 12. November 2009, 05:26:35
canvas, SVG, HTML5
HTML5 の普及と共に、ウェブページに画像を作るには canvas と SVG（Scalable Vector Graphics）の使用が多くなってきています。Internet Explorer 以外の全ての現代的なブラウザは対応しており、Flash の代わりにアニメーションとインタラクティブな画像に利用できます。しかし、なぜ2つの画像作成方法が必要なのか？そして、それぞれをいつ使ったら良いでしょう？
SVG って何？
- 数年前からの W3C スタンダード
- タグで画像のオブジェクトが作れるXML系の言語
- 画像を拡大しても画質が悪くならない
- 各要素は SVG の DOM にあり、JavaScript のイベントが追加できる
- あるオブジェクト、あるいはオブジェクトのグループを編集するのが楽
- オブジェクトの数が多くなれば多くなるほど重たくなる
- アクセシビリティが良い、例えば文字列を通常の文字列と同じように選択できる
Canvas って何？
- 画像はピクセルでできており、JavaScriptでピクセルを描く
- 画像を拡大すると画質が悪くなる
- 画像を編集するには、ピクセルを新たに描くことが必要
- ピクセルの編集が速い
- 画像サイズが大きくなれば大きくなるほど重たくなる
- アクセシビリティが良くない、例えば検索エンジン等は画像内の文字列を認識できない
結局 canvas と SVG はどういう時に最適ですか。編集のスピードが速いため、速く描画するのが重要である時は canvas がベストです。例：アニメーションやゲーム等。
大規模の画像やインタラクティブな画像には SVG が最適です。例：地図やユーザインタフェース等。
※ Internet Explorer でも使えるように、canvas であれば「
excanvas」、SVG であれば「
Raphael」を是非使ってみて下さい。
SVG スライドショーの事例：
http://people.mozilla.com/~vladimir/demos/photos.svgCanvas ゲームの事例：
http://www.benjoffe.com/code/demos/canvascape/
Monday, 26. October 2009, 01:04:52
HTML5, Q&A
Q) HTML5 ってなに？
A) HTML5 は二つに分けることができます。まずは仕様です。ホームページ作成に使う基本言語の第5版。そして、同時に出ている幾つかのウェブ関連の技術を代表する総合的な単語でもあります。例えば、Web Sockets、ジオロケーション、オフラインストレージ等。CSS、SVG や他のオープンスタンダートと同じように、ウェブを利用する時のエクスペリエンスを改善するのが目標です。
Q) 目標と言えば、HTML5 の目標はなんでしょうか。
A) 主に2つの重要な概念があります。1つは HTML を動的にすることです。今までは HTML と言えば文字、リンクと画像のみでしたが、これだけではなく、現在プラグインでしかできないこともできるようになります。もう1つの目標は HTML をなるべく使いやすくすることです。これを実現するには上位互換性をできる限り保ち、多くのウェブ開発者の開発方法に沿った基準を作ります。この方法は「"paving the cowpaths" - 牛の通り道を舗装する」と呼ばれています。
Q) それはどういう意味ですか？
A) この10年間はウェブが非常に進化しましたが、ウェブページの作り方と構成はそれほど大きく変わっていません。基準を守らないウェブページも少なくありません。現状を改善するには、ウェブ開発者の開発方法を変えようとするより、その多くの開発方法を基準にしようとしています。例えば、従来の HTML ではビデオ再生用のプラグインをウェブページに挿入すれば、そのページは非準拠になってしまいます。HTML5 は「embed」の要素が追加されましたので、その恐れがなくなりました。他にも例があります。現在、あるページは HTML で作られており、あるページは XHTML で作られています。あるページは大文字を利用し、あるページは小文字を利用しています。HTML5 ではどちらも有効です。
ただ基準を宣言するだけではなく、HTML5 は今のウェブの現状から離れないようにしようとしています。例えば、多くのウェブページはヘッダーとフッターがありますので、「header」と「footer」という要素が HTML5 に追加されました。同じように多くのウェブ開発者は JavaScript を使ってフォームのスライダーやカレンダー等を作るのに苦労してきましたが、これらも HTML5 の一部になりました。ウェブ利用者にとっても、いろいろなホームページにてフォームを使う際に、統一されたエクスペリエンスを感じることができます。
Q) ということは、HTML5 を使うには別の言語を学ばなくてよいのでしょうか？
A) その通りです。今までの HTML に非常によく似ていますので、既存のページが有効な HTML 又は XHTML であれば、それは有効な HTML5 となるでしょう。もしそうならなくても、通常は少ない修正で十分でしょう。もちろん、HTML5 ではなく従来のバージョンが良いのであれば更新する必要はありません。
Q) ページが有効であるかどうかはどうやって分かりますか。
A) ウェブ標準化団体の W3C はオンライン確認ツールがあります：
http://validator.w3.orgQ) ちょっと待って！従来のバージョンと次のバージョンは違いが多くないのであれば、HTML5 の新しい基準はなんの意味があるでしょうか。
A) それがポイントです。言語の基本は似ていますが、面白いことはその基本の上にできるものです。
Q) 例えば？
A) まず新しい要素ができました。例えばよく使えそうな上記の「header」と「footer」、ナビゲーション「nav」、部分の「section」等。その上、ウェブアプリケーションに対応できるようになりました。例えば：
- 「canvas」の要素：JavaScript を利用してウェブページの中に画像を作成。
- 「video」と「audio」の要素：プラグインを使わずビデオとオーディオを再生。
- Web Forms 2：メール、URL、日付の入力が簡単にできるフォーム。ブラウザで入力確認も可能。
- ジオロケーション：ユーザの現在の位置の取得。
- オフラインストレージ：インターネットに接続しなくてもウェブアプリケーションを使用可能。
- Web Workers：JavaScript の計算が裏側で行われ、その計算が重たくてもブラウザが固まらない。
Q) よし、決心した！でもどうやって HTML5 を使えばよいでしょうか。
A) まずは注意点です。HTML5 はまだ作成中であるため、各ブラウザによって対応されている、または対応されていない機能があります。あるブラウザが対応するようになっても、対応しない古いブラウザもかなり多くあります。このため、対応しないブラウザでページを見た際、エラーメッセージが出ない、若しくは何も表示されない可能性があるといった点に気を付けないといけません。しかし、HTML5 は上位互換性を重要にしていますので、正しく利用すればそういう問題は少なくなるでしょう。
もう一つの注意点があります。未定な部分が少なくなって来たとはいえ、HTML5 は完成するまでに更に変わる可能性があります。一般的なウェブ開発者にとっては、最も簡単にできるのは既存の各ウェブページの最上部に HTML5 のドックタイプ（<!DOCTYPE HTML>）を挿入することです。そして、上記の W3C のオンライン確認ツールを利用すれば、有効な HTML5 になるまでに後何を変更すべきか分かります。それから、HTML5 を少しずつ追加すればウェブページの改善が楽になります。
Q) サンキュー。やってみます！困った時はどうすればいいですか。
A) HTML5 が人気になりつつあり、英語だけではなく日本語の資料も多くなって来ました。例えば：
WIDGETIZE