npmのsassが@useしたファイルをwatchしてくれない問題

概要

npmのsassにはファイルの更新を監視して、都度コンパイルしてくれるwatch機能がある。
watch中は@useなどで読み込んでいる外部ファイルの更新は反映されない。
外部ファイルもwatchすれば反映される。

遭遇時の作業内容

遭遇時のファイル構成
  1. my-custom.scss内にbootstrap.scssを@useする記述あり
  2. npmのsassでmy-custom.scssをwatchする
  3. bootstrap.scssを更新する
  4. my-custom.scssを更新する
  5. コンパイルされてcssが生成される
  6. bootstrap.scssの変更が適用されていない!

watchが生きている間はいくらbootstrap.scssを更新しても反映されない。
初回に読み込んだ内容が保持される。

解決策

外部ファイルもwatchする事で解決した。

//package.jsonのscript節
"mysass": "npx sass --watch --style expanded ./scss/:./ ./node_modules/bootstrap/_bootstrap.scss:./"

参考

似たようなissueが挙がってた。

Sass –watch does not detect @use file changes #2843

https://github.com/sass/sass/issues/2843

真似したんだけど、コマンドがなんか違う。動かん。
–colorとか知らないオプションついてるし。
ファイル単品を指定すると怒られるし。
ただ、  

頭にアンダーバーつけてパーシャル指定するとgood。(意訳)

これは参考になった。そのままwatchすると同名のcss吐き出してしまうのだなぁ(1敗)。  

感想

@use指定のファイルまでwatchしないのは分かるがコンパイルのたびにファイルは読み直してくれるのかと思っていた。

あと、外部ライブラリを勝手にリネームするのは少し抵抗ある。node_modulesの中だし。でも変えた。

お前は今日から「_bootstrap.scss」だ!

【解決済み】wordpress5.6でプラグイン「カスタムフィールドテンプレート」のdatepickerが動作しなくなった場合の対処

概要

※この問題はバージョン2.5.3にて修正されています。製作者様に感謝。

wordpress5.6でjQueryのバージョンが上がり、「カスタムフィールドテンプレート」で日付入力に使われているdatepickerが動作しなくなった。
エラーの原因は「jquery.bgiframe.js」のバージョンが古い事。
新しいのに差し替えたら動いた。

エラーメッセージ

表示されたエラーは以下

https://www.*****.*****/wp-content/plugins/custom-field-template/js/jquery.bgiframe.js: jQuery.browser is deprecated

新しいbgiframe.js

以下をダウンロードしてプラグインフォルダに上書きする。

bgiframe by Brandon Aaron
https://plugins.jquery.com/bgiframe/

October 20, 2013 Released

あ、新しい…。

そもそも古いIE対応するための代物らしいので、不要な人は切り離しても良いと思う。

備考

人様のプラグインに勝手に手を入れるのだから自己責任で行ってください。
プラグイン製作者様には敬意を持つべし。

navタグ内で見出しを省略するとアウトライン上では「ナビゲーション」と解釈される

概要

「nav」タグと「aside」タグの見出しは省略すると
それぞれ「ナビゲーション」「サイドバー」と見出しがついていると解釈される、事が多い。
ユーザーエージェントによって異なるので絶対ではない。

「nav」タグと「aside」タグはセクショニング要素

「article」「section」「nav」「aside」はセクショニング要素である。
(「body」はセクショニング・ルート)

セクショニング要素には見出しタグ(「h1」~「h6」)が必要。

セクショニング・コンテンツとなる要素は明示的にアウトラインを生成します。各セクショニングコンテンツは通常、見出しを伴って使用されます。

セクショニング・コンテンツに分類される要素一覧 | HTML5 タグリファレンス | W3 Watch Reference
https://reference.hyper-text.org/html5/categories/sectioning-content/

一部のセクショニング要素はデフォルト見出しがある

「nav」「aside」の見出しは省略しても良い。

省略した場合はユーザーエージェントにより解釈が任される。

These default headings (“Untitled document”, “Navigation”, “Sidebar”) are not specified by this specification, and might vary with the user’s language, the page’s language, the user’s preferences, the user agent implementer’s preferences, etc.

HTML Living Standard – whatwg
https://html.spec.whatwg.org/multipage/sections.html#outline-depth

デフォルト見出し表

タグデフォルト見出し
body無題のドキュメント
navナビゲーション
asideサイドバー
hxタグを指定しない場合はデフォルト見出しで解釈される

省略した場合

<!-- 以下の2つは等価 -->
<nav>
  <ul>
    <li>アイテム1</li>
    <li>アイテム1</li>
    <li>アイテム1</li>
  </ul>
