gulp-sassが2回更新しないと適用されない問題

概要

gulpを使う場合、処理Aで生成したファイルを
処理Bで使用したい場合は処理A→処理Bとseriesでつなぐのではなく、
処理(A+B)を用意する必要がある

問題の具体例

gulp-sassでコンパイルしたcssを見たら
要素ごとにメディアクエリが出力されていた。 大した量でもないのだけれど、
やはり気持ち悪いのでなんとかしたい。 調べてみると
pleeeaseのmqpacker機能でまとめてくれるらしい。
gulp-pleeease – npm

失敗例

以下のコードで試す。(失敗する)
// gulpfile.js

// sass
gulp.task('sass', done => {
  gulp.src('./css/style.scss')
  .pipe(sass({outputStyle: 'expanded'}))
  .pipe(gulp.dest('./css'))
  done()
});

// pleeease
gulp.task('pleeease', done => {
  gulp.src('./css/style.css')
  .pipe(pleeease({
    mqpacker: true
  }))
  .pipe(rename({
    suffix: '.min',
    extname: '.css'
  }))
  .pipe(gulp.dest('./css'))
  done()
});

// watch
gulp.task('watch', () => {
  gulp.watch('./css/*.scss', gulp.series('sass','pleeease'));
  //  ………
})
このまま実行するとstyle.cssが見つからないとエラーが出る。
seriesの時点で中身のtaskごとのsrcをチェックしているっぽい。 なので

解決策

// gulpfile.js

// sass and pleeease
gulp.task('sass_and_pleeease', done => {
  gulp.src('./css/style.scss')
  .pipe(sass({outputStyle: 'expanded'}))
  .pipe(pleeease({
    mqpacker: true
  }))
  .pipe(rename({
    suffix: '.min',
    extname: '.css'
  }))
  .pipe(gulp.dest('./css'))
  done()
});

// watch
gulp.task('watch', () => {
  gulp.watch('./css/*.scss', gulp.task('sass_and_pleeease'));
  //  ………
})
解決。
当たり前と言えば当たり前なのだけれども。 表題の件は
すでにstyle.cssがある環境で上記のコードを実行したため、
エラーが出ずにいらない苦労した、という話でした。 というか、そもそもpleeeaseでsassコンパイルできるっぽい。
追加でいらない苦労の可能性が。

node.jsで脆弱性のあるパッケージを手動で更新した

概要

gulp-sass使おうとしたら脆弱性があると言われた。
内部で呼ばれている古いtarが原因だった。
悪いの承知でgulp-sass内のtarを手動で最新版に代えた。
良い子は作者にリクエストして修正を待とうね。
npm auditで検出された脆弱性
npm auditで検出された脆弱性

やったこと

package.jsonを書き換える

※大元の方じゃないので注意。
node_modules
└ node-gyp
 └ package.json ←こいつを書き換える dependenciesの
“tar”: “^2.2.2”,

“tar”: “^4.4.8”,
に書き換える。

インストールと修理

書き換えたら
npm install
して再インストールした後に
npm audit fix
するとキレイにしてくれる。
念の為、
npm audit
して「found 0 vulnerabilities」と表示される事を確認しておく。

npm list [パッケージ名]でバージョン確認

さらに心配ならば
npm list tar
して「tar@2.2.2」が「tar@4.4.8」になっている事を確認しよう。
`-- gulp-sass@4.0.2
  `-- node-sass@4.12.0
    `-- node-gyp@3.8.0
      `-- tar@4.4.8

注意事項

パッケージgulp-sassの依存関係を勝手に書き換えているので動作保証外。
当然である。
本来は作者の方に連絡して直してもらうのがスジ。
…が、実際に動いているプロジェクトの中で発生したらそんな悠長な事言ってられないのも事実。
あくまで自己責任の緊急措置、ということでひとつ。

参考

node.js – npm audit Arbitrary File Overwrite – Stack Overflow

Boostnoteからwordpressに投稿する時に注意する事

概要

すばらしきnoteツール「Boostnote」に
wordpressに直接投稿できる機能があるので試した。
まだ、この機能の使い勝手はイマイチだったのでコピペ運用を選んだ。

