
久しぶりの React。

最近リハビリで、Next.js をいじっていて、とりあえず Markdown のブログを作ろうと思いカタカタプログラミングを始めた。

とりあえず、Vercel が爆速でデプロイできることに驚いた。

ちびちびカスタマイズしていこうっと。

```ts
console.log("OK😄");
```

## バージョン

- 2022.06.16 canonical URL に対応
- 2022.05.13 ドラフト機能追加
- 2022.05.06 GTM GA4 設置
- 2022.05.05 OG IMAGE 自動生成追加
- 2022.05.01 サイト公開

## 参考サイト

- [Next.js でブログを作って、動的 OGP も用意した](https://shon0.dev/posts/8r_hksif024a/)
- [Create a Next.js App](https://nextjs.org/learn/basics/create-nextjs-app)

## バージョン

```json
"next": "12.1.5",
"react": "18.1.0",
```


Next.jsでブログを作った。


絵文字から絵文字を抽出するプログラムを書いたので、今度これを Api 化して、絵文字の背景を設定するようにしたい。
一旦 close。

# つくってみた

デモ：
https://node-vibrant-example.cubdesign.com/

ソース：
https://github.com/cubdesign/node-vibrant-example

↓ こういうやつ

![](/images/apple-emoji-background-color/playground.png)

- emoji を入力、画像を選択してそれぞれの目立つ色を抽出。
- 画像はサーバーにアップロードせす、ローカルで処理。
- 絵文字は apple 系 → apple emoji、Android → Google emoji、他 → twemoji をデバイスによって出しわけ。

# しくみ

色の抽出は、画像から目立つのある色を抽出する node.js ライブラリ
[`node-vibrant`](<(https://github.com/Vibrant-Colors/node-vibrant)>)を使う。

絵文字をそのまま`node-vibrant`で扱うことができないので、[twemoji-parser](https://github.com/twitter/twemoji-parser)を使って、絵文字をコードに変換。コードを元に emoji database の cdn から画像を取得し`node-vibrant`で抽出する。

デモでは、抽出した色の中から、トップレートのものを背景色。抽出した色でグラデーションを作り、絵文字の背景としてみた。

## 1. 絵文字のコードを取得

↓ こういう変換

👾 → 1f47e

🙅🏻‍♂️ → 1f645-1f3fb-200d-2642-fe0f

`twemoji-parser`では、コードが直接取得できないので、`twemoji-parser`で、絵文字の画像を取得して、画像 URL からコードを取得する。

```ts
import { EmojiEntity, parse } from "twemoji-parser";

export type Emoji = {
  text: string;
  unicode: string;
  brand: EmojiBrand;
  imageUrl: string;
};

/**
 * 絵文字の画像URLからunicodeテキストを取得する
 *
 * @param emojiImageURL 絵文字の画像URL
 * @returns
 */
const getUnicodeFromEmojiImageURL = (emojiImageURL: string): string => {
  return emojiImageURL.replace(/.*\/(.*)\.(png|svg)/, "$1");
};

/**
 * 絵文字のユニコードを取得する
 *
 * @param emoji 絵文字（複数可）
 */
const getEmojis = (emoji: string, ua: string): Emoji[] => {
  const emojiBrand: EmojiBrand = getEmojiBrandByUA(ua);

  const emojiEntities: EmojiEntity[] = parse(emoji, {
    buildUrl: (codepoints: string, assetType: string): string => {
      return assetType === "png"
        ? `https://cdn.jsdelivr.net/npm/emoji-datasource-${emojiBrand}@14.0.0/img/${emojiBrand}/64/${codepoints}.png`
        : `https://twemoji.maxcdn.com/v/latest/svg/${codepoints}.svg`;
    },
    assetType: "png",
  });

  const emojis: Emoji[] = [];

  for (let i: number = 0; i < emojiEntities.length; i++) {
    const emojiEntity: EmojiEntity = emojiEntities[i];

    emojis.push({
      text: emojiEntity.text,
      unicode: getUnicodeFromEmojiImageURL(emojiEntity.url),
      brand: emojiBrand,
      imageUrl: emojiEntity.url,
    });
  }

  return emojis;
};
```

## 2. 絵文字の画像 URL を取得

`twemoji-parser`で絵文字の画像 URL を作成する。
　画像は、[emoji-data](https://github.com/iamcal/emoji-data) の cdn を使用。64x64 の png。

```
👾 = {
    emojiBrand:  "apple" | "google" | "twitter",
    codepoints: "1f47e"
}
```

↓

```
https://cdn.jsdelivr.net/npm/emoji-datasource-${emojiBrand}@14.0.0/img/${emojiBrand}/64/${codepoints}.png
```

```ts
import { EmojiEntity, parse } from "twemoji-parser";

const getEmojiBrandByUA = (ua: string): EmojiBrand => {
  if (isApple(ua)) {
    return "apple";
  }
  if (isAndroid(ua)) {
    return "google";
  }

  // appleデバイス、アンドロイド以外はTwitterとする
  return "twitter";
};

const emojiBrand: EmojiBrand = getEmojiBrandByUA(ua);

const emojiEntities: EmojiEntity[] = parse(emoji, {
  buildUrl: (codepoints: string, assetType: string): string => {
    return assetType === "png"
      ? `https://cdn.jsdelivr.net/npm/emoji-datasource-${emojiBrand}@14.0.0/img/${emojiBrand}/64/${codepoints}.png`
      : `https://twemoji.maxcdn.com/v/latest/svg/${codepoints}.svg`;
  },
  assetType: "png",
});
```

## 3. 絵文字の色を抽出

`node-vibrant`に絵文字画像の URL を渡し色を抽出する。6 色抽出される。

```ts
import Vibrant from "node-vibrant";

const palette: Palette = await Vibrant.from(imageURL)
  .quality(quality)
  .getPalette();
```

# はまったこと

`worker.js`エラーがめちゃくちゃでて、原因不明で悩んでいたところ、`node-vibrant`のバージョン問題だった。バージョンを変更したらエラーがでなくなった。（2022.06.16）

↓

`"node-vibrant": "^3.2.1-alpha.1"` -> `"node-vibrant": "^3.1.6"`

詳しくは、ここ ↓

https://github.com/Vibrant-Colors/node-vibrant/issues/113

# つかったライブラリ

- [node-vibrant （色の抽出）](https://github.com/Vibrant-Colors/node-vibrant)
- [emoji-data (絵文字画像を cdn から借用)](https://github.com/iamcal/emoji-data)
- [twemoji-parser (絵文字のパース)](https://github.com/twitter/twemoji-parser)

意図した色が抽出される場合と、そうでない時があり、微妙だった。


appleのemoji絵文字の色を抽出して背景色を設定したい


## ✍️ この記事は、まだ編集中です。

### TODO

- [ ] 出来上がった `og-image` の説明。
- [ ] 出来上がった `dot-dom` について

Next.js の Blog のチュートリアルを見ていると、OG 画像をサーバーで自動生成している部分を見つけた。なんろうって調べてみると、Vercel がプログラムを公開していた。そのままだと日本語が使えなかったので日本語が使えるように修正してみた。

↓ この部分
https://nextjs.org/learn/basics/assets-metadata-css/polishing-layout

```tsx
<meta
  property="og:image"
  content={`https://og-image.vercel.app/${encodeURI(
    siteTitle
  )}.png?theme=light&md=0&fontSize=75px&images=https%3A%2F%2Fassets.vercel.com%2Fimage%2Fupload%2Ffront%2Fassets%2Fdesign%2Fnextjs-black-logo.svg`}
/>
```

## リポジトリ

このリポジトリを Fork して、して、Vercel にデプロイするだけで使える。
[https://github.com/vercel/og-image](https://github.com/vercel/og-image)

## 開発

### インストール

```shell
$ yarn
```

### 開発環境スタート

```shell
$ vercel dev
```

↓ 実行エラーがでた。

```shell
error @: The engine "node" is incompatible with this module. Expected version "14.x". Got "16.14.2"
```

### node のバージョンを合わせる

この PC は node マネージャーに `VOLTA` を使っていので、`volta pin` で node バージョンを `14.x` に固定する。

```shell
$ volta pin node@14
```

こんな感じで package.json に node バージョンが追記される。
この Workspace に移動すると自動で node バージョンが切り替わる。便利。

```json
"volta": {
  "node": "14.19.2"
}
```

エラー変わらず！

```shell
error @: The engine "node" is incompatible with this module. Expected version "14.x". Got "16.14.2"
```

#### 🔴 　エラーの検証 その 1

vercel の実行は vercel を global インストールしたので、インストール時の node バージョンで実行されたのでは？（おそらく）

`volta`　で global の node を `14.x` に変更した。

エラー変わらず！

#### 🔴 エラーの検証 その 2

原因がわかった。最初インストールした際、`npm i -g vercel` で、npm で global にインストールしていた。一度、 `npm uninstall -g vercel` でインインストールして、`yarn global add vercel` して、yarn で global にインストールしたら、エラーが無くなった。

ハマった。

成功！したと思ったが、

別の Mac でエラーが解決しなかった 😓。
多分、エラー検証　その１で デフォルト（グローバル） の Node.js を `node@14.x` に変更していたので上手くいっていたよう。

#### 🟢 エラーの検証 その 3

デフォルト（グローバル）の Node.js が、`node@16.14.2` の環境で`vercel`を global インストールしたので、`vercel`が`node@16.14.2`が紐付いていた。この紐付きは、インストール時に固定され変更されない。なので、`node@14.x`のプロジェクト内で`vercel`を実行しても`node@16.14.2`で実行される。エラーの原因はこれ！

解決方法は、プロジェクトの Node.js を`node@14.x`にしたうえで`vercel`を local インストールする。

成功！

確認は、コマンドで確認する。

```bash
$ volta list all

⚡️ User toolchain:

    Node runtimes:
        v14.19.2 (current @ /Users/takeo/src/cubdesign/og-image/package.json)
        v14.19.3
        v16.15.0
        v16.15.1 (default)

    Package managers:
        Yarn:
            v1.22.18 (default)

    Packages:
        vercel (current @ /Users/takeo/src/cubdesign/og-image/package.json)
            binary tools: vc, vercel
```

↓ これ！ Volta の記事を読んで理解した。

[Windows 側になるべく実行環境作りたくなかったやつが、Volta でバージョン管理できる Node.js 環境を作ってみた](https://zenn.dev/h_yoshikawa0724/articles/2021-11-09-volta)

ハマった。

> グローバルインストールしたものとローカルインストールしたものとで、同名の npm パッケージが存在していた場合、ローカルの方を優先して使うよ。 .....
> また、グローバルインストールした npm パッケージは、インストール時のデフォルト（グローバル）バージョンである Node.js と関連付けられます。
> この npm パッケージを、グローバルバージョンとして使用する際は、この関連付けられた Node.js が使われるようになっているそうです。

### 日本語フォント

#### ダウンロード

ゴシック体の、Weight は、レギュラーのみをダウンロード。
ボールド、code 用等幅フォントは使用せず、レギュラーで代用する。

Noto Sans JP
https://google-webfonts-helper.herokuapp.com/fonts/noto-sans-jp?subsets=japanese,latin

#### フォントを使う

ダウンロードした `.woff2` を使用する。

## デプロイ

### Vercel へのデプロイの注意点

Vercel の Free プランの場合は、そのままだとデプロイできないので vercel.json の `rewrites` のみを残してあとは削除する。

```json
{
  "$schema": "https://openapi.vercel.sh/vercel.json",
  "regions": ["all"],
  "functions": {
    "api/**": {
      "memory": 3008
    }
  },
  "rewrites": [{ "source": "/(.+)", "destination": "/api" }]
}
```

↓

```json
{
  "rewrites": [{ "source": "/(.+)", "destination": "/api" }]
}
```

## 参考サイト

- [Vercel og-image](https://github.com/vercel/og-image)
- [VOLTA](https://volta.sh/)

## バージョン

og-image

```json
"node": "14.19.2"
```

frontend

```json
"next": "12.1.5",
```


Next.js og-image


MacBook 12 の画面解像度をディスプレイ設定以上に広げる方法を調べていて専用アプリを使って設定してみた。`1920 x 1200` にしたい。

## 専用アプリで広げる

解像アプリを紹介しているページ「[MacBook Pro (2021)のノッチに隠されてしまうメニューバー常駐型アプリは旧 MacBook Pro のアスペクト比に設定することで表示可能。](https://applech2.com/archives/20211112-macbook-pro-notch-glich.html)」を見つけたのでためしてみたが、コマンドラインでOSの設定をいじらないとダメっぽいので、諦めた。

コマンドラインでいじる場合、OSのバージョンによって、修正するファイルが違うっぽい。

結果、最大：`2560 x 1660`。

`1440 x 900` の次は、`2048 x 1280` で `1920 x 1200` ができないのが辛い。

### 試したアプリ

- [EasyRes](https://apps.apple.com/jp/app/easyres/id688211836?mt=12)
- [Display Menu](https://apps.apple.com/jp/app/display-menu/id549083868?mt=12)（App 内課金 250 円／買い切り）
- [Display Maestro](https://apps.apple.com/jp/app/display-maestro/id414546485?mt=12)（860 円／買い切り）


## コマンドラインからの設定

`1920 x 1200` にするためには、ターミナルからコマンドで設定を変更する必要があるらしい。

- [13 インチの MacBook Pro を疑似解像度 1920×1200 で使う設定](https://dev.classmethod.jp/articles/macbookpro-13inch-1920x1200/)

## バージョン

```json
"device": "MacBook 12 2015",
"macOS": "macOS Big Sur" ,
```


MacBook 12の画面解像度をディスプレイ設定以上に広げたい。


## ✍️ この記事は、まだ編集中です。

### TODO

- [ ] next.js を使う場合、`<Script />`で、擬似ページ読み込みを発生させて、毎回 GTM 設定タグのダウンロード（PV 送信）をするか、 GTM の設定は１度だけ読み込んで、PV イベントの送信を個別で行うか検討。　->　他の計測タグを発行することを考えると、擬似ページ読み込みを行い、GTM に通常の WEB ページと同様と思い込ませる方がシンプルかも。
- [ ] GA の PV 開発環境のアクセスの除外（ `.env` で `window['ga-disable-GA_MEASUREMENT_ID'] = true;` の出しわけ ） -> [Google アナリティクスを無効にする](https://developers.google.com/analytics/devguides/collection/ga4/disable-analytics?hl=ja)
- [ ] Google アナリティクスを無効と、GA4 のデバッグモードの関係は？GA 無効の時に、GA4 のデバッグモードは動くのか？
- [ ] GA の PV 自社、自宅からのアクセスの除外（GA4 のフィルターを使う）
- [ ] 開発環境で、 [GA4 のデバッグモード](https://developers.google.com/analytics/devguides/collection/ga4/debug?technology=websites)を有効にする。（`.env` を使用）

## 設定

基本的、このページ「[Next.js で GTM + GA4 を利用する](https://zenn.dev/keitakn/articles/nextjs-google-tag-manager)」の通り。

### env の設定

本番環境は、vercel.com の Environment Variables ページで設定、ローカル環境は `.env.local` に設定。

## ハマったこと

`next/script` は `next/head` 以外の場所に貼ること。このページ「[Script Component](https://nextjs.org/docs/basic-features/script)」に書いてあった。

`next/head`　の中に貼って、タグが反応しなくてハマった。

## 参考サイト

- [Next.js で GTM + GA4 を利用する](https://zenn.dev/keitakn/articles/nextjs-google-tag-manager)
- [Script Component](https://nextjs.org/docs/basic-features/script)

## バージョン

```json
"next": "12.1.5",
"react": "18.1.0",
```


Welcome to dev.cubdesign.com

Next.jsでブログを作った。

appleのemoji絵文字の色を抽出して背景色を設定したい[close]

Next.js og-image[open]

MacBook 12の画面解像度をディスプレイ設定以上に広げたい。[close]

Next.jsでGoogle Tag Manager経由でGoogle Analytics v4の設定をしてハマった。[open]

Welcome to dev.cubdesign.com

Next.jsでブログを作った。

appleのemoji絵文字の色を抽出して背景色を設定したい.css-1jicltc{display:inline-block;font-weight:normal;white-space:nowrap;margin-left:1rem;opacity:0.1;-webkit-text-decoration:line-through;text-decoration:line-through;}[close]

Next.js og-image.css-1hfsh05{display:inline-block;font-weight:normal;white-space:nowrap;margin-left:1rem;opacity:0.3;}[open]

MacBook 12の画面解像度をディスプレイ設定以上に広げたい。[close]

Next.jsでGoogle Tag Manager経由でGoogle Analytics v4の設定をしてハマった。[open]

appleのemoji絵文字の色を抽出して背景色を設定したい[close]

Next.js og-image[open]