体験を伝える―『ガジェット通信』の考え方

面白いものを探しにいこう 本物を体験し体感しよう 会いたい人に会いに行こう 見たことのないものを見に行こう そしてそれをやわらかくみんなに伝えよう [→ガジェ通についてもっと詳しく] [→ガジェット通信フロアについて]

今すぐ知っておくべき!モダンな10のWeb技術

本稿は、Designmodeのブログ記事を了解を得て日本語翻訳し掲載した記事になります。

本記事は、ライターのJake Rocheleau氏によって投稿されました。

 

ここ数年の間に、新しい技術が数多く公開されています。Webデザインの世界が根本的に変化し、Webサイトの構築ははるかに簡単に高い技術でできるようになりました。

私が最新ツールとベストプラクティスに常に関心を持っているのは、「今日のツール」が「明日の必須ツール」となるからです。

 

この記事では、モダンなWeb技術トップ10をご紹介します。

 

1. Web Components

01-webcomponents-homepage

Web Componentsは、W3Cの標準化委員会によって策定が進められているHTML5要素の新しい仕様です。

これらのコンポーネントを使えば、タブ化したウィジェット、画像スライダー、ドロップダウンメニューなど動的ページに使える機能を、カスタマイズと再利用が可能な要素として作成できます。

例えば、ドロップダウンメニューをul要素を使ってゼロから作成する代わりに、タグなどを使って作成することができます。

 

Web Componentsのメインサイトには実例が多く紹介されています。

実際のプロジェクトに利用するのはまだ早いかもしれませんが、今後数年でそれも変わってくるはずです。将来的にWeb ComponentsがW3Cの正式な勧告となったときに備えて、Webエンジニアは少なくともWeb Componentsに慣れておいた方がいいでしょう。

 

2. Polymer

02-polymer-project-homepage

Web Componentsを使い慣れたら、次はPolymerなどのライブラリが役立ちます。PolymerはGoogleによって主導されているオープンソースのプロジェクトで、Web Componentsなどを標準化する目的で進められています。

Web ComponentsのAPIを使っていれば、このライブラリによって開発はより簡単になるでしょう。動画、スライダー、Googleマップのウィジェットなどの埋め込み機能のためのプレビルト型の要素を取得できます。

 

Polymerのゴールはモジュール化です。Web ComponentsのAPIによってウィジェットを自由に開発できるのも、こうした理由からです。同じコードのブロックを書き直さなくても、同じページ上に多くのウィジェットを追加することができます。

PolymerはWeb Componentsと組み合わせて使うべきです。この2つの技術は、Webサイトのモジュール化を劇的に発展させるでしょう。

 

3. AMP

03-washington-post-amp-pages

Googleはユーザーエクスペリエンスの向上、ブラウジング体験のシンプル化を常に推進してきました。そしてGoogleのAMP(Accelerated Mobile Pages)のプロジェクトは、あらゆるWebページをシンプル化してモバイル端末上での表示を最適化することに成功しました。

小さなコードをページに追加するだけで、Googleの技術によって残りは自動的に実装されます。

 

WebサイトをAMPで最適化すれば、読み込みが速くなり、画像と動画は事前読み込みされ、モバイル上での読書体験を効率化するため、ネイティブアプリのように振る舞います。

1 2 3次のページ
TechAcademyマガジンの記事一覧をみる
  • 誤字を発見した方はこちらからご連絡ください。
  • ガジェット通信編集部への情報提供はこちらから
  • 記事内の筆者見解は明示のない限りガジェット通信を代表するものではありません。