主な特徴Main Features
Gulp
タスクランナーにGulpを採用し、下記の工程を一括で管理します。
- サイト名やメインカラー、ヘッダの高さなど、サイト全体で使用するパラメータをYAMLファイルで管理。集中管理することでHTML,Scssを横断して共通のパラメータを使用できます。
- メインカラー:
- HTML:
<meta name="theme-color">
- Scss:メインカラーの指定
- HTML:
- ヘッダの高さ:
- HTML:
<body data-offset="80">
- Scss:ヘッダの高さ分アイキャッチ画像の指定を調整
- HTML:
- メインカラー:
gulp
:既定のブラウザを起動、自動でプレビューを表示。以降、コードを編集する度に自動リロードgulp taskejs
:ejsからHTMLへのコンパイルgulp sass
:Scssからcssへのコンパイル+minify+ベンダープレフィックスの自動付与gulp js
:JavaScriptのminifygulp 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と実際のコンテンツ内容から生成します。
この他にも、多数の機能があります。
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へのシェアボタンやブックマークレットも配置しています。
- はてなブックマーク
- LINE
- 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により、スタイルガイドを生成できます。スタイルガイドは、要素やカラーパレットなど、コーディング上のルールなどを集めたものです。スタイルガイドを生成することで、メンテナンス性やチームでのコミュニケーションの効率化を図ることができます。
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ファイル)を生成します。
サイト内検索(Plugin)
コマンド1つで、dist
ディレクトリ以下にあるHTMLファイルから、list.jsを用いたサイト内検索ページを生成します。
Lint & Prettier
コマンド1つで、各種Lint(htmllint, ESLint, Stylelint)によるコードのチェックを実行できます。また、Prettierによるコードフォーマットも可能です。
連絡先情報
bin/config.yml
のパラメータを使って、郵便番号・住所・電話番号を一元管理できます。また、郵便番号の前に「〒」マークを、電話番号の前に「TEL:」を自動付与します。
住所・連絡先のサンプル
※住所・郵便番号・電話番号はいずれもダミーです。