2014-09-14

Web Components ハンズオンをやってみた

2014/09/09に美人で有名なおだんみつさんのいる21cafeで「エンタープライヤーのためのWeb Componentsハンズオン」を開催しました。内容は「Web名刺」をWeb Componentsで作るというものです。

Web Componentsについての解説記事はそこそこ出てきましたが、ハンズオンだと国内初の試みかと思います。それなりに難しい技術に関するハンズオンでしたが、なかなか好評だったようですので少し振り返ってみます。

  1. Web Componentsとは
  2. 苦労したポイント
  3. 成功したポイント
  4. さいごに

Web Componentsとは

UI部品がコンポーネント化して再利用しやすくすることが出来る技術です。詳細はGoogleのえーじさんがなぜ Web Components はウェブ開発に革命を起こすのかで書いている記事が分かりやすいかと思います。とにかく将来のWeb開発に革命を起こすと言われる技術です。

苦労したポイント

2時間のハンズオンコースですので、その限られた時間内で結果を出さなければなりません。
今回苦労したポイントは2つです。

  1. Web Componentsのメリットを感じつつ、作ってて面白く、参加者が本気になる題材はなにか。
  2. Web Componentsの複雑に絡み合った仕様を最短で理解してもらうためには、どうすればいいか。

「題材」については自分のカスタムタグが作れて気軽に配布できると嬉しい「Web名刺」にしました。
最短で理解してもらうための構成とコンテンツ作りには難儀しましたが、Web Componentsのコンセプトについては「花の種」を例えて、コンテンツの方は、講師がいなくても出来るようにGithub上に作りました。
(Githubのコンテンツについてはかなり試行錯誤して悩んだのは事実です。)

参加者からは嬉しい反応もいただけたので、なかなかハンズオンとしては成功だったようです。主催としてはホッとしています。

こちらが当日の様子です。

発表資料はこちらです。

ハンズオンの内容についてはこちらにあります。

html5bizj/x-business-card

成功したポイント

成功したポイントはいくつかあるのですが、簡単に言うと@kara_dさんのこの一言、「企画」なのかなと思います。

「企画」が最も大事なのは事実なのですが、裏でハンズオンを成功させるための運営的な小細工をいろいろやっていたので、機会があったらノウハウまとめたいと思います。

さいごに

今回、エンタープライヤーのためのWeb Componentsハンズオンを開催しました。2時間で参加者が満足できるハンズオンができるか不安でしたが、なんとか成功させることができたようです。

お忙しい中、参加していただいた皆さんありがとうございました。チューターの@albatrosaryさん@can_i_do_webさんありがとう!あなた達のフォローがなかったら成功しなかったです。会場提供の21cafeさんもありがとうございました。

作成したWeb名刺

最後は参加者で記念撮影