Boostenoteとは

すっごい便利なメモ帳。
書いたテキストをフォルダとタグで管理できる。
スッキリとしたUIでとても使いやすい。
markdown記法の入門に最適。
導入も楽、設定も楽なのでとりあえずインストールしよう。
Boostnote | Boost Happiness, Productivity, and Creativity.

wordpressへの投稿機能の設定

わかりやすく解説してくれているサイトがあったのでご紹介。
BoostnoteからWordPressへの記事の上げ方 – galeの日記
要約すると、
applicationプラグインを入れてパスワードを発行して、
Boostnoteの設定画面に入力するだけ。 注意事項は以下2点
  • ユーザー名は「wordpress側のユーザー名」(ログイン時に使うもの)
  • applicationプラグインが発行するパスワードは 区切りのスペースを取り除いて入力する
再発行はいくらでもできるので気軽に試せる。

アップロード機能はまだ不便だった

各挙動を記載する。

一番最初のh1が記事タイトルとして使われる

タイトルタグなど特別な指定しなくても
ノート内の最初のh1がタイトルに入ってくれた。 …が、URLも同様で
「http://(ドメイン)/(記事タイトル) 」
になった。 仕方ないのだけれど都合が悪い。

クラシックブロックとして扱われる

ノート全体が1つのクラシックブロックとして投稿された。
クラシックブロックの中で
「h1」や「p」「blockquote」などのhtmlタグがついていた。

「コード(バッククォート3つで始まるヤツ)」はうまく動作しない

余計な数字がはみ出てついてきた。
見た感じ、行番号が余分に反映されているように見える。

Boostnote側でつけたタグは無くなる

Boostnote側でノートにつけたタグは無くなる。
wordpress側に同じ名前、同じslugのタグを作成しておいても反映されなかった。

アップロード先の使い分けはできない

ノートを作成し、
localhostにアップロードできたのを確認した後、
Boostnoteのアップロード先を本番環境に指定し、
「Update Blog」するとエラーが起きる(設定ミスと言われる)。

憶測だけどノートがアップロードされたURLを記憶しているのだと思う。
そこだけを修正する方法は見つけられなかった。
新規にノートを作成するしかない。

逆にアップロードされたwordpress側の記事を削除しても
Boostnote側のノートには「Update Blog」が表示された。
選択したら新規に作成してくれたので気にする必要はなかった。

画像はアップロードされない

imgタグは挿入されるが
srcがBoostnoteのstorageに指定されているので画像は表示されない。
こんな感じ。
<img src=': storage/1234-5678-9012/gazou.jpg' alt="gazou">
ローカルの画像保存フォルダを指定する「:storage」がそのまま入っていた。
当然web上では参照できない。

markdownをコピペ。これだ。

画像もタグもカテゴリもURLも設定できないのはツラい。 Boostnote側でも
アップロード済みのノートと
そうではないノートの見分けがつかないのも不満点。

でも Boostnoteの書き心地はとても良い ので使っていきたい。

思案の結果、答えが出た。
Boostnoteで下書きしてwordpressにコピペ。 これだ。

もちろんwordpress側にmarkdownプラグインが入っている必要がある。

開発者様から石投げられそうな運用だが仕方ない。
あくまでwordpressとの連携機能に不満があるだけで、
Boostnoteが素晴らしいツールであることに変わりはない。
インストールナウ!

electron-builderでwindows用インストーラーを作る時の設定

概要

electron-builderでwindowsのインストーラーを作成する時は
「NSIS」を指定すると便利。

package.jsonの書き方

build節に以下の指定
"build": {
    "win": {
      "target": "nsis"
    },
    "nsis":{
      "oneClick": false,
      "allowToChangeInstallationDirectory": true
    }
}
“win”の”target”を”nsis”を指定。
他OSやインストーラーを希望する場合は以下を参照
Common Configuration – electron-builder

NSISの設定

オプション詳細はここ
NSIS – electron-builder
全部英語なので感覚で勝負する。

