特徴

主な特徴Main Features

Gulp

タスクランナーにGulpを採用し、下記の工程を一括で管理します。

  • サイト名やメインカラー、ヘッダの高さなど、サイト全体で使用するパラメータをYAMLファイルで管理。集中管理することでHTML,Scssを横断して共通のパラメータを使用できます。
    • メインカラー:
    • ヘッダの高さ:
      • HTML:<body data-offset="80">
      • Scss:ヘッダの高さ分アイキャッチ画像の指定を調整
  • gulp:既定のブラウザを起動、自動でプレビューを表示。以降、コードを編集する度に自動リロード
  • gulp taskejs:ejsからHTMLへのコンパイル
  • gulp sass:Scssからcssへのコンパイル+minify+ベンダープレフィックスの自動付与
  • gulp js:JavaScriptのminify
  • gulp imagemin:画像の圧縮(プラグイン有効時)

Bootstrap

cssフレームワークにBootstrapを採用。レスポンシブWebデザインを簡単に実現できます。また、プレーンな Bootstrap と比べて日本語用に若干調整を行っています。

News

新着情報をテンプレートで一括管理。Gulpを使って、src/contents/以下のMarkdownファイルから、新着一覧ページ・各記事ページを自動生成します。

  • news.ejs:新着情報一覧ページテンプレート。1ページ当たりの記事の表示数はconfig.ymlのparam:news:newscount:で変更できます。また、1ページ当たりの記事の表示数を越えた場合はnews1.html,news2.html,とナンバリングして必要な分だけ自動生成します。ページネーションも自動的に生成します。
  • article.ejs:個別記事ページテンプレート。Markdownファイルの数だけ記事ページとして生成します。内容はMarkdownのFront-matterと実際のコンテンツ内容から生成します。

Initial Settings

yarn startで初回のスクリプトを実行すると、下記の行程を順次自動的に行います。

  1. リソースファイルの配置
  2. Expressにより初期設定画面を起動、ブラウザを自動起動して初期設定画面を表示
  3. 初期設定画面ではサイト情報やOGP、新着情報生成の有無、サーバアップロードのためのFTP情報の設定等を設定できます
  4. 設定画面からボタンを押して進むと、GulpによりWebサイトのコードを生成+自動でプレビューを表示、自動リロードへ

この他にも、多数の機能があります。

Scss

Normalize(Plugin)

特定のブラウザで気になる現象をある程度抑止します。

  • Chrome系:-webkit-padding-startを抑止
  • iOS:background-size:cover;background-attachement:fixed;を指定した背景画像で、画像の一部が異常に拡大されて表示されてしまう現象があります。この現象に対して、bowserによるユーザーエージェント判定を行い、 iOS のみbackground-attachement:scroll;に変更して現象を回避します

Vendor Prefix

Scssからcssへのコンパイル時に、自動でベンダープレフィックスを付与します。デフォルトでは

  • 基本最新から2世代
  • iOS:10.0以上
  • Android:5.0以上

Brand Colors

brand-colorsを使用し、メジャーなツール・サービスのブランドカラーを指定することができます。

SNS,RSS

SNS(Plugin)

新着情報の記事ページには、各種SNSへのシェアボタンやブックマークレットも配置しています。

  • Twitter
  • facebook
  • はてなブックマーク
  • LINE
  • Pocket
  • Feedly

OGP(Plugin)

config.yml等の情報から、OGP(Open Graph Protocol)を設定します。SNSにWebサイトのリンクをシェアした際に、画像やカード形式のレイアウトで装飾されたデザインとなるため、タイムライン上で目を惹きやすくなります。

RSS(Plugin)

新着情報からRSSフィードを自動生成します。

その他の機能Other Functions

Theme Color(Plugin)

Android Chromeのアドレスバーの背景を、Webサイトのメインカラーで彩ります。

また、iPhoneのアドレスバーの背景色も指定できます。

Styleguide(Plugin)

Frontnoteにより、スタイルガイドを生成できます。スタイルガイドは、要素やカラーパレットなど、コーディング上のルールなどを集めたものです。スタイルガイドを生成することで、メンテナンス性やチームでのコミュニケーションの効率化を図ることができます。

Copyright year

フッタのコピーライトの年表示はconfig.ymlで管理されています。指定した年<現在の年になると、自動的に「指定年数(西暦4桁)-現在の年(左同)」という形式に変化するため、手動で年を打ち直す必要はありません。

Parts

ejs,Scssは「ヘッダ」「フッタ」のような構成ごとのパーツに分解されています。なるべく共通部分はパーツとして流用できるようにしています。

Google Analytics(Plugin)

config.ymlでIDを指定することで、Google AnalyticsのJavaScriptコードを出力します。

Google Search Console(Plugin)

config.ymlでIDを指定することで、GoogleサーチコンソールのVerifyコードを出力します。

Sitemap(Plugin)

コマンド1つで、distディレクトリ以下にあるHTMLファイルから、サイトマップを生成します。

Sitemap(XML)(Plugin)

コマンド1つで、distディレクトリ以下にあるHTMLファイルから、検索エンジン用のサイトマップ(XMLファイル)を生成します。

Lint & Prettier

コマンド1つで、各種Lint(htmllint, ESLint, Stylelint)によるコードのチェックを実行できます。また、Prettierによるコードフォーマットも可能です。

連絡先情報

bin/config.ymlのパラメータを使って、郵便番号・住所・電話番号を一元管理できます。また、郵便番号の前に「〒」マークを、電話番号の前に「TEL:」を自動付与します。

住所・連絡先のサンプル

アルム＝バンド
※住所・郵便番号・電話番号はいずれもダミーです

001-0000 北海道札幌市北区丸山町字辛亥五ノ村30-90

000-000-0000

※住所・郵便番号・電話番号はいずれもダミーです。

トップページへ戻る