コンポーネント単位で考えるWeb制作
•
34 likes•21,020 views
見積りや進捗管理上「ページ」という単位で考えられることが多いWeb制作ですが、実際には「コンポーネント」単位で制作工程を考えた方が多くの面でメリットがあるのではないだろうか。 最新のHTML/CSSプリプロセッサを駆使しながら、コンポーネントという切り口での制作、進行管理、分業の可能性を模索します。 http://media-massage.net/works/docs/componentweb/
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Similar to コンポーネント単位で考えるWeb制作
Similar to コンポーネント単位で考えるWeb制作 (20)
More from 祐磨 堀
コンポーネント単位で考えるWeb制作
- 1. P R E S E N T A T I O N : 株式会社LIG フロントエンドエンジニア 堀 祐磨 (ほりでー) Web制作
- 2. コンポーネント単位で考えるWeb制作 自己紹介 LIG INC. Front-end Engineer ほりでー (堀 祐磨) 1988年生まれ。多摩美術大学を中退後、デザ イナーとしてグラフィックデザイン・Webデザ イン・UIデザインを経験。 2015年、株式会社LIGにフロントエンドエン ジニアとして入社。
- 3. Web制作
- 13. トップページ チャンネルページ 記事ページ 要素がほぼ同じ = 1ページ作れば全部できたも同然 それ以外…1ページづつ順番に完成していく
- 35. 別コンポーネントとして分離
- 50. .block { /* 基本デザイン */ } .block̶small { /* 小さい版デザイン */ width: 50%; .block__icons { display: none; } } .block̶news { /* 色違いデザイン */ background: blue; } <!̶ 基本的な外観 ̶> <div class="block"></div> <!̶ 小さい版の外観 ̶> <div class="block block̶small"></div> <!̶ 色違い版の外観 ̶> <div class="block block̶news"></div> <!̶ 両方のかけあわせ ̶> <div class="block block̶small block̶news">
- 51. <!̶ 基本的な外観 ̶> <article class="article"> <!̶ 縦レイアウトアレンジ ̶> <article class="article article̶vertical"> <!̶ 縦レイアウトアレンジ ̶> <!̶ 紫アレンジ ̶> <article class="article article̶vertical article̶biz"> HTML要素は一緒で classのみ異なる ※本発表の為の便宜的な例であり、実際とは異なります
- 54. コンポーネント単位で考えるWeb制作 <%- include('./_article', { modifier:'article—-small' }); %> _article.ejs <%- include('./_article'); %> <article class="article <%= modifier %>"> <!-- 記事コンポーネント --> </article> パラメータを追加
- 56. 並び順が微妙に違う
- 61. コンポーネント単位で考えるWeb制作 <ul class="sns <%= modifier %>"> <li>ツイート</li> <li>シェア</li> <li>いいね!</li> <% if (modifier === 'sns--vertical') { %> <li>Pocket</li> <li>はてブ</li> <li>Google+</li> <% } else { %> <li>はてブ</li> <li>Google+</li> <li>Pocket</li> <% } %> </ul>
- 75. _person.ejs <section class="person <%= modifier %>"> <!-- メンバーコンポーネント —> <h1><%= data.head %></h1> <% if (modifier === 'person—-sidebar') { %>…<% } %> <% if (modifier === 'person—-channel') } %>…<% } %> <% if (modifier === 'person—-small') } %>…<% } %> </section> <%# データを用意 %> <% var arrayData = [ {modifier:’person--sidebar', head:'ナッツ', job:'4代目広報担当・編集長', tw:'...' }, {modifier:'person--channnel', head: 'ヨシキ', job: '漫画編集長', tw: '...'}, {modifier:'person--small', head: 'こやにい', job: 'メディアディレクター', tw: '...'} ]; %> <%# forEachでループ %> <% arrayData.forEach(function (record) { %> <% include('./_person', { modifier:record.modifier, data:record } ); %> <% }); %>
- 77. まとめ
- 89. Thank you! http://qiita.com/y_hokkey 株式会社LIG フロントエンドエンジニア 堀 祐磨 (ほりでー)