
デスクトップアプリを作るならPCの電源周りの動作にも気を配る必要があります。
裏で動いていた非同期なタスクがスリープから起動後に再度実行できるようイベントをハンドリングしていきます。

Electornでは`powerMonitor`というAPIが用意されています。

## powerMonitor

`powerMonitor`は電源の状態の変化をモニターします。

[powerMonitor | Electron](https://www.electronjs.org/docs/api/power-monitor)

### イベント: resume
システムが再開したときのイベントです。

### 利用例

メインプロセスでのみ利用できます。
`app`の`redy`の中で利用します。

▼ TypeScriptでの例。
```ts:main.ts
import { app, powerMonitor } from "electron";
import log from "electron-log";

app.on("ready", async () => {
  log.info("App ready");


  /**
   * システム（PC）が再開したとき
   */
  powerMonitor.on('resume', function () {
    log.info('System resumption');
    // 何らかの処理
  })
});
```

## その他のイベント

公式が充実しているため短い紹介だけします。

- システムの再開と停止: `resume`, `suspend`
- 電源の状態: `on-ac`, `on-battery`
- スクリーンをロックとアンロック: `lock-screen`, `unlock-screen`
- システムが再起動またはシャットダウンするとき: `shutdown`

## 状態を把握するメソッド

- `powerMonitor.getSystemIdleState(idleThreshold)`  
  現在のシステムの状態 `active` 、 `idle` 、 `locked` 、 `unknown`を返す。
- `powerMonitor.getSystemIdleTime()`  
  アイドル状態の秒数を返す
- `powerMonitor.isOnBatteryPower()`  
  システムがバッテリー電源状態かどうか

電源周りはタブレットPCを使った設備点検などのアプリで利用できそうです。

## 参考

- [powerMonitor | Electron](https://www.electronjs.org/docs/api/power-monitor)
- [powerMonitor · Electron docs gitbook - imfly](https://imfly.gitbooks.io/electron-docs-gitbook/content/jp/api/power-monitor.html)

【Electron】PCのスリープと起動イベントを検知する


Node.js (electron)で作成していたアプリでHTTPリクエスト中の処理をキャンセルして再度リクエストなどする必要があったため、Axiosでリクエスト中の処理をキャンセルする実装をしました。

リクエストを出した側からキャンセルすることができます。

## Axios

**Axios**はnode.jsとブラウザのための[promiseベース](https://javascript.info/promise-basics)のHTTPクライアント。

- [Axios - GitHub](https://github.com/axios/axios)
- ドキュメント [axios-http.com](https://axios-http.com/)

キャンセル処理についてはドキュメントの[Cancellation](https://axios-http.com/docs/cancellation)に書いてあります。

## コードサンプルと解説
ドキュメントのコードサンプルです。
```js
const CancelToken = axios.CancelToken;
const source = CancelToken.source();

axios.get('/user/12345', {
  // キャンセルのトークン
  cancelToken: source.token
}).catch(function (thrown) {
  if (axios.isCancel(thrown)) {
    console.log('Request canceled', thrown.message);
  } else {
    // handle error
  }
});

axios.post('/user/12345', {
  name: 'new name'
}, {
  cancelToken: source.token
})

// cancel the request (the message parameter is optional)
source.cancel('Operation canceled by the user.');
```

`CancelToken.source`を利用してキャンセルトークンを作成してリクエストのオプションに設定します。
そして`source.cancel()`でリクエストをキャンセルできる。

`CancelToken.source()`が返す`source`は独立しているので、▼のようにリクエスト別にキャンセルできます。
```js
// キャンセルトークンが独立している
const source1 = CancelToken.source();
const source2 = CancelToken.source();

axios.get('/user/12345', {
  cancelToken: source1.token
})
axios.get('/user/12345', {
  cancelToken: source2.token
})
```

## 動かして確認してみる

確認しやすいようにドキュメントのコードサンプルを拡張しました。
`http://localhost:3000/delay`が時間のかかる処理のエンドポイントとしています。


```js
const axios = require('axios');
const CancelToken = axios.CancelToken;
const source = CancelToken.source();
const source2 = CancelToken.source();

const start = Date.now();
console.log("start: ", start)

// ①レスポンスがそんなかからないリクエスト
axios.get('http://localhost:3000/', {
  cancelToken: source.token
}).then((res) => {
    // 正常動作
    console.log(Date.now() - start, res.data);
}).catch((thrown) => {
  if (axios.isCancel(thrown)) {
    console.log(Date.now() - start, 'Request canceled: ', thrown.message);
  } else {
    // handle error
    console.log(Date.now() - start, 'Some error: ', thrown.message);
  }
})

// ②レスポンスに３秒かかるリクエスト
axios.get('http://localhost:3000/delay', {
  cancelToken: source.token
}).then((res) => {
    // 正常動作
    console.log(Date.now() - start, res.data);
}).catch((thrown) => {
  if (axios.isCancel(thrown)) {
    console.log(Date.now() - start, 'Request canceled: ', thrown.message);
  } else {
    // handle error
    console.log(Date.now() - start, 'Some error: ', thrown.message);
  }
})


// ③レスポンスに３秒かかるリクエスト（キャンセルしない）
axios.get('http://localhost:3000/delay', {
  cancelToken: source2.token
})
.then((res) => {
    // 正常動作
    console.log(Date.now() - start, res.data);
}).catch((thrown) => {
  if (axios.isCancel(thrown)) {
    console.log(Date.now() - start, 'Request canceled: ', thrown.message);
  } else {
    // handle error
    console.log(Date.now() - start, 'Some error: ', thrown.message);
  }
})

// 1秒後にキャンセルリクエスト
setTimeout(() => {
    // cancel the request (the message parameter is optional)
    source.cancel('Operation canceled by the user.');
}, 1000);
```
３つのリクエストを用意してキャンセルしています。
-  ①レスポンスがそんなかからないリクエスト
-  ②キャンセルするレスポンスに３秒かかるリクエスト
-  ③キャンセルしないレスポンスに３秒かかるリクエスト

これを実行すると▼のログが出ます。数字はミリ秒です。

```bash
> node .\cancellation.js
start:  1630385223319
71 Hello World!
1021 Request canceled:  Operation canceled by the user.
3081 3 seconds delay
```

- ①はキャンセル前にリクエストが終了しているため正常終了。
- ②は３秒かかる処理の途中でキャンセルが実行されたことがわかる。
- ③はキャンセルしたトークンと別のキャンセルトークンが設定されていたため、キャンセルされず正常終了しました。

### サーバ側のコード
リクエストキャンセルの確認のためのサーバを[Express](https://expressjs.com/ja/)で再現しました。
`http://localhost:3000/delay`が時間のかかる処理のエンドポイントとしています。

```js
const express = require('express')
const app = express()
const port = 3000

app.get('/', (req, res) => {
  res.send('Hello World!')
})

// リクエスト返答まで時間がかかるエンドポイント
app.get('/delay', (req, res) => {
  setTimeout(()=>{
    res.send('3 seconds delay');
  }, 3000);
})

app.listen(port, () => {
  console.log(`Example app listening at http://localhost:${port}`)
})
```

コードサンプルは[Github](https://github.com/suzu6/trial-code/tree/master/JS/delay_server)に登録しています。

axiosでリクエスト中の処理をキャンセルする


electonのアプリをビルドするためにelectron-builderを利用しています。
Windows版のインストーラの作成はNSISというスクリプト型のインストールシステムで作ります。

色々と調べてなんとなく全体を把握できたので、まとめて紹介します。

## 動作確認環境

electron-builderがそれなりに新しければ特に問題はないと思います。

確認しているのはElectron + Vuejsのちょっと特殊な環境です。

- Windows 10 Home
- [vue-cli-plugin-electron-builder](https://nklayman.github.io/vue-cli-plugin-electron-builder/): ~2.0.0-rc.5
  - electronでVueが使えるプラグイン
  - electron-builder: ^21.2.0 -> 22.2.0　に依存しています。

vue-cli-plugin-electron-builderの内部でelectron-builderを利用してます。
electron-builderの最新も`v22.11.7`ですのでそこまで古いわけではなさそう。

## electron-builderの設定

インストーラの設定は基本的に`package.json`の`build`オプションにelectron-builderの設定を書いていきます。
（vue-cli-plugin-electron-builderの場合はvue.config.jsの`builderOptions`に書く）

▼ 配布用のWindowsアプリを作る場合は大体こんな感じになっていると思います。
コメントを書きたいのでjsoncで書いていますがJSONに読み替えてください。
```json
"build": {
  "appId": "jp.example.myapp",
  "productName": "アプリの名前（日本語OK）",
  "mac": {/* Macの設定 */},
  "dmg": {/* Macの設定 */},
  // Windowsの設定
  "win": {
    "icon": "path/to/icon256.png",
    "target": {
      // Windowsインストーラー
      "target": "nsis",
      "arch": ["x64"]
    },
    // Windowsアプリのコード証明
    "certificateFile": "./path/to/コード証明書.pfx",
    "publisherName": "SUZU6",
    "certificatePassword": "xxxxxxxxx",
    // インストーラのアップ先
    "publish": {
      // https://www.electron.build/configuration/publish#s3options
      "provider": "s3",
      "bucket": "bucket",
      "region": "ap-northeast-1",
      "storageClass": "STANDARD",
      "path": "/installer"
    }
  },
  // インストーラの設定
  "nsis": {
    // https://www.electron.build/configuration/nsis
    // インストーラの名前
    "artifactName": "${productName}_setup_${version}.${ext}",
    // 設定スクリプトのパス
    "include": "build/installer.nsh",
    "oneClick": false,
    "allowToChangeInstallationDirectory": false,
    "createDesktopShortcut": false,
  },
}
```

NSISを使うため`build.win.target.target: nsis`としてください。
そして、`build.nsis`に設定を書いていきます。

## electron-builderのnsisの設定

- https://www.electron.build/configuration/nsis.html
こちらはelectron-builderでのNSISの設定のドキュメントです。

利用したり調べて分かった項目を紹介します。


|key|type|default|discription|
|--|--|--|--|
|`artifactName`|string|`${productName} Setup ${version}.${ext}`|インストーラのファイル名<br>変数については[File Macros](https://www.electron.build/file-patterns#file-macros)を参照|
|`include`|string|`build/installer.nsh`|NSISスクリプトのパス<br>`build/installer.nsh`といったファイルを用意してインストーラを拡張できる。|
|`script`|string|`build/installer.nsi`|NSISスクリプトのパス<br>拡張子が`.nsi`|
|`allowToChange`<br>`Installation`<br>`Directory`<br>長いので分割|boolean|false|ユーザーがインストールディレクトリを変更できるようにするかどうか。|
|`installerIcon`|string|アプリのアイコン（`build.win.icon`）と同じ|画像のパス|
|`uninstallerIcon`|string|アプリのアイコン（`build.win.icon`）と同じ|画像のパス|
|`installerIcon`|string||
|`oneClick`|boolean|true|ワンクリックインストーラを利用するか。インストーラを拡張しない場合は利用した方が分かりやすいと思う。|
|`createStartMenuShortcut`|boolean|true|スタートメニューのショートカットを作成するかどうか|
|`createDesktopShortcut`|boolean|true|デスクトップにショートカットを作るか|
|`shortcutName`|string|アプリ名|すべてのショートカットの名前|

## ファイル名などで利用できるマクロ

ファイル名などの文字列には[File Macros](https://www.electron.build/file-patterns#file-macros)が使えます。

|key|discription|
|--|--|
|`${arch}`|`ia32`, `x64`|
|`${os}`|ターゲットプラットフォームに応じて`mac`、`linux`または`win`|
|`${platform}`|`darwin`、`linux`または`win32`といった`process.platform`のプロパティ|
|`${name}`|`package.json`の`name`|
|`${productName}`|製品名|
|`${version}`|バージョン|
|`${channel}`|バージョンからプレリリースコンポーネントが検出されました（例 `beta`）|
|`${env.ENV_NAME}`|任意の環境変数|

他に[AppInf](https://www.electron.build/api/electron-builder#AppInfo)oの任意のプロパティが利用できます（例 `buildVersion`、`buildNumber`）。

## NSISスクリプト

インストーラをもっと拡張したい場合はNSISスクリプトで細かく設定できる。

[Custom NSIS script - www.electron.build](https://www.electron.build/configuration/nsis.html#custom-nsis-script)

electronのnsisプロパティの`script`と`include`でスクリプトのファイルパスを渡して読み込むことができます。


インストーラにスタートアップのチェックボタンをつけて、スタートアップに登録させることができたのでそのスクリプトを次の記事で紹介しています。

私は正直いまいち書き方を理解していない。
下のリンクを読んでスタートアップ


### NSISで使える変数

ちょっとしたTips。

NSISスクリプトで適当な変数を書いてビルドするとその変数は定義されていないとエラーが出る。
その際に、定義されている変数が一覧で出てくるので確認しておくと自由度が上がると思う。

ただし、NSISはShift-jisでエラーが出るため日本語は文字化けする。

下記のように出てくる。
```bash
# ビルドに失敗した
ExecError: C:\Users\user\AppData\Local\electron-builder\Cache\nsis\nsis-3.0.4.1\Bin\makensis.exe exited 
with code ERR_ELECTRON_BUILDER_CANNOT_EXECUTE
Output:

Output:
Command line defined: "APP_ID=jp.example.myapp"
Command line defined: "APP_GUID=xxxxxxxxxxxxxxxxxxxxxxxxxxxx"
Command line defined: "UNINSTALL_APP_KEY=xxxxxxxxxxxxxxxxxxxxxxxxxxxx"
Command line defined: "PRODUCT_NAME=�J��@�|@�|�b�v��A�b�v"  # 文字化け
Command line defined: "PRODUCT_FILENAME=�J�C�@�|�b��N�b�v"    # 文字化け
Command line defined: "APP_FILENAME=myapp"
Command line defined: "APP_DESCRIPTION=My electron app"
Command line defined: "VERSION=1.0.0"
Command line defined: "PROJECT_DIR=C:\git\myapp"
Command line defined: "BUILD_RESOURCES_DIR=C:\git\myapp\build"
Command line defined: "APP_PACKAGE_NAME=myapp"
Command line defined: "MUI_ICON=C:\git\myapp\dist_electron\.icon-ico\icon.ico"
Command line defined: "MUI_UNICON=C:\git\myapp\dist_electron\.icon-ico\icon.ico"
Command line defined: "APP_64=C:\git\myapp\dist_electron\myapp-1.0.0-x64.nsis.7z"
Command line defined: "APP_64_NAME=myapp-1.0.0-x64.nsis.7z"
Command line defined: "APP_64_HASH=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"
Command line defined: "COMPANY_NAME=SUZU6"
Command line defined: "APP_PRODUCT_FILENAME=�J�C�N���@�|�b�v�A�b�v"
Command line defined: "COMPRESSION_METHOD=7z"
Command line defined: "MULTIUSER_INSTALLMODE_ALLOW_ELEVATION"
Command line defined: "INSTALL_MODE_PER_ALL_USERS_REQUIRED"
Command line defined: "SHORTCUT_NAME=�J�C�N���@�|�b�v�A�b�v"
Command line defined: "UNINSTALL_DISPLAY_NAME=�J�C�N���@�|�b�v�A�b�v 1.0.0"
Command line defined: "MUI_WELCOMEFINISHPAGE_BITMAP=${NSISDIR}\Contrib\Graphics\Wizard\nsis3-metro.bmp"     
Command line defined: "MUI_UNWELCOMEFINISHPAGE_BITMAP=${NSISDIR}\Contrib\Graphics\Wizard\nsis3-metro.bmp"   
Command line defined: "ESTIMATED_SIZE=18823"
Command line defined: "COMPRESS=auto"
Command line defined: "UNINSTALLER_OUT_FILE=C:\git\myapp\dist_electron\__uninstaller-nsis-myapp.exe"    
Processing config: C:\Users\user\AppData\Local\electron-builder\Cache\nsis\nsis-3.0.4.1\nsisconf.nsh    
Processing script file: "<stdin>" (ACP)
warning 6000: unknown variable/constant "APP_NAME.lnk" detected, ignoring (C:\git\myapp\build\installer.nsh:10)

```

## 参考
- [electron-builder による Windows インストーラー (NSIS) 作成でやりたかったことの実現方法まとめ](https://techracho.bpsinc.jp/kawawa/2020_12_09/101448)
- [【NSIS】Windows向けインストーラーの作成方法：Modern UIを使用](https://office54.net/python/nsis-make-installer)
- [Electron Builder NSIS Create a shortcut in startup](https://stackoverflow.com/questions/48422871/electron-builder-nsis-create-a-shortcut-in-startup)
- [Reading and Writing the Registry - NSIS makes it easy](https://nsis.sourceforge.io/Reading_and_Writing_the_Registry_-_NSIS_makes_it_easy)
- [NSISで作るインストーラーのチートシート](https://qiita.com/logue/items/f8b622d53705471ef037)

electron-builderとnsisでWindowsアプリのインストーラの設定まとめ


electonのアプリをビルドするためにelectron-builderを利用しています。
Windows版のインストーラの作成はNSISというスクリプト型のインストールシステムで作ります。

インストーラにスタートアップのチェックボタンを付けて、チェックがあればアプリをスタートアップに登録するスクリプトを作りました。

前の記事の[electron-builderとnsisでWindowsアプリのインストーラの設定まとめ - suzu6.net]()にNSISについてまとめました。

## electron-builderの設定
```bash
# Modern UIをインクルードする
!include MUI2.nsh

!ifndef BUILD_UNINSTALLER
  # ②チェックボタンがチェックされた時の関数
  Function AddToStartup
    # ③スタートアップにショートカットを作成
    CreateShortCut "$SMSTARTUP\${PRODUCT_NAME}.lnk" "$INSTDIR\${PRODUCT_NAME}.exe" ""
  FunctionEnd

  # ①インストーラの最終ページにチェックボタンをつける
  !define MUI_FINISHPAGE_SHOWREADME
  !define MUI_FINISHPAGE_SHOWREADME_TEXT "スタートアップに登録する"
  !define MUI_FINISHPAGE_SHOWREADME_FUNCTION AddToStartup
!endif
!macro customUnInstall
  # ④アンインストール時にスタートアップのショートカットを削除する
  Delete "$SMSTARTUP\${PRODUCT_NAME}.lnk"
!macroend
```

処理の説明です。
1. インストーラの最終ページにチェックボタンをつける
   `MUI_FINISHPAGE`がインストーラの最後のfinishがあるページのことです。ここにチェックボタンを付けます。
2. チェックボタンがチェックされた時の関数
   `MUI_FINISHPAGE_SHOWREADME_FUNCTION`で呼び出した関数を定義しています。
3. スタートアップにショートカットを作成
   `CreateShortCut`でショートカットを作成します。`$SMSTARTUP`がスタートアップのフォルダパス、`$INSTDIR`がインストール先のフォルダパスです。
4. アンインストール時にスタートアップのショートカットを削除する


`package.json`の`build.productName`に設定したアプリ名をとることができます。
`build.productName`は`build.name`とは違って日本語でアプリ名を定義できます。

## 参考
- [electron-builder による Windows インストーラー (NSIS) 作成でやりたかったことの実現方法まとめ](https://techracho.bpsinc.jp/kawawa/2020_12_09/101448)
- [【NSIS】Windows向けインストーラーの作成方法：Modern UIを使用](https://office54.net/python/nsis-make-installer)
- [Electron Builder NSIS Create a shortcut in startup](https://stackoverflow.com/questions/48422871/electron-builder-nsis-create-a-shortcut-in-startup)
- [Reading and Writing the Registry - NSIS makes it easy](https://nsis.sourceforge.io/Reading_and_Writing_the_Registry_-_NSIS_makes_it_easy)
- [NSISで作るインストーラーのチートシート](https://qiita.com/logue/items/f8b622d53705471ef037)

electron-builderとnsisでインストーラにスタートアップのチェックボタンを付ける


Node.jsからChrome.exeを起動して任意のページを開く方法がわかったので紹介します。

## 動作確認環境

- Windows 10 Home
- Node.js: v14.17.5

MacもChromeのexeのパスを指定して起動できるはずです。

## Chrome.exeを起動して任意のページを開くコード

Windowsで実行できるサンプルコードです。
Chromeのexeのパスは自身の環境に合わせてください。

```js:open_chrome.js
// Chromeのパス
const chromePath = '"C:/Program Files/Google/Chrome/Application/chrome.exe"';
// 開くページのURL
const argument = "https://www.suzu6.net";

const spawn = require("child_process").spawn;
// Windowsの場合はコマンドプロンプトで実行する
const chrome = spawn(chromePath, [argument], { shell: true });

// 実行時の出力
chrome.stdout.on("data", data => {
  console.log(`stdout: ${data}`);
});

// 実行時のエラー出力
chrome.stderr.on("data", data => {
  console.error(`stderr: ${data}`);
});

// プロセスが終了する時の処理
chrome.on("close", code => {
  console.log(`child process exited with code ${code}`);
});

```

スクリプトを実行するとChromeが開きこのサイトが表示されます。
```bash
# Windows
> node .\open_chrome.js
child process exited with code 0
```

`process.platform`でOSを判定してパスを切り替える処理を加えると良い感じになる。
```js
const is_windows = process.platform==='win32'
const is_mac = process.platform==='darwin'
const is_linux = process.platform==='linux'
```

## Windowsでの注意点

Windowsではパスの記述に癖があります。
- 区切り文字は`/`で良いです。
  - バッククォートの場合は`\`ではなく`\\`にする。 
- フォルダ名のスペースに気を付ける。
  - × `'C:/Program Files/Google/Chrome/Application/chrome.exe'` :　C:/Programとそれ以降で分かれる
  - × `'C:/"Program Files"/Google/Chrome/Application/chrome.exe'` : スペースがうまく処理できずに不要なタブが開いてしまう ![picture 1](/images/posts/312-node-run-chrome-exe/20210825T175539.png)  
  - 〇 `'"C:/Program Files/Google/Chrome/Application/chrome.exe"'`


以上

Node.jsでChrome.exeを起動してページを開く方法


Markdownの文章に画像をコピペで貼れるようになる拡張機能です。
スクリーンショットやフォルダの画像をコピーしてクリップボードから貼り付けられるようになります。

[Markdown Image - marketplace.visualstudio.com](https://marketplace.visualstudio.com/items?itemName=hancel.markdown-image)

![picture 5](/images/posts/300/307/1626617101207.png)  

スクリーンショットから貼り付けられます。
![screenshot](/images/posts/300/307/MarkdownImage.gif)

フォルダやWEBの画像もコピーして貼り付けられます。
![screenshot](/images/posts/300/307/MarkdownImageCopy.gif)

こんな感じで画像を扱いやすくなります。
設定から保存先のパスを変えたり、ファイルを[Imgur](https://imgur.com/)などにアップロードして貼り付けることも可能です。

めっちゃ便利。

## 使いやすいように設定する

設定変更は`ctrl + ,`か左バー下の歯車から設定を選び検索に`markdown Image`を入力してください。

![picture 3](/images/posts/300/307/dda996af98bf96aa062dceedd5ce77ac5269d60a37d897de50b483e924da836f.png)  


### ファイル名の設定

初期状態だと貼り付けたファイル名がハッシュでしかも長い。
```bash
# デフォルトのハッシュ
![picture 2](/images/posts/300/307/fd1a2472e46c2dd92b903aa1598ba8b096838829f242c584bc07dbbd0bb41585.png)
```

![picture 2](/images/posts/300/307/fd1a2472e46c2dd92b903aa1598ba8b096838829f242c584bc07dbbd0bb41585.png)  
このようにファイル名を変更できるので好みのものにしてください。

▼　いくつかファイル名の例を紹介
```bash
# timestampに設定変更した場合
${timestamp}
![picture 4](/images/posts/300/307/1626615452401.png)  

# マークダウンファイル名
${mdname}
![picture 8](/images/posts/300/307/307-vscode-markdown-image.png) 

# datetimeを表す
${YY}${MM}${DD}T${HH}${mm}${ss}
![picture 10](/images/posts/300/307/20210718T231400.png)  
```

変数や文字を組み合わせたいときは`${YY}-${MM}-${DD}T${HH}${mm}${ss}`のように指定します。セミコロン`:`とアスタリスク`*`は何故か正規表現がどうとかエラーがでて使えないです。

注意点として`${mdname}`だけだとマークダウンのファイル名だが番号が振られないので、２つめ以降は上書きになってしまう。
`${mdname}-${timestamp}`や`${mdname}-${filename}`のように被らなそうな組み合わせにすると良いです。


`/`でディレクトリを切れるのでオススメは以下のようにすると記事ごとに画像を管理しやすい。
```bash
# posts/${mdname}/${timestamp}
images/posts/307-vscode-markdown-image/1626876249627.png
```

## ファイルの保存先パスの変更

デフォルトでは画像は`/images`に保存されます。
![picture 12](/images/posts/300/307/307-vscode-markdown-image-1626618411652.png)  

こちらで保存先のパスを変更できる

## ファイルの保存先変更

デフォルトはローカルに保存します。

![picture 11](/images/posts/300/307/307-vscode-markdown-image-1626618296490.png)  

ローカル以外にもImgurなどにもアップロードできる。
認証設定など色々あるので試してほしい。

## 終わり
雑だけど以上です。
個人的にスクショとイメージのコピーを手軽にマークダウンに貼り付けられるようになるだけで十分満足です。




Markdownに画像を貼り付けるVSCodeの拡張機能 Markdwon Image


<i class="mdi mdi-twitter"/>[#PCD2021](https://twitter.com/hashtag/PCD2021?src=hashtag_click)の７日目のお題「ブックカバー」のアニメーションを作りました。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">ブックカバー <a href="https://twitter.com/hashtag/PCD2021?src=hash&amp;ref_src=twsrc%5Etfw">#PCD2021</a> <a href="https://twitter.com/hashtag/p5js?src=hash&amp;ref_src=twsrc%5Etfw">#p5js</a> <a href="https://twitter.com/hashtag/Processing?src=hash&amp;ref_src=twsrc%5Etfw">#Processing</a> <br><br>切り絵のブックカバー<br><br>背景のパーリンノイズが綺麗！<br>波紋の他も描きたかったけど時間切れ。。<a href="https://t.co/cMrB5h6tOl">https://t.co/cMrB5h6tOl</a> <a href="https://t.co/hf0wavB6HL">pic.twitter.com/hf0wavB6HL</a></p>&mdash; suzu6 (@suzu6_py) <a href="https://twitter.com/suzu6_py/status/1362782740559536129?ref_src=twsrc%5Etfw">February 19, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


p5jsで切り絵と波紋をイメージして描いています。
技術的な要素ではパーリンノイズと図形の差分`erase()`とlayerを利用しました。

PCD JAPAN 2021.02.20-21
[Processing Community Day Japan 2021](https://pcd2021.peatix.com/)

## Code

動くコードは[@OpenProcessing](https://openprocessing.org/sketch/1106996)で公開しています。   
※ メモリを消費するらしく一定時間でリロードが発生します。

ここではレイヤーに分けてコメントします。

▼初期設定。
本の背景のグラデーションは１枚目のレイヤーで描画してます。
波紋の中心座標などのパラメータはここで決めてしまいます。
```js
let width = 600;
let height = 600;

let count = 0;

// 背景のノイズのパラメータ
var noiseVal = 40;     // ノイズ
var zseed = [0, 7000]; // ノイズのシード値を固定
let layer01 = null;

// 波紋のパラメータ
let ripple_num = 4;
let ripple_params = [];

function setup() {
  createCanvas(width, height);

  // 背景のノイズのレイヤー
  let layer = createGraphics(width, height);
  layer.background("#2f4f4f");
  layer = umi(layer);
  layer01 = layer;

  // ランダムな波紋のパラメータ
  for (let i = 0; i < ripple_num; i++) {
    ripple_params[i] = {
      x: random(0, width),
      y: random(0, height),
      offset: random(0, width),
      a: random(40, 90),
      breadth: random(10, 20)
    }
  }
}
```

▼ レイヤーを重ねて描画しているところ。
波紋のレイヤーが可変になっている。
```js
function draw() {
  count++;

  // 背景のノイズのレイヤー
  let layers = [layer01];

  // 波紋のレイヤー
  for (let i = 0; i < ripple_num; i++) {
    let layer = ripples(
      ripple_params[i].x,       // 中心x座標
      ripple_params[i].y,       // 中心y座標
      ripple_params[i].offset,  // 波紋の初期の半径
      ripple_params[i].a,       // 波紋の間隔
      ripple_params[i].breadth, // 波紋の幅
      count);                   // 時間
    layers.push(layer);
  }

  // 白い枠のレイヤー
  layers.push(frame());

  // レイヤーを重ねて描画する
  for (let layer of layers) {
    image(layer, 0, 0);
  }
}
```

▼ 背景のノイズのレイヤー。
2Dのノイズはパーリンノイズになっている。シードを固定してx, y座標を少しずつずらすと滲んだようなグラデーションになる。
```js
// 背景のノイズのレイヤー
function umi(layer) {
  let m = width / 8;
  for (var y = m; y < height - m; y++) {
    for (var x = m * 2; x < width - m * 2; x++) {
      // noiseValで割ってノイズの分布を引き延ばしている
      let nx = x / noiseVal;
      let ny = y / noiseVal;
      let g = noise(nx, ny, zseed[0]) * 50;
      let b = noise(nx, ny, zseed[1]) * 70;
      layer.stroke(color(0, 200 + g, 200 + b));
      layer.point(x, y);
    }
  }
  return layer;
}
```
▼ 1枚目のレイヤーの画像  
![layer1](/images/posts/280/284/layer1.png)

▼ 波紋のレイヤーの画像  
受け取ったパラメータをもとに波紋を描く。
はみ出た部分は`erase_out()`で切り取っている。
一つのレイヤーで一つの波紋にしないと`erase()`が他のレイヤーに影響していしまう。
```js
// 波紋の描画
function ripples(x, y, offset, a, breadth, count) {
  let layer = createGraphics(width, height);
  layer.noStroke();
  layer.fill("#fffafa");

  let num = 5;

  // 外側の円から順に描画
  for (let n = num; 0 < n; n--) {
    let r = (count + offset) % 1200 - 300 + n * a;
    if (r < 0) continue;
    layer.ellipse(x, y, r + breadth);

    layer.erase();
    layer.ellipse(x, y, r);
    layer.noErase();
  }
  layer = erase_out(layer);

  return layer;
}

// フレーム外にでた図形を切り取る
function erase_out(layer) {
  let m = width / 8;
  let m2 = m * 2;
  let b = 5;

  layer.erase()
  layer.rect(0, 0, width, m + b); // top
  layer.rect(0, height - m - b, width, height); // bottom
  layer.rect(0, 0, m2 + b, height); // left
  layer.rect(width - m2 - b, 0, width, height); // right
  layer.noErase();
  return layer;
}
```
![layer2](/images/posts/280/284/layer2.png)

▼最後に本っぽく見せるためフレームを描画します。
```js
// 本をかたどるフレーム
function frame() {
  let m = width / 8;
  let m2 = m * 2;
  let b = 10;

  let layer = createGraphics(width, height);
  layer.fill("#fffafa");
  layer.rect(m2 - b, m - b, width - m2 * 2 + b * 2, height - m * 2 + b * 2, 10);

  layer.erase()
  layer.rect(m2 + b, m + b, width - m2 * 2 - b * 2, height - m * 2 - b * 2, 10);
  layer.noErase();

  return layer;
}
```
![layer](/images/posts/280/284/layer3.png)

▼以上の三枚を重ねると動く切り絵っぽくなる。
![layers](/images/posts/280/284/layers.png)

![bookcover](/images/posts/280/284/book.gif)

## 参考

- [p5.jsで「パーリンノイズ」のスゴさを思い知る](https://infosmith.biz/blog/it/p5js-noise)
なんちゃってヒートマップの箇所の２Dのノイズを利用しました。

- [erase() はレイヤーと一緒に使わないとダメなんだと気付いた夏 - note](https://note.com/deconbatch/n/nc789e8e02b06)
erase()とレイヤーの使い方を学びました。
絵とコードが豊富に解説されているので解りやすいです。
[@deconbatch](https://twitter.com/deconbatch)さんは色遣いが神がかっている方です。▼どれも綺麗すぎてやばい。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">シフマン先生にビデオレターのお礼スケッチお送りしたいけど、どれにしようかな？🤗<a href="https://twitter.com/hashtag/processing?src=hash&amp;ref_src=twsrc%5Etfw">#processing</a> <a href="https://twitter.com/hashtag/creativecoding?src=hash&amp;ref_src=twsrc%5Etfw">#creativecoding</a> <a href="https://twitter.com/hashtag/PCD2021?src=hash&amp;ref_src=twsrc%5Etfw">#PCD2021</a> <a href="https://t.co/apoPXpmMCH">pic.twitter.com/apoPXpmMCH</a></p>&mdash; deconbatch (@deconbatch) <a href="https://twitter.com/deconbatch/status/1363076453793992710?ref_src=twsrc%5Etfw">February 20, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

【p5js】パーリンノイズとeraseを使ったブックカバー#PCD2021


p5jsで風に吹かれて砂紋が流れているアニメーションを作った！

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">お題&quot;砂漠&quot;<br><br>風紋<a href="https://twitter.com/hashtag/PCD2021?src=hash&amp;ref_src=twsrc%5Etfw">#PCD2021</a> <a href="https://twitter.com/hashtag/p5js?src=hash&amp;ref_src=twsrc%5Etfw">#p5js</a> <a href="https://t.co/ufg3xeYbxi">pic.twitter.com/ufg3xeYbxi</a></p>&mdash; suzu6 (@suzu6_py) <a href="https://twitter.com/suzu6_py/status/1361984066967400455?ref_src=twsrc%5Etfw">February 17, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

風紋って書いちゃったけどあの模様は砂紋でしたorz。
ただ、イメージは風紋なので作品名は「**風紋**」とします！！！

## 砂紋について

砂丘や砂浜にある規則的な波状の起伏は砂紋です。
水や空気が流れによって砂が動いてあの模様が出来ます。

![ナミビア砂漠の砂紋](https://upload.wikimedia.org/wikipedia/commons/thumb/a/ab/Red_sand_dune_in_Namibia.jpg/250px-Red_sand_dune_in_Namibia.jpg)  
▲ナミビア砂漠の砂紋　（Wikipediaより）


## コード

```js
let width = 600;
let height = 600;
let phase = 0;

function setup() {
  createCanvas(width, height);
}

function draw() {
  background(220);

  for(let h = -20; h < height; h += 10){
    // 高さに応じてグラデーションする
    r = map(h, 0, height, 230, 90)
    g = map(h, 0, height, 200, 50)
    b = map(h, 0, height, 150, 0)
    let c = color(r, g, b);
    fill(c);
    noStroke();
    // 斜めにずれる位相を与える
    wave(h, phase + sin(h/30) - h/20)
    phase += 0.01;
  }
}

function wave(h, p) {
  let amplitude = 10.0;
  let a = 0 - p;
  
  // 波長に影響
  let inc = TWO_PI / 20.0;
  for (let i = 0; i < width; i += 2) {
    rect(i,h - sin(a) * amplitude, 
         2, sin(a) * amplitude + 30);
    a = a + inc;

    // 揺らぎ
    a += random(-1, 1) / 30;
    
    // aが1周期の大きさになるようにする
    if (a > TWO_PI) {
      a -= TWO_PI;
    }
  }
}
```

正弦波を上から順に重ねて描きました。

![wave](/images/posts/280/283/wave.png)  
▲ のようにグラデーションを付けた波を重ねています。
不思議なことに横の波の色は変わらないのに、波を重ねると縦の波が浮かび上がって来る。透過はしていない。

この作品は<i class="mdi mdi-twitter"/>[@PCD_Tokyo](https://twitter.com/PCD_Tokyo)の企画の５日目のお題「砂漠」に投稿しています。

PCD JAPAN 2021.02.20-21
[Processing Community Day Japan 2021](https://pcd2021.peatix.com/)

## @OpenProcessing

<iframe src="https://openprocessing.org/sketch/1106708/embed/" width="430" height="480"></iframe>

## おまけ

本格的に砂紋を再現するなら**Werner model**がよさそうです。
砂の跳躍と転がる単純なモデルで砂丘を形成するプロセスをシミュレーション出来ます。
- [砂丘のパターン形成のシミュレーションについて pdf](http://hatano-lab.iis.u-tokyo.ac.jp/thesis/soturon2002/thesis_suto.pdf)
図解付きの日本語で書かれていてるので参考になります。卒業論文ですが、順に現象と式を解説しているので読み物としても面白いです。

【p5js】砂丘の砂紋のアニメーション#PCD2021

個人の技術ブログを作り直しました（３回目）


前回作ったブログでサイトマップを作ります。
generateで静的ページを作って公開する予定です。



## Table of Contents

## セットアップ

[@nuxtjs/sitemap](https://www.npmjs.com/package/@nuxtjs/sitemap)を使います。

```sh
$ yarn add @nuxtjs/sitemap
```
`nuxt.config.js`の`modules`に`'@nuxtjs/sitemap'`を追加します。
すべてのルートが確実にキャッチされるように、インクルードした他のモジュールの後で実行する必要があります。

```js:nuxt.config.js
export default {
  modules: [
    '@nuxt/content',
    '@nuxtjs/sitemap'
  ],
}
```

次に、サイトマップ構成のデフォルトをいくつか追加します—を追加hostnameして空の関数を設定します。この関数は、後でコンテンツのパスを取得して返すために使用します。
```js:nuxt.config.js
export default {

  sitemap: {
    hostname: process.env.BASE_URL || 'https://www.suzu6.net/', 
    routes: async () => {} // routesにURLを渡す
  },

}
```

`routes: ['path/article1', 'path/article1']`のように配列を渡すとサイトマップを作ってくれます。
これから、この配列を網羅的に作っていく。


ドメイン名だけだと`TypeError [ERR_INVALID_URL]: Invalid URL: www.suzu6.net\`が出る。
URLの形式じゃないとエラーが出るのは良いね。
httpから書きます。


## URLのリストを作成する

routesにサイトマップの配列を渡します。
@nuxt/contentでは以下のコードで`content/posts/*.md`のパスを渡します。

```js:nuxt.config.js
routes: async () => {
  const { $content } = require('@nuxt/content')

  const posts = await $content('posts')
    .only(['path'])
    .fetch()

  return posts.map((p) => p.path)
}
```

上記の設定で`yarn run generate`で同時にsitemap.xmlが作られるようになります。

```xml:dist/sitemap.xml
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:news="http://www.google.com/schemas/sitemap-news/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:mobile="http://www.google.com/schemas/sitemap-mobile/1.0" xmlns:image="http://www.google.com/schemas/sitemap-image/1.1" xmlns:video="http://www.google.com/schemas/sitemap-video/1.1">
	<url>
		<loc>
			https://www.suzu6.net/posts/102-katex-math-functions
		</loc>
	</url>
	<url>
		<loc>
			https://www.suzu6.net/posts/14
		</loc>
	</url>
	<url>
		<loc>
			https://www.suzu6.net/posts/10
		</loc>
	</url>
  ...
```

## サイトマップにパス以外の情報を渡す。

```js
routes: [
  '/page/1',
  '/page/2',
  {
    url: '/page/3',
    changefreq: 'daily',
    priority: 1,
    lastmod: '2017-06-30T13:30:00.000Z'
  }
]
```

```js:nuxt.config.js

  sitemap: {
    hostname: process.env.BASE_URL || 'https://www.suzu6.net/',
    routes: async () => {
      let array = [
        {
          // トップページ
          url: '/',
          changefreq: 'daily',
          priority: 1,
          lastmod: new Date()
        }
      ];
      // コンテンツ
      const { $content } = require('@nuxt/content')
      const posts = await $content('posts')
        .only(['path', 'updated_at'])
        .fetch()
      array = array.concat(
        posts.map((p) => 
          { 
            return {
              url: p.path, 
              lastmod: p.updated_at,
              priority: 1,
            }
          })
      )
      return array
    }
  },
```



```xml:sitemap.xml
	<url>
		<loc>
			https://www.suzu6.net/
		</loc>
		<lastmod>
			2020-12-16T09:50:32.366Z
		</lastmod>
		<changefreq>
			daily
		</changefreq>
		<priority>
			1.0
		</priority>
	</url>
	<url>
		<loc>
			https://www.suzu6.net/posts/1
		</loc>
		<lastmod>
			2019-01-04T00:00:00.000Z
		</lastmod>
		<priority>
			1.0
		</priority>
	</url>
```



- [Generating Sitemap Entries For Nuxt Content](https://medium.com/javascript-in-plain-english/generating-sitemap-entries-for-nuxt-content-f7eb7b5fdb3b)

nuxt/contentでサイトマップを作る


## Markedjsを使った簡易エディタ

[markedjs](https://github.com/evilstreak/markdown-js)を使ってマークダウン記法でHTMLに変換できるフォームを作成しました。

~~本ブログでも、記事の利用に使っています。~~
※ サイトの移行に伴い、現在はnpmのmarkdown-itを利用しています。

実際どう動くのか、お確かめください。




<div class="columns section is-desktop is-small"">
    <div class="column">
        <h3> Markdownの入力フォーム</h3>
        <div class="field">
            <form id="editor-form" class="">
                <div class="control">
                    <textarea type="textarea" class="textarea" name="markdown" placeholder="markdown" rows="25" required></textarea>
                </div>
            </form>
        </div>
        <div class="field is-grouped">
            <div class="control">
                <span>このボタンで変換しますよ</span>
                <button class="button is-primary" type="button" onclick="draw_preview()">Preview</button>
            </div>
        </div>
    </div>
    <div class="column">
        <h3>HTMLに変換した結果</h3>
        <div class="section text-left" style="border: 2px solid #ebebeb; background: #ebebeb;">
            <div class="preview" id="marked-preview"></div>
        </div>
        <h3>目次を自動生成</h3>
        <div class="preview" id="headline-preview"></div>
        <div class="preview" id="headline" hidden></div>
    </div>
</div>


<script src="/js/core/jquery.3.2.1.min.js"></script>
<script src="/js/lib/underscore-min.js"></script>
<script src="/js/lib/marked.min.js"></script>
<script src="/js/lib/highlight.pack.js"></script>
<script src="/js/samples/markedjs_sample.js"></script>


コードの内容については[Markdownを「Marked.js」を使ってHTMLに変換する方法](https://www.suzu6.net/posts/38)で詳しく解説しています。

また、npmのコマンドを使ってマークダウンから変換する方法についても書いていますので、そちらもどうぞ。
[コマンドでマークダウンを変換するprocessmd | npm](https://www.suzu6.net/posts/120-npm-procesmd)

---

JavaScriptを初めて学ぶ方へのオススメ！
実際にプログラミングを書いて覚えられるので、オンラインでの学習と合わせて読み進めると理解が深まると思います。

<div class="cstmreba"><div class="booklink-box"><div class="booklink-image"><a href="//af.moshimo.com/af/c/click?a_id=1286797&p_id=56&pc_id=56&pl_id=637&s_v=b5Rz2P0601xu&url=http%3A%2F%2Fbooks.rakuten.co.jp%2Frb%2F13430282%2F" target="_blank" rel="nofollow" ><img src="https://thumbnail.image.rakuten.co.jp/@0_mall/book/cabinet/3584/9784797383584.jpg?_ex=200x200" style="border: none;" /></a><img src="//i.moshimo.com/af/i/impression?a_id=1286797&p_id=56&pc_id=56&pl_id=637" width="1" height="1" style="border:none;"></div><div class="booklink-info"><div class="booklink-name"><a href="//af.moshimo.com/af/c/click?a_id=1286797&p_id=56&pc_id=56&pl_id=637&s_v=b5Rz2P0601xu&url=http%3A%2F%2Fbooks.rakuten.co.jp%2Frb%2F13430282%2F" target="_blank" rel="nofollow" >確かな力が身につくJavaScript「超」入門</a><img src="//i.moshimo.com/af/i/impression?a_id=1286797&p_id=56&pc_id=56&pl_id=637" width="1" height="1" style="border:none;"><div class="booklink-powered-date">posted with <a href="https://yomereba.com" rel="nofollow" target="_blank">ヨメレバ</a></div></div><div class="booklink-detail">狩野祐東 SBクリエイティブ 2015年10月31日    </div><div class="booklink-link2"><div class="shoplinkrakuten"><a href="//af.moshimo.com/af/c/click?a_id=1286797&p_id=56&pc_id=56&pl_id=637&s_v=b5Rz2P0601xu&url=http%3A%2F%2Fbooks.rakuten.co.jp%2Frb%2F13430282%2F" target="_blank" rel="nofollow" >楽天ブックス</a><img src="//i.moshimo.com/af/i/impression?a_id=1286797&p_id=56&pc_id=56&pl_id=637" width="1" height="1" style="border:none;"></div><div class="shoplinkamazon"><a href="https://www.amazon.co.jp/exec/obidos/asin/4797383585/suzu60c-22/" target="_blank" rel="nofollow" >Amazon</a></div><div class="shoplinkkindle"><a href="https://www.amazon.co.jp/gp/search?keywords=&__mk_ja_JP=%83J%83%5E%83J%83i&url=node%3D2275256051&tag=suzu60c-22" target="_blank" rel="nofollow" >Kindle</a></div>                              	  	  	  	  	</div></div><div class="booklink-footer"></div></div></div>

Markedjsを使ってHTMLに変換するエディタのサンプルを作りました

Markedjsを使った簡易エディタ