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


前回作ったブログでサイトマップを作ります。
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でサイトマップを作る

nuxt/contentで作ったサイトに絵文字や数式のプラグインを追加して、マークダウンの書式を拡張します。
nuxt/contentを使っていなくても、remarkのプラグイン選びの参考にはなるかと思います。

## Table of Contents

## マークダウンのプラグイン
[markdown - @nuxt/contet](https://content.nuxtjs.org/configuration#markdown)

@nuxt/contentでは[remark](https://www.npmjs.com/package/remark)というプラグインでマークダウンの構文を解析しています。
HTMLへのパースは[remark-html](https://github.com/remarkjs/remark-html)を使ったりと、マークダウンを拡張する`remark-*`の豊富なエコシステムがあります。
目的に応じて役割ごとに細かなプラグインを組み合わせて扱うことができる。

`yarn` または `npm` でプラグインをインストールして**nuxt.config.js**に追加するだけで利用できます。
下はここで使っている絵文字や数式（$\KaTeX$）のプラグインを追加したところです。
コードを書かなくてよいので管理しやすい。

```js:nuxt.config.js
export default {
  // Content module configuration (https://go.nuxtjs.dev/config-content)
  content: {
    markdown: {
      remarkPlugins: [
        'remark-emoji',
        'remark-math',
        'remark-toc',
        'remark-footnotes',
        'remark-code-titles'
      ],
      rehypePlugins: [
        'rehype-katex'
      ]
    }
  },
}
```
２つのpuluginがあります。
`remark`はMarkdownの構文を解析するプロセッサで、`rehype`がHTMLを構築するプロセッサです。
例えば、`remark-math`がMarkdownの構造を解析して`rehype-katex`が$\KaTeX$に対応するHTMLに変換している。
`remark-emoji`のように単体で両方こなすものもある。

remarkについて読み応えのある熱い記事を見つけたので載せておきます。独自のParserの拡張の仕方も載ってます。
- [Remark で広げる Markdown の世界](https://vivliostyle.github.io/vivliostyle_doc/ja/vivliostyle-user-group-vol2/spring-raining/index.html)

---

以下からremarkの拡張プラグインを紹介していきます。
利用できる公式オススメのプラグインは[awesome-remark](https://github.com/remarkjs/awesome-remark)にまとまってます。  

## 絵文字

[remark-emoji](https://github.com/rhysd/remark-emoji)

```sh
# インストール
$ yarn add remark-emoji
```
**nuxt.config.js**の`content.markdown.remarkPlugins`に`remark-emoji`を追加する。
これでパースできるようになっています。

マークダウンの中の対応する文字を絵文字に変換してくれます。
```txt:入力
Emojis in this text will be replaced: :dog: :+1:

Toilet Time
:toilet: = 2 Minutes
:toilet: + :iphone: = 5 Minutes
:toilet: + :iphone: + ⁣:signal_strength: = 10 Minutes
:toilet: + :iphone: + :signal_strength: + :battery: = Infinite 
```

▼**出力結果**（引用符で囲ってます）
> 
> Emojis in this text will be replaced: :dog: :+1:
> 
> 
> Toilet Time  
> :toilet: = 2 Minutes  
> :toilet: + :iphone: = 5 Minutes  
> :toilet: + :iphone: + ⁣:signal_strength: = 10 Minutes  
> :toilet: + :iphone: + :signal_strength: + :battery: = Infinite   

[EMOJI CHEAT SHEET](https://www.webfx.com/tools/emoji-cheat-sheet/)の絵文字のコードは使えるはずです。

## 数式

数式に対応する`remarkPlugins`が[remark-math](https://github.com/remarkjs/remark-math)です。
数式を$$で囲うか、文中の場合は$で囲います。


対応する`rehype`には$\KaTeX$と**MathJax**があります。
- [rehype-katex](https://github.com/remarkjs/remark-math/blob/main/packages/rehype-katex)
- [rehype-mathjax](https://github.com/remarkjs/remark-math/blob/main/packages/rehype-mathjax)

どちらもLaTeXですが、HTMLの描画方法が少し違います。
個人的には描画速度が早くてKaTeXを選んでます。

```sh
# インストール
$ yarn add remark-emoji
```
**nuxt.config.js**の`content.markdown.remarkPlugins`に`remark-math`を、`rehypePlugins`に`rehype-katex`を追加する。
そして、表示のために$\KaTeX$のスタイルシートも当てます。
```js
export default {
    link: [
      // Add style sheet
      {
        rel: 'stylesheet',
        href: 'https://cdn.jsdelivr.net/npm/katex@0.11.0/dist/katex.min.css'
      },
    ],
  },

  // Content module configuration (https://go.nuxtjs.dev/config-content)
  content: {
    markdown: {
      remarkPlugins: [
        'remark-math'
      ],
      rehypePlugins: [
        'rehype-katex'
      ]
    }
  },
}
```
マークダウンで数式を書いてみる。
```md
**オイラーの等式**
$$
e^{i\pi}+1= 0
$$
ネイピア数$e$、虚数$i$、円周率$\pi$と有名な定数に$0$と$1$がある全部入りの数式。

**正規分布（ガウス分布）**
$$
f(x) = \frac{1}{\sqrt{2\pi\sigma^2}}\exp{-\frac{(x-\mu)^2}{2\sigma^2}}
$$
平均を$\mu$, 分散を$\sigma^2 \gt 0$とする正規分布とは、確率密度関数が次の形で与えられる確率密度関数。
```

▼**出力結果**  
> **オイラーの等式**
> $$
> e^{i\pi}+1= 0
> $$
> ネイピア数$e$、虚数$i$、円周率$\pi$と有名な定数に$0$と$1$がある全部入りの数式。
> 
> **正規分布（ガウス分布）**
> $$
> f(x) = \frac{1}{\sqrt{2\pi\sigma^2}}\exp{-\frac{(x-\mu)^2}{2\sigma^2}}
> $$
> 平均を$\mu$, 分散を$\sigma^2 \gt 0$とする正規分布とは、確率密度関数が次の形で与えられる確率密度関数。

備考：[@nuxt/content で数式を表示する](https://blog.tunehira.net/posts/display-eqations-with-nuxt-content/)の記事と同様に、数式が表示されずはまりました。スタイルシートが足りなかったことが原因でした。


## 見出しの目次を作る

[remark-toc](https://github.com/remarkjs/remark-toc)

マークダウンの中で目次を出したいところに`## Table of Contents`を書くとその位置に目次が出ます。
見出し（#）が自動的に目次になる。

```txt
## Table of Contents
```
この記事の[Table of Contents](https://www.suzu6.net/posts/265-nuxt-content-remark/#table-of-contents)もこれを利用しています。

## 改行をHTMLに適用する

マークダウンでは末尾にスペース2個で改行となります（１行間を空けると別のpタグで囲まれる）。
ただ、それを知らないとテキストと表示がずれているように感じます。

```html
マークダウン
This is a
paragraph.
↓
HTML
<p>This is a
paragraph.</p>

```

[remark-breaks](https://github.com/remarkjs/remark-breaks)はマークダウンの改行をHTMLでも改行してくれます。

```html
マークダウン
This is a
paragraph.
↓
HTML
<p>This is a<br>
paragraph.</p>
```
マークダウンの原理主義でないなら直感的にわかりやすいと思う。

## コードブロックにタイトルをつける

Qiitaなどのブログではコードブロックにファイル名などの補足があります。
あれを実現するためのパーサーが[remark-code-titles](https://www.npmjs.com/package/remark-code-titles)です。

```sh
# インストール
$ yarn add remark-code-titles
```

```js:nuxt.config.jsに追加する
export default {
  …
  content: {
      remarkPlugins: [
        'remark-code-titles'
      ],
    }
  },
```

コードブロックの先頭に **```拡張子:コードブロックのタイトル** と書くとタイトルが
`<div class="remark-code-title">コードブロックのタイトル</div>`と決まったクラスの`<div>`に囲まれる。
そこにスタイルを当ててタイトルっぽくしてます。

````txt
```python:Hello.py
printf("Hello, World!");
return 0;
```
````
▼変換したHTML。
```html
<div data-v-f58a9f50="" class="remark-code-title">hello.c</div>

<div data-v-f58a9f50="" class="nuxt-content-highlight">
  <pre data-v-f58a9f50="" class="line-numbers language-c"><code data-v-f58a9f50=""><span data-v-f58a9f50="" class="token function">printf</span><span data-v-f58a9f50="" class="token punctuation">(</span><span data-v-f58a9f50="" class="token string">"Hello, World!"</span><span data-v-f58a9f50="" class="token punctuation">)</span><span data-v-f58a9f50="" class="token punctuation">;</span>
<span data-v-f58a9f50="" class="token keyword">return</span> <span data-v-f58a9f50="" class="token number">0</span><span data-v-f58a9f50="" class="token punctuation">;</span>
</code></pre>
</div>
```
▼コードブロックのCSSの例。公開すると位置がずれているけどCSSわからん。
```css
.remark-code-title {
    background: #d9d7e0;
    border-radius: 0px 0px 4px 4px;
    color: #3a3a3a;
    font-size: 0.75rem;
    letter-spacing: 0.075em;
    line-height: 1;
    padding: 0.25rem 0.5rem;
    position: absolute;
    left: 1rem;
    text-align: right;
}
```

## 折り畳みを追加する

冗長な説明や長いコードブロックを折り畳むと、文章の流れを良くしつつ補足できる。
そんな折り畳み機能を追加するのが[remark-collapse](https://github.com/Rokt33r/remark-collapse)です。

```sh
$ yarn add remark-collapse
```

使い方
```txt
<details><summary>Open tango</summary>

target content

</details>
```
出力結果

<details><summary>Open tango</summary>

target content

</details>


## 脚注を作る

最高！これを探していました！

remark-footnotes[^1]を利用しています。
脚注はマークダウンのコンテンツの下部に作成されます。
文章の途中に脚注の補足を書いても下部に移動する。

星[^★]や日本語[^日本語]など数字以外の文字もいけるが、
対応する脚注は数字が自動で割り振られている。
そのため、自分で数字を合わせなければならない[^2]。

```md
文章中の脚注[^1]

[^1]: 脚注の補足

星[^★]や日本語[^日本語]など数字以外の文字もいけるが、
対応する脚注は数字が自動で割り振られている。

[^★]: 星マーク
[^日本語]: 日本語も大丈夫です。
```

ページの下部（パースしたコンテンツの最後）に脚注が出る。

[^1]: remark-footnotes: [https://github.com/remarkjs/remark-footnotes](https://github.com/remarkjs/remark-footnotes)

[^★]: 星マーク
[^日本語]: 日本語も大丈夫です。
[^2]: 自動で数字が割り振られる。ここは`[^2]`と書いている。

remarkでnuxt/contentのマークダウン書式を拡張する


[nuxt/content](https://content.nuxtjs.org/)といういい感じにブログを作成できるモジュールがあったので使ってみる。
このブログも`nuxt/content`を利用しています。

2021-04-24: 新しくブログ（Rustに入門してみた）を作ったのでその時の最新バージョンに更新しました。

## Table of Content

## nuxt/content

[nuxt/content](https://content.nuxtjs.org/ja/)は[Nuxtjs](https://ja.nuxtjs.org/)アプリケーションを拡張するモジュールです。
GitベースのヘッドレスCMSとして機能します。
`content/`ディレクトリに書き込んだMarkdown、JSON、YAML、XML、CSVファイルといったファイルをMongoDBのAPIような機能で扱えるようになります。

特徴
- 開発中の高速ホットリロード
- Markdownの中でのVueコンポーネント
- 全文検索
- `nuxt generate`で静的サイト生成をサポートする
- （MongoDBのような）強力なQueryBuilderAPI
- PrismJSを使用してマークダウンファイルのコードブロックを強調表示する構文。
- 目次の生成
- マークダウン、CSV、YAML、JSON（5）、XMLを処理します
- カスタムパーサーでの拡張（Latexや引用符など）

`/content`に書いたマークダウンがそのままコンテンツになります。
ホットリロードも対応しているため、ローカルでマークダウンを書きながらすぐに内容とスタイルを確認できます。

また、マークダウンの中に書いた変数でフィルタリングしたりページの構成に使えるようになります。
```txt:/content/path/to/articles.md
---
id: 264
title: nuxt/contentでブログを作る
created_at: 2020-12-12
updated_at: 2020-12-17
isDraft: false
tags: Nuxtjs,Vuejs,TypeScript,JavaScript
top_image: /icons/nuxt.svg
icon: /icons/nuxt.svg
---

## 本文

咳をしても一人
```

DBを使っていないのにかなり自由度が高い。

[Create a Blog with Nuxt Content](https://nuxtjs.org/blog/creating-blog-with-nuxt-content)を参考に作ってみます。

## 環境

- Node.js vv14.16.1
- npm 6.14.12
- yarn 1.22.5

構築後
- Nuxt:  ^2.14.6 
- @nuxt/content: ^1.11.1

## Nuxt.jsのインストール

公式の[インストール](https://ja.nuxtjs.org/docs/2.x/get-started/installation)をみてプロジェクトを作るところから進める。

アプリを作成したいパスで`yarn create nuxt-app <project-name>`を実行する。
`yarn`で進めます。`npm`と`npx`は公式をみておくれ。

```shell

> yarn create nuxt-app myblog

。。。

create-nuxt-app v3.4.0
✨  Generating Nuxt.js project in myblog

# プロジェクト名
? Project name: myblog

# ここでTypeScriptを選べる
? Programming language: 
  JavaScript
> TypeScript

# パッケージマネージャ
? Package manager: (Use arrow keys)
> Yarn
  Npm

# UIフレームワーク
? UI framework:  
  None
  Ant Design Vue 
  Bootstrap Vue  
  Buefy
> Bulma
  Chakra UI      
  Element        
  Framevuerk     
  iView
  Tachyons       
  Tailwind CSS   
  Vuesax
  Vuetify.js

# ここで@nuxt/contentをインストール出来る
? Nuxt.js modules: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Axios
 ( ) Progressive Web App (PWA)
 (*) Content

# リントツール
? Linting tools:      
 (*) ESLint
>(*) Prettier
 ( ) Lint staged files
 ( ) StyleLint        
 ( ) Commitlint  

# テストツール
? Testing framework: 
  None
> Jest
  AVA
  WebdriverIO 

# レンダリングモード
? Rendering mode: (Use arrow keys)
> Universal (SSR / SSG)
  Single Page App

# デプロイターゲット
? Deployment target:
  Server (Node.js hosting)
> Static (Static/JAMStack hosting) 

? Development tools:
>(*) jsconfig.json (Recommended for VS Code if you're not using typescript)
 ( ) Semantic Pull Requests
 ( ) Dependabot (For auto-updating dependencies, GitHub only)

# CIツール
? Continuous integration:      
  None
> GitHub Actions (GitHub only) 

? What is your GitHub username? (suzuroku)
? Version control system: (Use arrow keys)
> Git
  None
```

`select`で選択する。
キーが効かないときはないときは日本語入力になってます。

プロジェクト作成時にTypeScriptの導入もしておくと楽です。
レンダリングモードとデプロイターゲットは`nuxt.config.js`の**target**で後から変更できます。

作成したディレクトリに移動して、アプリを立ち上げます。
```sh
$ cd myblog
$ yarn dev
```

##　静的サイトを作成する

```sh
# dist/ に静的サイトのページが作る
$ yarn run generate

# dist/ のページを確認する
$ yarn run start
```


## ページを追加する

`/posts/{記事}`となるようにページを追加します。
また、`/posts/`は一覧になるようにする。

```sh
├─content # マークダウンを置くところ。
|  ├─ about.md
│  └─posts
│     ├─post1.md
│     └─post2.md
├─pages # そのパスの処理
|  ├─_slug.vue
│  └─posts
│     ├─index.vue # /posts/ で一覧を表示する
│     └─_slug.vue # /posts/{_slug}　パスを引数にとる
```
### 記事のマークダウン
```txt:/content/posts/articles.md
---
title: nuxt/contentでブログを作る
created_at: 2020-12-12
tags: Nuxtjs,Vuejs,TypeScript,JavaScript
top_image: /icons/nuxt.svg
icon: /icons/nuxt.svg
---

## 本文

咳をしても一人
```
### 記事を表示するVueページ

CSSフレームワークの[bulma](https://bulma.io/)を利用しています。

```vue:/pages/_slug.vue
<template>
  <article class="article content section-article">
    // 記事のヘッダー部分の例
    <section class="header">
      <h1>{{ post.title }}</h1>
      <div class="media">
        <div class="media-left">
          <figure class="image is-48x48">
            <img :src="post.top_image" />
          </figure>
        </div>
        <div class="media-content">
          <div class="tags">
            <i class="mdi mdi-tag" />&nbsp;
            <span v-for="tag in post.tags.split(',')" :key="tag">
              <a :href="'/tags/' + tag" class="tag">{{ tag }}</a>
            </span>
          </div>
        </div>
        <div class="media-right">
          <i class="mdi mdi-update" />&nbsp;
          <time v-html="post.updated_at.split('T')[0]"></time>
        </div>
      </div>
    </section>
    // 記事の本文
    <NuxtContent :document="post" />
  </article>
</template>

<script lang="ts">
import Vue from 'vue'

export default Vue.extend({
  async asyncData({ $content, params }) {
    // URIから変数を取得 /posts/{_slug}
    const slug = params.slug
    return {
      // content/posts/{_slug}.mdのマークダウンを取得
      post: await $content('posts/' + slug).fetch()
    }
  },
})
</script>
```
TypeScriptのこの形になるまでかなり試行錯誤した。

## コンテンツの取得とクエリ

[@nuxt/contet コンテンツを取得する](https://content.nuxtjs.org/ja/fetching#wherequery)を参考に。

Contentはグローバルに $content` インスタンスを注入するので、`this.$content `を使えばどこからでもアクセスできる。


例
```ts
// クエリのイメージ
list = {
  [{ title: 'article1', tags: 'Nuxtjs,ブログ'}],
  [{ title: 'article2', tags: 'Python'}],
  [{ title: 'article3', tags: '数式,KaTeX'}],
};

$content(list)
  .sortBy(title, asc)
  .limit(2)
// titleで昇順に２件取得する
$content(list)
  .only('tags')
  .where({ 'tags': { $contains: [ 'Nuxtjs' ] } })
// tagsに絞ってtagsの文字列に'Nuxtjs'を含むオブジェクトをフィルタリングする。
```
$contentのWhere句は内部的に[techfort/LokiJS](https://github.com/techfort/LokiJS/wiki/Query-Examples#find-queries)を利用している。
クエリの詳細とたくさんの例が載っているので、ぜひ参照してください。

## シンタックスハイライト

[markdown.prism.theme](https://content.nuxtjs.org/ja/configuration#markdownprismtheme)


## Google Analytics

[@nuxt/google-analytics](https://google-analytics.nuxtjs.org/setup)

```sh
yarn add --dev @nuxtjs/google-analytics
```

```js:nuxt.config.js
  googleAnalytics: {
    id: process.env.GOOGLE_ANALYTICS_ID
  },
```
`GOOGLE_ANALYTICS_ID`は環境変数。

## Google Adsense

[@nuxtjs/google-adsense](https://github.com/nuxt-community/google-adsense-module)

```sh
$ yarn add @nuxtjs/google-adsense
```

```js:nuxt.config.js
  modules: [
    ['@nuxtjs/google-adsense', {
      id: process.env.GOOGLE_ADSENSE_ID
    }]
 ]
```
`GOOGLE_ADSENSE_ID`は環境変数。

```html
<template>
  <div>
    <adsbygoogle
    :ad-slot="'xxxxxxxx'"
    :ad-style="{ display: 'block' }"
    :ad-format="'auto'"
    />
  </div>
</template>
```
手動広告は、このようにしてページ内の広告を表示したい場所に書くことができる。
`ad-slot`は広告キーで、アドセンスで広告ユニットを作ると発行される。


## テストしてみる

プロジェクト作成で追加した[Jest](https://jestjs.io/ja/)でユニットテストをします。

```js:/test/Logo.spec.js
import { mount } from '@vue/test-utils'
import Logo from '@/components/Logo.vue'

describe('Logo', () => {
  test('is a Vue instance', () => {
    const wrapper = mount(Logo)
    expect(wrapper.vm).toBeTruthy()
  })
})
```

```sh
$ yarn test
yarn run v1.22.5
$ jest
 PASS  test/Logo.spec.js
  Logo
    √ is a Vue instance (15 ms)

-----------|---------|----------|---------|---------|-------------------
File       | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s
-----------|---------|----------|---------|---------|-------------------
All files  |       0 |      100 |     100 |       0 |
 index.vue |       0 |      100 |     100 |       0 | 29
-----------|---------|----------|---------|---------|-------------------
Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        4.69 s
Ran all test suites.
Done in 5.96s.
```

## マークダウンの書式を拡張する

[nuxt/contentに絵文字と数式のプラグインを追加する](https://www.suzu6.net/posts/265-nuxt-content-remark/)って記事に書きました。

## サイトマップを作成する

[nuxt/contentでサイトマップを作る](https://www.suzu6.net/posts/265-nuxt-content-sitemap/)に書いた。

nuxt/contentでブログを作る


[Electron-builder](https://github.com/electron-userland/electron-builder)を利用してWindowsでアプリをビルドすると下記のようなエラーが出ることがあります。

```sh
Processing config: C:\Users\�鑺�E��\AppData\Local\electron-builder\Cache\nsis\nsis-3.0.4.1\nsisconf.nsh
Processing script file: "<stdin>" (ACP)
Error output:

Error output:
!include: could not find: "C:\Users\鈴村\AppData\Local\Temp\t-lEActj\0-messages.nsh"       
Error in script "<stdin>" on line 75 -- aborting creation process
```

これはWindowsのユーザ名を日本語（またはASCII以外の文字コード）で登録している場合に起きます。
正確には、Windows向けのインストーラーが作れる[NSIS](https://nsis.sourceforge.io/Main_Page)がASCII以外の文字列のパスに対応していないことが原因です。

ビルドする際に`ユーザ名/AppData/`の配下に一時ファイルを作るが、そのパスUTF8だと読めずにエラーになる。

NSISの問題であり、対処方法は
- **AppDataがASCIIのパスになるよう移動する**
- **ASCIIのユーザ名でアカウントを作成しなおす**
のどちらかしかありません。
`%AppData%`はシステムやアプリで使われているため。[AppDataを移動する](https://superuser.com/questions/1250288/can-i-move-my-appdata-folder-in-windows-10)のは大変そうです。

ASCIIのユーザ名でアカウントを作成し直して解決しました。

[この件のissue](https://github.com/electron-userland/electron-builder/issues/3243)





Electron-builderでパスに日本語を含んでいる場合はビルド出来ない


ElectronとVue3 + TypeScriptで開発する方法を紹介します。

Electron + Vue3 + TypeScriptの環境を整えて、ビルドとテストを実行するところまで行います。

その他については４本くらいに分けて書いていく予定。

- 技術選定編
- 環境構築編 ← ここ
- ページを開発していく
- アプリ配布とアップデート

## Vue CLI Plugin Electron Builder

Electron + Vueのために[Vue CLI Plugin Electron Builder](https://nklayman.github.io/vue-cli-plugin-electron-builder/)を使って環境を構築していきます。
これはVue cliで追加できるプラグインで簡単に追加できます。

- [github](https://github.com/nklayman/vue-cli-plugin-electron-builder)

継続して開発されているので安心。

## 事前準備

- Node.js v14.15.0
- npm 6.14.8
- yarn 1.22.5

事前にyarnを入れておきます。
npmでもよいですが、yarnのほうが扱いやすく速いです。

私はWindows10で進めてますが、他の環境も同じ手順で概ね大丈夫かと。

１点、**WindowsではPCのユーザ名が日本語だとビルド時にエラーが起きます**。
（厳密にはASCIIにない文字の場合）。
このエラーの回避は面倒なので、英数字のユーザアカウントを作ってから進めてください。
詳細は[こちら](https://www.suzu6.net/posts/259-electron-build-utf8/)です。

## Electron + Vue3 + TypeScriptの手順
 
 vue cliを導入する

[Vue-CLI](https://cli.vuejs.org/)のバージョン3か4を使います（推奨はバージョン4）。

```sh
$ yarn global add @vue/cli

$ vue -V
@vue/cli 4.5.9
```

### Vue + TypeScriptの環境

`vue create {アプリ名}`でアプリのプロジェクトを作成する。

質問の中で構成を決めて行きます。


```sh
> vue create programmable-calculator

Vue CLI v4.5.9
# 構成のプリセットを選択　-> マニュアル
? Please pick a preset: (Use arrow keys)
  Default ([Vue 2] babel, eslint)
  Default (Vue 3 Preview) ([Vue 3] babel, eslint)
> Manually select features
```
構成を決めたいので`Manually select features`を選択します。
`十字キー`で移動して `Enter` で選択する。

```sh
? Please pick a preset: Manually select features
# プロジェクトに必要なモノを選択する　-> PWA と E2E Testing以外全て
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
 (*) Choose Vue version
 (*) Babel
 (*) TypeScript
 ( ) Progressive Web App (PWA) Support        
 (*) Router
 (*) Vuex
 (*) CSS Pre-processors
 (*) Linter / Formatter
 (*) Unit Testing
>( ) E2E Testing
```
`PWA`と`E2E Testing`以外をすべて選びました。
自分で構成するとかなり大変なので、TypeScriptやテストを自動で構成してくれるのはありがたい。
`E2E Tesing`はユーザと同じようにブラウザを操作して行うテストです。
Electronで開発するため、それ用のモノをあとで導入します。

```sh
# Vue.jsのバージョン -> 3.x
? Choose a version of Vue.js that you want to start the project with 
  2.x
> 3.x (Preview)

# TypeScriptと一緒にBabelを使うか -> Yes
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes

# Vue routerでヒストリーモード（ブラウザバック）を使うか -> Yes
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes

# CSSプリプロセッサ -> Sass/SCSS (with node-sass)
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with node-sass)
  Sass/SCSS (with dart-sass)
> Sass/SCSS (with node-sass)
  Less
  Stylus

# コードの規準　→ ESLint + Prettier
? Pick a linter / formatter config: 
  ESLint with error prevention only 
  ESLint + Airbnb config
  ESLint + Standard config
> ESLint + Prettier
  TSLint (deprecated)

# Lintが実行するタイミング -> 保存するときにした。
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Lint on save
 ( ) Lint and fix on commit

# ユニットテストで使うモジュール -> Jest
? Pick a unit testing solution: (Use arrow keys)
  Mocha + Chai
> Jest

# 設定の記述先 -> 専用の設定ファイルで行う。
? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
> In dedicated config files
  In package.json

# プリセットとして登録するか　-> No
? Save this as a preset for future projects? (y/N)

# プロジェクトを作成する。
Vue CLI v4.5.9
✨  Creating project in C:\git\programmable-calculator.
```


TypeScriptには`ESLint + Prettier`がよさそうだったので選択しました。
[TSLintは廃止予定](https://github.com/palantir/tslint/issues/4534)らしいです。

```sh
🎉  Successfully created project programmable-calculator.
👉  Get started with the following commands:

 $ cd programmable-calculator
 $ yarn serve
```
完了したのでディレクトリを移動して、立ち上げます。

![vu3](/images/posts/260/vue3.png)

この時点での[ディレクトリ構成](https://github.com/suzu6/programmable-calculator/tree/b3b02d00bdf4ac7ed166de31ad85fc902cae21ec)

### Electron-Builderの導入
VueCliで用意してある[Vue CLI Plugin Electron Builder](https://nklayman.github.io/vue-cli-plugin-electron-builder/)を導入します。
Vueのプラグイン同様、`vue add`で追加できる。

似たもので[electron-vue](https://simulatedgreg.gitbooks.io/electron-vue/content/ja/)もあるが、こちらVue3系に現時点で対応していないようです。

```sh
> vue add electron-builder

# Electronのバージョン -> ^9.0.0
? Choose Electron Version (Use arrow keys)
  ^7.0.0
  ^8.0.0
> ^9.0.0
? Add tests with Spectron to your project? Yes

# インストール中。。。

✔  Successfully invoked generator for plugin: vue-cli-plugin-electron-builder
```
現時点ではElectron v9までしかサポートしていない（最新はv11です）。

実行とビルドコマンドが追加されました。

```sh
# 実行
> yarn run electron:serve

# ビルド
> yarn run electron:build
```

また、同時に追加された`postinstall`と`postuninstall`はネイティブの依存関係がElectron のバージョンに一致するようにする`ectron-builder`のコマンドです（使ったことはない）。

[Electron-Builderインストール後の差分](https://github.com/suzu6/programmable-calculator/commit/596cb9905d9862d2591cfbf3b949d6d0810fb2db)

もしインストールが止まった場合は、[こちら](https://www.suzu6.net/posts/261-stoped-vue-add-electron-builder/)に対処を載せました。

## 確認しよう

### 実行してみる

```sh
# 実行
> yarn run electron:serve
```
ウィンドウが出ればOK！
同時にChromeのDevToolが開いて、ウェブのように確認できます。

![electron](/images/posts/260/electron.png)

### テストしてみる

この時点で２つのテストが出来てるはず。
- [/tests/unit/electron.spec.js](https://github.com/suzu6/programmable-calculator/blob/596cb9905d9862d2591cfbf3b949d6d0810fb2db/tests/unit/electron.spec.js)
  - ウィンドウを閉じたり開いたりと操作するテスト。
- [/tests/unit/example.spec.ts](https://github.com/suzu6/programmable-calculator/blob/596cb9905d9862d2591cfbf3b949d6d0810fb2db/tests/unit/example.spec.ts)
  - HelloWorld.vueでメッセージが表示できるかのテスト。

```sh
>yarn run test:unit
yarn run v1.22.5
$ vue-cli-service test:unit
 PASS  tests/unit/example.spec.ts 
 PASS  tests/unit/electron.spec.js (44.968s)

Test Suites: 2 passed, 2 total
Tests:       2 passed, 2 total
Snapshots:   0 total
Time:        45.955s
Ran all test suites.
Done in 49.00s.
```
２つともテストに成功しました！

`tests/unit/electron.spec.js`がタイムアウトする場合は、`jest.setTimeout(50000);`のタイマーの値を増やす。
Electron を起動してウィンドウを色々操作するためけっこう時間がかかります。

### ビルドしてみる

そのままビルドしてアプリを実行すると、ナビゲーションだけ残して真っ白な画面になる。
ナビゲーションをクリックすると描画される。

![build](/images/posts/260/build.png)

これはVue Routerの**historyモード**が原因で、**hashモード**を利用すると回避できる。
以下のように書き換える。
もう少し詳しくは[こちら](https://www.suzu6.net/posts/262-vue-electron-builder-blank/)に書いた。

```diff
-- import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router";
++ import { createRouter, createWebHashHistory, createWebHistory, RouteRecordRaw } from "vue-router";

・・・省略

const router = createRouter({
--  history: createWebHistory(process.env.BASE_URL),
++  history: process.env.IS_ELECTRON
++  ? createWebHashHistory()
++  : createWebHistory(),
})
```
[差分 - github](https://github.com/suzu6/programmable-calculator/commit/25c5ee613b859dfeb6241c0555e682899db42b6a#diff-25a6634263c1b1f6fc4697a04e2b9904ea4b042a89af59dc93ec1f5d44848a26)


書き換えてからビルドを実行する。

```sh
# ビルド
>yarn run electron:build

...
 DONE  Build complete!
Done in 102.37s.
```

`/dist_electron`にビルドしたものが出てくる。Windowsでビルドしてます。

- インストーラー : `/dist_electron/programmable-calculator Setup 0.1.0.exe`
- アプリ : `/dist_electron/win-unpacked/programmable-calculator.exe`

![build-fix](/images/posts/260/build-fix.png)

以上で、一通りの開発するベースを作ることができました。

## エラーの対応

- [vue add electron-builderを実行してインストールが止まったとき - suzu6](https://www.suzu6.net/posts/261-stoped-vue-add-electron-builder/)
- [Vue CLI Plugin Electron Builderでビルドしたアプリの画面がブランクになる - suzu6](https://www.suzu6.net/posts/262-vue-electron-builder-blank/)
- [Electron-builderでパスに日本語を含んでいる場合はビルド出来ない - suzu6](https://www.suzu6.net/posts/259-electron-build-utf8/)
- [Electron-Builderでビルドのエラー　The process cannot access the file because it is being used by another process. - suzu6](https://www.suzu6.net/posts/263-electron-builder-being-used-by-another-process/)

## 参考

- [Vue-CLI](https://cli.vuejs.org/)
- [Vue CLI Plugin Electron Builder](https://nklayman.github.io/vue-cli-plugin-electron-builder/)


ElectronとVue3 + TypeScriptでデスクトップアプリを作る 環境構築編


[Vue + Electron + TypeScriptでアプリをつくる](https://www.suzu6.net/posts/260-electron-vue-develop/)ときのエラー対処。

[Vue CLI Plugin Electron Builder](https://nklayman.github.io/vue-cli-plugin-electron-builder/)を導入していた時にインストールが止まることがあった。
これの対処を残します。

## 環境

- Windows 10
- Node.js v14.15.0
- npm 6.14.8
- yarn 1.22.5
- @vue/cli 4.5.9
- vue-cli-plugin-electron-builder ~2.0.0-rc.5

## Electron-Builderの導入でインストールが止まる

Electron-Builderの導入でインストールが止まることがあった。
`yarn install`して、`background.js`を`background.ts`にリネームして動きました。

```sh
> vue add electron-builder

…インストール中

info "fsevents@1.2.13" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
[4/4] Building fresh packages...
[-/3] ⠂ waiting...
[2/3] ⠂ electron-chromedriver
[-/3] ⠄ waiting...バッチ ジョブを終了しますか (Y/N)? Y

```
途中で止まったので`yarn install`でパッケージの整合させる
```
> yarn install
```

この後、`yarn run electron:serve` をすると `background.js` がないとエラーが出る。

```sh
 ERROR  Failed to compile with 1 errors                                    17:13:17
This dependency was not found:

* C:\git\popup\src\background.ts in multi ./src/background.ts
```

`./src/background.js`は存在します。
どうやら、拡張子が ts でないといけなかったようでリネームして解決しました。

```sh
> mv ./src/background.js -> ./src/background.ts にリネーム

>yarn run electron:build
```
OK

vue add electron-builderを実行してインストールが止まったとき


[Vue + Electron + TypeScriptでアプリをつくる](https://www.suzu6.net/posts/260-electron-vue-develop/)ときのエラー対処。

[Vue CLI Plugin Electron Builder](https://nklayman.github.io/vue-cli-plugin-electron-builder/)を導入してビルドしたアプリを実行するとナビゲーションメニューを残して真っ白になった。
これの対処を残します。

## 環境

- Windows 10
- Node.js v14.15.0
- npm 6.14.8
- yarn 1.22.5
- @vue/cli 4.5.9
- vue-cli-plugin-electron-builder ~2.0.0-rc.5

## Vue CLI Plugin Electron Builderでビルドしたアプリの画面がブランクになる

[Vue CLI Plugin Electron BuilderのCommon Issues](https://nklayman.github.io/vue-cli-plugin-electron-builder/guide/commonIssues.html#blank-screen-on-builds-but-works-fine-on-serve)に載ってました。

Vue Routerのヒストリーモードが原因です。

**history**モードはページのリロード無しにURL遷移を実現する`history.pushState`APIを使っています。

Electron では完全なURLをhashを使ってシミュレートする**hash**モードを使う必要がある。


`/src/router/index.ts`を以下のように修正する。
### If using Vue 2:
```diff
export default new Router({
- mode: 'history',
+ mode: process.env.IS_ELECTRON ? 'hash' : 'history',
})
```

### If using Vue 3:
```diff
-- import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router";
++ import { createRouter, createWebHashHistory, createWebHistory, RouteRecordRaw } from "vue-router";

・・・省略

const router = createRouter({
--  history: createWebHistory(process.env.BASE_URL),
++  history: process.env.IS_ELECTRON
++  ? createWebHashHistory()
++  : createWebHistory(),
})
```

[github](https://github.com/suzu6/programmable-calculator/commit/25c5ee613b859dfeb6241c0555e682899db42b6a#diff-25a6634263c1b1f6fc4697a04e2b9904ea4b042a89af59dc93ec1f5d44848a26)

詳しくは[Vue RouterのHTML5 History モード](https://router.vuejs.org/ja/guide/essentials/history-mode.html)を参照。

Vue CLI Plugin Electron Builderでビルドしたアプリの画面がブランクになる


[Vue + Electron + TypeScriptでアプリをつくる](https://www.suzu6.net/posts/260-electron-vue-develop/)ときのエラー対処。

`The process cannot access the file because it is being used by another process.`

これは、起動中のアプリ（serve, build）が起動していると出る。
アプリを止めてからビルドしよう。

`BrowserWindow.hide()`で隠れてる場合もあるので、タスクマネージャーなどでプロセスを止める。

## 環境

- Windows 10
- Node.js v14.15.0
- npm 6.14.8
- yarn 1.22.5
- @vue/cli 4.5.9
- vue-cli-plugin-electron-builder ~2.0.0-rc.5

## ログ

```sh
>yarn run electron:build

...

 INFO  Building app with electron-builder:
  • electron-builder  version=22.9.1 os=10.0.19041
  • description is missed in the package.json  appPackageFile=C:\git\programmable-calculator\dist_electron\bundled\package.json
  • author is missed in the package.json  appPackageFile=C:\git\programmable-calculator\dist_electron\bundled\package.json
  • writing effective config  file=dist_electron\builder-effective-config.yaml
  • packaging       platform=win32 arch=x64 electron=9.3.5 appOutDir=dist_electron\win-unpacked
  ⨯ remove C:\git\programmable-calculator\dist_electron\win-unpacked\chrome_100_percent.pak: The process cannot access the file because it is being used by another process.
github.com/develar/go-fs-util.EnsureEmptyDir
        C:/Users/develar/go/pkg/mod/github.com/develar/go-fs-util@v0.0.0-20190620175131-69a2d4542206/fs.go:98
github.com/develar/app-builder/pkg/electron.UnpackElectron.func1.1
        Y:/Documents/app-builder/pkg/electron/electronUnpack.go:38
github.com/develar/app-builder/pkg/util.MapAsyncConcurrency.func2
        Y:/Documents/app-builder/pkg/util/async.go:68
runtime.goexit
        c:/go/src/runtime/asm_amd64.s:1373  
ExecError: C:\git\programmable-calculator\node_modules\app-builder-bin\win\x64\app-builder.exe exited with code ERR_ELECTRON_BUILDER_CANNOT_EXECUTE
    at ChildProcess.<anonymous> (C:\git\programmable-calculator\node_modules\builder-util\src\util.ts:243:14)
    at Object.onceWrapper (events.js:422:26)
    at ChildProcess.emit (events.js:315:20)
    at maybeClose (internal/child_process.js:1048:16)
    at Process.ChildProcess._handle.onexit (internal/child_process.js:288:5) {
  exitCode: 1,
  alreadyLogged: false,
  code: 'ERR_ELECTRON_BUILDER_CANNOT_EXECUTE'
}
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
```



Electron-Builderでビルドのエラー　The process cannot access the file because it is being used by another process




[Vue + Electron + TypeScriptでアプリをつくる](https://www.suzu6.net/posts/260-electron-vue-develop/)の設定ファイルに使います。

## 環境

- Vue 3
- Node.js v14.15.0
- npm 6.14.8
- yarn 1.22.5
- @vue/cli 4.5.9
- vue-cli-plugin-electron-builder ~2.0.0-rc.5

## 使い方


  
## 参考

- [Electronで設定ファイルを導入 - Qiita](https://www.suzu6.net/posts/260-electron-vue-develop/)
