使い方

Node.js

  • node: >= 12.0.0
  • npm: >= 6.0.0

一人・初回の場合

  1. git clone https://github.com/arm-band/kiribi_ususama.git、またはKiribi UsusamaのGithubリポジトリからダウンロード
  2. npm i -D(またはnpm install --save-dev)
  3. npm start(npm i -Dしたファイルの再配置+初期設定画面生成・表示+初期設定完了後、gulp default実行)
    • このコマンドで生成したディレクトリやpackage-lock.json等はnpm run deleteで削除できます
  4. 2回目以降はnpm restartでブラウザ起動+自動リロード

複数人の場合

誰かがnpm startした後のリポジトリを引き継いで、自分が最初に作業する場合

  1. プロジェクトのリポジトリをgit clone
  2. npm i -D(またはnpm install --save-dev)
  3. npm run init(npm i -Dしたファイルの再配置)
  4. npm restart
  • deploy: 予め設定しておいたFTP情報を使用して、サーバへFTPアップロードを行います
  • guide: スタイルガイドを生成します(plugins.ymlstyleguidetrueに設定しておくこと)
  • setting: 初期設定画面を開きます
  • plugin: プラグインを読み込むためのscss, jsファイルを生成します
  • new: 開発端末の時刻を使用して新着記事を生成します
  • sitemap: distディレクトリ以下にあるHTMLファイルから、サイトマップを生成します
  • sitexml: distディレクトリ以下にあるHTMLファイルから、検索エンジン用のサイトマップ(XMLファイル)を生成します
  • search: distディレクトリ以下にあるHTMLファイルから、list.jsを使ったサイト内検索ページを生成します
  • prettier: Prettierによるコード整形を実施します
  • test: htmllint, eslint, stylelintによるチェックを実施します。また、同時にHTML中にhttp始まりのURLを検出します

test以外のコマンドは全てnpm runを前に付けること。

bin/config/ディレクトリにあるYAMLファイルの設定項目の一覧です。

plugins.ymlに関しては以下の「プラグイン一覧」をご参照ください。

config.yml

全般的な設定項目です。

  • commons: 共通設定
    • sitename: (str) サイト名
    • description: (str) サイトの説明(<meta description>)
    • year: (num) コピーライトに表示する年数
    • author: (str) コピーライトに表示する著者情報
    • url: (str) サイトのURL
  • param:
    • news: 新着情報に関する設定
      • title: (str) 新着情報一覧ページの名称を変更できます(e.g. 「新着情報」「ニュース」「更新履歴」)
      • baseurl: (str) 記事ページのベースURL(npm run newした際にFront Matterに代入される値)を変更できます
      • indexcount: (num) トップページに表示する新着情報の件数
      • newscount: (num) 新着情報一覧ページに表示する新着情報の件数(1ページ当たり)
      • wpapi: (str) WordPressの「投稿」一覧を取得するWP REST APIのURLを指定します (プラグイン)
    • ogp: (プラグイン)
      • ogpimage: (str) OGPで使用する画像ファイルのパス
      • twitteraccount: (str) OGPで使用するTwitterアカウント
      • newsthumbnail: (str) 新着情報一覧ページで表示する記事のサムネイル画像(デフォルト画像)
    • analytics: (str) アナリティクスID(Google Analytics用) (プラグイン)
    • searchconsole: (str) Verification Code(Google Search Console用) (プラグイン)
    • articlesns: 記事ページの各種SNSシェア用ボタンを表示するか否か (プラグイン)
      • twitter: (bool)
      • facebook: (bool)
      • hatena: (bool)
      • line: (bool)
      • pocket: (bool)
      • feedly: (bool)

commonvar.yml

ejs, Scssで共通で使用する設定です。

  • color: (str) 文字色
  • bg-color: (str) メインコンテンツ部分の背景色
  • main-color: (str) メインカラーの指定(サイトのメインカラーの他、テーマカラーでも使用します)
  • navbar-height: (str) ヘッダ(Bootstrapのナビゲーションバー)の高さの指定。アイキャッチ画像の上にmargin-topを追加したり、bodyタグにdata-offsetをセットします
  • footer-height: (str) フッタの高さ。l-upperクラスと合わせて、コンテンツ表示領域が画面高さに及ばない場合にフッタが下端に来るように調整します

ftpconfig.yml

