2015年3月12日にイメディオ・制作技術セミナーとして、『HTML5ハンズオンセミナー ～ 最新の技術とプロダクトでWebサイト制作を効率化しよう』を開催しました。

今回のセミナーは、KDDIウェブコミュニケーションズ・エバンジェリストである阿部正幸氏が講師を務め、HTML5でも人気のCSSフレームワークやWeb Componentsなどを学ぶことをテーマとしています。阿部氏は、KDDIウェブコミュニケーションズ公式、CPIスタッフブログの編集長のほか、Drupal(g.d.o Japan)日本コミュニティーやHTML5 funなどに所属し、OSS（オープンソースソフトウェア）を世に広げる活動や、Web制作に関する情報を発信しています。

---

オープニングでは阿部氏のプロフィール紹介からスタート。これまでの経歴や編集長を務めながら自身も執筆しているブログについての紹介がありました。

続いてカメラの歴史を紐解きながら、カメラの世界は標準化が進んだことで撮影から写真を他人とシェアするまでのプロセスが少なくなっていったことを解説。カメラと同様に、Web制作のプロセスも標準化を進めていくことで将来的にはより少ないプロセスでWebサイトを完成させられるようになるだろう、と阿部氏。
その方向に進んでいることは、HTML5やWeb標準に注目が集まっていることを見ても明白だといいます。
中でもWeb ComponentsはW3C*で仕様が決まっており、Web標準になることが濃厚だそうで、2〜3年後には一般的なWeb制作はWeb Componentsを使って行われる可能性があるそうです。

*W3C/ World Wide Web Consortium（ワールドワイドウェブコンソーシアム）の略称。Webで利用される技術の標準化をすすめる国際的な非営利団体。

 1） Web Components　
Web Componentsとは、Templates、Shadow DOM、Custom Elements、Importsという4つの技術で構成された技術の総称であること、現在使えるのはGoogleChromeなどのモダンブラウザのみであり、他のブラウザで使えるようにするにはPolymerというライブラリが必要なことについて解説がありました。
ここからはPolymerを使いながら、Web Componentsを見ていくことに。

この時点でサーバやFTPの環境を整備しながら進めていたものの、ネットワークの調子が悪く、急遽ハンズオンスタイルから阿部氏によるデモスタイルでの講義に変更をしました。

Polymerの導入方法に関する説明があったあと、Core-ajax elementについての説明がありました。Core-ajax elementが注目される理由として、CMSテンプレートの土台として使われると考えられている点が挙げられるとのこと。

続いて、GoogleマップをWebサイト上に表示するコンポーネントなどの紹介がありました。
コンポーネントを入れるだけで、簡単にWeb上にGoogleマップを表示することが可能に。続いて、Googleストリートビューをコンポーネントを使ってWebサイト上に表示するデモを行いました。
阿部氏は、現在のテンプレート販売サイトのようなコンポーネント販売ビジネスが始まるかもしれないと語っていました。

 2） マテリアルデザイン　
Polymerには、マテリアルデザインを表現するデザインパーツも数多く入っています。その一例として、チェックボックスやスライダーなどのデザインパーツをWeb Componentsで導入する方法をデモしました。コンポーネントの数は増えており、今後のサイト制作においては便利なコンポーネントをいくつ知っているかで、サイトのデザインバリエーションも変わる時代がすぐそこに来ているとのこと。
また、現在のWeb制作の現場では非常に手間が掛かるデータバインディングのデモも行われ、Web Componentsを使って非常に簡単に導入できることを紹介。

続いて、マテリアルデザインに関する解説がありました。マテリアルデザインとは、Googleがユーザーにわかりやすいデザインを提供しようという目的の下に制定した指標であり、GoogleもアプリやWebなどをすべてこのマテリアルデザインのものに置き換えていく方向で進んでいるとのことでした。さらにevernoteなど、他社のサービスサイトも導入が増えてきているそうです。

 3） 最後に　
阿部氏は、この技術はまだ新しいもので、自分自身もテスト的に小規模なサイトで活用している段階だと話していました。ただ、W3CのWeb標準として認められれば、2〜3年後には大規模なサイトでも採用されるかもしれないと予測していました。現状でもWeb Componentsを活用すればコーディングが劇的に楽になるので、チェックボックスなどのデザインパーツだけなら今すぐ活用できるとのことです。

 4） 懇親会　
セミナー終了後は、阿部氏を交えて懇親会が行われました。参加者がセミナーの内容について直接質問するなど、活発なコミュニケーションが行われていました。また、受講者同士での情報交換も行われ、新たなネットワークが生まれていました。

---

◆阿部氏による最新のWeb制作技術を紹介する本セミナー企画は 次回、2015年6月～7月を目処に開催を予定しております。決定次第イメディオのツイッターやメールマガジン、ホームページで案内してまいります。