</nav>


<nav>
  <h1>ナビゲーション</h1><!-- デフォルト見出しが補完されるイメージ -->
  <ul>
    <li>アイテム1</li>
    <li>アイテム1</li>
    <li>アイテム1</li>
  </ul>
</nav>

実際に補完されるわけじゃないけど、ブラウザもクローラーもそう解釈するというなら同じ事…だと思う。

備考

  • 見出しタグ(h1~h6)を「hx」タグって表現するのが最近の流行りっぽい。
  • 「sectioning elements」が「区分化要素」って翻訳されている。

VScodeでホイール操作による横スクロールが効かなくなる不具合

概要

VScodeでチルト入力による横スクロールが効かなくなる不具合がある。
解決策は簡単で、一度別ウィンドウなどでチルト入力するとVScodeでも正常に認識してくれるようになる。
ドライバの問題なので根本的解決はメーカー対応を待つしか無い。

症状

VS code使用時にチルト入力(マウスホイールを横に倒す)を行うと、
1段階だけスクロールするが、それ以降のチルト入力を受け付けない

環境

マウス:ロジクール MX ERGO
VScodeのバージョン:1.48.2
OS:Windows10 home

再現性

  • 起動直後は必ず起こる。
  • 拡張機能をオフにしても起こる。

原因

githubにissue上がってた。

The horizontal wheel of mouse is invalid #84136
https://github.com/microsoft/vscode/issues/84136

Logitecのドライバとwindowsの相性の問題でVScodeの問題じゃない。

との事。

解決方法

以下のいずれかの方法で解決する。

  • Logi option(Logitecのマウスドライバ管理ソフト)をアンインストールする。
  • デスクトップ、あるいは別ウィンドウで1回チルト操作を行う。
    この時に実際に横スクロールさせる必要は無い。
  • VScodeを管理者として実行する

備考

Logi optionを切って試したら、そもそもチルト入力自体ができなくなった。
当たり前!!

windows Live メールが死亡したっぽい

概要

windowsアップデートにより古のメーラー「windows Live メール」が動作しなくなった。
thunderbird使おうね。

更新プログラム:KB4565351が決めてくれた

連休明け早々、社内からいくつか「メールが使えない」と問い合わせが来た。
要約すると「windows Live メール」が動作しなくなった、との事。
どうやらwindows10更新プログラム:KB4565351で完全に死んだ模様。やったぜ。

そもそもサポート切れてるし、動いていたのがおかしかったのだ。
それを散々伝えたにも関わらず何もしなかった方々だ。
しっかりと苦しんで頂きたい。

…が、私が対応して回った。仕事なので。
彼らは手間をかけずに新しいメール環境を手に入れた。
結果として合理的な判断だったわけだ。

症状と対応

書くまでもないけど一応。
「windows Live メール」の使用は諦めてもらう必要がある。

症状

送受信の際に「エラーコード:0x800C013E」を吐く。

対処

  • メーラー「thunderbird」のインストールと設定
  • windows Live メールからアドレス帳と重要メールのエクスポート

Thunderbird – メールを簡単に。
https://www.thunderbird.net/ja/

sassでmin関数使おうとしてIncompatible unitsエラーが出た場合はクオートで回避する

概要

sassで「プレーンCSSのmin関数」を使う場合はクオートを使う。
「sassのmin関数」とは別物だと分からせろ。

min関数を使って幅のあるpaddingを設定したかったが…

プレーンcssの方のmin関数を使って
paddingを「表示幅の2%。ただし最大30px。」にしたかった。

具体的に言うと

幅 300pxの画面で見るとpadding:  6pxになる
幅 600pxの画面で見るとpadding: 12pxになる
幅1000pxの画面で見るとpadding: 20pxになる
幅1200pxの画面で見るとpadding: 24pxになる
幅1500pxの画面で見るとpadding: 30pxになる
幅1600pxの画面で見るとpadding: 30pxになる
幅2000pxの画面で見るとpadding: 30pxになる

とやりたかったので以下の記述

padding: min(2vw,30px);

が、

sassとプレーンcssでmin関数がかぶってしまったな…

「Error: Incompatible units: ‘px’ and ‘vw’.」と
コンパイルエラー発生。
「sassのmin関数は単位を揃えろ」と怒られた。
もちろん「プレーンcssのmin」は単位を揃える必要は無い。

調べた所、以下の内容を発見。

Sass: Special Functions
https://sass-lang.com/documentation/syntax/special-functions#min-and-max

