「Chrome+HTML5 Conference~第20回記念HTML5とか勉強会スペシャル~」レポート

デザイナートラックレポート

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

外村和仁さん,小山田晃浩さん「Dive into SVG」

外村和仁さんと小山田晃浩さん(PixelGrid)はSVGの特徴や基本的な記述などについて,基礎編と応用編に分けて発表しました。

画像

基礎編を担当した外村さんはHTML5の注目ともに,ブラウザの対応状況などの効果も相まってSVGも再注目されてきていると言います。SVGはXMLで記述されており,2003年にSVG1.1がW3C勧告になっていると述べ,自社のロゴGNU/Linux Distribution⁠,Displaying Web Statistics in an SVG Web Application⁠,Nissan Leaf Electric Carなどのページを紹介しながら,拡大しても劣化しないことやスケーラブルなのでサイズが大きくなっても軽いこと(もちろん複雑な描画は別⁠⁠,リンクの埋め込みやスクリプトが使えることを簡単に説明しました。

その後,自社で作成したSVG Demoを紹介しました。SVG Deomoは,SVGのコードをWebページ上で記述し,その結果をリアルタイムに描画してくれるものです。ヘルプ機能も内蔵しているのでとても便利なので皆さん使ってみてくださいと述べていました。

画像

このSVG Demoを利用して,コードを交えながらSVGの作法と基礎を丁寧に説明しました。ベースとなるビューポート(描画領域)とビューボックス(どの基準点から描画するかを指定する)について説明した後,矩形(rect要素⁠⁠,(circle要素⁠⁠,楕円(ellipse要素⁠⁠,折れ線(polyline要素。折れ線の場合はfillにnoneを指定する必要がある⁠⁠,多角形(polygon要素。polylineとpolygonの違いは,polygonが始点と終点を結んでいるかの違い⁠⁠,汎用の図形(path要素。汎用性が曲線なども描けるが記述が難しい。円にした場合は始点と終点の結び方が特殊)の記述方法について紹介しました。

応用編を担当した小山田さんは,インタラクティブなコンテンツやUIを作るためのアニメーションやフィルターなど,少し高度なSVGの技術について紹介しました。

画像

まず始めにSVGの変形できることは拡大/縮小(scale⁠⁠,移動(translate⁠⁠,回転(rotate⁠⁠,スキュー(skweX,skweY)行列変換(matrix)があり,CSS3のtransformに非常に似ているのはtransformがSVG由来だからと説明しました。また,形状に合わせたリンク判定を持ったHTMLのa要素に似ているリンクを設定できることを紹介しました。

その後,ぼかしやロップシャドウなどの視覚効果を与えることができるフィルターとその効果について紹介しました。特に,ぜひ覚えてほしいのが原始フィルターであると言います。原始フィルターを組み合わせることで,自分でフィルタ効果を作ることができると強調しました。なお,属性で指定しても良いが,SVGのCSSで指定することも可能とのことです。書き方は一般のCSSと同じですが,プロパティは独自であると紹介しました。

画像

また,SVGのアニメーションでは色や位置,変形のアニメーションができるほか,ガイドパスに沿ってアニメーションできるのが特徴と紹介しました。SVGではスクリプトも使え,マウスの位置を取得すること等も可能であるとのことです(ただしjQueryは動かないそうです⁠⁠。

最後に,書いた/描いたSVGはリンクするか,ドキュメントして混在させる(インラインSVGの)形でHTMLで使えるとしました。なお,複雑な図形は手で書けないのでツールを使うことになるが,有名なのはIllustratorとinkscapeと紹介しました。特にIllustratorは優秀なコードを書いてくれるとのことです。そして,⁠Flashを使えばできたことかもしれないが,SVGで新しいUIが実現可能になるので,ぜひ皆さんも使ってみてください」と述べました。

矢倉眞隆さん「今から使える!? HTML5」

矢倉眞隆さん(ミツエーリンクス)は,HTML5の実装が進んでいる中,多様なブラウザに対しどのように対応していくかが課題となっていると語ります。いくつかの対応指針を紹介し,Regressive Enhancementという考え方について発表しました。

画像

今回のセッションのために,HTML5は「使える!」「使える?」かという視点で考えてみたと話します。⁠使える!」と言う視点では,ブラウザの対応が進んでるし,IE9も基本的なものは高クオリティで実装されている。また,すごいデモもたくさんあるし,書籍や解説サイトも増えてきたと言います。そのため,どんな機能があるかを知ることができるし(できないこともまだあるため⁠⁠,HTML5やCSS3が使いやすくなってきていると述べました。しかし「使える?」と言う視点では,ブラウザの対応がまちまちで,バージョン間の差異もあるというのが重要な問題だと語ります。

そして,⁠古いブラウザへの対応はどうしよう?」と考える羽目になると言います。これに対して,⁠がんばって全部対応する」⁠あきらめて古いのは切り捨てる(本質的には良くない⁠⁠」などが考えられますが,お勧めなのが「無理のない対応する」ということだと述べました。つまり,表示上の違いを受け入れるということです。この点で,ここ数年言われているのが「Progresive Enhancement(以下P.E.⁠⁠まずは最低ラインの対応をした上で,新しい機能を載せる手法。基準決めるのが基本)と,⁠Graceful Degradation(以下G.E.⁠⁠基本は新しい環境に合わせて,壊れない程度にグレードダウンする手法。"Graceful"なので激しいのはNGとのこと)と紹介しました。P.E.とG.D.の違いは基本的に見方の違いであり,P.E.は基礎があるので堅く,G.D.は進んだものを使いやすいと述べました。

ただ,表示の違いを受け入れると先述しましたが,そうは言っても常にそういうわけにいかないのが現実ですと話します。受け入れられない場合はどうしたらいいかと言う点を踏まえて最近出てきた考え方がRgrassive Enhancement(以下R.E.)であると紹介しました。R. E.は標準を基準にして,対応してないものは補うと言う考え方で,これは現在の実務のやり方に近いはずと指摘しました。そしてR.E.を実現するには,ModernizrとPolyfillsが鍵であると言及しました。

画像

Modernizrは,HTML5などの対応状況を調べるJavaScriptライブラリで,他のライブラリと違ってバージョンで対応を判断しないところにあると言います(なお,バージョン2になって自分の必要なものだけをダウンロードできるようになったことを紹介しました⁠⁠。Modernizrを使うことで,対応しているブラウザではその機能を実現するJSを読み込まず,対応していないブラウザではJSを読む込むといったR.Eの考え方を実践できるようになると言及しました。また,HTMLにclassがつくため(例えばcsstransitionsや.no-csstransitions等⁠⁠,これらのclassを利用して記述の場合分けができると紹介しました。

Modernizrは機能を実現するJSを持っているわけではないので,欲しくなるのがPolyfillsだと言います。Polyfillsは標準機能を真似するライブラリで,対応状況の「ひび」を埋めることを念頭に置いているそうです。様々なPolyfillsがModernizrのGithubで紹介されているので,詳しくはこちらを参照してほしいと述べました。

今のやり方に近いR.E.と増加しているPolyfillsには期待できるが,⁠R.E.で素敵なHTML5生活が送れる?」とは短絡的には考えないでほしいと言います。サイトを制作する際には,P.E./G.Dでも悪くはないのではないか,組み合わせても構わないのではないか,ときちんと考えてほしいと語ります。それにPolyfillsで何でも解決できるかもしれないが,無理やりJSを挿入するやり方であるため,使うほど古い環境に負担がかかってしまい,それは「対応」なのか?と言及しました。また,選択肢「使わない」を改めて考えてみてくださいと話します。特に本当にその機能は必要かを考えてほしいと言及し,例えばサイト内検索フォーム上で薄いグレーのテキスト(ヒント)を表示させるための属性としてceholder属性がありますが,これに対応していないブラウザで表示した場合にヒントが見えなくなり,見えないと良く分からないフォームというのはデザイン上の問題がはらんでいる気がしていると述べました。

最後に,Polyfillsなどは簡単に(便利に)使えてしまうからこそ考えてほしいと語り,いろんな方法があるけれども活かし方を知ってHTML5を「使える!」ようになってほしいと述べ,セッションを締めくくりました。

著者プロフィール

高橋和道

gihyo.jp編集部 所属。Gihyo Digital Publishingでは主に,提供するEPUBを設計。

URL:https://twitter.com/k_taka