- はじめに
- 「Boilerplate」v.2の動かし方
はじめに
冒頭いきなりですが、最初に少しお注意点を知らせします。
注意1
この記事はブログのカスタマイズが超簡単になる方法ではりません。超快適になる方法ですのでお間違えないようお願い致します。
超快適になる方法ですが、一言でいうと「SCSS+Browsersync」の活用です。
実際に出来るようになった状態のスクショをお見せします。
下の画像はSCSSを保存すると自動でCSSにコンパイルされ、自動でブラウザがリロードされる様子です。（画像は軽くするためGIFデータは間引いてます）
今までCSSを修正しブラウザを更新するまで最短で約30秒かかりましたが、たったの1秒以下になります。もう感激ものです。
おススメの読者
この記事の方法はブログのカスタマイズ経験ゼロ＆黒画面が苦手なガチな「初心者」にはハードルが高いと思います。
そのような方はあわてて自動化する必要はありません。
記事を書くことに専念し、カスタマイズに興味がで出てきたら弄ってみて下さい。
「ブログをもっとカスタマイズしたけどガッツリやるのは面倒くさい」と思っている「初心者」や、SCSSに興味を持っている「初心者」にはオススメです。
自動化できるまで少し大変ですが、一度環境を作ってしまえば、超ラクチンなので後戻りできなくなるかも知れません。時間を作って是非一度お試し下さい。
ではここに至った背景を説明します。
なぜカスタマイズするのか
サイト閲覧者の利便性・操作性を向上し、かつ独自のカラーを出すことで他のブログと差別化したいからです。
と言うのは建前で、今のデザインに少し飽きてきたからです。
自分自身がメインの閲覧者なので、多少センスが悪かろうと自分好みにカスタマイズできれば、ブログを少しでも長く続けることが出来るのではと思ってます。
また、前々から少し気になっていたことが3つあります。
その１
過去このブログで「表示スピードが速いデザインとは」や「あなたのサイトは問題ゼロのRWDですか？」とか、自サイトのことは脇に置いといて偉そうに解説しました。
たくさんの方からお褒めの言葉を頂いたのですが、大きな改善は出来てません。
書きっぱなしで自分で実践してないと単なる評論家ですよね。
その２
10月29日にブログ名を「Bumble-Bee」から「after work Labo」に変更したのですがサイトのデザインは変えませんでした。
ブログ名変更後、時間が経つにつれ「何の為に変えたんだっけ？」「意味あったかなー？」と思うようになりました。（汗）
店構えや店内の調度品・メニューは全く変わらないいのに店名だけ変わるのは、やっぱり変ですよね。
サイトの大幅な改変ははてなブログのSSL化に合わせてやればいいやと後回しにしてましたが、いつ移行するのか不明確です。
その３
この記事で説明する自動化は、細かい方法は違いますがすでに先人が実施済で下記サイトでやり方が公開されてます。
クリアメモリさん
偽名さんblog.gmork.in
最初先人の方法を見た時「あっ。これ素人にはムリ。Ｗindowsで出来るかわからない」とあっさり見送りました。
Ｗindowsで実践したはてなユーザの登場を待ちましたが、そのような記事を見つけることはできませんでした。
どんなデザインに変えたいのか？
シンプルでモバイルファーストなレスポンスシブデザインを目指します。トップページはカード型のカスケードレイアウトで記事は1列1カラムをイメージしてます。
理由はブログの閲覧は圧倒的にモバイル端末が多いからです。
今利用しているテーマはminimalgreen様の「Minimal Green」です。レスポンシブデザインですが2カラムなので”あトん”の理想とは一致してません。
1カラムへの修正は可能だと思いますが、上手く行かなかった時に作者さんに問い合わせるのは避けたいので「Minimal Green」のさらなる大改造は断念しました。
理想に近い投稿テーマの探索
はてなブログのテーマストア内をリサーチしてみました。
テーマ ストア - はてなブログ
はてなブログのテーマストアには241個のテーマが公開されてます。（2017年12月時点）
1カラムのテーマは74個で全体の約31％でした。その中でライセンス上改変できるテーマは31個で全体の約13％です。更にレスポンシブ対応のテーマに絞ると9個で全体の約4％でした。
最後にこの9個の中で理想に一番近いと思ったデザインは、rokuzenudonさんが公開したテーマ「Thumbnail」でした。
「Thumbnail」の解説を読むと、はてなブログのカスタマイズ用テンプレート「Boilerplate」をベースに作っれたと書かれてありました。
「Boilerplate」とは何ぞやと思い該当サイトを見ると以下の解説がありました。
Boilerplate は、はてなブログのデザインCSSカスタマイズの土台に適したデザインテーマです。
はてなブログの必要最小限の見た目が調整されています。このテーマをもとにしてCSSを書くと比較的楽にデザインテーマが作れます。
「オリジナルテーマの制作にチャレンジしたいけど、0から作るのが大変」という方は、このデザインテーマをもとにしてCSSを書くと比較的楽にテーマが作れます。
「楽に作れます」と2回も連呼してますね。はてながそんなにお勧めするのなら「Boilerplate」を利用する価値あるかも、と思い始めました。
「案ずるより産むが易し」どうせブログをカスタマイズするなら「Thumbnail」を見本にさせて頂き"あトん"のオリジナルテーマが作れちゃうかも、と考えました。
しかし実際は「言うは易く行うは難し」でした。。。（後半で詳細を説明します）
「Boilerplate」の調査
「Boilerplate」はGitHubで公開されてますが、2つバージョンがあることが分かりました。
v1：Hatena-Blog-Theme-Boilerplate-Less
「Boilerplate」のv1は2013年3月27日に公開されました。
スタイルシート言語はLESSで「boilerplate.less」「_mixin.less」「_variable.less」「_media-queries.less」「_normalize.less」の5つのファイルで構成されてます。
v2：Hatena-Blog-Theme-Boilerplate
「Boilerplate」のv.2.0.0は2017年10月12日に公開されました。（以下v2と略します）
v.2での主な変更点は「レスポンシブデザインに対応」「スタイルシート言語がLESSからSCSSに変更」「Autoprefixer対応」「Browsersyncによる自動リロードの対応」でした。
スタイルシートは「boilerplate.scss」「_core.scss」「_variable.scss」の3つのファイルで構成されてます。
では、どのバージョンの「Boilerplate」を選択すれば良いのでしょうか。
v1ははてなユーザの利用実績はあるようですが、v2は見かけません。
そもそもLESSとSCSSは何が違うのか知りません。また、Autoprefixer、Browsersync等、今まで聞いたことがない専門用語もさっぱりわかりませーん。
そこでザックリと調べてみました。
Sass（SCSS）とLESSの違い
「Sass」
Syntactically Awesome Stylesheetsの略で「構文的に素晴らしいスタイルシート」という意味だそうです。
2006年に開発されたスタイルシート言語で、記述スタイルはSASS記法とSCSS記法があり、それぞれの拡張子は.sassと.scssです。
SASS記法はセレクタやクラスの後の括弧{ }や値の後ろのセミコロン;を省略し、インデントで依存関係を示します。
簡略化した記述ができる為、慣れるとすごいスピードで入力できるようです。
「SCSS」
はSassy CSSの略で「SassのようなCSS」とでも言えばよいのでしょうか。
SCSS記法は括弧{}を使い入れ子構造で依存関係を示します。書き方はCSSとほとんど同じなので広く普及しておりSassの主流になっているそうです。
Sass≒SCSSと思ってよいのではないでしょうか。
「LESS」
Leaner CSSの略で「効率的なCSS」という意味だそうです。2009年に開発されたスタイルシート言語で、拡張子は.lessです。
「Sass」と「LESS」は変数や関数が使え「CSS」を拡張したメタ言語と呼ばれてますが、「Sass」の方がよりプログラミング言語の様相が強いようです。
下記サイトで記述と機能の違いが比較されているので、詳しく知りたい方はご参照ください。
CSS拡張メタ言語「SCSS(Sass)」と「LESS」の比較 - (DxD)∞
"あトん"の印象ですが、「Sass」のSASS記法は1構文につき{}2文字を削減できるメリットがありますが、必ず改行しインデントで整えないと見づらくなるのがデメリットだと思いました。
「LESS」は「Sass」より後に開発されたのに機能が少ないのが残念だと思いました。
これから学習する初心者は「Sass」のSCSS記法がベターだと思います。
Autoprefixer
Autoprefixerを理解するにはCSSの歴史を理解しておくと分かりやすいので、CSSのレベルの進化について少し解説します。
「CSS」
CSSはCascading Style Sheetsの略で1994年にホーコン・ウィウム・リーにより提唱されたそうです。
同年ティム・バーナーズ・リーによりW3C（World Wide Web Consortium）が設立され、1996年にCSS1.0、1998年にCSS2.0が勧告されました。
Windows95が発売されたのは1995年ですが、1996年のIE3よりCSS1.0がサポートされてます。
CSSの策定プロセスは、FPWD（初期草案）→WD（草案）→ LC（最終草案）→ CR（勧告候補）→ PR（勧告案）→ REC（勧告）の6段階になってますが、CSS2.0の改定版のCSS2.1が勧告されたのは何と13年後の2011年です。
現在CSSはモジュール毎に仕様が策定されている為「CSS3」という標準自体は存在しません。
CSS2.1を拡張したレベル3を総称して「CSS3」と呼んでいるそうです。「CSS4」も同じ考え方です。
各モジュールのレベルとプロセスの進捗は下記サイトで確認できますので、気になる方は覗いてみてください。
Autoprefixerとは
モジュール毎にレベルや策定プロセスの進捗がバラバラだと、ブラウザの種類やバージョンによって対応済のものと未対応のものが出てきます。
これらをCSSで細かく定義・修正するのはとても大変な作業ですが「Autoprefixer」を使うとベンダープレフィックスを適切に自動で付与することができます。
「Autoprefixer」はまだ使ったことがありませんが、大変便利なツールだということが分かりました。
Browsersyncとは
「Browsersync」はファイルの変更を監視し、変更を検知すると自動で複数のブラウザのリロードを行ってくれるツールです。
例えば、スタイルシートを編集・更新すると、PCとiPhoneのブラウザの両方が同時に自動更新されます。
また、PCのブラウザを操作しスクロールさせると、iPhoneのブラウザも同期してスクロースします。その逆も出来ます。
面白くて大変便利そうですね。
百聞は一見にしかず「Browsersync」の凄さが分かる動画を貼っておくのでまず見て下さい。
cssを変更したら自動でリロードしてくれるBrowsersyncが超便利！
この動画ではBrowsersyncの話は3：10以降に登場します。
Cross Device Testing, Totally Tooling Tips (S2 Ep6)
どうです、凄いですよね。えっ！Webデザイナーは当たり前に使っているよ、と言う声が聞こえてきますが、はてなブログでこれが使えたらどうなるのでしょうか。
「Browsersync」を使用すると、はてなブログでは①～⑦の作業をすべて廃止でき、作業が30倍速くなります。
CSS修正→①管理画面に入る→②デザインを選択→③カスタマイズを選択→④デザインCSSを選択→⑤修正したCSSをコピペ→⑥変更を保存→⑦ブラウザを更新
前半のまとめ
Boilerplateのv1とv2を比較した結果、以下の理由でv2を使ってカスタマイズすることに決めました。
・スタイルシートの変更を検知し自動リロードしてくれる「Browsersync」はメチャ便利そう。
しかも、複数のデバイス（PCの複数ブラウザ、スマホのブラウザ）が同期するのでモバイルのテストも同時にでき凄い！
・プログラムライクなことは苦手ではないので「LESS」より「SCSS」の方が使い勝手が良さそう。
・Autoprefixerはあると便利そう。
・レスポンシブ対応はうれしい。
・normalize.cssはv1はv3.0.1だがv2は常に最新バージョンが読み込まれる。※
※normalize.cssは使わない不要な部分もありますが、ド素人が勝手に削除するのは時期尚早なので、内容が理解できてからコンパクト化を考えます。
それでは長い後半です。「Boilerplate」のv.2.0.0の動かし方について解説します。
「Boilerplate」v.2の動かし方
まず後半の注意事項です。
注意2
無知なまま適当に作業したので、途中何度も上手く行かなくなり泣きそうになりました。
無謀な初心者が同じような落とし穴に落ちないよう、失敗した内容と対策の内容を隠すことなく書きました。
その為、後半の記事は前半の3倍あります。
ご存じの項目があれば、遠慮なく飛ばし読みして下さい。
また、じっくり読む時間が無い方は、とりあえずブックマークしておいて、後で読むことをオススメします。
なお、最終的にはてなが説明した方法では動かなかったので、自己流で動かした方法を説明します。
はてなには質問を投げてますが、回答が来たら答え合わせしたいと思います。
セットアップ方法
BoilerplateテーマはGitHubの下記サイトで公開されてます。
セットアップの方法はREADME.mdに書かれてました。
SCSSで開発する場合は、下記の手順でリポジトリのcloneとモジュールのインストールを行います。
リポジトリのcloneとは何のことかよくわかりませんが、Node.jsというJavaScriptをインストールし、意味不明の呪文を3行入力すれば良いと勝手に解釈しました。
しかし、分からないことはしっかり調べてからやるべきでした。（反省）
Node.jsのインストール
下記サイトでインストーラをダウンロードします。
LTSバージョンをダウンロード ※
※ すべて上手く行った後、Currentバージョンも試しましたが、”あトん”の環境ではnpm start後エラーが発生し動きませんでした。
インストーラを起動し次にすすみます
ライセンスは一応読んだことにして次にすすみます
インストールするフォルダを決定します
デフォルトのままで次に進みます
インストールを実行します
インストール中（数分）
無事完了しました
バージョンの確認
Windowsのコマンドプロンプトで下記コマンドを実行し、node.jsとnpmのバージョンを確認します。
node --version
npm --version
nodeはv8.9.3、npmはv5.5.1であることが確認できました。
もしコマンドプロンプトの使い方が分からない方は下記記事を参考にして下さい。
と、順調に出来たのではここまでで、次から気の遠くなるような苦難の連続でした。
失敗1：「Git」が動かない
次にモジュールをインストールする為コマンドプロンプトで呪文を入力したのですが「git」のコマンドを認識してくれませんでした。
git clone git@github.com:hatena/Hatena-Blog-Theme-Boilerplate.git
node.jsを入れただけではダメなようです。
そう言えば「Git」「リポジトリ」「clone」が何のことか理解してませんでした。
ネットで調べてみると下記サイトを見つけました。
一通り流し読みしましたが、入門編でお腹いっぱいになりました。”あトん”はサルより頭が足りないことが分かりましたが、理解したことをまとめてみます。
「Git」
Gitはプログラムソースなどの変更履歴を管理する分散型のバージョン管理システムのことで、Linuxの開発で利用されこれが世界中に広まったものでした。
「リポジトリ」
リポジトリはデータやファイル及び過去の変更履歴が貯蔵された場所でした。
「clone」
cloneはcopyと何が違うのか今ひとつピンときませんが、今回の場合「リポジトリ」のデータをまるごとローカルに保存することのようです。
対策1：「Git」のインストール
gitを実行するには「Git」をインストールする必要があるのでさっそくやってみます。ダウンローダは下記サイトにあります。
画面右下のDownloadsをクリックします
ライセンスを一応読んだことにして次にすすみます
インストールするフォルダを決めます
必要なコンポーネントを選択します
スタートメニュフォルダの選択
そのまま次にすすみます
コミットメントの編集エディタの選択
後で変更出来るので、デフォルトのままですすめます
環境変数のパス
本例ではコマンドプロンプトを使用するので2番目を選択
コンソールの設定
Windowsのデフォルトコンソールを選択
HTTPS通信のルート
個人使用なのでOpenSSLを選択
改行コードの設定
何もつかないas-isを選択します
Configの設定
とりあえず全部にチェックを入れインストールします
インストール中
セットアップの終了
以上でGitのインストールは終了です。
失敗2：コマンドが通らない
それではコマンドプロンプトで呪文を入力します。
git clone git@github.com:hatena/Hatena-Blog-Theme-Boilerplate.git
えっ！上手く実行できません。コマンドプロンプトだからダメなのかな？
今度はGit Bashのコンソールで試してみます。
Git Bashのコンソールでコマンドを実行してもダメなようです。
エラー内容を見ると、RSA keyの認証でホストキーの確認に失敗しているようです。
GitのChapters「.3 Git サーバー - SSH 公開鍵の作成」を読むと「Git サーバーはSSHの公開鍵認証を使用しておりユーザは自分の公開鍵を作成しなければならない」と書かれてました。
.sshというディレクトリに鍵が保存されるらしいのですが、確認すると空でした。
cd .ssh
ls
GitHubは安全にリポジトリする為、高度なセキュリティを使っているようですが、ド素人にはチンプンカンプンです。
公開鍵はどの様な方法で作成・登録するのでしょうか。。。？
焦っていろいろと調べていたら、そもそもGitHubにアカンウトを登録してないことに気づきました。（汗）
対策2：GitHubのアカント登録
下記サイトの手順を参考に”あトん”のアカウントを登録しました。
アカウントの登録は下記サイトで行います。
GitHubへの登録
｢Username｣｢Email｣｢Password｣を入力し｢Sign up for GitHub｣をクリックします
なお｢Username｣は登録後でも変更できます。
free planのまま「Continue」を選択
アンケートに答えて「Submit」を選択
アンケートは答えたくなければスキップできます。
![]("https://lh3.googleusercontent.com/-vOgGnDgjSlM/WjXT7DW2jFI/AAAAAAAACxM/_L716KveSawbWILdEhUg0HvXawQUzVXzACE0YBhgL<p)
Start a projectを選択
登録したメールアドレスを確認
メールの確認
「Verify email address」をクリックします
登録完了の確認
Thanks for verifying your email addressのメールが来たら登録完了です。
以上でGitHubへのアカウント登録は終了です。
個人識別情報の登録
GitのChapters「.5 使い始める - 最初のGitの構成」を読むと以下が記載されてます。
Gitをインストールしたときに最初にすべきことは、ユーザー名とEmailアドレスを設定することです。
さっそく、Git bashを起動し登録します。
登録方法の詳細はGitHub Helpの「Set Up Git」にも記載されてます。
ユーザー名とEmailアドレスの登録
下記呪文を入力します。
git config --global user.name "your-name"
git config --global user.email "your.email@example.com"
登録情報の確認方法
下の呪文を入力すると登録情報が表示されます。
git config --global --list
SSH鍵の作成
リポジトリをcloneするにはSSHの公開鍵で認証を行うので、公開鍵を作製する必要があります。
SSH鍵の作り方はGitHub Help「Generating a new SSH key and adding it to the ssh-agent」に書かれてますので、その中の説明に従って作成します。
SSH鍵作製のコマンド
Git bashを起動し下記呪文を実行します。
”your.email@example.com”は前に登録したEmailアドレスです。
ssh-keygen -t rsa -b 4096 -C "your.email@example.com"
パスフレーズを聞いてきますが今回はスルーします。
.sshのフォルダ内に秘密鍵：id_rsaと公開鍵：id_rsa.pubのファイルが作成されました。
公開鍵の登録
GitHubのマイページに公開鍵を登録し、秘密鍵で認証できるようにします。
公開鍵のコピー
公開鍵の内容をクリップボードにコピーします。
公開鍵のコピーはGitHub Help「Adding a new SSH key to your GitHub account」に書かれてます。
Git Bashで呪文を実行すると、公開鍵：id_rsa.pubがクリップボードにコピーされます。
clip < ~/.ssh/id_rsa.pub
なお、テキストエディタでid_rsa.pubを開き公開鍵をコピーしてもOKです。
GitHubにSign inします
「Settings」を選択
｢SSH and GPG keys｣を選択
｢New SSH Key｣を選択
Tittleを入れ、Keyをペーストし「Add SSH key」を選択
SHH keyの登録完了
登録完了のメールが届きます
モジュールのインストール
さて、やっとリポジトリのcloneができる準備が整いました。
リポジトリのclone
さっそく、コンソール画面で呪文を実行します。
git clone git@github.com:hatena/Hatena-Blog-Theme-Boilerplate.git
今度は上手くいきました。
npmのインストール
ディレクトリを「Hatena-Blog-Theme-Boilerplate」にチェンジし、npmをインストールする呪文を入力します。
cd Hatena-Blog-Theme-Boilerplate
npm install
コマンドを実行するとnpmのインストールが始まりました。
3つワーニングが出てますがエラーはなく、約4分で無事npmのインストールが終わりました。
テストサイトの構築
いよいよ作業も大詰めです。
テストサイトの準備
本番環境での実行はおススメしません。バックアップをとっていたとしても閲覧者に迷惑がかかる恐れがあります。
無料ユーザは3サイト、Proは10サイト登録できますので、テストサイトを1つ用意して下さい。（ローカル環境で実行するので非公開で大丈夫です）
ローカルホストの登録
テストサイトが用意できたら、コンパイルされたcssをローカル環境で読み込み自動リロードさせる為、下記をヘッダのタイトル下の欄に貼付けます。
<link rel="stylesheet" href="http://localhost:3000/boilerplate.css"/>
<script async src="http://localhost:3000/browser-sync/browser-sync-client.js"></script>
ブログの「管理画面」→「デザイン」→「カスタマイズ」→「ヘッダ」→「タイトル下」にコピペします。
SCSSファイル変更の監視とコンパイル
npm startを実行します。
npm start
特にエラーも発生せずscssファイルがコンパイルされboilerplate.cssが作製されました。続けてscssファイルの監視がスタートします。監視を停止する場合は「Ctrl」+「C」を押します。
テストサイトを開くと「Browsersync」によりboilerplate.cssが自動リロードされました。
無事出来たようです。よかったー！
いよいよ最後はscssファイル修正後の自動更新です。
background（背景）の色を変更し保存してみます。
・・・
・・・
・・・
うっ！何も変わらない。えー、どうして変わってくれないの？
一度npmを停止し再スタートとコンパイル後背景はグレーに変わりました。
しかし、何度scssファイルを修正・保存しても自動リロードされません。
「えー、マジ・・・」どこでつまづいているのかド素人にはわかりません。急がば回れで、OS・ブラウザの種類バージョンとスクショを送って、はてなサポート窓口に調査をお願いしました。
じっと待っていてもしょうがないので、別の方法がないか探すことにしました。
原因調査
どこまで上手く行っているのか再度確認してみました。
npm実行後、無理やりboilerplate.cssを直接書き換えると自動リロードされデザインは変わりました。
どうやら「Browsersync」君は真面目に仕事をしてますが「npm」君は最初仕事をしたらすぐ持ち場を離れ「scss」君の面倒を放棄しているようです。
（ちょっと酔っぱらっているので勝手に君付けしてます。すみません。）
不真面目な「npm」君に変わって、別の人が「scss」君の面倒を見れば上手く行くのでは、と思いました。
暫定対応
冗談はここまでにして、scssファイルの変更を監視し自動コンパイルできれ良いはずです。
sassを監視し自動コンパイルできるツールを探したところ「Koala」「Prepros」が使い易そうでした。
Koala
下記サイトからダウンロードできます。
詳しい使用方法は下記サイトを参照ください。
やって見ると、コンパイルしたいファイルがあるフォルダをドラックするだけで簡単でした。
但し、boilerplate.scssに記述されているインポートファイルの一部が読み込めずエラーになったので、下記のように修正しました。
変更前：
@import "node_modules/normalize.css/normalize";
変更後：
@import "node_modules/normalize.css";
操作中の様子をGIF画像に収めたので見て下さい。
Prepros
PreprosはKoalaより機能が豊富で一番使い易いと言われているようです。
下記サイトからダウンロードできます。
Compile Sass, Less, Jade, CoffeeScript on Mac, Windows & Linux with Live Browser Reload
使用法は割愛します。詳しくは下記サイトをご参照下さい。
PreprosもKoalaと同様にコンパイルしたいファイルがあるフォルダをドラックするだけで設定は簡単でした。
なおKoalaでエラーになった現象はこちらでも出たので、同じ対応を行いました。
操作中の様子をGIF画像に収めたので見て下さい。
KoalaとPreprosで遊んでいるうち一週間が過ぎましたが、やっとはてなサポート窓口から回答が来ました。
「ただいま確認を行っておりますので、今しばらくお待ちいただけま
年度末で忙しいとは思ましたが、とりあえず催促の返事を出しました。
そうこうしている間に、何と勝間和代さんがはてなブログにデビューされたのですが、こっちが気になり、2つもブログを書いてしまいました。（笑）
そして気が付くと2週間が過ぎましたが、はてなからは何の連絡もありません。
KoalaやPreprosを併用するのは本来の方法ではないので、Node.jsとnpmのみで何とか動かしたいです。
のんびり屋の”あトん”も少しイラットしてきたのですが、npmが読み込んでいるジェイソン君のパッケージ（package.json）に何か手がかりがないか調べてみることにしました。
（jsonファイルは嫌いにならないよう親愛を込めてジェイソン君と呼んでます）
{
"name": "hatena-blog-theme-boilerplate",
"version": "2.0.0",
"description": "Boilerplate for Hatena Blog theme",
"author": "Hatena Blog",
"license": "MIT",
"scripts": {
"prestart": "npm run build",
"start": "npm-run-all -p watch server",
"build": "npm-run-all scss autoprefixer",
"scss": "node-sass scss/boilerplate.scss build/boilerplate.css --output-style expanded --indent-width 4",
"autoprefixer": "postcss --use autoprefixer -r build/boilerplate.css --map true",
"server": "browser-sync start -c bs-config.js",
"watch": "chokidar 'scss/' -c 'npm run build'"
},
"devDependencies": {
"autoprefixer": "^7.1.4",
"browser-sync": "^2.18.13",
"chokidar-cli": "^1.2.0",
"node-sass": "^4.5.3",
"normalize.css": "^7.0.0",
"npm-run-all": "^4.1.1",
"postcss-cli": "^4.1.1"
}
}
scssの監視は"watch": "chokidar 'scss/' -c 'npm run build'"で定義されており、chokidarというコマンドで監視していることは分かったのですが、なぜこの呪文が上手く実行されないのかがわかりません。
いろいろ弄って数日過ぎたある日、老眼で気が付かなかったのですがnpm実行中のコンソール画面で少しおかしいところを発見しました。
scssをwatchしている行を見たところ、’（シングルクウォート）が変な位置に入っているのです。
ここが怪しいと思いネットでいろいろ検索した結果、有効な解決策をやっと見つけることができました。
何とWindowsではシングルクウォートが無視されるそうです。（涙）
解決策はシングルクォートをエスケープしたダブルクォートに変更するものでした。
修正前：
"watch": "chokidar 'scss/' -c 'npm run build'"
修正後：
"watch": "chokidar \"scss/\" -c \"npm run build\""
修正後はscssファイルの監視が上手く行きました。
但し、1つ問題が出ました。自動リロードのレスポンスが悪いのです。
原因はscssファイル修正後、npm run buildを一から再実行するので3～4秒更新が遅くなるようです。
高性能のPCであれば瞬時に変わるのかも知れませんが、”あトん”のノートPCは2009年製でvistaを強引にwindows10に変更した老朽化PCです。
しかたがないのでスピードアップの為、scssの自動コンパイルだけを実行するようにwartchを修正しました。
修正後：
"watch": "chokidar \"scss/\" -c \"npm run build\""
再修正後：
"watch": "chokidar \"scss/\" -c \"node-sass scss/boilerplate.scss build/boilerplate.css --output-style expanded --indent-width 4\""
修正後はサクサクと動くようになりました。
まとめ
時系列にだらだと説明しましたが、ド素人がやる場合の作業は以下です。
①Node.jsをインストール
②GitHubへ登録
③Gitをインストール
④Git bashで個人識別情報の登録
⑤SSH鍵を作製
⑥公開鍵の登録
⑦リポジトリのclone
⑧npmのインストール
⑨テストサイトを用意
⑩ローカルホストの登録
⑪npmの実行 ※
①～⑩は一度設定すれば以後必要ありません。
※Windowsはpackage.jsonのwatch行のシングルクォートをエスケープしたダブルクォートに変更
その他
スマホがテストサイトを認識できない場合は、下記記事を参考に設定を見直して下さい。
gitを独学したい素人は下記サイトで紹介されている「git-it-electron 実践入門」を一読することをおススメします。（"あトん"は半分も理解できませんでしたが。。。）qiita.com
余談
ブログのカスタマイズは自動化できる目途が経ちましたが、SCSSについては、まだ勉強してません。使いこなせるようになるまで時間がかかると思いますが、マイペースで勉強していきたいと思います。
”あトん”オリジナルのテーマを公開できるのは、まだまだ先になると思いますが、ダークなサイトにしようと思ってます。
それでは、良い新年が迎えられることをお祈りしてます。
最後までお付き合い頂き、ありがとうございました。
はてなはいつ質問に回答してくれるのかなー？
年内に回答が来なかったら、自己解決できたと言った方がいいのかな。
2017/12/29 追記
はてなサポート窓口からやっと下記回答が来ました。
Boilerplate そのものに関する不具合ではなく、使い方に関するご質問でした。
恐れ入りますが、使い方についてはサポート対象外となっております。
回答が遅くなりました上、お力になれず申し訳ございません。
下記は外部サイトですが、ご参考になさっていただけますでしょうか。
動かなかった原因は合っていたので安心したのですが、Windowsで動かなければ不具合だと思うのですが。。。
少し納得がいかない回答だと感じました。
2018/01/05 追記
README.mdに以下が追記されてました。
Boilerplateは自己責任でご利用ください。お問い合わせははてなブログのサポートフォームではなく、本リポジトリのIssueにお願いします。
これって”あトん”に対して遠回しに言っているのかな？
こんな追記より、Windows用のpackage.jsonをアナウンスすべきだと思うのですが。
オリジナルテーマを作ろうと思っていたモチベーションが思いっきり下がりました。
2018/01/06 追記
rokuzenudonさんがはてなブログテーマ「 UnderShirt 」を公開されました。
新しい公式 Boilerplateを試したとのことですが、SCSS、browser-syncは特に気にならず楽に使えたとのコメントされてました。Macだとすんなり動くんですね。
「 UnderShirt 」は2カラムですが非常にシンプルで見やすいデザインです。さすがWebデザイナーさんだけあって隅々まで仕上げもすばらしい。。。
またクセがなく無難でカスタマイズしやすい仕様になっているとのことなので初心者にもオススメですね。
2018/1/17 追記
12/29に「修正方法について、記載を検討させていただきます。」とはてなより回答をもらってましたが、1/10にREADME.mdにWindows環境での開発案内がアップデートされてました。
はてなさん、フォローありがとうございます!
ところで、SSL化はとても遅れているようですが、第ニステップの実施は遅くともChrome66がリリースされる春迄にお願いいたしまーす。
2018年7月8日追記
npmを使う場合は最新バージョンを確認してください。
node.jsは8.9.3 LTSが8.11.3 LTSにバージョンアップされてます。
またnpmは6.1.0にupdateしないと動きません。
更にHatena-Blog-Theme-Boilerplateのpackage.jsonに記述されている
npmのパッケージはバージョンが古いので、
定期的に最新バージョンに修正することをおススメします。
特にnormalize.cssは古いブラウザをサポートする必要が無くなりv7.0.0は2.3KBだったのがv8.0.0で1.8KBに軽量化されてます。
Hatena-Blog-Theme-Boilerplateのpackage.json
変更前：
{
"name": "hatena-blog-theme-boilerplate",
"version": "2.0.0",
"description": "Boilerplate for Hatena Blog theme",
"author": "Hatena Blog",
"license": "MIT",
"scripts": {
"prestart": "npm run build",
"start": "npm-run-all -p watch server",
"build": "npm-run-all scss autoprefixer",
"scss": "node-sass scss/boilerplate.scss build/boilerplate.css --output-style expanded --indent-width 4 --source-map build/",
"autoprefixer": "postcss --use autoprefixer -r build/boilerplate.css",
"server": "browser-sync start -c bs-config.js",
"watch": "chokidar \"scss/\" -c \"npm run build\""
},
"devDependencies": {
"autoprefixer": "^7.1.4",
"browser-sync": "^2.18.13",
"chokidar-cli": "^1.2.0",
"node-sass": "^4.5.3",
"normalize.css": "^7.0.0",
"npm-run-all": "^4.1.1",
"postcss-cli": "^4.1.1"
}
}
変更後：（2018/07/08時点のバージョン）
{
"name": "hatena-blog-theme-boilerplate",
"version": "2.0.0",
"description": "Boilerplate for Hatena Blog theme",
"author": "Hatena Blog",
"license": "MIT",
"scripts": {
"prestart": "npm run build",
"start": "npm-run-all -p watch server",
"build": "npm-run-all scss autoprefixer",
"scss": "node-sass scss/boilerplate.scss build/boilerplate.css --output-style expanded --indent-width 4 --source-map build/",
"autoprefixer": "postcss --use autoprefixer -r build/boilerplate.css",
"server": "browser-sync start -c bs-config.js",
"watch": "chokidar \"scss/\" -c \"npm run build\""
},
"devDependencies": {
"autoprefixer": "^9.0.1",
"browser-sync": "^2.24.5",
"chokidar-cli": "^1.2.0",
"node-sass": "^4.9.2",
"normalize.css": "^8.0.0",
"npm-run-all": "^4.1.3",
"postcss-cli": "^6.0.0"
}
}
修正後Windows用"あトん"バージョン
watch行のシングルクォートをエスケープしたダブルクォートに変更し、コンパイルを一部スキップし高速化してます。
{
"name": "hatena-blog-theme-boilerplate",
"version": "2.0.0",
"description": "Boilerplate for Hatena Blog theme",
"author": "Hatena Blog",
"license": "MIT",
"scripts": {
"prestart": "npm run build",
"start": "npm-run-all -p watch server",
"build": "npm-run-all scss autoprefixer",
"scss": "node-sass scss/boilerplate.scss build/boilerplate.css --output-style expanded --indent-width 4 --source-map build/",
"autoprefixer": "postcss --use autoprefixer -r build/boilerplate.css",
"server": "browser-sync start -c bs-config.js",
"watch": "chokidar \"scss/\" -c \"node-sass scss/boilerplate.scss build/boilerplate.css --output-style expanded --indent-width 4\""
},
"devDependencies": {
"autoprefixer": "^9.0.1",
"browser-sync": "^2.24.5",
"chokidar-cli": "^1.2.0",
"node-sass": "^4.9.2",
"normalize.css": "^8.0.0",
"npm-run-all": "^4.1.3",
"postcss-cli": "^6.0.0"
}
}
