ラック
Home > ブログ > 記事 > 2018年1月 > Kiribi Ususamaのアップデート

Kiribi Ususamaのアップデート

カテゴリ: ホームページ,プログラム,開発環境

以前作った自分用テンプレートを最近ちょこちょこメンテしていまして、いくつかアップデートをかけたのでまとめてメモ。

1. Scssコンパイラのプラットフォームを変更

rubyのScssから入門したので、そのままruby-sassを使っていました。

しかし、Scssのためだけにrubyを入れると環境が複雑になってしまうので、シンプルにするためにgulp-sassでnode.jsに切り替えました。

2. ブラウザのベンダープレフィックスを自動付与に

今まではScssのmixinでブラウザのベンダープレフィックスを手動で付与していましたが、今となってはもはやほとんど使わないですし、それをいちいち気にするのも面倒だったのでgulp-autoprefixerで自動付与に変更。

3. jsonファイルによるパラメータや更新履歴の管理

  • 新着情報をトップページと新着一覧の2つのページで表示
  • トップページでは件数を絞り、新着情報一覧はすべて表示

のような「新着情報」の構成をよくやるのですが、これを一元管理したいな、と。

ejsで別パーツに分離してテンプレートにしても基本的にやりたいことを実現できます。

しかし、この方法では

  • トップページではn件に件数を絞るが難しい
  • 「トップページではul, li要素、新着情報ページでは別のhtml要素として出力」のようなアウトプットの場合分けが難しい
    • htmlごとテンプレート化しているため

と、難点があるのでjsonファイルで管理しましょう、と。

gulpfile.js

//ファイル読み込みのため
var fs = require("fs");

//jsonファイル取得
var getCommons = function() {
    return JSON.parse(fs.readFileSync("src/ejs/common/var.json"));
}
var getNews = function() {
    return JSON.parse(fs.readFileSync("src/ejs/news/news.json"));
}

//ejsのタスクにjson読み込みを追加
gulp.task("ejs", () => {
    var commons = getCommons();
    var newsjson = getNews();
    gulp.src(
        [dir.src.ejs + "/**/*.ejs", "!" + dir.src.ejs + "/**/_*.ejs"] //_*.ejsはhtmlにしない
    )
    .pipe(plumber())
    .pipe(ejs())
    .pipe(ejs({commons, newsjson}))
    .pipe(rename({ extname: ".html" }))
    .pipe(gulp.dest(dir.dist.html));
});

//デフォルトタスクにjsonもウォッチするように追加
gulp.task("default", ["sass", "sass-watch", "ejs", "js", "imagemin", "connect-sync"], () => {
    gulp.watch(dir.src.ejs + "/**/*.json",["ejs"]);
//略
});

index.ejs

<%
param = {
//略
    "description": "gulpとEJSに対応したBootstrap Minimal Template",
    "newscount": 5
}
var commons = commons;
var newsjson = newsjson;
%>

