使い方

動作要件System Requirement

Node.js

  • node: >= 16.14.0
  • npm: >= 8.5.0
  • yarn: >= 1.22.4

使い方Get Started

一人・初回の場合

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

複数人の場合

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

  1. プロジェクトのリポジトリをgit clone
  2. yarn
    • 8.0.0-4.4.0以上はnpm i -D, npm install --save-devは非推奨です。
  3. yarn run init(yarnしたファイルの再配置)
  4. yarn restart

コマンド一覧Commands

  • deploy: 予め設定しておいたFTP情報を使用して、サーバへFTPアップロードを行います
  • guide: スタイルガイドを生成します(plugins.ymlのstyleguideをtrueに設定しておくこと)
  • 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以外のコマンドは全てyarn runを前に付けること。

設定ファイルの内容Settings

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

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

config.yml

全般的な設定項目です。

  • commons: 共通設定
    • sitename: (str) サイト名
    • description: (str) サイトの説明(<meta description>)
    • year: (num) コピーライトに表示する年数
    • author: (str) コピーライトに表示する著者情報
    • url: (str) サイトのURL
    • rootpath: (str) サイトのルートパス
    • titleseparator: (str) `title`タグのサイト名とページ名の区切り文字の指定
    • address: (str) 住所情報
    • postalcode: (str) 郵便番号情報
    • tel: (str) 電話番号情報
  • param:
    • news: 新着情報に関する設定
      • title: (str) 新着情報一覧ページの名称を変更できます(e.g. 「新着情報」「ニュース」「更新履歴」)
      • baseurl: (str) 記事ページのベースURL(yarn 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で共通で使用する設定です。

  • us-color: (str) 文字色
  • us-bg-color: (str) メインコンテンツ部分の背景色
  • us-main-color: (str) メインカラーの指定(サイトのメインカラーの他、テーマカラーでも使用します)
  • us-navbar-height: (str) ヘッダ(Bootstrapのナビゲーションバー)の高さの指定。アイキャッチ画像の上にmargin-topを追加したり、bodyタグにdata-offsetをセットします
  • us-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) アップロード対象の指定です
  • exclude: (array) アップロード除外対象の指定です
  • deleteRemote: (bool) アップロード前にサーバのデータを削除するか否かの指定です

プラグイン一覧Plugins

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フィードを生成します。
※このフラグに関わらず、newsがfalseの場合は生成されません。
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バーにも背景色を設定します。
ios true iOS 用のコードを出力します(background-size:cover;background-attachement:fixed;指定をしたアイキャッチ画像の巨大化の不具合を回避)。
chrome true Google Chrome用のコードを出力します(ul, olの左側のパディングを打ち消す)。
fixedanchor_scss true 画面上端にヘッダメニューを固定した場合にアンカースクロールがズレる現象を回避するためのコードを追加します。
lightbox true Luminousを使用します。
※画像への指定は別途行ってください。
swiper true Swiperを使用します。
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-size、line-height、margin、paddingのベースを追加する。
noscript true 各ページにnoscriptタグを追加し、JavaScriptの有効化を求めるメッセージを出力します。
※src/scss/noscript.scssでデザイン調整をしています。./dist/css/noscript.cssは本フラグにより自動的に出力する/しないを切り替えます。

DEV_MODEの効果Effect of DEV_MODE

フラグ名 効果
dev
  • JavaScript, Scss: インラインコードとしてソースマップを出力
  • EJS: 各種ページで meta name="robots" に noindex, nofollow を出力、 Google Analytics のタグと Google Search Console の google-site-verification 属性を出力しないように抑制
  • ftpdeploy: アップロード処理をスキップしてアップロードしないようにします
demo
  • EJS: 各種ページで meta name="robots" に noindex, nofollow を出力、 Google Analytics のタグと Google Search Console の google-site-verification 属性を出力しないように抑制
prod 抑制なし

ディレクトリ構造Directory Structure


root/
    ├ .github/                               // Github Actions を利用する際に使用します(通常は編集しない)
    ├ bin/                                   // node スクリプトや設定ファイル( config/ 以外は通常は編集しない)
    │    ├ config/
    │    │    ├ commonvar.yml                // EJS, Scss, JavaScript で共通で使い回す値(テーマカラーやヘッダの高さ等)
    │    │    ├ config.yml                   // 一般設定
    │    │    ├ ftpconfig.yml                // FTP 設定テンプレート(編集しない)
    │    │    └ plugins.yml                  // プラグイン使用フラグ設定
    │    ├ daishi/                           // 初期設定画面のソースコード一式
    │    ├ styleguide/                       // スタイルガイド用テンプレート
    │    └ *.js                              // タスクスクリプト
    ├ gulp/                                  // Gulp タスク(通常編集しない)
    ├ src/
    │    ├ assets/                           // アセットファイル( pdf, Word, Excel, PowerPoint ファイル想定)格納ディレクトリ
    │    ├ contents/                         // (yarn 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/                    // プラグイン機能ディレクトリ
    │         ├ foundation/                  // FLOCSS のディレクトリ構造で構成
    │         ├ global/                      // Dart Sass に際して各Scssで使用するグローバル変数などの置き場所
    │         │    ├ bootstrap/              // CSSフレームワーク 読み込み用ファイルの置き場所
    │         │    ├ _framework.scss         // CSSフレームワーク 読み込み
    │         │    ├ _index.scss
    │         │    ├ _mixin.scss
    │         │    ├ _scss_variables.scss    // Scssのみで使用する変数
    │         │    └ _var.scss               // bin/config/commonvar.yml から自動生成。 EJS と共有している変数
    │         ├ layout/                      // FLOCSS のディレクトリ構造で構成
    │         ├ object/                      // FLOCSS のディレクトリ構造で構成
    │         │    ├ component/              // FLOCSS のディレクトリ構造で構成
    │         │    ├ project/                // FLOCSS のディレクトリ構造で構成
    │         │    └ utility/                // FLOCSS のディレクトリ構造で構成
    │         ├ contents.scss                // トップページ以外用 Scss
    │         ├ index.scss                   // トップページ
    │         └ noscript.scss                // JavaScript 無効時に表示する通知要素のための Scss
    ├ .browserslistrc                        // Autoprefixer 等の設定ファイル
    ├ .eslintrc.json                         // Eslint の設定ファイル
    ├ .gitignore
    ├ .htmllintrc                            // htmllint-cli の設定ファイル
    ├ .prettierrc                            // Prettier の設定ファイル
    ├ .stylelintrc.json                      // Stylelint の設定ファイル
    ├ gulpfile.js
    ├ package.json
    ├ readme.md
    ├ sample.env                             // .envのサンプル
    └ weppack.config.js                      // Webpack の設定ファイル

advanced_typoのクラスと効果一覧advanced_typo

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)

その他機能Other Features

src/scss/global/_var.scss

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

なお、bin/config/commonvar.ymlはGulpの機能でも少し触れていますが、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 サイト内検索ページのテンプレート
トップページへ戻る