インストール先

  • oneClick:ワンクリックインストーラー。
    trueにするとインストーラークリックした時点で何も聞かれずインストール&実行する。
  • allowToChangeInstallationDirectory:保存場所指定の許可
    trueにするとユーザーがインストール先を指定できる。
    ※これを使う場合は「oneClickをfalseにしろ」って怒られた
これでインストール先をたずねてくれるようになった

インストーラーのアイコン

NSISインストーラーのアイコンは
buildフォルダのinstallerIcon.icoを参照してくれる。
(※”installerIcon”でパス指定もできる)

Defaults tobuild/installerIcon.icoor application icon.
Defaults tobuild/uninstallerIcon.icoor application icon.

firefoxのレスポンシブモードでtargetが_blankのformはPOSTされない不具合

概要

題字の通り。
解決策はレスポンシブモードを止めれば良い。
ルー大柴みたい。

解決策

  • レスポンシブモードをやめる
  • target=_blankをやめる
上記条件の2つを併せた時に発現するので
どちらか止めれば良い。

javascriptを使う

どうしても新しいタブにPOSTしたいのであれば
javascript使ってどうにかするしかない。 ajaxでPOSTすると新しいタブに開けないので
通信成功時に無名window.open()してcontentだけ書き換える必要がある。 そこまでやって
今回のケースではformが要らない事に気づく。

雑感

前は出来た気がするんだがどうだったか。
やっぱりQuontum以降のレスポンシブモードは何かおかしい。

skypeから使えるTo-Do機能が地味に便利

概要:

<

p data-line=”2″>skypeにtodo機能がついていた
地味に便利

使い方:

– タスクの作成

<

p data-line=”8″>相手メッセージを右クリック
「タスクを作成する」

– タスクの管理

<

p data-line=”12″>チャット欄右側の「青丸に+」のボタンから「コンテンツとツール」を開く
「Microsoft To-Do」を選択
「リスト」からタスクの管理ができる

注意事項

skypeからできるのは

    • タスクの追加
    • タスクの編集
  • タスクのチェック

<

p data-line=”22″>「タスクの削除」や「リストの削除」などは
マイクロソフトのサービス「Microsoft To-Do」にログインする必要がある
(※skypeアカウントでログインできる。)
期限や子タスクなどtodo管理に不足ない。
アプリ版もある模様。

所感

<

p data-line=”29″>顧客からの依頼はメール、社内の依頼はskypeで連絡される事がほとんどなので地味に助かる。
期限の設定が出来ないので重要度の高い物は別途スケジューラで管理する必要がある。
「ちょっと強いクリップボード」くらいの認識。
アルトベンリー。

Firefoxのページ内検索時に「すべて強調表示」かつ入力欄内にあるとスクロールしないバグ

概要
firefoxのページ内検索にバグあり
「すべて強調表示」をオンにしていると発現する

症状:
特定の状況下でページ内検索が正常に動作しない

再現に必要な状態:
・検索したい文字列が2つ以上の入力欄にある
・該当する入力欄が1画面におさまっていない
・「すべて強調表示」がオンである
※入力欄は「inputタグ」と「textareaタグ」で確認

検証用ページ:
http://doudemo.info/demo/20181022/

解決策:
「すべて強調表示」を解除する。以上。

※両立させたい場合は「強調表示」を解除した状態で検索して、
1つ目がhitした(ウィンドウ上限に表示された)状態で「強調表示」をオンにする。
→1つ目の位置が記憶されて標準の動作と同等の動きをする

備考:
・選択自体は正常に動作している
・スクロール表示のみの不具合
・セーフモードで確認済み
・友達いないので自分の環境でしか確認できてません。
 誰か試してみて。

Edgeとストアアプリが「0x80072EFD」で接続できない時はIPv6の設定を見直す

概要:
Edgeとストアアプリがネットに接続できなくなった。
ストアの方でエラーコード:0x80072EFDの表示。
ネットワークアダプタの設定でIPv6のチェック入れたら治った。

windows october update(修正版)が来た。(2018/10/10)
導入した当日は気づかなかったが、おそらくこのupdateが原因だと思う。
少なくとも先月末まではedgeが正常に動作していた。

問題が起きてからエラーコードで検索するとあっさり解決方法が出てきた

以下、偉大なる先駆者様。

