Downloaded 12 times
Recommended
More Related Content
Similar to Webコンポーネントの話
Webコンポーネントの話
- 1.
- 2.
- 3.
- 4.ここでいうコンポーネント化とはWebページの中のパーツを構成するHTMLの要素のまとまりをひとつのコンポーネントとして管理する仕組みや開発方法。<div id=”header”> 〜</div> → ヘッダーコンポーネント<div id=”footer”> 〜 </div> → フッターコンポーネント<div id=”sidemenu”> 〜 </div> → サイドメニューコンポーネント
- 5.
- 6.
- 7.必要最低限なことだけ記述したい<nav id=”gnav” role=”navigation”><ul><liclass=”gnav01”><a href=”..”>ホーム</a></li><li class=”gnav02”><a href=”..”>ニュース</a></li><li class=”gnav03”><a href=”..”>製品</a></li><li class=”gnav04”><a href=”..”>企業</a></li><li class=”gnav05”><a href=”..”>採用</a></li><li class=”gnav06”><a href=”..”>お問い合わせ</a></li></ul></nav><gnav><a href=”..”>ホーム</a><a href=”..”>ニュース</a><a href=”..”>製品</a><a href=”..”>企業</a><a href=”..”>採用</a><a href=”..”>お問い合わせ</a></gnav>
- 8.もっとシンプルにしたい<div id=”slideshow”><ul><li><a href=”..”><imgsrc=”..” /></a></li><li><a href=”..”><img src=”..” /></a></li><li><a href=”..” target=”_blank”><img src=”..” /></a></li></ul><ul class=”controller”><li class=”prev”><a href=”#”>◀</a></li><li class=”next”><a href=”#”>▶</a></li></ul><ul class=”marker”><li><a href=”#”>●</a></li><li><a href=”#”>●</a></li><li><a href=”#”>●</a></li></ul></div><slideshow controller=”true” marker=”true”><img src=”..” href=”..”><img src=”..” href=”..”><img src=”..” href=”..” target=”_blank”></slideshow>
- 9.とにかく複雑だから省略したい<nav role="navigation" aria-label="breadcrumb"prefix="v:http://rdf.datavocabulary.org/#"><span typeof="v:Breadcrumb"><a href=".." rel="v:url" property="v:title">書籍</a> ›<span rel="v:child"><span typeof="v:Breadcrumb"><a href="books/authors" rel="v:url" property="v:title">著者</a> ›<span rel="v:child"><span typeof="v:Breadcrumb"><a href=".." rel="v:url" property="v:title">夏目漱石</a> ›<span class="current" rel="v:child">吾輩は猫である</span></span></span></span></span></span></nav>※グーグル推奨のパンくずリストの書き方 + WAI ARIA<breadcrumb><parent href=”..”>書籍</parent><parent href=”..”>著者</parent><parent href=”..”>夏目漱石</parent><current>吾輩は猫である</current></breadcrumb>
- 10.
- 11.
- 12.
- 13.
- 14.
- 15.
- 16.開発の例ブラウザの解釈テンプレHTML+JavaScriptHTMLファイルimport<gnav><a href=”..”>ホーム</a><a href=”..”>ニュース</a><ahref=”..”>製品</a><a href=”..”>企業</a><a href=”..”>採用</a><a href=”..”>お問い合わせ</a></gnav>フロントエンドエンジニアが開発（パース&DOM再構築後のHTML）<nav id=”gnav” role=”navigation”><ul><li class=”gnav01”><a href=”..”>ホーム</a></li><li class=”gnav02”><a href=”..”>ニュース</a></li>(テンプレートはWebデザイナが触ることもある)<li class=”gnav03”><a href=”..”>製品</a></li><li class=”gnav04”><a href=”..”>企業</a></li><li class=”gnav05”><a href=”..”>採用</a></li>マークアップエンジニアorWebデザイナーがマークアップlink</ul></nav>CSSファイルマークアップエンジニアorWebデザイナーがスタイリング<li class=”gnav06”><a href=”..”>お問い合わせ</a></li>再構築後のHTMLを想定してCSSを記述する必要がある。→慣れるまで大変
- 17.コンポーネントを利用するポイント・コンポーネント化したものは再利用する→ テンプレートはなるべく汎用的につくり、別案件のサイトで使いまわす。→ コンポーネントの作り貯めてカタログ化し、ワイヤー段階からの制作を楽に。・クライアントの開発ツールを利用するとよりメリットがある→SMACSSの手法をとり、LESS/SASSなどを使えば管理がさらに楽になる→ Styledoccoなどドキュメント生成機でコンポーネントカタログを自動作成→ Yeomanなどのジェネレータを使って管理(コマンド一発でモック完成)→これらを使わないと逆に辛いかも
- 18.
- 19.今日のまとめ1. Webコンポーネントの時代がくるかも2. 工夫次第で楽できるかも3.フロントエンドエンジニアがんばれ！4. とりあえず概念だけでも
- 20.
- 21.