「Opera Night in Osaka」に参加してきました。 #onio114

2010年11月4日、堺筋本町にあるファーストサーバー株式会社の会議室で行われた「Opera Night in Osaka」に参加してきました。主催は「HTML5-WEST.jp」です。今回のイベントで学んだことをとりあえずつらつらと書いていきたいと思います。(ちょっと長いです、スミマセン)

タイムテーブル

大まかなタイムテーブルはこんな感じ。

  • 19:00〜20:00 「HTML5 Forms で healthy living!」 – OperaのDaniel Davisさん
  • 20:00〜20:15 「Why Firefox?」(すみませんタイトルの記憶が定かでないです)- Mozillaの浅井智也さん
  • 20:15〜20:50 「デベロッパーツール Opera Dragonflyの紹介」 – すみません、お名前失念しました。。
  • 20:50〜21:00 LT「HSTS for Opera」 – Yosuke HASEGAWAさん

それでは、それぞれの発表内容についてレポートしますね。

「HTML5 Formsで healthy living!」

現在のWebでは、検索ボックスからカレンダーによる日付選択機能まで、幅広い機能がForm(フォーム)によって実現されています。でも、HTMLで用意される部品の種類が少ないので、Webサイトによって同じ検索ボックスでも実現方法は様々。ホテルが違えば予約フォームのカレンダーの動作・仕組みも違うといった状況も、Webサーフィンをしていれば普通に目にすることができます。

このような状況では、機能を実装する開発者も大変(徹夜続き)ですし、あまりWebを使ったことがないおじいさん・おばあさんは大混乱、といった悲しいことが起きてしまいかねません。

上記の問題を解決するために、Operaが提案したのがHTML5 Formsです。

この発表では、上述のストーリーとともに、実際に簡単なコーディングを行いながら、HTML5 Formsで新たに追加されたinput要素の種類、属性について紹介されていました。

発表の中で印象に残ったことを以下に箇条書きにしてみます。

  • 退屈なValidation処理はHTML5 Formsに任せて、自分のJavaScirptをいかに楽しいことに使うのかを考えよう!
  • JavaScriptでブラウザを判定して処理を条件分岐させるのはよくない。特定の機能が使えるかどうかを細かくチェックしていこう!
  • ブラウザがある機能に対応しているかどうかを調べるにはModernizrというJavaScriptライブラリが便利だよ!
  • 現状HTMl5 Formsの機能を試すなら、Operaの一番新しいバージョン(これかな??)かFirefox 4がいいみたい。OperaはUIの部分の実装が進んでいて、FirefoxはValidationの機能が進んでいるそうです。

全体的にすごく親切丁寧な発表で、HTMl5 Formsについてとても興味がわきましたし、その概要についても十分理解できました。Opera使って試しに色々遊んでみようかなぁ〜。

なお、発表資料には下記URLからアクセスできるみたいでーす!

Why Firefox?(タイトルが定かでないです)

急遽発表することになったMozillaの浅井さんの発表。

Firefoxを使うべき理由を4つ挙げた後、それぞれの項目についての詳細を説明されていました。
なかなか攻撃的(アグレッシブ)な発表で、とても面白かったです。

Firefoxを使う4つの理由のうち3つを簡単にまとめておきます。(すみませんひとつ忘れました・・)

Open

ソースコードだけオープンするだけでは、どのような理由でそういうコードになったのかがわからなくなるため、うまく引継ぎができないという問題が起きてしまうようです。Firefoxはソースコードだけでなく、リポジトリやバグトラッキングシステムも全て公開されているそう。

Privacy

Firefoxでは不必要な情報はサーバに送信しないし、特定のアカウントとプライベートな個人情報を結びつけたりもしない。サーバーサイドのシステムも全てオープンソースとして公開されています。

Speed

何をもって高速とするかがもっとも重要な点だそうです。ギャグみたいなベンチマークもたくさんあるので、実用的なソースコードを使ってしっかり性能評価することが重要だそう。ブラウザの宣伝文句として使われているベンチマーク結果をそのまま鵜呑みにせず、どのベンチマークを使ったのかしっかり調べるべきとのこと。

デベロッパーツール Opera Dragonflyの紹介

Opera提供するJavaScriptデバッギングツール「Dragonfly」を使ったデバッギング手法を、実際に手を動かしながら紹介されていました。

何でも発表者の方は「Webができて15年間、未だに素晴らしいといえるデバッグツールに出会ったことがない」そうです。

デバッグの大まかな手順は以下のとおり。

  1. 問題のJavaScirptソースコードをダウンロード
  2. 圧縮されているソースコードをテキストエディタを使って整形
  3. Fiddlerというプロキシツールを使い、問題のソースコードへのアクセスに対して整形済みのソースコードを返すようにする。
  4. あらかじめ用意しておいたUser JavaScript(Greasemonkeyのようなもの)を使い、エラーコンソールに発生したイベントを全て出力。怪しげなイベントが発生していないかチェック。
  5. ソースコードから怪しげなイベントの発生場所を検索
  6. 該当場所にブレークポイントを設定し、ステップ実行しながらデバッグ

個人的にはFiddlerに興味津々になったりしました。気になります。

また、バグが発生しやすくなる原因についても以下のように少し触れられていて、とても参考になりました。

  • 仕様に足りないものがあると開発者は変わった方法で実現しようとする→バグ発生しやすい
  • ブラウザ種類で条件分岐する。→バグ発生しやすい

LT:「HSTS for Opera」

HSTS(HTTP Strict Transport Security)は、ブラウザに対して強制的にHTTPSを使うように指示できる仕様です。ChromeとFirefox 4は対応しているそうなのですが、OperaやIEは対応していないとこと。

「OperaでもHSTSを使いたい」ということで、そのために試行錯誤した結果について発表されていました。

最初はOpera Extensionを使っての実現を目指されたみたいですが、Opera Extensionの仕様上不可能だったとのこと。仕方なくFiddlerを使って擬似的にHSTSに対応されていました。

まとめ

長文 & 所々記憶の抜けがあってとても読みにくいレポートになってしまいました。(もう少し「まとめる能力」をつけないと・・・)

このイベントを通じて、ブラウザ業界にはまだまだ僕の知らないことがたくさんあるんだということを実感したと同時に、ブラウザ業界に対してすごく興味が沸きました。「誰にでも使いやすいオープンなWeb」を実現するために、こんな僕でもなにか役に立てることがあるのかな?微力ながら何かお手伝いしたい、そんな気持ちになれたのはほんとよかったです。

第二回が開催されるという噂もちらほらあるみたいなので、開催されるのを楽しみにしながら今回の参加レポートを終わりたいと思います。

それでは!