# i18n対応
昨日このブログをi18n (internationalization) 対応させた。i18n対応はNext.jsが公式にサポートしており、`next.config.js` に適当な設定を書くだけで済む。これについてはネット上にたくさん情報があるのでこの記事では省略する。この記事ではi18n対応にあたり、sitemap生成で必要になった修正について記録しておく。なお、以下の話はアプリをVercelにデプロイすることを前提としている。執筆時点のNext.jsのバージョンは `12.0.1` である。

# sitemap生成

## i18n対応前
このブログのsitemap生成には以下のライブラリを使用している。

https://www.npmjs.com/package/next-sitemap

このライブラリを使えば、あとは `sitemap.config.js` を定義してビルドスクリプトに少し手を加えればsitemap.xmlの生成を行うことができる。これについてもネット上にたくさん情報がある。i18n対応前のこのブログの `sitemap.config.js` とビルドスクリプトは以下の通りだった。

```javascript:sitemap.config.js
module.exports = {
  siteUrl: 'https://silurus.dev',
  generateRobotsTxt: true,
  sitemapSize: 7000,
  outDir: './out'
};
```

```json:package.json
"scripts": {
  "build": "next build && next export && next-sitemap --config sitemap.config.js",
},
```

上記の設定で、sitemapには [https://silurus.dev/sitemap.xml](https://silurus.dev/sitemap.xml) でアクセスできた。

## i18n対応後
Next.jsでi18n対応すると、`next export` が行えなくなるため、まず `package.json` のビルドスクリプトを以下のように修正する必要がある。

```json:package.json
"scripts": {
  "build": "next build && next-sitemap --config sitemap.config.js",
},
```

すると、芋づる式に `sitemap.config.js` で `outDir: './out'` と書いているところが不整合になる。`out` ディレクトリは `next export` の結果生成されるディレクトリなので、`next build` だけではディレクトリが存在しない。このままだとデプロイしても静的リソースにsitemap.xmlが含まれず、もとのURLではアクセスできなくなる。

というわけで、`sitemap.config.js` は以下のように修正する必要がある。

```javascript:sitemap.config.js
module.exports = {
  siteUrl: 'https://silurus.dev',
  generateRobotsTxt: true,
  sitemapSize: 7000,
  outDir: './public'
};
```

`public` フォルダに置いているものはビルド後 `ベースパス/ファイル名` でアクセスできるので、これで引き続き同一のアドレスでアクセスできるようになる。

このサイトであれば、当初の[https://silurus.dev/sitemap.xml](https://silurus.dev/sitemap.xml) のままアクセスできる。

# i18n support
Yesterday, I added i18n (internationalization) setting to this blog. i18n is officially supported by Next.js, and all you have to do is write the appropriate settings in `next.config.js`. There is a lot of information about this on the internet, so I won't go into it in this article. In this article, I'd like to write about modifications required for sitemap generation to support i18n. The following story assumes that the application is deployed to Vercel. The version of Next.js at the time of writing is `12.0.1`.

# Sitemap generation

## Before i18n support
The following library is used to generate sitemap for this blog.

https://www.npmjs.com/package/next-sitemap

If you use this library, you can generate sitemap.xml by defining `sitemap.config.js` and modifying the build script a little. Before i18n support, this blog's `sitemap.config.js` and build script was as follows.

```javascript:sitemap.config.js
module.exports = {
  siteUrl: 'https://silurus.dev',
  generateRobotsTxt: true,
  sitemapSize: 7000,
  outDir: '. /out'
};
````json:package.json

```json:package.json
"scripts": {
  "build": "next build && next export && next-sitemap --config sitemap.config.js",
},
```

With the above configuration, sitemap could be accessed with [https://silurus.dev/sitemap.xml](https://silurus.dev/sitemap.xml).

## After i18n support
After adding i18n settings in Next.js project, `next export` is not available, so you need to modify the build script of `package.json` as follows.

```json:package.json
"scripts": {
  "build": "next build && next-sitemap --config sitemap.config.js",
},
```

Then, in `sitemap.config.js`, `outDir: '. /out'` is inconsistent. The `out` directory is a directory created as a result of `next export`, so the directory does not exist in `next build` alone. If this is the case, sitemap.xml will not be included in static resources after deployment on Vercel, and it will not be accessible with the original URL.

So, you need to modify `sitemap.config.js` as follows.

```javascript:sitemap.config.js
module.exports = {
  siteUrl: 'https://silurus.dev',
  generateRobotsTxt: true,
  sitemapSize: 7000,
  outDir: '. /public'; }
};
```

If you put it in the `public` folder, you can access it with the `base path/file name` after the build, so you can continue to access it with the same address.

In the case of this site, you can access to sitemap with the original address: [https://silurus.dev/sitemap.xml](https://silurus.dev/sitemap.xml)

Generating sitemap.xml with i18n support in Next.js

Next.jsでi18n対応した場合のsitemap.xml生成

# はじめに

ブログに数式の表示機能を実装した。そのうち統計学や機械学習の数理も勉強して記事にできればなと漠然と思っているのでその下準備的な意味も込めて。自分は以前 [`MathJax`](https://www.mathjax.org/) を使ったことがあったけれど、今回改めて調べてみると以下のような情報があった。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">mathjax というやつは世の中に現存するJSの中でも最も行儀が悪い振る舞いをするものの一つです。気軽に導入していいものではない。というか積極的に避けねばならない。あいつはXML的木構造を破壊しながら自身の特殊構文に継ぎ直してる。</p>&mdash; mizchi (@mizchi) <a href="https://twitter.com/mizchi/status/856772057543057408?ref_src=twsrc%5Etfw">April 25, 2017</a></blockquote>

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">一度mathjaxを当てた箇所は真っ当なフレームワークのDOMレンダリングに回復することは不可能です</p>&mdash; mizchi (@mizchi) <a href="https://twitter.com/mizchi/status/856772327354146816?ref_src=twsrc%5Etfw">April 25, 2017</a></blockquote>

ということで今回は [`KaTeX`](https://katex.org/) を使うことにした。前に記事にしたように、このブログはContentfulにmarkdownの形で記事データを持っており、クライアントでそれをHTMLにマークアップしている。KaTeXはmarkedの `renderer` の中で使うことになる。

> info:記事作成時の環境について
> 
> - `marked`: 2.0.5
> - `katex`: 0.13.11
> - `next`: 10.2.2 (今回 Next.js は全く関係ないが一応記載)

# 実装について
## 参考にした情報
実装は次のリンク先のコメントで共有されている方法にまるまる乗っかっているので、コードは省略する。

https://github.com/markedjs/marked/issues/1538#issuecomment-526189561

この方法に乗っかると以下のような書き味になる。

- インラインの数式を使いたい時はインラインコードの中で対象を `$` で囲う
- ブロックの数式を使いたい時はコードブロックの中で対象を `$$` で囲う

## 注意点
### CSSを読み込んでおく
そもそもの話だけど、KaTeXを使う場合KaTeXのCSSを読み込む必要があるので、以下のスクリプトタグを書いておく。Next.jsなら `_document.tsx` の `<Head>` 内に書くことになる。

```html
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/katex@0.13.11/dist/katex.css"
  integrity="sha384-knaESGLxlQRSHWSJ+ZbTX6/L1bJZWBsBYGb2O+g64XHFuO7CbIj9Pkf1aaVXzIZJ"
  crossOrigin="anonymous"
/>
```

### サニタイズに気をつける
KaTeXで生成したHTMLには `<span>` タグの中に、`class` や `style` などのAttributeが存在している。このブログではmarkedでマークアップしたHTMLを自前でサニタイズをしているので、設定によってはここで上記のAttributeが落ちる。サニタイズを行っていない場合は全く気にすることはないけど、サニタイズをしていて表示が崩れている場合はサニタイザーの設定を疑うと良い。

# 結果のサンプル

量子力学では状態の時間発展はSchrödinger方程式に従う。
```
$$i\hbar\frac{\partial}{\partial t}|\psi, t\rangle=\hat{H}|\psi, t\rangle$$
```
ここで `$\hat{H}$` はハミルトニアン演算子で全体のエネルギーを表す。スピンのない非相対論的で外力の働いていない粒子の運動を考えると、ハミルトニアンは次式で書ける。
```
$$\hat{H} = \frac{1}{2m}\hat{\bm{p}}^2$$
```
ここで `$m$` は粒子の質量であり、`$\hat{\bm{p}}$` は運動量演算子である。位置基底で考えるとSchrödinger方程式は次式になる。
```
$$i\hbar\frac{\partial}{\partial t}\psi(\bm{x}, t)=-\frac{\hbar^2}{2m}\nabla^2\psi(\bm{x}, t)$$
```
`$\psi(\bm{x}, t)=\langle\bm{x}|\psi, t\rangle$` は位置空間での波動関数である。

ということで、良い感じになった。

Next.js, Contentful, markedの環境における数式表示

# はじめに
https://silurus.dev/articles/6qI4Ldg0VRdQJXDfxlqElf

一般的なブログサービスやQiita、Zennといったサービスでは、Markdownに記述した外部リンクがカード的なUIで表示されることがある。これは OGP (Open Graph Protocol) という仕組みを使った表現で、単なるテキストリンクよりもずっと見栄えがいいのでこのブログでも実現したいと思っていた。先日試行錯誤してひとまず形になったので、この記事ではその実装の方法についてまとめておきたいと思う。上に貼り付けたこのブログ自身へのリンクがそれにあたる。

> info:このサイトのフロントエンドの技術スタック
> 
> - `Next.js` （ブログ記事のSSGに使用）
> - `marked` （Markdownのマークアップに使用）
> - `Material UI` (スタイリングに使用）

# Markdownの何をカードに変換するか
`marked` でMarkdownをHTMLにマークアップするとき、まず何も考えずに変換するとMarkdownのリンクはすべて `<a>` タグのHTMLに変換される。いまやりたいことは、このうち `URL !== innerText` のリンクをカードに置き換えることである。つまり、Markdownで言えば、`[text](https://www.sample.com)` で書かれるリンクは通常通りテキストリンクとして残し、`https://www.sample.com` のようなベタ置きのURLをカードに変換するということになる。

## OGPでデータを取得するタイミング
現状、ブログ記事のReactコンポーネントは `getStaticProps` でCMSから取得したMarkdown (つまり文字列) をPropsで受け取り、コンポーネント内部で `marked` によってHTMLにマークアップしている。Markdown内に現れるリンクは各記事に依存するが、SSGする場合、コンポーネント内の副作用で外部と通信してリンク先情報を取得、はできないので、リンク先情報についても記事同様 `getStaticProps` で事前に取得し、Props経由でコンポーネントに渡す必要がある。

## リンクをカードに差し替えるタイミング
これは2つ考えられる。`marked` でリンクのカスタム `renderer` を定義し、適宜リンクをカードにマークアップする方法と、一旦HTMLでレンダリングしてしまった上で、副作用により対象の `<a>` タグをカードに差し替える方法である。今回は前者で実装した。なお、この方法でカスタム `renderer`を定義する場合は、URLのサニタイズに注意を払う必要がある。 `marked` のデフォルト `renderer` はそこをよしなにやってくれていた。

# 具体的な実装
ここからは具体的な実装について書いていく。突貫で作ったので雑なところは今後時間があるときにリファクタリングしていきたい。

## いくつかのutility関数の用意
以下の関数はコンポーネントの中に書くと長くなるので外に切り出した。

### リンク先情報の取得
今回OGPクライアントとして以下を使用している。

https://www.npmjs.com/package/open-graph-scraper

このOGPクライアントを使用してリンク先情報を取得する処理は以下の関数にまとめた。URLの配列を受け取り、OGPで取得したリンク先情報の配列を返す。

```typescript:getOgpData.ts
import openGraphScraper, {
  OpenGraphImage,
  OpenGraphProperties,
} from 'open-graph-scraper';

export type OgpData = OpenGraphProperties & {
  ogImage?: OpenGraphImage | OpenGraphImage[] | undefined;
};

const getOgpData = async (floatingUrls: string[]): Promise<OgpData[]> => {
  const ogpDatas: OgpData[] = [];
  if (floatingUrls.length === 0) return ogpDatas;

  await Promise.all(
    floatingUrls.map(async (url) => {
      const options = { url, onlyGetOpenGraphInfo: true };
      return openGraphScraper(options)
        .then((data) => {
          // OGP によるデータ取得が失敗した場合
          if (!data.result.success) {
            return;
          }
          // OGP によるデータ取得が成功した場合
          ogpDatas.push(data.result);
        })
        .catch((error) => {
          // error を throw するとビルドできないため、コンソールに出力して return する
          // eslint-disable-next-line no-console
          console.log(error);
        });
    })
  );

  return ogpDatas;
};

export default getOgpData;

```

### Markdownからベタ置きリンクの抽出
一つ前のリンク先情報取得のために、Markdownからベタ置きリンクを抽出する関数を以下のように定義した。ネーミングはさておき、テキストの紐付かないベタ置きリンクのことをfloating urlと名付けている。引数にMarkdownの文字列を突っ込むと、ベタ置きリンク (URL) が配列で帰ってくる。

```typescript:getFloatingUrls.ts
const getFloatingUrls = (md: string): string[] => {
  const regFloatUrl = /(?<!\()https?:\/\/[-_.!~*\\'()a-zA-Z0-9;\\/?:\\@&=+\\$,%#]+/g;
  const floatUrls = md.match(regFloatUrl);

  return floatUrls ?? [];
};

export default getFloatingUrls;
```

### URLからドメイン名の抽出
次の関数はリンクカード末尾にfaviconとドメインを記載するために使用する。

```typescript:getDomainFromUrl.ts
/* eslint-disable prefer-destructuring */
const getDomainFromUrl = (url: string | undefined): string | undefined => {
  if (!url) return undefined;
  let result;
  let match;
  match = url.match(/^(?:https?:\/\/)?(?:[^@\n]+@)?(?:www\.)?([^:/\n?=]+)/im);
  if (match) {
    result = match[1];
    match = result.match(/^[^.]+\.(.+\..+)$/);
    if (match) {
      result = match[1];
    }
  }
  return result;
};

export default getDomainFromUrl;
```

## ブログ記事コンポーネント
### リンク先情報の取得
記事コンポーネントの `getStaticProps` 内に、以下を追加し、取得したリンク先情報をPropsで渡すようにする。Propsの型定義などについてはこの記事では省略する。

```typescript:getStaticProps
export const getStaticProps: GetStaticProps<Props, Params> = async (
  context
) => {
   /**
   * 省略
   * ここでMarkdownの記事を取得する。
   * 記事は post (string型) とする。
   */
  const floatingUrls = getFloatingUrls(post ?? '');
  const ogpDatas = await getOgpData(floatingUrls);
  return {
    props: {
      // 略
    },
  };
};
```

### ベタ置きリンクをカードに置き換え
`marked` の `renderer` をカスタマイズして、ベタ置きのリンクをカードに置き換える。ベタ置きリンクかどうかはリンクのURLがリンクのテキストと同じかどうかで判断している。CSRF対策としてURLはサニタイズしておく必要があるので、今回は以下のライブラリを利用した。

https://www.npmjs.com/package/@braintree/sanitize-url

faviconの取得にはGoogleのAPIを利用している。また、このブログはスタイリングにMaterial UIを使っているので、CSSの中で一部Material UIのクラスを参照しているところがある。

```typescript:renderer.link
// Link の Renderer
renderer.link = (href, title, text) => {
  const sanitizedUrl = sanitizeUrl(href ?? undefined);
  const ogpData = ogpDatas.find(
    (data) => data.ogUrl && href?.startsWith(data.ogUrl)
  );

  if ((text !== href && `${text}/` !== href) || !ogpData) {
    return `
      <a href="${sanitizedUrl}" target="_blanck" 
        ${title ? `title="${title}">` : ''}
      >${text}</a>`;
  }

  const { ogImage } = ogpData;
  const image = Array.isArray(ogImage) ? ogImage[0] : ogImage;

  const domain = getDomainFromUrl(ogpData?.ogUrl);

  return `
    <div class="og-container">
      <a href=${ogpData?.ogUrl} target="_blanck" class="og-link">
        <div class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded og-card">
          <div class="og-thumbnail-container">
            <img src="${image?.url}" alt="${ogpData?.ogTitle}" class="og-thumbnail"/>
          </div>
          <div class="og-text-container">
            <h1 class="og-title">${ogpData?.ogTitle}</h1>
            <p class="MuiTypography-colorTextSecondary og-description">${ogpData?.ogDescription}</p>
            <div class="og-domain-container">
              <img src="https://www.google.com/s2/u/0/favicons?domain=${domain}" alt="${domain}"/>
              <div class="og-domain-name">${domain}</div>
            </div>
          </div>
        </div>
      </a>
    </div>`;
};
```

### スタイルシート
リンクカード用のスタイルシート。Next.jsなので、以下は `_app.tsx` からimportする。

```css:og.scss
.og-container {
  .og-link {
    text-decoration: none;
    word-break: break-all;

    .og-card {
      width: 100%;
      height: 80px;
      overflow: hidden;
      display: flex;
      margin: 12px 0px;

      .og-thumbnail-container {
        position: relative;
        width: 80px;
        height: 80px;
        min-width: 80px;
        min-height: 80px;

        &::before {
          display: block;
          padding-top: 100%;
        }

        img.og-thumbnail {
          position: absolute;
          width: 100%;
          height: 100%;
          top: 0;
          right: 0;
          bottom: 0;
          left: 0;
          margin: auto;
          object-fit: cover;
        }
      }

      .og-text-container {
        width: calc(100% - 80px);
        transition: background-color 0.25s ease-in-out;
        letter-spacing: -0.15px;

        &:hover {
          background-color: rgba(128, 128, 128, 0.1);
          transition: background-color 0.25s ease-in-out;
        }

        .og-title {
          font-size: 1.1rem;
          line-height: 32px;
          margin: 4px 8px 0px 12px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        .og-description {
          font-size: 0.85rem;
          line-height: 1rem;
          margin: 0px 8px 0px 12px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        .og-domain-container {
          height: 1rem;
          margin: 4px;
          display: flex;
          align-items: center;
          justify-content: flex-end;

          .og-domain-name {
            display: inline-block;
            font-size: 0.85rem;
            line-height: 1rem;
            margin: 0px 4px 0px 6px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }
      }
    }
  }
}
```

以上の実装で、現状このサイトのリンクカードは実現されている。ブログを作るためにいま色々とMarkdownのマークアップ関連で実装をしているので、一段落したらまとめて公開もしたいなと思っていたり…。

OGPを使ってMarkdownのリンクをカード型のリンクにマークアップする

# Hello World
ContentfulとNext.js、そしてVercelを使ってポートフォリオ兼技術ブログとなるサイトを作った。フロントエンドエンジニアとして、単に技術の知識を共有するだけでなく、フロントエンド技術を実験する場、そしてそれがそのままポートフォリオになるような場がほしいなと思って開設した。

実は最近ずっと[サーバーサイドも自分で実装しようと奮闘していた](https://github.com/yokotani92/my-app)んだけど、考えれば考えるほど実現に向けて避けられない課題が見えてきて、一旦そこは諦めることにした。TODOリストくらいならいいんだけど、まだはっきり仕様も固まっていないブログサービスのAPIを開発するとなると自分の力量的に難しかった。

ということで、このサイト、ブログ記事の管理にContentfulというHeadless CMSを利用することにした。要件がふわっとしている今の自分にとって、フロントエンドを自由に実装でき、柔軟にコンテンツの構造を変えられるHeadless CMSはこれ以上なくマッチしていた。日本製のmicroCMSなどもあったけど、サービスとしてのメジャー度と、コンテンツの自由度の高さ、TypeScriptとの相性の良さからこちらを選択した。（特にAPIの型を自動生成できるのはかなり嬉しかったのでそのうち記事にしたい。）ただ、microCMSも素晴らしいサービスで、個人的にUIはそちらのほうが好きだったし、Next.jsを使ったスターター的なドキュメントが用意されていたのも好印象だった。

バックエンドの自力実装を諦めHeadless CMSを使うと決めてからはデプロイまで順調だった。だだバックエンドの実装も諦めたわけではなくて、むしろ絶対にやりとげなければという決意を新たにしたところなので、今後はその試行錯誤を記事にしていきたいと思っている。そういう意味でもひとつここに場所ができて良かった。

P.S. 下はMarkdownをマークアップしているサンプル。このサイトではマークアップに [`marked`](https://www.npmjs.com/package/marked) 、Syntax Highlightには [`highlight.js`](https://www.npmjs.com/package/highlight.js?activeTab=readme) というライブラリを使っている。

---

# これは見出しh1です
これは最初の本文です。これは最初の本文です。これは最初の本文です。これは最初の本文です。これは最初の本文です。これは最初の本文です。これは最初の本文です。これは最初の本文です。これは最初の本文です。これは最初の本文です。これは最初の本文です。これは最初の本文です。これは最初の本文です。これは最初の本文です。これは最初の本文です。これは最初の本文です。これは最初の本文です。これは最初の本文です。

## これは見出しh2です
- 箇条書きテスト1
- 箇条書きテスト2
- 箇条書きテスト3

### これは見出しh3です
> これは引用文です。

> error:重要な警告
> 
> これは重要な警告です。

> warn:軽度な警告
> 
> これは軽度な警告です。

> info:お役立ち情報
> 
> これはお役立ち情報です。

> success:チェック項目
> 
> これはチェック項目です。

#### これは見出しh4です
```typescript:syntaxHighlightTest.ts
class MyClass {
  public static myValue: string;
  constructor(init: string) {
    this.myValue = init;
  }
}
import fs = require("fs");
module MyModule {
  export interface MyInterface extends Other {
    myProperty: any;
  }
}
declare magicNumber number;
myArray.forEach(() => { }); // fat arrow syntax
```

インラインコードのテスト `test` です。

インライン数式のテスト `$c = \pm\sqrt{a^2 + b^2}$` です。

数式のテストです。
```
$$c = \pm\sqrt{a^2 + b^2}$$
```

**最後に強調のテストをして、本文終わりです。**

Articles

Next.jsでi18n対応した場合のsitemap.xml生成

Next.js, Contentful, markedの環境における数式表示

OGPを使ってMarkdownのリンクをカード型のリンクにマークアップする

ContentfulとNext.jsで作る技術ブログ