FTPアップロード機能(プラグイン)で使用する値です。

  • user: (str) FTPのユーザIDの初期値です(実際に使用する値は別ファイルに生成します)
  • password: (str) FTPのパスワードの初期値です(実際に使用する値は別ファイルに生成します)
  • host: (str) FTPホストの指定です
  • port: (num) FTPポートの値です
  • localRoot: (str) ローカルのディレクトリ初期位置です
  • remoteRoot: (str) サーバのディレクトリ初期位置です
  • include: (array) アップロード対象の指定です
  • deleteRemote: (bool) アップロード前にサーバのデータを削除するか否かの指定です

bin/config/plugins.ymlで有効化/無効化できる機能の一覧です。

フラグ名 デフォルト値 説明
usephp false PHPを使用する場合、browserSyncにプロキシとPHPエンジンを指定します(別途.envを手動で設定する必要があります)
news true 新着情報(一覧、記事詳細ページ)を生成するか
ssl true SSLを使用してブラウザ表示するか
styleguide true スタイルガイドを生成するか。
gulpのデフォルトタスクには含まれていないので、別途タスクを走らせる必要があります。
また、別途src/scss/_plugins/styleguide/の中のscssファイルを編集してプロジェクトに沿ったスタイルガイドを作成する必要があります。
sitemap true dist/下のHTMLファイルから、サイトマップ(ユーザが閲覧するためのHTML)を生成します。
sitemap_xml true dist/下のHTMLファイルから、サイトマップ(クローラ用のXMLファイル)を生成します。
rss true 新着情報からRSSフィードを生成します。
※このフラグに関わらず、newsfalseの場合は生成されません。
ogp true 各ページのhead内にOGP用のタグを出力します。
ページ名や説明は各ejs内のパラメータ、サイト名やTwitterアカウント情報などは設定ファイル(bin/config/config.yml)を利用して、適宜OGPを設定します。
また、新着情報についてはフロントマターを使用して適宜設定できます。
analytics true Google アナリティクス用のタグをhead内に出力します。
※別途、設定ファイル(bin/config/config.yml)にUA-XXXXXXXXX-X形式のIDを指定してください。
searchconsole true Googleサーチコンソールの認証コード(google-site-verification)をに出力します。
※別途、設定ファイル(bin/config/config.yml)にIDを指定してください。
pagetop true 画面右下にページトップへ戻るボタンを設置します。
articlesns true 新着情報の記事詳細ページに各種SNSボタンを設置します。
themecolor true Android Chrome用のテーマカラーをhead内に出力します。
また、iPhoneなどのURLバーにも背景色を設定します。
safari true iOS Safari用のコードを出力します(background-size:cover;background-attachement:fixed;指定をしたアイキャッチ画像の巨大化)。
chrome true Google Chrome用のコードを出力します(ul, olの左側のパディングを打ち消す)。
fixedanchor_scss false 画面上端にヘッダメニューを固定した場合にアンカースクロールがズレる現象を回避するためのコードを追加します(cssバージョン)。
fixedanchor_jsと両方ともtrueにはしないでください。
fixedanchor_js true 画面上端にヘッダメニューを固定した場合にアンカースクロールがズレる現象を回避するためのコードを追加します(cssバージョン)。
fixedanchor_scssと両方ともtrueにはしないでください。
lightbox true Lightboxを使用します。
※画像への指定は別途行ってください。
slick true slickを使用します。
svghexagon false ヘッダメニューのハンバーガーの背景にsvgを使用して六角形を描画します。
imagemin true Gulpタスクで画像の容量を圧縮します。falseの場合、画像ファイルをそのままコピーします。
※Windows環境の場合、事前にPowerShellでnpm i -g windows-build-toolsを行う必要があります。
sitesearch false distディレクトリ以下にあるHTMLファイルから、list.jsを使ったサイト内検索ページを生成します
wordpress false src/contents下のMarkdownファイルからではなく、外部のWordPressサイトの「投稿」データを利用して新着情報を生成します
advanced_typo false Scssにfont-sizeline-heightmarginpaddingのベースを追加する。
この他に、.envDEV_MODEtrueに指定するとJavaScriptとcssのインラインコードとしてソースマップを出力します。

