WebComponentsでWeb名刺ハンズオン
JavaScript
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
001_pre
002_hello_world
003_create_card
004_decoration
005_exchange
.gitignore
Gruntfile.js
README.md
index.html
package.json
x-business-card.html

README.md

エンタープライヤーのためのWeb Components Study

Web ComponentsでWeb名刺を作ろう!

はじめに

この資料はWeb名刺を作成するハンズオンを通じて、Web標準の「Web Components」学習するための資料です。Polymerの学習ではありませんのでご注意ください。
(なお、資料の内容は2014年9月現在のWeb Componentsの仕様に基づくものです。)

ゴール

Web Componentsの基本を把握し、様々なWeb Componentsのサンプルを見ながら、オリジナルのWeb Componentsを作れるようになるまでをゴールとしています。

前提となるもの

  • 学習を進めるにあたり、ローカルにWebサーバを立てる必要があります、資料の中ではgrunt-contrib-connectを使って簡易Webサーバが起動するようにしてあるため、NodeGruntの実行環境が必要です。
  • GitとChromeがインストールされていることを強く推奨します。
  • Githubアカウントがあると配布がスムーズに行えて尚良です。
  • フロントエンド開発が初めての方、開発環境構築が面倒な方は、ブラウザ上で簡単にフロントエンド開発ができるCloud9のアカウントを作成して、これを利用してください。

デモ

http://html5bizj.github.io/x-business-card

発表スライド

<iframe src="//www.slideshare.net/slideshow/embed_code/38850199" width="427" height="356" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" style="border:1px solid #CCC; border-width:1px; margin-bottom:5px; max-width: 100%;" allowfullscreen> </iframe>

目次

  1. 準備
  2. Web ComponentsでHello World
  3. Web名刺を作成
  4. Web名刺をデコレーション
  5. 配布(名刺交換)

脚注

文中での 💝 は技術的な細かい内容について書いています。ハンズオンでは取り扱いません。

作者

mitsuruog

後援:html5jエンタープライズ部