【解決】Windows 10 の大型アップデート後、ストアアプリが「0x80072EFD」でインターネットが接続エラー

TOMOROH’sBlog
https://blog.enr34.jp/archives/4517

Windows10大型アップデート後、ストアアプリが「0x80072EFD」で接続できない不具合解決!

おんつぁんの30秒ひとりごと
https://blogs.yahoo.co.jp/f1charley/35278128.html

>IPv6を無効にしているとダメみたい。。。
>IPv6でMicrosoftのサイトにアクセスできないことが確認されれば自動的に優先度が低くなるらしく、無効化してはいけないようです。
>この設定変更だけで解決したかも。。。

これだけで済むなら、デバイスの再インストールより手軽かも。
試してみる。

「ネットワーク接続」から対象の「ネットワークアダプタ」を右クリック。
「プロパティ」→「インターネットプロトコル バージョン6(TCP/IPv6)」のチェックをつけて「OK」で閉じる。
設定を適用させるため、同上の「ネットワークアダプタ」からいったん「無効」にして再度「有効」にする。

つながった。解決。

一昔前に「IPv6を有効にしていると遅くなる」みたいな話を聞いてオフにしていたような気がする。
「オフ」で始めたから実感は無いのだけれども、もし遅く感じるようなら戻せるように覚えておこう。

[windows10]SuperfetchがSysMainに改名していたのでやっぱり停止した話

概要:
「Superfetch」が「SysMain」に改名していた。
古いPCや相性が悪い場合はオフにした方が快適になるかも知れない
SSDのみ搭載しているPCには関係ない。

サービスの管理から「SysMain」のスタートアップを無効にする

windowsのアップデートが来た。(2018/10/04)
October 2018 Update(バージョン1809、ビルド17763.1)

windowsアップデート適用後は一部設定がリセットされているので
何かしら変更している場合は再設定が必要になる。
(パスワードなし共有とか旧式ALT+TABとか)

再設定しようとしたサービスの1つ「SuperFetch」が見当たらない。
調べてみたら、なくなっていたらしい。

Windows 10 ビルド17134.286では消滅している。

wikipedia – Windows_SuperFetch
https://ja.wikipedia.org/wiki/Windows_SuperFetch

「Superfetch」が「SysMain」に改名していた。

が、もっと調べたら名前を変えて残っていた。

2018年6月2日にGuru3dへ投稿された記事。
投稿者が「superfetchが見当たらない。変更リストにも無ぇ。バグか?」と困惑。
非推奨とも廃止とも言われていないのに消えてしまった。
マイクロソフトに質問するも返答なし。

あと、みんな「SysMain = Superfetch」という認識で話しているのだけれどもソースが見つけられなかった。

Guru3d – Superfetchがどっかいった。死んだ?(意訳)

https://forums.guru3d.com/threads/win10-x64-build-17682-1000-superfetch-is-gone-deprecated.421318/

続いて2018年7月1日にマイクロソフトのフォーラムに投稿された記事。
質問者の「なんで名前変わったの?」という疑問に対し、
マイクロソフトの人は「わからん。開発者に聞いてみては?」と回答している。

マイクロソフト コミュニティ – SuperfetchはSysMainに昇格しました。おめでとう!(意訳)

https://answers.microsoft.com/en-us/insider/forum/insider_wintp-insider_perf-insiderplat_pc/superfetch-service-has-been-promoted-to-sysmain/395cd8b7-7a02-44fa-af91-dd6b358b7276

redditにもスレッドが立ってた
抜粋&意訳:
「今回のアップデートで「Superfetch」が「SysMain」に改名したけどどうよ?」
 ・オフにするのは時代遅れ
 ・実際オフにしたら快適になった
 ・メモリ16GでHDDの人はオンで良いんじゃ?
 ・不良セクタがあるHDDだと激重になる
 ・そもそもSSDのみ使用の場合は勝手にオフになってる

掲示板だから鵜呑みには出来ないが、
「・そもそもSSDのみ使用の場合は勝手にオフになってる」
これは公式発表で裏取りしている人もたくさんいるので信用したい。
サービスは動作していてもアクセスはしていない…らしい。

