レポート

Webをより良いものにしよう! HTML5/CSSの仕様のテストを書くハッカソン「Test The Web Forward Tokyo 2013」レポート

この記事を読むのに必要な時間:およそ 3 分

6月7日,8日,六本木のGoogle Japanにて,Test The Web Forward Tokyo 2013が開催されました。本イベントは,Web標準のエキスパートの指導を受けながら,W3Cの仕様のテストを書くハッカソンを軸に構成されています。

本稿では,このイベントの模様をレポートします。

画像

イベント開催の挨拶

5月7日19時にイベントが始まりました。最初に,総務省の岡本樹生氏によるイベント開催の挨拶がありました。

岡本氏は「W3CではHTML5等のWebの仕様を策定しているが,現在そのテストで困ってる。皆さんにも貢献できる部分がある」と言います。岡本氏自身は2年ほど前からHTML5などのWeb標準技術に仕事として関わっています。それを通じて,「日本の皆さんはHTMLやCSSなどのWeb標準技術を使ってサービスやアプリケーションを作るのは上手だが,これらの仕様そのものにどの程度貢献しているだろうか。わたしの印象ではプラットフォームの重要性から考えると,まだまだ少ない。そこで,世界の人たちと一緒にWeb標準を作るというところに加わってくれると良いと考えている」と述べました。

画像

岡本氏の挨拶の後,本イベントの進行役であるGoogleの北村英志氏からもこのイベントについて説明がありました。

もともとこのイベントはAdobeが始めたもので,現在は開催地でそれぞれ違う複数の会社が中心になって催されています。このイベントの趣旨はWebをより良いものにしていくことだと言います。北村氏は「現在のブラウザは新しい機能が追加され,様々なことができるようになっている。しかし,一部のブラウザ限定でしか動かないとか,仕様の解釈が違うことで実装が異なってしまうことがある。これはWebの人間が望んでいることではない」と話します。そのため,仕様通りに実装されているか,ブラウザのためのテストが必要だと言及しました。ただ,そのテストを誰が書くのかと参加者に投げかけ,「W3Cももちろん書いてるが,仕様に対するテストの数は膨大。これこそ,Webデベロッパーのみんなで助け合おう」と述べました。

画像

仕様の読み方

続いて,2つのセッションが行われました。まずは,ネットワークソフトの竹村和晃氏による,仕様の読み方についてです。

W3Cの仕様はW3Cのサイトに掲載されています。竹村氏は仕様の読み方をRPGに例え,「経験を積めば誰でもレベルアップすることができる(読めるようになる)。また,難しい仕様で読みにくい場合には,自分一人で考えるのではなく,仲間を探せば助けてくれるはずだ」と話します。また,「心配しなくても大丈夫。旅立ちの道具がある。それはgoogle」と述べ,仕様の日本語訳があるかどうかをgoogleで調べてみるのも良い方法だと指摘しました。しかし,日本語訳は仕様の古いバージョンを元に訳されている時があるので,それには注意してほしいと言及しました。そして実際に仕様を読む時は,まずその仕様のAbstractを読んでから該当箇所を読むようにしていると,自分の読み方を紹介しました。

画像

仕様書とテストのライフサイクル

次に,Oli Studholme氏による仕様書とテストのライフサイクルについてのセッションがありました。

はじめに,W3Cの仕様書のステージは下書き→草案→最終草案→勧告候補→勧告のように進みますが,その進み方が一様ではないのこと,また仕様は分かれれたり,集まったりすると説明しました。そして,各ステージについて説明しました。例えば,最終草案は変更中のステージであり,この時に仕様に問題があれば直さないといけないということです。

テストについては,仕様が勧告候補になり仕様があまり変わらなくなったらテストを作り始め,インプリメンタ,デベロッパーで確認するために重要だと言います。もしも仕様が変われば,テストも作り直さないといけないとのことです。また,テスト自体は1つのことを確認できるようにシンプルに作るのが良いと指摘しました。テストが足りない場合には,10年前のようなブラウザ互換性等の相互運用性の問題が出てしまうとも話していました。

最後に,テストの事例として,CSSのアニメーションがきちんと動作しなかったため,細かくテストを作り,バグなどを見つけ出した話を紹介しました。これらはW3Cに報告されています。そして,参加者に対して「明日はテストを作ろう!その後も作ろう!」と呼びかけました。

画像

「どのテストを書くのがお勧めか」ライトニングトーク

翌日の大半の時間は,テーマごとにチームに分かれて,テストを書くハッカソンが行われます。そこで,仕様に関わっているエキスパートたちによる,明日は何のテストを書いてほしいのか,というアピールがライトニングトーク形式で行われました。

具体的には,次のものが紹介されました。

CSS Flexbox
Flexboxでは,画像やinput要素などのブラウザによってハンドリングされる部分,CSSアニメーション,日本語などの縦書き等がまだ手を出してい状況。
CSS Text + Writing Modes
CSS Textでは行分割,禁則処理とか,Text Decorationでは圏点とか,Writing Modesでは縦書きとかの機能が電子書籍のEPUB形式(特に日本語のもの)で使われているが,まだまだバグが多い。
CSS Orientation Test OpenType Fonts
ユニコード文字の特に縦書きのときの文字の向きを判別する,パブリックでサイズの小さい特殊フォントCSS Orientation Test OpenType Fontsが作られた。vert機能を使うことで,文字幅も分かる。これを利用してtext-orientationやline-breakなどのプロパティのテストに使ってほしい。
CSS Fonts
CSS Fontsのテストとして入りやすいものは,@font-faceやオブジェクトモデル。シリアライズが正しくできているかを確認する。フォントに詳しければ,Font Featuresという機能についてテストしてほしい。テストにはShepherdを参照する。
CSS OM
CSSOMのテストとして,まずはメディアクエリー,セレクタ,値のシリアライズが挙げられる。その他に,Alternative Style Sheets,getComputedStyle(),insertRule()など。
HTML and APIs
HTMLやAPIもある。例えば,XMLHttpRequest(XHR)のテストは中途半端。
Filter Effects
Filter EffectsのFilter primitivesの各要素のテストなどがある。
Shadow DOM
Shadow DOMのテストは一応あるが,ひどい。やりたいことだらけ。tree composition,Stylesなど。

ライトニングトークの終了後,ホールにて軽食と飲み物が用意され,懇親会が行われました。HTML5のロゴをかたどった特別な寿司もありました。

画像

その間に,講演会場では明日のテストのグループごとに分かれて座れるように,テーブル等が再配置されました。グループは「HTML5」「Shadow DOM」「CSS Text + Writing Modes」「CSS Fonts」「CSS Flexbox」「CSSOM」ができていました。

懇親会の後,参加者は自分がテストを書いてみたいグループに行き,そのグループのホワイトボードに自分の名前を書き込んで,1日目は解散となりました。

画像

著者プロフィール

高橋和道

gihyo.jp編集部 所属。最近では電子書籍の制作にも関わる。

URL:https://twitter.com/k_taka

コメント

コメントの記入