root/
  ├ .github/                  //Github Actionsを利用する際に使用します(通常は編集しない)
  ├ bin/                      //nodeスクリプトや設定ファイル(config/ 以外は通常は編集しない)
  │   ├ config/
  │   │   ├ commonvar.yml     //ejs, Scss, JSで共通で使い回す値(テーマカラーやヘッダの高さ等)
  │   │   ├ config.yml        //一般設定
  │   │   ├ ftpconfig.yml     //FTP設定テンプレート(編集しない)
  │   │   └ plugins.yml       //プラグイン使用フラグ設定
  │   ├ daishi/               //初期設定画面のソースコード一式
  │   ├ styleguide/           //スタイルガイド用テンプレート
  │   └ jsファイル             //タスクスクリプト
  ├ gulp/                     //gupタスク(通常編集しない)
  ├ src/
  │   ├ contents/             //(npm start で自動生成されます)新着記事Markdown格納ディレクトリ(1記事1ファイル)
  │   ├ ejs/
  │   │   ├ _plugins/         //プラグイン機能ディレクトリ
  │   │   ├ partial/          //ヘッダ・フッタ等のパーツ
  │   │   ├ util/             //表示・出力はされないejsファイル(パスの処理など)
  │   │   ├ about.ejs         //一般ページサンプル
  │   │   ├ article.ejs       //新着記事、詳細ページテンプレート
  │   │   ├ index.ejs         //トップページ
  │   │   └ news.ejs          //新着記事、一覧ページテンプレート
  │   ├ favicon/
  │   ├ img/                  //画像ファイル
  │   │   └ thumbnails/       //新着記事サムネイル画像格納ディレクトリ
  │   ├ js/
  │   │   ├ _plugins/         //プラグイン機能ディレクトリ
  │   │   └ app.js            //メインスクリプト
  │   ├ php/                  //PHPファイル用のディレクトリ
  │   ├ scss/
  │   │   ├ _plugins/         //プラグイン機能ディレクトリ
  │   │   ├ assets/           //(npm start で自動生成されます)Bootstrap等のフレームワークのコードの格納ディレクトリ(編集のため)
  │   │   ├ foundation/       //FLOCSSのディレクトリ構造で構成
  │   │   ├ layout/           //FLOCSSのディレクトリ構造で構成
  │   │   ├ object/           //FLOCSSのディレクトリ構造で構成
  │   │   │   ├ component/    //FLOCSSのディレクトリ構造で構成
  │   │   │   ├ project/      //FLOCSSのディレクトリ構造で構成
  │   │   │   └ utility/      //FLOCSSのディレクトリ構造で構成
  │   │   ├ contents.scss     //トップページ以外用Scss
  │   │   └ index.scss        //トップページ
  ├ .browserslistrc
  ├ .eslintrc.json
  ├ .gitignore
  ├ .htmllintrc
  ├ .stylelintrc.json
  ├ gulpfile.js
  ├ package.json
  ├ readme.md
  └ sample.env            //.envのサンプル
                

font-size

Lorem Ipsum (fs-1)
Lorem Ipsum (fs-2)
Lorem Ipsum (fs-3)
Lorem Ipsum (fs-4)
Lorem Ipsum (fs-5)
Lorem Ipsum (fs-6)
Lorem Ipsum (fs-7)
Lorem Ipsum (fs-8)
Lorem Ipsum (fs-9)
Lorem Ipsum (fs-10)

line-height

Lorem Ipsum (lh-1)
Lorem Ipsum (lh-2)
Lorem Ipsum (lh-3)
Lorem Ipsum (lh-4)
Lorem Ipsum (lh-5)

margin

Lorem Ipsum (u-my-1)
Lorem Ipsum (u-my-2)
Lorem Ipsum (u-my-3)
Lorem Ipsum (u-my-4)
Lorem Ipsum (u-my-5)
Lorem Ipsum (u-my-6)

padding

Lorem Ipsum (u-py-1)
Lorem Ipsum (u-py-2)
Lorem Ipsum (u-py-3)
Lorem Ipsum (u-py-4)
Lorem Ipsum (u-py-5)
Lorem Ipsum (u-py-6)

src/scss/foundation/_var.scss

gulpタスクが走ると_var.scssファイルが生成されます。このファイルはbin/config/commonvar.ymlから自動で生成されるため、編集しないでください。

なお、bin/config/commonvar.ymlgulpの機能でも少し触れていますが、ejs, Scss等で共通する変数をまとめたものです。編集の際にはこちらを編集するようにしてください。

relPath

ejsにrelPathという変数が指定できます。これは、現在のejsファイルの相対パスを示すものです。

ただし、一部のejsはテンプレートとして実際のディレクトリ構造とは異なるパスを出力するため、この変数で指定をしています。

ejsファイル 相対パスの深さ(上の階層に戻る個数) 実ファイルの設置場所(src/ejs/をルートとしてカウント) 備考
news.ejs 1 0 新着情報一覧ページのテンプレート
article.ejs 2 0 新着情報詳細ページのテンプレート
_plugins/sitemap/sitemap.ejs 0 2 サイトマップページのテンプレート
_plugins/sitemap/sitesearch.ejs 0 2 サイト内検索ページのテンプレート