背景をつけやすくするために、.c-media__imageに指定していた余白を.c-media__boyに変更する。

URLの指定があるソーシャルボタンには変数の指定ができるようにする。

基本は1つのCSSファイルにまとめたい。でも、ページ独自のデザインが多い場合は専用のCSSファイルにしたほうが運用しやすくなる。

• ディレクトリを維持しながらdest
• 各index.ejsに出力するかのオプションを追加する

.pipe(browserSync.reload({stream: true}));

を渡してストリーム（ブラウザの自動リロード）に対応する。

グローバルナビとかはルートパスで書いて、カレントは引数でキーワードを渡したりする。

EJSの場合、インクルードするパスは相対パスでないといけない。

CSSファイルと同様に、JSファイルも個別ページ専用で作れるようにする。

gulp-hologram単体では動作しないみたい。npm runでもgulp hologramでもエラーになる。

• Gemfileを作ってバージョンを管理する。
• npmかgulpか、どちらかに統一する（gulpで全部するようにしたほうが分かりやすい？）

レスポンシブな画像のスタイル指定に使う

first-childをより限定的なfirst-of-typeに変更。mediaオブジェクトをdisplay:table;からdisplay:blockに変更。などなど

現状はサイト共通のデータのみをjsonで取得している。
これを記事部分でもjsonで管理して、forEachなどで出力できるようにする。

参考リンク frontconf2016

現状ではファイル名がそのまま、ナビゲーションの名前になっている。必ずしも一致するものではないので、それぞれ指定できるようにする。

• fileNameはファイル名
  pageNameはナビゲーションの名前

index.ejsファイルの変数をオブジェクトで定義

• assetsなしからassetsありに変更。出力するディレクトリを指定しないことで処理を簡潔にする。
• 読み込むCSSファイルをミニファイなしとありを一括で変更できるようにする。

クライアントが変更してもいいCSSファイルとして残したい場合に備えて。

個別ページ用は圧縮しなくても、そこまで影響がないと考えられる（容量自体がそのその小さいので）。

IEはすべてのバージョン（IE11まで）メニューバーのアイコンから互換性モードを変更することができる。
互換性モードにしてしまうとIE7相当のレンダリングになるので、機能が大幅に削られ、レイアウトが崩れる可能性が大きくなる。

<meta http-equiv="X-UA-Compatible" content="IE=edge">

をhead要素に追加して、常に最新バージョンのレンダリングになるように指定する。

日本語指定はモダンブラウザで不要。

.c-media--revの指定が重複している

jQueryはIE9以上なのに、head要素内はIE8以下の対策もしている。
新規案件はIE9以上になると想定して、IE8以下の対応をすべてやめる。

• X-UA-Compatible
• modernizr

• 2箇所で指定しているので記述をまとめたい
• 対応ブラウザの指定を複数できるようにしたい

index.ejsにaddClassという変数を定義して任意のCSSファイルを作成できるようにしていた。
ただし、Sassのコンパイルはassetsディレクトリを指定していたので、コンパイルされていなかった。

gulpfile.jsでどのように設定すればできるのか分からないので一旦削除しておく。
developディレクトリとreleaseディレクトリの構造を変えている（developにはassetsがある）が、同じにしておいて方が指定しやすくなる？

<meta name="format-detection" content="telephone=no">

ルートから見て3つ目の階層は親ページのpageCurrentを指定する。

include()のメリット

• 第二引数でパラメータを渡せる
• パスを変数で渡せる

テンプレートエンジンEJSで使える便利な構文まとめ - Qiita

gulp --tasksで設定しているgulpタスクの一覧が出せる。

下記のdescriptionプロパティを設定すると説明を加えることができる。

タスク名.description = '';

component/iconなど案件で使用しなかったCSSを削除・整理する。

• component/iconを削除
• project/iconを追加して、アイコンフォント用にする
• @mixinの見直し

jsファイルを各ページに追加できるようにしている。
これを依存関係を保った状態で連結する。ファイル数の候補は2つ。

• jQueryはCDN、jQueryプラグインを連結、自作のjsやプラグインのトリガーを連結
• jQueryはCDN、jQueryプラグインと自作のjsとプラグインのトリガーを連結

連結にはgulp-userefをお勧めしてもらったので試してみる。
基準はなるべく学習コストがかからず、効果のあるもの。パッケージのダウンロード数とアップデート頻度。

Hologramでnpmで統一できるのが望ましい。

• インデントの整形
• コメントの整理

Sassの見直し。別のリポジトリで作成したものをコピペ。

ルートから見たパスは

var url = filename.split(site.developDir)[filename.split(site.developDir).length -1].replace('.ejs','.html');

のように取得できる。develop/はルートディレクトリで変数化する必要がある。

そのファイルから見た相対パスの取得は

var path = '../'.repeat([url.split('/').length -1]);

で取得できる。site.developDirはsite.jsonで開発用のディレクトリ名を定義しておく。

基本的に考え方は変わらないと思うけど、FLOCSSの方が現場で使いやすい構成だと思う。例えばProjectレイヤーはITCSSのComponentレイヤーより馴染みやすいし、LayoutレイヤーはITCSSにはない。

現状ではコンポーネント指向なCSSは難しいし、ほとんどの場合にはうまく適応できないと思う。このテンプレートは現場で使いやすいものにしたい。

定義している変数や関数、スタイルはそのまま残す。

サイト共通のキーワードは定義できるけど、個別ページのキーワードを指定できない。

現状では画質優先でファイルサイズの削減をしている。

大きめの画像を多用する場合に、もっと大幅に削減する可能性がある。特にjpgとpngを重点的に。

jsonの取得のあとにエラー通知が来るように。

現状では連結のみ

テンプレートファイルを触らなくても、通常のCSSファイルとミニファイを変更できるようにする。

1. gulpfile.jsにミニファイとリネームのパッケージ追加
2. gulpfile.jsにミニファイの処理追加
3. _index.ejsにCSSファイル名を指定する変数追加
4. _head.ejsに追加した変数と紐付ける処理するを追加

_footer.ejsのサンプルコードを最新版にする

directionプロパティで反転させた要素で、テキスト・画像を画像・テキストにした場合に画像の右側にマージンが入ってしまう。テキストにwidth:100%;を指定すると解消した。

• .c-media__itemをc-media__imageと.c-media__bodyに変更
• 反転された.c-media__bodyにwidth:100%;が指定されるように変更