Successfully reported this slideshow.

Styleguide Driven Development x CMS - MTDDC Tokyo 2015

1

Share

1 of 80
1 of 80

Styleguide Driven Development x CMS - MTDDC Tokyo 2015

1

Share

Download to read offline

MTDDC Tokyo 2015で話した内容です。
MTのデモでは、モジュールをダブルクリックするとHTMLやCSSの編集エリアが表示される。
HTML, CSSの編集エリアは、Emmetも利用できるようにしています。
保存すると、Data APを利用して記事を編集・保存し、再構築まで行うようになっています。
ただ実際に使うのは難しいかも。

MTDDC Tokyo 2015で話した内容です。
MTのデモでは、モジュールをダブルクリックするとHTMLやCSSの編集エリアが表示される。
HTML, CSSの編集エリアは、Emmetも利用できるようにしています。
保存すると、Data APを利用して記事を編集・保存し、再構築まで行うようになっています。
ただ実際に使うのは難しいかも。

More Related Content

Related Books

Free with a 14 day trial from Scribd

See all

Styleguide Driven Development x CMS - MTDDC Tokyo 2015

  1. 1. Styleguide Driven Development Content Management System
  2. 2. HTML+CSSによるマークアップからCMSの構築まで、さまざまなWebサイトの制作に関わっ たあと、2014年にまぼろしに入社。 主な著書に『CSS3&jQueryで作る スマートフォンサイトUI図鑑』(共著、アスキー・メディ アワークス)、『現場のプロが教えるWeb制作の最新常識 知らないと困るWebデザインの新 ルール』(共著、MdN)など。 Adobe公式ブログ「Adobe Creative Station」で、プラグインの「Emmet」について連載。 個人ブログ「Web Design KOJIKA17」を運営。 久保 知己 株式会社まぼろし マークアップエンジニア
  3. 3. Styleguide Driven Development
 (SGDD/SDD)
  4. 4. Styleguide スタイル ガイドは、特定の言語について用字用語やスタイル上の決まり 事が定義されたルール集です。 ローカライズに関する通則、技術文書における言語のスタイルや用法に 関する情報、市場に特化したデータ書式に関する情報が含まれます。 スタイルガイドをダウンロード − マイクロソフト ¦ ランゲージ ポータル http://www.microsoft.com/Language/ja-jp/StyleGuides.aspx
  5. 5. このセッションのStyleguide Webサイトを構成するデザインパーツ(モジュール)や作法などを記述したドキュメント • ドキュメントの形式: HTMLなど • 記述内容 • ディレクトリ, インデント, ID/classの命名規則 • カラーパレット • ボタンや見出しなどのWebサイトを構成するパーツなど
  6. 6. mozilla Style guide - introduction
  7. 7. mozilla Style guide - buttons & icons
  8. 8. mozilla Style guide - backgrounds & color
  9. 9. mozilla Style guide - grid system
  10. 10. Primer
  11. 11. Primer - Buttons
  12. 12. Primer - Navigation
  13. 13. Primer - States
  14. 14. 中・長期的に運用する Webサイトと相性がいい
  15. 15. Styleguide Driven Development
  16. 16. Styleguide Driven Development スタイルガイド(ドキュメント)をもとに開発を進める手法 略称: 「SGDD」または「SDD」 • デザインやコードの一貫性を保持しやすい • メンテナンスやパフォーマンスなども考えながら作成しやすい • 量産ページなどのデザインの画面数が減る(ワイヤーだけで作成できる) • あとからページを作成する時も、スムーズに進めやすい • レスポンシブWebデザインにも有効
  17. 17. LEGO.com Digital Designer Virtual Building Software http://ldd.lego.com/ja-jp/
  18. 18. SGDDに適したStyleguide
  19. 19. SGDD - Design
  20. 20. SGDD - Design 決めておいたり、用意しておくといいこと • カラーパターン • margin
  21. 21. SGDD - Design 決めておいたり、用意しておくといいこと • カラーパターン • margin
  22. 22. mozilla Style guide - backgrounds & color
  23. 23. Material design - Google design guidelines
  24. 24. スウォッチまであると親切
  25. 25. SGDD - Design 決めておいたり、用意しておくといいこと • カラーパターン • margin
  26. 26. Layout - Google design guidelines
  27. 27. Keylines and margins • Screen edge left and right margins: 16dp • Content associated with an icon or avatar left margin: 72dp • Horizontal margins on mobile: 16dp.
  28. 28. ヘッダーからコンテンツからまでの距離 やモジュールの距離などを決めておく
  29. 29. 間隔を決めていないと .mt5∼60など、すべて使うかわからない 汎用クラスが増えることになる
  30. 30. SGDD - HTML/CSS
  31. 31. SGDD - HTML/CSS MovableTypeなど、CMSを構築している方は当たり前だと思いますが、 • モジュールの柔軟性を考えて作成する • CSSの再利用性・指定範囲 • CSSの詳細度の起伏をおさえる
  32. 32. SGDD - HTML/CSS MovableTypeなど、CMSを構築している方は当たり前だと思いますが、 • モジュールの柔軟性を考えて作成する • CSSの再利用性・指定範囲 • CSSの詳細度の起伏をおさえる
  33. 33. SGDD - HTML/CSS MovableTypeなど、CMSを構築している方は当たり前だと思いますが、 • モジュールの柔軟性を考えて作成する • CSSの再利用性・指定範囲 • CSSの詳細度の起伏をおさえる
  34. 34. CSSの再利用性 .categories-pagination { overflow: hidden; } .categories-pagination .next { float: left; } .categories-pagination .prev { float: right; }
  35. 35. CSSの再利用性 .pagination { overflow: hidden; } .pagination .next { float: left; } .pagination .prev { float: right; }
  36. 36. CSSの指定範囲 <div id="main"> <h1>Heading Lv1</h1> <p>Lorem</p> <h2>Heading Lv2</h2> <p>Lorem</p> </div>
  37. 37. CSSの指定範囲 #main h1 { } #main h2 { } #main ul { } #main p { }
  38. 38. CSSの指定範囲 <div id="main"> <h1>Heading Lv1</h1> <p>Lorem</p> <h2>Heading Lv2</h2> <p>Lorem</p> <div class="contact"> <h2>Heading Contact</h2> <p>lorem</p> </div> </div>
  39. 39. CSSの指定範囲 <div id="main" class="entry"> <h1 class="entry-title">Heading Lv1</h1> <div class=“entry-body”>   <!— WYSIWYG —> <p>Lorem</p> <h2>Heading Lv2</h2> <p>Lorem</p>  <!— /WYSIWYG —>  </div> <div class="contact"> <h2>Heading Contact</h2> <p>lorem</p> </div> </div>
  40. 40. CSSの指定範囲 .entry-title { } .entry-body h2 { } .entry-body ul { } .entry-body p { } .contact h2 { }
  41. 41. SGDD - HTML/CSS MovableTypeなど、CMSを構築している方は当たり前だと思いますが、 • モジュールの柔軟性を考えて作成する • CSSの再利用性・指定範囲 • CSSの詳細度の起伏をおさえる
  42. 42. CSSの詳細度の起伏をおさえる .txt { } #main h2 span { } #about .list .photo img { } .box .item .item-lv2 ul li .hoge { } .box .item #item-lv3 h2 { } .box .items .item dl dd p { } .box .items .item ul li h4 { } #footer #footer-nav #footer-nav-inner ul { } #footer #footer-nav #footer-nav-inner ul li { } #footer #footer-nav #footer-nav-inner ul li a { }
  43. 43. CSS Specificity Graph Generator
  44. 44. CSSの詳細度の起伏をおさえる 詳細度の起伏が激しい場合、複数の人が運用しているとカオスになりやすい 下記はドキュメントがないと起こりそうな夢 • 子孫セレクタを子孫セレクタで上書きして対応する場面が起こりやすい • !important を使いはじめる • !important を !important で上書きする • /* 消したら、なぜか崩れる */ というコメントが出現する
  45. 45. CSSの詳細度の起伏をおさえる 詳細度の起伏を抑えるには? • 子孫セレクタを深くしすぎない • CSSではIDセレクタを控える
  46. 46. CSSの子孫セレクタ .pagination { overflow: hidden; } .pagination .next { float: left; } .pagination .prev { float: right; }
  47. 47. CSSの子孫セレクタ .pagination { overflow: hidden; } .pagination-next { float: left; } .pagination-prev { float: right; }
  48. 48. CSS Specificity Graph Generator - ブログのCSS
  49. 49. CSSの詳細度の比較 詳細度が高い 詳細度が低い
  50. 50. LEGO.com Digital Designer Virtual Building Software http://ldd.lego.com/ja-jp/
  51. 51. LEGO.com Digital Designer Virtual Building Software http://ldd.lego.com/ja-jp/
  52. 52. CSSフレームワーク
  53. 53. SGDDを意識した スタイルガイドを作成
  54. 54. 「ただ作ればいい」という 問題ではない
  55. 55. 最初はしっかりスタイルガイドを作るが、 システムに組み込まれると、 あまり更新されなくなる
  56. 56. 特にPDFなどは更新されにくい Styleguide Driven Developmentは、コードとスタイルガイドを反復して書き換え ることが多いため、容易に書き換えられる工夫が必要。 またスタイルガイドのコードと運用しているコードが常に同じになる工夫も必要。
  57. 57. Styleguide Generator
 (Living Styleguide)
  58. 58. Styleguide Generator • KSS · Knyle Style Sheets • StyleDocco • Kalei - Style guide • hologram • Styledown など
  59. 59. Styleguide Genratorの特徴 • 主にCSSのコメントに記述する • 文章とHTMLの書き方 • 文章はmarkdownで記述する
  60. 60. CSSにコメントを書いて、 「再構築」すれば、 HTMLのスタイルガイドが生成される
  61. 61. hologramの記述(CSSファイル) /*doc --- title: Buttons name: button category: Base CSS --- Button styles can be applied to any element. Typically you'll want to use either a `<button>` or an `<a>` element: ```html_example <button class="btn btnDefault">Click</button> <a class="btn btnPrimary" href="http://trulia.com">Trulia!</a> ``` */
  62. 62. hologramの記述(CSSファイル) /*doc --- title: Buttons name: button category: Base CSS --- Button styles can be applied to any element. Typically you'll want to use either a `<button>` or an `<a>` element: ```html_example <button class="btn btnDefault">Click</button> <a class="btn btnPrimary" href="http://trulia.com">Trulia!</a> ``` */
  63. 63. hologramの記述(CSSファイル) /*doc --- title: Buttons name: button category: Base CSS --- Button styles can be applied to any element. Typically you'll want to use either a `<button>` or an `<a>` element: ```html_example <button class="btn btnDefault">Click</button> <a class="btn btnPrimary" href="http://trulia.com">Trulia!</a> ``` */
  64. 64. hologramの記述(CSSファイル) /*doc --- title: Buttons name: button category: Base CSS --- Button styles can be applied to any element. Typically you'll want to use either a `<button>` or an `<a>` element: ```html_example <button class="btn btnDefault">Click</button> <a class="btn btnPrimary" href="http://trulia.com">Trulia!</a> ``` */
  65. 65. hologramの見え方
  66. 66. hologramの記述(CSSファイル) /*doc --- title: Buttons name: button category: Base CSS --- Button styles can be applied to any element. Typically you'll want to use either a `<button>` or an `<a>` element: ```html_example <button class="btn btnDefault">Click</button> <a class="btn btnPrimary" href="http://trulia.com">Trulia!</a> ``` */
  67. 67. CSSにコメントを書くため コードとドキュメントが 乖離しにくい
  68. 68. Movable Type = Styleguide
  69. 69. ネタです
  70. 70. Movable Type = Styleguide MTをスタイルガイドにできないか、考えてみた 1. MTの記事を利用して、HTMLとCSSを投稿 2. CSSはstyle.cssに追記されるようにする 3. HTMLとCSSをドキュメントに反映 4. モジュールのデザインとコードは、ドキュメントで確認できる 5. Data APIを利用して、ドキュメントから直接CSSを修正する
  71. 71. さくっと作ってみた
  72. 72. おさらい
  73. 73. •Styleguideとは •Styleguide Driven Development(SGDD)とは •SGDDに適したStyleguide •Styleguide Generator(Living Styleguide)
  74. 74. Image Credits • Tokyo Night ¦ Flickr - Photo Sharing!
  75. 75. ありがとうございました

×