はじめに
冒頭いきなりですが、最初に少しお注意点を知らせします。
注意1
この記事はブログのカスタマイズが 超簡単になる方法 ではりません 超快適になる方法
超快適になる方法ですが、一言でいうと「SCSS+Browsersync」の活用です。
実際に出来るようになった状態のスクショをお見せします。
下の画像はSCSSを保存すると自動でCSS にコンパイル され、自動でブラウザがリロードされる様子です。（画像は軽くするためGIFデータは間引いてます）
今までCSS を修正しブラウザを更新するまで最短で約30秒かかりましたが、たったの1秒以下になります。もう感激ものです。
おススメの読者
この記事の方法はブログのカスタマイズ経験ゼロ＆黒画面が苦手なガチな「初心者」にはハードルが高いと思います。
そのような方はあわてて自動化する必要はありません。
記事を書くことに専念し、カスタマイズに興味がで出てきたら弄ってみて下さい。
「ブログをもっとカスタマイズしたけどガッツリやるのは面倒くさい」と思っている「初心者」や、SCSSに興味を持っている「初心者」にはオススメです。
自動化できるまで少し大変ですが 一度環境を作ってしまえば、超ラク チンなので後戻りできなくなるかも知れません。 時間を作って是非一度お試し下さい。
ではここに至った背景を説明します。
なぜカスタマイズするのか
サイト閲覧者の利便性・操作性を向上し、かつ独自のカラーを出すことで他のブログと差別化したいからです。
と言うのは建前で、今のデザインに少し飽きてきたからです。
自分自身がメインの閲覧者なので、多少センスが悪かろうと自分好みにカスタマイズできれば、ブログを少しでも長く続けることが出来るのではと思ってます。
また、前々から少し気になっていたことが3つあります。
その１
過去このブログで「表示スピードが速いデザインとは」や「あなたのサイトは問題ゼロのRWDですか？」とか、自サイトのことは脇に置いといて偉そうに解説しました。
www.heavy-peat.com
www.heavy-peat.com
たくさんの方からお褒めの言葉を頂いたのですが、大きな改善は出来てません。
書きっぱなしで自分で実践してないと単なる評論家ですよね。
その２
10月29日にブログ名を「Bumble-Bee」から「after work Labo」に変更したのですがサイトのデザインは変えませんでした。
ブログ名変更後、時間が経つにつれ「何の為に変えたんだっけ？」「意味あったかなー？」と思うようになりました。（汗）
店構えや店内の調度品・メニューは全く変わらないいのに店名だけ変わるのは、やっぱり変ですよね。
サイトの大幅な改変ははてなブログ のSSL 化に合わせてやればいいやと後回しにしてましたが、いつ移行するのか不明確です。
その３
この記事で説明する自動化は、細かい方法は違いますがすでに先人が実施済で下記サイトでやり方が公開されてます。
クリアメモリさん
www.clrmemory.com
偽名さん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」
blog.rokuzeudon.com
「Thumbnail」の解説を読むと、はてなブログ のカスタマイズ用テンプレート「Boilerplate」をベースに作っれたと書かれてありました。
「Boilerplate」とは何ぞやと思い該当サイトを見ると以下の解説がありました。
Boilerplate は、はてなブログ のデザインCSS カスタマイズの土台に適したデザインテーマです。
はてなブログ の必要最小限の見た目が調整されています。このテーマをもとにしてCSS を書くと比較的楽にデザインテーマが作れます
「オリジナルテーマの制作にチャレンジしたいけど、0から作るのが大変」という方は、このデザインテーマをもとにしてCSS を書くと比較的楽にテーマが作れます
「楽に作れます はてな がそんなにお勧めするのなら「Boilerplate」を利用する価値あるかも、と思い始めました。
「案ずるより産むが易し」どうせブログをカスタマイズするなら「Thumbnail」を見本にさせて頂き"あトん"のオリジナルテーマが作れちゃうかも、と考えました。
しかし実際は「言うは易く行うは難し」でした。。。（後半で詳細を説明します）
「Boilerplate」の調査
「Boilerplate」はGitHub で公開されてますが、2つバージョンがあることが分かりました。
v1：Hatena-Blog-Theme-Boilerplate-Less
「Boilerplate」のv1は2013年3月27日に公開されました。
staff.hatenablog.com
スタイルシート 言語は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と略します）
staff.hatenablog.com
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 は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
現在CSS はモジュール毎に仕様が策定されている為「CSS3」という標準自体は存在しません。
CSS2.1を拡張したレベル3を総称して「CSS3」と呼んでいるそうです。「CSS4」も同じ考え方です。
各モジュールのレベルとプロセスの進捗は下記サイトで確認できますので、気になる方は覗いてみてください。
www.w3.org
Autoprefixerとは
モジュール毎にレベルや策定プロセスの進捗がバラバラだと、ブラウザの種類やバージョンによって対応済のものと未対応のものが出てきます。
これらをCSS で細かく定義・修正するのはとても大変な作業ですが「Autoprefixer」を使うとベンダープレフィックス を適切に自動で付与する
www.npmjs.com
「Autoprefixer」はまだ使ったことがありませんが、大変便利なツールだということが分かりました。
Browsersyncとは
「Browsersync」はファイルの変更を監視し、変更を検知すると自動で複数のブラウザのリロードを行ってくれるツールです。
例えば、スタイルシート を編集・更新すると、PCとiPhone のブラウザの両方が同時に自動更新されます。
また、PCのブラウザを操作しスクロールさせると、iPhone のブラウザも同期してスクロース します。その逆も出来ます。
面白くて大変便利そうですね。
www.npmjs.com
百聞は一見にしかず「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の複数ブラウザ、スマホ のブラウザ）が同期するのでモバイルのテストも同時にでき凄い！ css はv1はv3.0.1だがv2は常に最新バージョンが読み込まれる。※
※normalize.css は使わない不要な部分もありますが、ド素人が勝手に削除するのは時期尚早なので、内容が理解できてからコンパクト化を考えます。
それでは長い後半です。「Boilerplate」のv.2.0.0の動かし方について解説します。
「Boilerplate」v.2の動かし方
まず後半の注意事項です。
注意2
無知なまま適当に作業したので、途中何度も上手く行かなくなり泣きそうになりました。
無謀な初心者が同じような落とし穴に落ちないよう、失敗した内容と対策の内容を隠すことなく書きました。
その為、後半の記事は前半の3倍あります。
ご存じの項目があれば、遠慮なく飛ばし読みして下さい。
また、じっくり読む時間が無い方は、とりあえずブックマークしておいて、後で読むことをオススメします。
なお、最終的にはてな が説明した方法では動かなかったので、自己流で動かした方法を説明します。
はてな には質問を投げてますが、回答が来たら答え合わせしたいと思います。
セットアップ方法
BoilerplateテーマはGitHub の下記サイトで公開されてます。
github.com
セットアップの方法はREADME.mdに書かれてました。
SCSSで開発する場合は、下記の手順でリポジトリ のcloneとモジュールのインストールを行います。
リポジトリ のcloneとは何のことかよくわかりませんが、Node.jsというJavaScript をインストールし、意味不明の呪文を3行入力すれば良いと勝手に解釈しました。
しかし、分からないことはしっかり調べてからやるべきでした。（反省）
Node.jsのインストール
下記サイトでインストーラ をダウンロードします。
https://nodejs.org/en/
LTSバージョンをダウンロード ※
※ すべて上手く行った後、Currentバージョンも試しましたが、”あトん”の環境ではnpm start後エラーが発生し動きませんでした。
ライセンスは一応読んだことにして次にすすみます
インストールするフォルダを決定します
デフォルトのままで次に進みます
インストールを実行します
インストール中（数分）
無事完了しました
バージョンの確認
Windows のコマンドプロンプト で下記コマンドを実行し、node.jsとnpmのバージョンを確認します。
node --version
nodeはv8.9.3、npmはv5.5.1であることが確認できました。
もしコマンドプロンプト の使い方が分からない方は下記記事を参考にして下さい。
www.heavy-peat.com
と、順調に出来たのではここまでで、次から気の遠くなるような苦難の連続でした。
失敗1：「Git」が動かない
次にモジュールをインストールする為コマンドプロンプト で呪文を入力したのですが「git」のコマンドを認識してくれませんでした。
git clone git@github .com:hatena/Hatena-Blog-Theme-Boilerplate.git
node.jsを入れただけではダメなようです。
そう言えば「Git」「リポジトリ 」「clone」が何のことか理解してませんでした。
ネットで調べてみると下記サイトを見つけました。
www.backlog.jp
一通り流し読みしましたが、入門編でお腹いっぱいになりました。”あトん”はサルより頭が足りないことが分かりましたが 、 理解したことをまとめてみます。
「Git
Gitはプログラムソースなどの変更履歴を管理する分散型のバージョン管理システム のことで、Linux の開発で利用されこれが世界中に広まったものでした。
リポジトリ はデータやファイル及び過去の変更履歴が貯蔵された場所でした。
「clone
cloneはcopyと何が違うのか今ひとつピンときませんが、今回の場合「リポジトリ 」のデータをまるごとローカルに保存することのようです。
対策1：「Git」のインストール
gitを実行するには「Git」をインストールする必要があるのでさっそくやってみます。ダウンローダ は下記サイトにあります。
https://git-scm.com/
画面右下のDownloadsをクリックします
ライセンスを一応読んだことにして次にすすみます
インストールするフォルダを決めます
スタートメニュフォルダの選択
そのまま次にすすみます
コミットメントの編集エディタの選択
後で変更出来るので、デフォルトのままですすめます
本例ではコマンドプロンプト を使用するので2番目を選択
コンソールの設定
Windows のデフォルトコンソールを選択
個人使用なので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
GitHub は安全にリポジトリ する為、高度なセキュリティを使っているようですが、ド素人にはチンプンカンプンです。
公開鍵はどの様な方法で作成・登録するのでしょうか。。。？
焦っていろいろと調べていたら、そもそもGitHub にアカンウトを登録してないことに気づきました。（汗）
下記サイトの手順を参考に”あトん”のアカウントを登録しました。
qiita.com
アカウントの登録は下記サイトで行います。
github.com
｢Username｣｢Email｣｢Password｣を入力し｢Sign up for GitHub ｣をクリックします
なお｢Username｣は登録後でも変更できます。
free planのまま「Continue」を選択
アンケートに答えて「Submit」を選択
アンケートは答えたくなければスキップできます。
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 "your.email@example.com
登録情報の確認方法
下の呪文を入力すると登録情報が表示されます。
git config --global --list
リポジトリ を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です。
「Settings」を選択
｢SSH and GPG keys｣を選択
｢New SSH Key｣を選択
Tittleを入れ、Keyをペーストし「Add SSH key」を選択
SHH keyの登録完了
登録完了のメールが届きます
モジュールのインストール
さて、やっとリポジトリ のcloneができる準備が整いました。
さっそく、コンソール画面で呪文を実行します。
git clone git@github .com:hatena/Hatena-Blog-Theme-Boilerplate.git
今度は上手くいきました。
npmのインストール
ディレクト リを「Hatena-Blog-Theme-Boilerplate」にチェンジし、npmをインストールする呪文を入力します。
cd Hatena-Blog-Theme-Boilerplate
コマンドを実行するとnpmのインストールが始まりました。
3つワーニングが出てますがエラーはなく、約4分で無事npmのインストールが終わりました。
テストサイトの構築
いよいよ作業も大詰めです。
テストサイトの準備
本番環境での実行はおススメしません。バックアップをとっていたとしても閲覧者に迷惑がかかる恐れがあります。
無料ユーザは3サイト、Proは10サイト登録できますので、テストサイトを1つ用意して下さい。（ローカル環境で実行するので非公開で大丈夫です）
ローカルホストの登録
テストサイトが用意できたら、コンパイル されたcss をローカル環境で読み込み自動リロードさせる為、下記をヘッダのタイトル下の欄に貼付けます。
<link rel="stylesheet" href="http://localhost:3000/boilerplate.css "/>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
下記サイトからダウンロードできます。
koala-app.com
詳しい使用方法は下記サイトを参照ください。
uxmilk.jp
やって見ると、コンパイル したいファイルがあるフォルダをドラックするだけで簡単でした。
但し、boilerplate.scssに記述されているインポートファイルの一部が読み込めずエラーになったので、下記のように修正しました。
変更前：css /normalize";css ";
操作中の様子をGIF画像に収めたので見て下さい。
Prepros
PreprosはKoalaより機能が豊富で一番使い易いと言われているようです。
下記サイトからダウンロードできます。
Compile Sass, Less, Jade, CoffeeScript on Mac, Windows & Linux with Live Browser Reload
使用法は割愛します。詳しくは下記サイトをご参照下さい。
rfs.jp
PreprosもKoalaと同様にコンパイル したいファイルがあるフォルダをドラックするだけで設定は簡単でした。
なおKoalaでエラーになった現象はこちらでも出たので、同じ対応を行いました。
操作中の様子をGIF画像に収めたので見て下さい。
KoalaとPreprosで遊んでいるうち一週間が過ぎましたが、やっとはてなサポート窓口 から回答が来ました。
「ただいま確認を行っておりますので、今しばらくお待ちいただけま
年度末で忙しいとは思ましたが、とりあえず催促の返事を出しました。
そうこうしている間に、何と勝間和代 さんがはてなブログ にデビューされたのですが、こっちが気になり、2つもブログを書いてしまいました。（笑）
そして気が付くと2週間が過ぎましたが、はてな からは何の連絡もありません。
KoalaやPreprosを併用するのは本来の方法ではないので、Node.jsとnpmのみで何とか動かしたいです。
のんびり屋の”あトん”も少しイラットしてきたのですが、npmが読み込んでいるジェイソン君のパッケージ（package.json ）に何か手がかりがないか調べてみることにしました。
（json ファイルは嫌いにならないよう親愛を込めてジェイソン君と呼んでます）
{watch server",css --output-style expanded --indent-width 4",css --map true",watch ": "chokidar 'scss/' -c 'npm run build'"cli ": "^1.2.0",css ": "^7.0.0",cli ": "^4.1.1"
scssの監視は"watch ": "chokidar 'scss/' -c 'npm run build'"で定義されており、chokidarというコマンドで監視していることは分かったのですが、なぜこの呪文が上手く実行されないのかがわかりません。
いろいろ弄って数日過ぎたある日、老眼で気が付かなかったのですがnpm実行中のコンソール画面で少しおかしいところを発見しました。
scssをwatch している行を見たところ、’（シングルクウォート）が変な位置に入っているのです。
ここが怪しいと思いネットでいろいろ検索した結果、有効な解決策をやっと見つけることができました。
qiita.com
何と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 行のシングルクォートをエス ケープしたダブルクォートに変更
その他
スマホ がテストサイトを認識できない場合は、下記記事を参考に設定を見直して下さい。
www.koreyome.com
gitを独学したい素人は下記サイトで紹介されている「git-it-electron 実践入門」を一読することをおススメします。（"あトん"は半分も理解できませんでしたが。。。）qiita.com
余談
ブログのカスタマイズは自動化できる目途が経ちましたが、SCSSについては、まだ勉強してません。使いこなせるようになるまで時間がかかると思いますが、マイペースで勉強していきたいと思います。
”あトん”オリジナルのテーマを公開できるのは、まだまだ先になると思いますが、ダークなサイトにしようと思ってます。
それでは、良い新年が迎えられることをお祈りしてます。
最後までお付き合い頂き、ありがとうございました。
はてな はいつ質問に回答してくれるのかなー？
年内に回答が来なかったら、自己解決できたと言った方がいいのかな。
2017/12/29 追記
はてなサポート窓口 からやっと下記回答が来ました。
Boilerplate そのものに関する不具合ではなく、使い方に関するご質問でした。
恐れ入りますが、使い方についてはサポート対象外となっております。
回答が遅くなりました上、お力になれず申し訳ございません。
下記は外部サイトですが、ご参考になさっていただけますでしょうか。
qiita.com
動かなかった原因は合っていたので安心したのですが、Windows で動かなければ不具合だと思うのですが。。。
少し納得がいかない回答だと感じました。
2018/01/05 追記
README.mdに以下が追記されてました。
Boilerplateは自己責任でご利用ください。お問い合わせははてなブログ のサポートフォームではなく、本リポジトリ のIssueにお願いします。
これって”あトん”に対して遠回しに言っているのかな？
こんな追記より、Windows 用のpackage.json をアナウンスすべきだと思うのですが。
オリジナルテーマを作ろうと思っていたモチベーションが思いっきり下がりました。
2018/01/06 追記
rokuzenudonさんがはてなブログ テーマ「 UnderShirt 」を公開されました。
blog.rokuzeudon.com
新しい公式 Boilerplateを試したとのことですが、SCSS、browser-syncは特に気にならず楽に使えたとのコメントされてました。Mac だとすんなり動くんですね。
「 UnderShirt 」は2カラムですが非常にシンプルで見やすいデザインです。さすがWebデザイナー さんだけあって隅々まで仕上げもすばらしい。。。
またクセがなく無難でカスタマイズしやすい仕様になっているとのことなので初心者にもオススメですね。
2018/1/17 追記
12/29に「修正方法について、記載を検討させていただきます。」とはてな より回答をもらってましたが、1/10にREADME.mdにWindows 環境での開発案内がアップデートされてました
github.com
はてな さん、フォローありがとうございます!
ところで、SSL 化はとても遅れているようですが、第ニステップの実施は遅くともChrome66がリリースされる春迄にお願いいたしまーす。
2018年7月8日追記
npmを使う場合は最新バージョンを確認してください。
node.jsは8.9.3 LTSが8.11.3 LTSにバージョンアップされてます。
更に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
変更前：
{watch server",css --output-style expanded --indent-width 4 --source-map build/",css ",watch ": "chokidar \"scss/\" -c \"npm run build\""cli ": "^1.2.0",css ": "^7.0.0",cli ": "^4.1.1"
変更後： （2018/07/08時点のバージョン）
{watch server",css --output-style expanded --indent-width 4 --source-map build/",css ",watch ": "chokidar \"scss/\" -c \"npm run build\"" 9.0.1 ", 2.24.5 ",cli ": "^1.2.0", 4.9.2 ",css ": "^ 8.0.0 ", 4.1.3 ",cli ": "^ 6.0.0 "
修正後Windows 用"あトん"バージョン
watch 行のシングルクォートをエス ケープしたダブルクォートに変更し、コンパイル を一部スキップし高速化してます。
{watch server",css --output-style expanded --indent-width 4 --source-map build/",css ",watch ": "chokidar \"scss/\" -c \"node-sass scss/boilerplate.scss build/boilerplate.css --output-style expanded --indent-width 4\"" "devDependencies": { 9.0.1 ", 2.24.5 ",cli ": "^1.2.0", 4.9.2 ",css ": "^ 8.0.0 ", 4.1.3 ",cli ": "^ 6.0.0 "
heavy-peat.com
![]("https://lh3.googleusercontent.com/-vOgGnDgjSlM/WjXT7DW2jFI/AAAAAAAACxM/_L716KveSawbWILdEhUg0HvXawQUzVXzACE0YBhgL<p)
