Pug(Jade)を使って コンテンツ書き出しの 時短をしよう
- 2. 2 エクスコード株式会社 ? The Company に事務所 フロントエンドエンジニア ? 主にマークアップ ? webアプリ制作もはじめました NEW グロースハッカー ? KAIZEN PLATFORM 東区フロントエンド勉強会 ? 東市民センター（JR千早駅前） 末包 俊道（すえかね としみち） Photo: 鍋坂 樹伸（サン?スタジオ）
- 7. 7 pugjs.org
- 11. 11 gulpjs.com
- 12. 12 + = HTML
- 13. 13 + = HTML で書いて で操作
- 14. 14 Pugは何が違うのか
- 15. 15 p | text text text … <p> text text text … </p> Pug HTML ? タグの<>を省略できる
- 16. 16 p | text text text … <p> text text text … </p> Pug HTML ? タグの<>を省略できる ? 閉じタグが不要
- 17. 17 p.info#info | text text text … <p class="info" id="info"> text text text … </p> Pug HTML ? タグの<>を省略できる ? 閉じタグが不要 ? クラスやIDを簡単に振れる
- 18. 18 ? タグの<>を省略できる ? 閉じタグが不要 ? クラスやIDを簡単に振れる ? インデントがタグの階層 section ul li | My list <section> <ul> <li>My list</li> </ul> </head> Pug HTML
- 19. 19 - var title = "My Page" head title | # <head> <title>My Page</title> </head> Pug HTML ? タグの<>を省略できる ? 閉じタグが不要 ? クラスやIDを簡単に振れる ? インデントがタグの階層 ? 変数を使える
- 20. 20 ? タグの<>を省略できる ? 閉じタグが不要 ? クラスやIDを簡単に振れる ? インデントがタグの階層 ? 変数を使える ? ファイル分割できる _layout.pug _header.pug _footer.pug index.pug
- 21. 21 ? タグの<>を省略できる ? 閉じタグが不要 ? クラスやIDを簡単に振れる ? インデントがタグの階層 ? 変数を使える ? ファイル分割できる 追加するページは、 ここだけ書けばよい _layout.pug _header.pug _footer.pug index.pug
- 25. 25 チーム制作の事例
- 26. 26 医療機関 （CMS / 20ページ / 1週間）
- 27. 27 ? CMS導入 ? オリジナルテーマ ? 医師の担当表をCMS内に持ち 随時更新したい ? 約30ページ ? 納期は約1週間 医療機関（CMS / 20ページ / 1週間） SAMPLE
- 28. 28 医療機関（CMS / 20ページ / 1週間） 納期が非常に厳しいSAMPLE
- 29. 29 医療機関（CMS / 20ページ / 1週間） チームで解決しようSAMPLE
- 30. 30 医療機関（CMS / 20ページ / 1週間） ? 共通部分はこちらで作成し、コ ンテンツ部分をお願いしたい ? その間に医師担当表などCMS まわりを終わらせる ? ファイルの上書きは避けたい ? OSが混在 ? 作業環境も異なる SAMPLE
- 31. 31 Pug Sass gulp 医療機関（CMS / 20ページ / 1週間） git SAMPLE
- 32. 32 HTML CSS 整形 医療機関（CMS / 20ページ / 1週間） 制作物の同期 SAMPLE
- 33. 33 医療機関（CMS / 20ページ / 1週間） トップページ 下層ページ テーマ 共通部分 CMSまわり SAMPLE
- 34. 34 医療機関（CMS / 20ページ / 1週間） 納期内に無事納品SAMPLE
- 35. 35 教育機関 （CMS / 150ページ / 6施設 / 5週間）
- 36. 36 ? CMS導入 ? オリジナルテーマ ? 6施設 / 6サイト ? マルチサイト ? サイトごとに要件が異なる ? 全体で約150ページ ? 納期は約5週間 教育機関（CMS / 150ページ / 6施設 / 5週間） SAMPLE
- 37. 37 納期が相当に厳しい 教育機関（CMS / 150ページ / 6施設 / 5週間） SAMPLE
- 38. 38 チームで解決しよう 教育機関（CMS / 150ページ / 6施設 / 5週間） SAMPLE
- 39. 39 ? 施設ごとに雛型を作成し、コン テンツ部分をお願いしたい ? 人数が多いので進行管理で問題 が出そう ? コンフリクトとかで時間を取り たくない 教育機関（CMS / 150ページ / 6施設 / 5週間） SAMPLE
- 40. 40 Pug Sass gulp gitスプレッドシート 教育機関（CMS / 150ページ / 6施設 / 5週間） SAMPLE
- 41. 41 HTML CSS 整形 制作物の同期担当パートの管理 教育機関（CMS / 150ページ / 6施設 / 5週間） SAMPLE
- 42. 42 教育機関（CMS / 150ページ / 6施設 / 5週間） ? 各人のリソースを確認 ? スプレッドシートで担当パート を細かく管理 ? 1ページ＝1Pug ? 1グループ＝1Sass ? クラス名にはページ専用接頭辞 ? コンフリクトしようがないよう にする SAMPLE
- 43. 43 Pug テーマ Scss 共通部分 Pug x 150 Sass x 50 x 6 教育機関（CMS / 150ページ / 6施設 / 5週間） 雛型 SAMPLE
- 44. 44 納期内に無事納品 教育機関（CMS / 150ページ / 6施設 / 5週間） SAMPLE
- 45. 45 金融機関 （HTML / 80ページ / 8週間）
- 46. 46 ? 静的HTML ? ページごとにCSSを分ける ? 実機検証20種類 ? 全体で約80ページ ? 納期は約8週間 ? システムに取り込む 金融機関（HTML / 80ページ / 8週間） SAMPLE
- 47. 47 金融機関（HTML / 80ページ / 8週間） ? HTMLを納品→システム会社が 組み込みという流れ ? HTML作成とシステム組み込み は同時進行 ? コーディングが遅れるとシステ ム側の時間が無駄になる SAMPLE
- 48. 48 金融機関（HTML / 80ページ / 8週間） 実機検証20種類の 負荷が読めない SAMPLE
- 49. 49 金融機関（HTML / 80ページ / 8週間） チームで解決しようSAMPLE
- 50. 50 金融機関（HTML / 80ページ / 8週間） Pug Sass gulp git スプレッドシート 実機とブラウザ20種類 SAMPLE
- 51. 51 金融機関（HTML / 80ページ / 8週間） HTML CSS 整形 制作物の同期 進行管理 実機検証 SAMPLE
- 52. 52 金融機関（HTML / 80ページ / 8週間） Pug Sass 52 実機検証 細部の調整?納品 SAMPLE
- 53. 53 金融機関（HTML / 80ページ / 8週間） 53 遅延なく都度納品SAMPLE
- 57. 57 チーム制作には必要不可欠
- 58. 58 で、実際どうするの？
- 61. 61 _header.pug pug _layout.pug conf.json outline.pug index.pug _footer.pug dev package.json gulpfile.js gulp-pug … pugファイル一式 … npm install で入れるパッケージの情報 … gulp で実行するタスク
- 62. 62 $ cd pug $ npm install Node.js 導入済みの方は 実際に試していただけます。
- 63. 63 Demo
- 64. 64 いかがでしょうか？
- 65. 65 今回の目的
- 69. 69 <h1>GULP PUG Dummy へようこそ</h1> <p><img src=/slideshow/pugjade/77252744/"/cms/themes/original/assets/img/cover.jpg"></p> <p>あなたは 1,215 人目の訪問者です。</p> <section class="topics"> <h2>トピックス</h2> <ul> <li><a href="#">採用情報を更新しました</a></li> <li><a href="#">年末年始休業のお知らせ</a></li> <li><a href="#">夏季休業のお知らせ</a></li> </ul> </section>
- 70. 70 デモ （Pug → HTML / Pug → CMS用テキスト）
- 72. 72 _header.pug pug _layout.pug conf.json outline.pug index.pug _footer.pug dev package.json gulpfile.js gulp-pug … pugファイル一式 … npm install で入れるパッケージの情報 … gulp で実行するタスク
- 73. 73 _header.pug pug _layout.pug conf.json outline.pug index.pug _footer.pug dev package.json gulpfile.js gulp-pug … pugファイル一式 … npm install で入れるパッケージの情報 … gulp で実行するタスク conf-cms.json
- 74. 74 $ cd pug-cms $ npm install Node.js 導入済みの方は 実際に試していただけます。
- 75. 75 Demo
- 79. 79 ありがとうございました