以下、意訳。

  • 従来のsassと新規のプレーンcssでmin関数の名前がかぶってしまった。うまく使い分けて欲しい。
  • 該当部分を含むのが「css」ファイルであればエラーは起こらない
  • Dart Sassの場合は変数や関数を使わなければプレーンcssのminとして解釈する
  • クオートつけてunquoteする事で回避できる

先程の記述だと見分けがつかない。ということか。

クオート使って回避できた。

padding: unquote("min(2vw,30px)");

で解決。

padding: min(2vw,30px);

ちゃんととコンパイルされていた。

それならclamp()で良いのでは?

padding: clamp(6px,2vw,30px);

通常2vwで最小6px、最大30pxと設定できる。
こちらなら衝突は起きないのでそのまま使える。

…何をムキになっていたのでしょうね。
道理でどこ探しても話題になっていないわけだ。

ファイル監視時のエラー「File to read not found or unreadable」はsublime textの設定で改善できるかもしれない

概要

テキストエディタ「sublime text」はファイル保存時のロック開放が遅い時があり、更新を監視していると「ファイルが見つからない、または使えないエラー」が出る事がある。
代替ファイルに一旦保存するオプション「atomic_save」を適用して解決した。

エラー「File to read not found or unreadable」が出たり出なかったり

SCSSをレンダリングするためにnode.jsを用いてSCSSファイルを監視していた。
更新すると時々「File to read not found or unreadable」エラーが出たり出なかったりした。

sublime textが原因だった

メモ帳では出なかったので、
使用しているエディタ「sublime text」がファイルをロックしているのだろうと推測。

エラーが起きた場合に再帰的にレンダリングを呼び出し、成功するまで無限ループさせる事でとりあえず目的は達成できた。
時々エラーは出続けたが。

「atomic_save: true」で解決

sublime textに代替ファイルに一旦保存するオプション「atomic_save」がある事を知った。

設定方法は
「基本設定」→「基本設定-ユーザー」
「{}」の中に
“atomic_save”: true,
を追加する。だけ。

備考:力技の成功するまでループ

一応再起ループの部分だけ掲載。
参考にならんと思うけど。

// index.js(npm-scriptsで実行しているファイル)

const fs       = require('fs');
const n_sass   = require("node-sass");

// SCSSファイルの更新を検知すると呼ばれる
function sass_flow(){
  return Promise.resolve()
  .then(()=>{
    console.log("render start");
    return sass_render("./css/style.scss","style.css");
  })
  .then((result)=>{
    console.log("writeFile start");
    return write_file("./style.css","./style.css.map",result);
  })
  .then(()=>{
    console.log("browser reload");
    bs.reload
  })
  // エラーをキャッチしたら自分を呼び直す
  .catch((err)=>{
    console.log("sass_flow de error catch!! 再帰呼び出し!!");
    console.log(err);
    sass_flow(); 
  });
}


const sass_render = (input,output)=>{
  return new Promise(function(resolve,reject){
    n_sass.render({
      file: input,
      outputStyle: 'expanded',
      sourceMap: true,
      outFile: output
    },
    function(error,result){
      if(error){
        // console.log(error);
        reject(error);
      }else{
        console.log("render success");
        resolve(result);
      }
    });
  });
}

//cssとmapを書き込んだらresolveを返す
const write_file = function(file,map,renderResult){
  let path_css = file;
  let path_map = map;

  return new Promise(function(big_resolve,big_reject){
    Promise.resolve()
    .then(function(){
      write_the_file(path_css, renderResult.css);
    })
    .then(function(){
      write_the_file(path_map, renderResult.map.toString());
    })
    .then(function(){
      big_resolve();
    })
    .catch(function(err){
      //error処理
      // console.log(err);
      big_reject(err);
    });
  });
}

function write_the_file(path,str){
  return new Promise(function(res,rej){
    fs.writeFile(path, str, function(err){
      if(!err){
        res();
      }else{
        rej(err);
      }
    });
  });
}

スプレッドシートの更新をLINEに通知する

概要

複数拠点感で共用している進捗管理のgoogleスプレッドシートが更新通知が欲しい。
LINEが無料だったので導入した。簡単だった。

手順

LINEアカウントを準備

LINE notifyからトークンを取得する。
・メールアドレスの登録が必要。
・PCからアクセスする必要がある。

Google Apps Script

対象のスプレッドシートにスクリプトを書く

📝LINE notifyを呼ぶスクリプト例

function send_line(){
  var token = "トークン文字列"; 
  var okuru_text = "LINEで通知する文章\nで改行もできる";
  var options  = {
     "method"  : "post",
     "payload" : "message=" + okuru_text,
     "headers" : {"Authorization" : "Bearer "+ token}
  };
  UrlFetchApp.fetch("https://notify-api.line.me/api/notify",options);
}