今回のアップデートで「Superfetch」が「SysMain」に改名したけどどうよ?(意訳)

reddit – PSA: Microsoft renamed the Superfetch service to SysMain in Services.msc
https://www.reddit.com/r/Windows10/comments/9l0jvx/psa_microsoft_renamed_the_superfetch_service_to/

実害があるならオフにしろ

会社のPCは「メモリ8GB+HDD」で時々激重になった。
なので「オフ」にしていた。

家のPCは「メモリ16GB+SSD(system)+HDD」で重さを感じた事は無い。
なので「オン」のままである。

「HDDアクセスが多くて実害がある場合はSysMain(Superfetch)はオフにしてみろ」が正解ではないだろうか。

ちなみに1809入れ終わった会社PCのレジストリには
HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Control\Session Manager\Memory Management\PrefetchParameters
EnableSuperFetch = 3
が入っていた。
0が停止、1がシステムのみ、2がアプリのみ、3が両方との事。
とりあえず0にしておいた。

マイクロソフト コミュニティ - SuperFetch がキャッシュするアプリケーションやファイルを設定することはできますか?

https://answers.microsoft.com/ja-jp/windows/forum/windows_vista-performance/superfetch/af4187bb-463c-45e4-8f85-b447881c97b6

Google Maps Platformの料金上限を設定する方法

概要:
「Google Maps Platform」の料金の上限を直接設定する方法は無い。
コンソールから表示回数の上限を設定して実現する。
アラートは金額で指定できる。

2018/07/16からGoogle MAP APIが有料になりました。
ついでに名前も「Google Maps Platform」に変わりました。
簡易な埋め込み以外はクレジットカード登録してAPI keyを発行しないと警告を吐きます。

「For development purpose」の文字

登録はこちらから
Google Maps Platform
https://cloud.google.com/maps-platform/

いくらかかるのか

料金表 – Google Maps Platform
https://cloud.google.com/maps-platform/pricing/sheet/

雑にまとめると

  • スマホに組み込むタイプは「無料」。
  • Google MAPの共有オプションからコピーして埋め込むタイプも「無料」。
  • ルートや検索結果を含む埋め込みは「1000回ごとに$14」。
  • 地図を画像として使用するstatic Mapsは「1000回ごとに$2」。
  • Javascript使って任意の場所にピン立てたりする奴は「1000回ごとに$7」。
  • 静的ストリートビューも「1000回ごとに$7」。
  • 動的ストリートビューは「1000回ごとに$14」

ただし、毎月$200までは無料にしてくれる。
例えば$210使った月は、はみ出た$10だけ請求される仕組み。

上限の設定方法

Q.使い過ぎないためにはどうしたら良い?
A.上限を設定しろ。アラートもあるぞ。(※意訳)
https://developers.google.com/maps/faq#usage_cap

apiの呼び出し上限の設定

Google Cloud Platform 管理画面
https://console.cloud.google.com/
左上ナビゲーションメニューボタン >「IAMと管理」>「割当」から該当するAPIを指定する

APIごとに
・Map loads per day ………………………………「1日の表示上限」
・Map loads per 100 seconds ……………………「100秒間の表示上限」
・Map loads per 100 seconds per user ……「100秒間かつ1ユーザーの表示上限」
が設定できる。

例えば「Dynamic Maps(Maps JavaScript API)」の1つしかAPIを使っていない場合は
1000回あたり$7 → 1回あたり$0.007。
$200 ÷ 0.007 ≒ 28571
無料の$200で28571回まで表示できる
それを31日で割ると921回。
よって「Map loads per day(1日の表示上限)」を「900」程度に指定すれば請求は発生しない。

※上限を超えると前述の「For development purpose」の文字と警告を吐きます(20180929現在)

複数のAPIを使う場合はこの900をAPIの数で割れば良い。
同率に表示される前提ではあるが。

アラートの設定

Google Cloud Platform 管理画面
https://console.cloud.google.com/
左上ナビゲーションメニューボタン >「お支払い」>「予算とアラート」>「予算を作成」を指定する

注意事項
・無料は「$200」だが予算の指定は「¥」
・請求先のデフォルトが「請求先アカウント」