Experts.jp日本に、もっとエキスパートを。Componentsに関するパネル、WebとDOMとの関係性、ARIAのWeb標準化などを紹介します。Components。このカンファレンスでの議論そのものも非常に興味深いものですが、このカンファレンスをきっかけに多くの議論がブログなどで展開されました。Componentsがその未来へと着実に歩みを進めるためにどんな障害があるのでしょうか。様々な領域で活躍するエキスパートたちの意見を以下に関連リンクとしてまとめましたので、興味がある方はぜひそれぞれ一読を。DOMではなく、DOMに関する問題点へ指摘と解決策の提言です。React.jsのようにDOMらしいものを生成しDOMを制御するアプローチがあったり、Angular.jsのようにHTMLによく似たシンタックスでDOMへのアプローチを隠蔽するアプローチがあったりと、DOMから離れれば離れるほどWebそのものがよいものになったように思えてくる。Coyer氏による反論も併せて読んでおくと良いでしょう。Recommendationとなりました。WAI-ARIAはWeb標準となったことを意味します。広範囲に及ぶ、実装だけではなく、テスト、そしてバグ修正を行い、多くのモダンブラウザですでにサポートされ、モバイル・ブラウザにおけるサポートも広がってきています。2などの仕様にもWAI-ARIAを適応し、より広範囲でのアクセシビリティを提供していくそうです。Keith氏による「Webに課せられたある1つの矛盾」の考察に対する追記に当たる記事といえるでしょうか。記事はAndroidとiOSの違いについての考察から始まり、ネイティブとWebの差に話が及ぶ。その段になってKeith氏はWebとは何かという根源的な疑問に対し、氏がどのように考えているかについて語っていきます。氏は次の文で記事を締めくくります。『分裂として捉えるのを辞め、多様性として捉え始めるべきだ。氏の言葉通り、WebとはHTMLやCSS、JavaScriptで書かれたものだけを意味するものではないでしょう。Kesteren氏はWeb標準化に貢献するためには、Web標準がコミュニティによって作られていることに気がつくことが大切なステップだとし、そのコミュニティでコミュニケーションに利用されているミディアムを追いかけることを次のステップとしています。貢献しようとしている標準そのものに詳しい必要もありますが、それらを取り巻く環境にまず慣れることが活動の第一歩だとしています。2013にて発表した彼自身がどのように標準化団体にアプローチしたかについてのプレゼンテーション。Marquis氏がインタービュー。Picture要素が以前のバージョンとどこが違うのか、それまでに登場したsrcsetやsrc-nという仕様や提案が現在のPicture要素にどのように影響しているのかなどについて詳しく解説しています。この記事ではその疑問に対して、具体的なソースコードを見ながら現行の仕様とほかのレスポンシブ画像に対する解決案を比較しています。srcsetに加えて新たに追加されたsizesという属性が重要な役割を担っているのが一目でわかります。Mohan氏によると、多くのユーザーはもはやモバイルだけにフォーカスをしているだけでは時代遅れになりつつあるとしています。消費者達は多くのデバイスを駆使して、利用シーンに合わせてタスクを完遂しているとしています。なんと約90%ものユーザーがあるデバイスで開始したタスクを別のデバイスで完了しているとしています。モバイル・ファーストはすでに過去の問題を解決しようとしているに過ぎないと氏は語り、今後はマルチデバイスの最適化にフォーカスを移していくべきだとしています。Budd氏がアドバイス。Lewis氏本人のパフォーマンスチェックのワークフローについて。Insightsでサイト全体の状態を確認し、WebPageTestを使ってネットワーク周りのパフォーマンスを細かくチェック。それから、レンダリングに関わるパフォーマンスチェックを、このリストを参照しながら行っているそうです。このワークフローは手動で行うものがほとんどですが、自分が担当するプロダクトでは自動化できる部分は可能な限り自動化をしているとのこと。brokenHTTPキャッシュはURLとHTTPメソッド(GETやPOSTなど)でコントロールするものですが、”Vary”ヘッダを利用してより細かく制限をすることができます。この”Vary”ヘッダは少々やっかいもので、IEでは”max-age”が無視され、Safariでは少々バグがあったりもします。この記事では具体的な例を見ながら”Vary”ヘッダの挙動について詳しく紹介しています。browserブラウザ内部がどのように動作しているのかを知ることで、CSSアニメーションやトランジションの記述をする前に、そのアニメーション/トランジションのパフォーマンスがよいものか、そうでないのかを知ることができます。この記事では特にGPUがどのようにパフォーマンスに作用するのか、そしてなぜ特定のプロパティをアニメートすることがパフォーマンスのボトルネックになるのかについて、詳しく解説しています。Compilerブラウザはユーザーに対してよりよい体験を提供するために日々改善を行っています。Compilers)をCSSのセレクタの解析に応用してみた結果について紹介しています。Mobile?モバイルWebにおいて、パフォーマンスが特に重要なファクターであることはよく知られています。パフォーマンスの最適化に際し、デスクトップの時代には当たり前のように利用していたjQueryは、そのファイルサイズからモバイルでは利用されない傾向にあります。この記事では実際のモバイル端末でjQueryを読み込み、どのくらいの時間がかかったのかを詳しく解析しています。読み込みだけではなく、解析にかかる時間も加味した詳細なデータで疑問に答えてくれています。EUで発表したこのプレゼンテーションは氏の得意とする詳細なテストによるデータを使ったViewportから見たレスポンシブ・デザインに関する実利的なアドバイスについてです。氏はまずピクセルとはなにかから解説し、モバイルとデスクトップのViewportsの違い、JavaScriptやMetaタグによるViewportsの仕組みについて詳しく解説しています。Koch氏による本プレゼンテーションで発表したViewportに関連するコンセプトのモバイルブラウザ別の対応状況をまとめた表。Layoutを使ったレイアウトテクニックに関するプレゼンテーション。Layoutですが、ようやく様々なブラウザで同じシンタックスが利用できるようにもなってきて、現実的なアプローチとして注目が集まってきています。Layoutをサポートしていないブラウザに対するフォールバックについても紹介しています。Andrews氏によるプレゼンテーション。Globe誌を始め、最近ではBBCもレスポンシブデザインを採用しています。ニュースサイトにおけるレスポンシブデザインはなかなかハードルが高い部分がありますが、そのいくつものハードルをGuardianではどのように超えていったのかについて詳しく紹介しています。CheatsheetHTML5に関連する技術を使ったセキュリティに関する注意点と、その回避についてのチートシート。CSSynthCSSアニメーションを実際に目視しながらカスタマイズできるエディタ。特定のアニメーションに限ったエディタではありますが、エディタが作り出すスムーズなアニメーションは見ていて飽きません。Demo上で紹介したCSSynthの作者による別プロジェクト。こちらはCSSのフィルタを使ったデモ。★次回の「斉藤祐也の海外WEBテク定点観測」は2014年5月1日にお届け予定です。Communications。