本件で試したらUrlFetchApp.fetch()に文句言われた。
マニフェスト ファイルで「script.external_request」を許可したら解決した。

📝マニフェストファイル

{
  "timeZone": "Asia/Tokyo",
  "dependencies": {
  },
  "exceptionLogging": "STACKDRIVER",
  "oauthScopes": [
      "https://www.googleapis.com/auth/script.external_request"
  ]
}

注意事項

スクリプトを消してもトークンは生き続けるので注意。
使わなくなったらLINE notifyから削除しよう。

firefoxのスクラッチパッドが無くなる

概要

firefoxが備えているjavascriptをテストする機能「スクラッチパッド」が廃止される。
代わりにコンソールを使いましょうね。
ってmozillaが言ってた。

解決手順

スクラッチパッドに見慣れない黄色い帯が。
“scratchpad will be disabled in a future release.””
意訳:スクラッチパッドは近いうちに無くなるぜ。詳しくは以下のリンクに。
Deprecated tools – Firefox Developer Tools | MDN

意訳:
ScratchpadはFirefox 70で非推奨になるので、
代わりにwebコンソールを使え。
複数行のコードを入力したい場合は「ctrl + enter」を押せ。
あるいは文脈によってはenterでも「改行」として解釈してやる。

とのことだけど、「ctrl + enter」だと実行されちゃう。
「shift + enter」の間違いっぽい。
上記リンク先内にサンプルコードがあったので参考に。 エンター押すたびに返り値が表示されるけど
実行前に定義した定義した変数や関数もちゃんと残っているので安心。

切り替えていこう。

windows機でnpm-scriptでsublime-textとgulpを同時に起動したい

概要

windows機でnpm-scriptで「エディタの起動」と「gulp」を1コマンドで行いたい。
環境変数PATHと「|(パイプ)」を使うことで解決できた。

解決方法と注意事項

//package.json
"scripts": {
    "gulp": "npm run gulp",
    "sublime": "sublime_text .",
    "start": "npm run sublime | gulp"
},
作業開始時に対象フォルダで「npm run start」。
エディタが開き、gulpが起動する。
ズボラばんざい。

注意事項

  • 「|(パイプ)」は本来ならば出力の受け渡しに使うが、
    ここでは左辺を終了させるためだけに使っている。
  • 環境変数PATHにsublime_Textの実行ファイルを登録しておく必要がある。
  • 汎用性に欠いたpackage.jsonを作るのはどうかと思う

別案

同時起動の部分だけに関して言うならば
npm-run-all – npm

このパッケージインストールした方が早い。
並列と直列の両対応らしい。試してないけど。

やりたかった事

やりたかった事は
開始コマンドを1つ入力すると
  1. エディタがフォルダ(プロジェクト)を開き、
  2. gulpが起動する
というシンプルな内容。
gulp単品での起動と使い分けができるようにする。
エディタはsublime_textを使用。

半角スペースがエスケープできない

まず試してみた。
エディタのフルパスをそのままぺたり。
"scripts": {
    "sublime2": "\"C:\\Sublime Text\\sublime_text.exe\"",
},
→エラー: ‘C:\Sublime’ is not recognized 半角スペースで切られて実行されたっぽい
ダブルクォートでエスケープできていない。 色々試したが、結局できなかったので
環境変数PATHにsublime_textとして登録した後、
"scripts": {
    "sublime2": "sublime_text .",
},
とする事で解決。
この時点で自分のPCでしか動作しないので注意。
駄目な形のオンリーワンである。

npm-scriptの並列起動

軽く調べてみた所、
initした時にできるサンプルのように
「echo ~~ && exit ~~」
&&で直列、&で並列を指定できるという記述を見たが、
windows機では動作しないとの事。
javascript – How can I run multiple npm scripts in parallel? – Stack Overflow
windowsの場合、どちらも直列で左辺が終了すると右辺が実行される。
(→エディタを終了させるとgulpが始まる) 同ページ内にパイプを使ってみてはどうか、という記述あり。
試してみる。
//package.json
"scripts": {
    "gulp": "npm run gulp",
    "sublime": "sublime_text .",
    "start": "sublime_text  | gulp",
  },
なんかしらんが希望通りの動作した。 パイプが無理やり左辺の終了を伝えてくれるのだろうか、と考えたが、
順番を入れ替えたら動作しなかったのでおそらく違う。
意味がわからん。

感想

理屈がわからないと怖いのでおとなしく並列用のパッケージを使おう。
パイプの謎はともかく、実行ファイルのパスにスペースが含まれる場合の解決策は知っておきたい。
引き続き調査する。