<% for(var i in newsjson.news) {
    if(i < param.newscount) {
        var datetime = newsjson.news[i].time.replace(/\//g, "-");
        var idTime = newsjson.news[i].time.replace(/\//g, "");
%>
                        <li class="list-group-item">
                            <a href="./news.html#<%= newsjson.news[i].id %>-<%= idTime %>">
                                <h3 class="news_header"><%= newsjson.news[i].title %></h3>
                                <time class="news_createtime" datetime="<%= datetime %>"><%= newsjson.news[i].time %></time>
                                <p><%- newsjson.news[i].excerpt %></p>
                            </a>
                        </li>
<%
    }
}
%>

news.ejs

<%
var commons = commons;
var newsjson = newsjson;
%>

<% for(var i in newsjson.news) {
    var datetime = newsjson.news[i].time.replace(/\//g, "-");
    var idTime = newsjson.news[i].time.replace(/\//g, "");
%>
                    <article class="news_article" id="<%= newsjson.news[i].id %>-<%= idTime %>">
                        <div class="panel panel-default">
                            <div class="panel-heading">
                                <h3 class="news_header"><%= newsjson.news[i].title %></h3>
                            </div>
                            <div class="panel-body">
                                <div class="news_contents">
                                    <%- newsjson.news[i].content %>
                                </div>
                            </div>
                            <div class="panel-footer">
                                <time class="news_createtime" datetime="<%= datetime %>"><%= newsjson.news[i].time %></time>
                            </div>
                        </div>
                    </article>
<% } %>

news.json

{
    "news":[
        {
            "id": "releasenote",
            "title": "ver.2.3.0",
            "time": "2018/1/24",
            "excerpt": "jsonによるパラメータ管理機能を追加",
            "content": "<ul><li>jsonによるパラメータ管理機能を追加。<ul><li><code>/src/ejs/news/news.json</code>というjsonファイルで新着情報をトップページと更新履歴一覧ページに異なるhtmlで出力するサンプルを追加</li><li><code>/src/ejs/common/_var.ejs</code>で管理していた共通パラメータをjsonファイル(<code>/src/ejs/common/_var.json</code>)に変更</li></ul></li><li>ejsの変数の指定をチェーン方式に変更</li><li><code>.gitignore</code>追加</li></ul>"
        },
        {
            "id": "releasenote",
            "title": "ver.2.2.1",
            "time": "2018/01/17",
            "excerpt": "各種微調整",
            "content": "<p>各種微調整。</p>"
        },
//略
    ]
}

こんな感じの変更を加えて実装。

参考

ejsの構文で「あれ?」となったので。

json関連はこの辺りを参考にさせて頂きました。

4. スタイルガイドの生成

自分用のオレオレcssがいくつかあるので、スタイルガイドが欲しくなりました。

そこでスタイルガイドで検索して、frontnoteが簡単そうだったので導入してみることにしました。gulpで動かすので、入れたのはgulp-frontnoteですね。

gulpfile.js

//styleguide
var frontnote = require("gulp-frontnote");

var dir = {
//略
  docs: {
    html : './docs',
    css  : '../dist/css',
    js   : '../dist/js',
    img  : '../dist/img'
   }
 };

//styleguide
gulp.task("styleguide", () => {
    gulp.src(dir.src.scss + "/**/*.scss") // 監視対象のファイルを指定
        .pipe(frontnote({
            out: dir.docs.html,
            title: getCommons().commons.sitename,
            css: [dir.docs.css + "/index.css", "https://fonts.googleapis.com/css?family=Dancing+Script", "https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"],
            script: [dir.docs.js + "/lib.min.js", dir.docs.js + "/app.min.js"]
    }));
});

//デフォルトタスクに指定を追加
gulp.task("default", ["sass", "sass-watch", "ejs", "js", "imagemin", "connect-sync", "styleguide"], () => {
    gulp.watch(dir.src.scss + "/**/*.scss",["sass-watch", "styleguide"]); //scssファイル更新時スタイルガイドも更新する
//略
});

index.scss

/*
#styleguide
基本スタイル
```
<h1>見出し1</h1>
<h2>見出し2</h2>
<h3>見出し3</h3>
<h4>見出し4</h4>
<h5>見出し5</h5>
<h6>見出し6</h6>
<p>特に何も指定しないときの状態。<a href="#">リンク</a>。</p>
```
*/
/*
+#styleguide
メイン
実際はfont-size:16px;line-height:1.5;の指定は不要
```
    <main class="main" style="font-size:16px;line-height:1.5;">
        <section class="container-fluid" id="about">
            <div class="row">
                <article class="col-xs-12">
                    <div class="page-header">
                        <h2>What's this page? <small>About page</small></h2>
                    </div>
                    <p>自分用の小規模Webサイト制作用テンプレートです。</p>
                    <p>Scss, ejs, gulp使用。</p>
                    <h3>名前の由来</h3>
                    <p>Bootstrapを使っていることから。Bootstrapが電源投入、自動実行といった意味合いなので、何か物事を始めるイメージと火で火打石を連想。「Hiuchiishi」だと長いのと、これから事を始めるに当たって魔除けの意味も込めて切り火からKiribi。</p>
                    <p>gulpを使っている方はgulpが飲み込む、ごくごくと飲むという意味(だからシェイクのロゴなのですね)なので、火の神様というか仏教の明王で、一切不浄を飲み込み浄化する烏枢沙摩明王からお名前をお借りしました。</p>
                </article>
            </div>
        </section>
    </main>
```
*/

//略

スタイルガイドの指定は長いので割愛。

生成されたスタイルガイドのキャプチャ画像が次の2枚。

Frontnoteによるスタイルガイドのカラーパレット

Frontnoteによるスタイルガイド

今回gulp-frontnoteを使っていくつか気付いたことが。

  • スタイルガイドのページはscssファイルごと
  • スタイルガイドのページ自体に適用されているcssの方が優先順位が高ければそちらが優先される
    • bodyなど、クラス指定のない要素に指定したfont-sizeline-heightは打ち消される
  • 一方、position:fexedposition:absoluteのような指定はそのまま反映されるので、プレビューで表示される要素が明後日の場所にいる
    • スタイルガイドページのcssへの上書きやpositionの打ち消しはスタイルガイド用htmlタグの中にstyleで打ち消せば表示はされるが、本番で使うコードからは乖離していく……
  • Scssの変数はカラーパレットに使えない(?)
    • 本当に?
  • 「cssの指定はあるがクラスなどに指定しているわけではない(例: mixinにしているが、実際のサンプルでは使っている個所はない)」ものをどう記述するか
    • スタイルガイドページ用のテンプレートを作成すれば解決すると思われる

導入は簡単でしたが、既に「もう少しカスタマイズしたい」というところが発生しています。

この辺りを上手く解決できれば、長く付き合えそうです。

参考

タグ: css,javascript,html,bootstrap,Sass(Scss),gulp,ejs,Github,json,スタイルガイド,Frontonote,KiribiUsusama,Node.js

 



関連する記事一覧