
静的サイトジェネレーター（SSG）で作ったサイトをGitHub Actionsを使ってサーバに公開するところまでの手順をまとめます。
2~3年目の自分向けに詳細に書いてます。

![nuxt-hosting](/images/posts/260/nuxt-hosting.png)
▲ 構成の全体図。masterを更新したらGitHub actionsでビルドしてさくらのVPSにデプロイします。GitHub actionsからサーバへはrsyncで接続しているため、サーバにNodeがなくてもOK。サーバではNginxとLet's Encriptを利用して配信してます。

以上の構成を建てるところまで順に紹介していきます。

[Nuxtjs](https://ja.nuxtjs.org/)で作りましたが、[Next](https://nextjs.org/)や[Gatsby](https://www.gatsbyjs.com/)などのSSG、SPAも同様にデプロイできます。

また、サーバも[さくらのVPS](https://vps.sakura.ad.jp/)でなくEC2や他のサーバも大丈夫です。

初のCIなので不備があるかもしれません。ご指摘頂けるとありがたいです。

## Table of Contents

## デプロイするアプリの概要

今回は[Nuxt/content](https://content.nuxtjs.org/ja/)で作ったサイトをデプロイします。

- 完成品: <https://nuxt-content-sample.suzu6.net/>
- コード: [GitHub](https://github.com/suzu6/nuxt-content-sample)

デプロイで必要な実行するコマンド。

1. `yarn install`: 必要なnode_modulesを追加する。
2. `yarn lint`: Lintをチェック。
3. `yarn test`: Jetでユニットテスト。
4. `yarn generate`: 静的サイトを生成する。

yarnを利用している。`./dist`ディレクトリに生成されるので、これをサーバにアップロードする必要がある。また、`GENERATED_BY`という環境変数をトップページで使います。

サイトの作り方は[nuxt/contentでブログを作る](https://www.suzu6.net/posts/264-nuxt-content/)で紹介してます。

## rsync出来るようにサーバを設定する

GitHub actionsで生成したサイトをサーバに設置するのにrsyncを使います
（GitHub actionsのワークフローでmarketplaceの[ssh-deploy](https://github.com/marketplace/actions/ssh-deploy)を利用しており、その中でrsyncを利用している）。そのため、外部からrsync出来るようにサーバを設定します。SSHには公開鍵認証を利用します。

今回、さくらのVPSにCentOS7を建ててホスティングします。
5つの手順でrsync出来るところまでサーバをたてます。

1. さくらのVPSでCentOS 7を建てる
2. rsync用のユーザを追加
3. 公開鍵の作成と登録をする
4. sshd_configの設定
5. SSHのポート番号の変更

サーバにデプロイする設定までです。
別の記事でNginxとLet's Encriptの設定をします。

### 1. さくらのVPSでCentOS 7を建てる

さくらのVPSの概要は公式の[入門講座](https://vps.sakura.ad.jp/)を参照してください。
[ネコでもわかる！さくらのVPS講座 ～第二回「サーバーをさわってみよう！」](https://knowledge.sakura.ad.jp/8218/)で契約からSSH接続まで紹介されてます。

作成したユーザでSSHのパスワード接続が出来ていていればOK。
もしくはこれからの手順でユーザが追加できる。

### 2. rsync用のユーザを追加

rsync用のユーザを作成する。
ユーザグループとパスワードはsudo実行のために付けたが、設定が終われば外してよさそう。

```bash
## ユーザ追加
# useradd rsync_user
## ユーザグループに追加
# gpasswd -a rsync_user wheel
## パスワード設定
# passwd $user
```

`visudo`でrsyncするときroot権限で実行できるように設定する

```sh
# visudo

rsync_user ALL=(ALL) NOPASSWD:/usr/bin/rsync
```

※ 公開先のディレクトリのパーミッションをちゃんと設定すれば、root権限渡さなくても良いかも。

### 3. 公開鍵の作成と登録をする

rsync_userの公開鍵を作成します。

```bash
$ sudo su rsync_user
$ ssh-keygen -t rsa -b 4096 -C "your_email@example.com"

# 次の二つが出来る。
# /home/rsync_user/.ssh/id_rsa
# /home/rsync_user/.ssh/id_rsa.pub　
```

[ssh-deploy](https://github.com/marketplace/actions/ssh-deploy)が対応していないため、パスフレーズは設定しない。
`id_rsa.pub`をこのユーザの公開鍵として、`id_rsa`がGitHub actionsに登録する秘密鍵とします。ローカルで鍵を作った方は適宜読み替えてください。

rsync_userの公開鍵を登録します。

```bash
# authorized_keysを作成
$ cd /home/rsync_user/.ssh/
$ cp id_rsa.pub authorized_keys

# 権限を変更
$ sudo chmod 700 /home/rsync_user/.ssh
$ sudo chmod 600 /home/rsync_user/.ssh/authorized_keys
```

`authorized_keys`が既に登録済みの場合は、末尾に公開鍵を追加する。
`.ssh`ディレクトリと`authorized_keys`の権限をそれぞれ`700`と`600`にする。

ここまでで、ssh接続ができるようになっているはず。

```bash
# サーバの中から
$ ssh rsync_user@localhost -i /home/rsync_user/.ssh/id_rsa

# ローカルのPCから
> ssh rsync_user@{サーバのIP・ホスト名} -i path/to/id_rsa
```

接続出来ない場合は`authorized_keys`の権限と`sshd`を確認する。
サーバの中からできて外部から出来ない場合は、さくらのVPSの場合[パケットフィルタ](https://manual.sakura.ad.jp/vps/network/packetfilter.html)のポートとIPを確認する。

参考: [お前らのSSH Keysの作り方は間違っている](https://qiita.com/suthio/items/2760e4cff0e185fe2db9#%E6%96%B0%E3%81%97%E3%81%84ssh-key%E3%81%AE%E4%BD%9C%E6%88%90)

```bash
rsync -avz rsync://rsync_user1@10.0.1.108/tmp /var/www/test
```

### 4. sshd_configを設定する

セキュリティを高めるための設定です。
rsyncに直接関係ないので後からでもよい。

まず、sshd_configをバックアップはしておく。消しちゃったら建て直せばいい。

```bash
cd /etc/ssh
sudo cp sshd_config sshd_config.org
```

`sshd_config`を編集する。

```bash
$ sudo vi sshd_config

PermitRootLogin no
PasswordAuthentication no
AuthorizedKeysFile      .ssh/authorized_key
```

`PermitRootLogin no` はrootユーザでのログインを拒絶する。
`PasswordAuthentication no`はパスワードでのログインを拒絶する。
どちらもセキュリティを高めるための設定です。
`AuthorizedKeysFile .ssh/authorized_key`は公開鍵のパスを指定している。デフォルトで変更の必要ないはず。

sshdの設定を更新する。

```bash
$ sudo systemctl restart sshd
$ sudo systemctl status sshd
* sshd.service - OpenSSH server daemon
   Loaded: loaded (/usr/lib/systemd/system/sshd.service; enabled; vendor preset: enabled)
   Active: active (running) since Tue 2020-12-22 22:27:56 JST; 1 day 1h ago
     Docs: man:sshd(8)
           man:sshd_config(5)
 Main PID: 20149 (sshd)
   CGroup: /system.slice/sshd.service
           `-20149 /usr/sbin/sshd -D
```

参考: [ネコでもわかる！さくらのVPS講座 ～第二回「サーバーをさわってみよう！」](https://knowledge.sakura.ad.jp/8218/)

### 5. SSHのポート番号の変更

SSHのポートを2022に変更してみる。

```bash
$ sudo vi sshd_config
Port 2022
```

sshdの設定を更新する。

```bash
sudo systemctl restart sshd
```

ポートの変更では`firewalld`のsshの設定も変更します。

```bash
$ cd /usr/lib/firewalld/services/
# コピーする
$ sudo cp ssh.xml ssh.xml.org

# firewallの設定を変更する
$ vi /usr/lib/firewalld/services/ssh.xml
22 -> 1022
```

ポートを変更したら`firewalld`を再起動する。

```bash
$ sudo systemctl restart firewalld.service
success

$ sudo systemctl status firewalld.service
* firewalld.service - firewalld - dynamic firewall daemon
   Loaded: loaded (/usr/lib/systemd/system/firewalld.service; enabled; vendor preset: enabled)   Active: active (running) since Mon 2020-12-21 22:41:40 JST; 2 days ago
     Docs: man:firewalld(1)
```

ここまでで、22での接続が出来ず、2022での接続が確認できる。

```bash
# サーバの中から
$ ssh rsync_user@localhost -p 2022 -i /home/rsync_user/.ssh/id_rsa

# ローカルのPCから
> ssh rsync_user@{サーバのIP・ホスト名} -p 2022 -i path/to/id_rsa
```

参考: [CentOS 7 firewalld よく使うコマンド](https://qiita.com/kenjjiijjii/items/1057af2dddc34022b09e)

さくらのVPSの場合はパケットフィルタの設定も行う。

- カスタムTCP
- ポート: 2022
- すべて許可する

[Sakura VPS Docs パケットフィルタ](https://manual.sakura.ad.jp/vps/network/packetfilter.html)

## GitHub actions

[GitHub actions](https://github.co.jp/features/actions)のワークフローの設定と環境変数を設定します。

### ワークフローの設定

generateまではNuxt.jsのプロジェクトを作成したときに出来たワークフローです。
サーバへデプロイするところは、マーケットプレイスの[ssh-deploy](https://github.com/marketplace/actions/ssh-deploy)を利用しています。

[nuxt-content-sample/.github/workflows/ci.yml](https://github.com/suzu6/nuxt-content-sample/blob/master/.github/workflows/ci.yml)に全文があります。

理解したことをブロック単位で説明を添えてみます。

```yml:ci.yml
on:
  push:
    branches:
      - master
  pull_request:
    branches:
      - master
```

▲ トリガーとなる動作。masterへのプッシュとプルリクエストでCIが動き出す。ブランチごとにテスト用とか分けられる。

ワークフローの確認には手動で実行できる[workflow_dispatch](https://docs.github.com/ja/free-pro-team@latest/actions/reference/events-that-trigger-workflows#workflow_dispatch)もあるるようです。

```yml
jobs:
  ci:
    runs-on: ${{ matrix.os }}

    strategy:
      matrix:
        os: [ubuntu-latest]
        node: [14]
```

▲ ここからワークフローのジョブを定義する。`runs-on`で動作する環境を選ぶ。`Ubuntu`の最新版で`Node v14`の環境でビルドします。

```yml
    steps:
      - name: Checkout 🛎
        uses: actions/checkout@master
```

▲ リポジトリからチェックアウト。

```yml
      - name: Setup node env 🏗
        uses: actions/setup-node@v2.1.2
        with:
          node-version: ${{ matrix.node }}
```

▲ Nodeのバージョンを定義する。`strategy`でセットしたパラメータが使える。

```yml
      - name: Get yarn cache directory path 🛠
        id: yarn-cache-dir-path
        run: echo "::set-output name=dir::$(yarn cache dir)"

      - name: Cache node_modules 📦
        uses: actions/cache@v2
        id: yarn-cache # use this to check for `cache-hit` (`steps.yarn-cache.outputs.cache-hit != 'true'`)
        with:
          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
          restore-keys: |
            ${{ runner.os }}-yarn-

      - name: Install dependencies 👨🏻‍💻
        run: yarn
```

▲ node-modulesのキャッシュを定義して、yarnでインストールする。
キャッシュがあると次回のビルドでnode-modulesのインストール時間を軽減できる。
初心者にこの設定を組むのは厳しいので、Nuxt.jsのプリセットが有って助かった！

```yml
      - name: Run linter 👀
        run: yarn lint

      - name: Run tests 🧪
        run: yarn test

      - name: Run generate
        run: yarn generate
```

▲ lintとテストとビルドを実行している。
lintとテストでエラーが出た場合はちゃんとワークフローも止まります。
ちゃんとプッシュする前に確認する習慣がつきそう。

```yml
      - name: Deploy to Server
        uses: easingthemes/ssh-deploy@v2.1.5
        env:
            SSH_PRIVATE_KEY: ${{ secrets.SERVER_SSH_KEY }}
            ARGS: "-rltgoDzvO --delete"
            SOURCE: "dist/"
            REMOTE_HOST: ${{ secrets.REMOTE_HOST }}
            REMOTE_USER: ${{ secrets.REMOTE_USER }}
            REMOTE_PORT: ${{ secrets.REMOTE_PORT }}
            TARGET: ${{ secrets.REMOTE_TARGET }}

```

▲ サーバへデプロイする[ssh-deploy](https://github.com/marketplace/actions/ssh-deploy)の処理です。
generateで生成した`./dist`ディレクトリ以下を`secrets.REMOTE_TARGET`に置きます。
サーバの`secrets.REMOTE_TARGET`のパスからNginxがホスティングしている。
`rsync`のコマンドを自由度高めに設定できる。

`secrets`はリポジトリで設定した環境変数です。${{ secrets.REMOTE_HOST }}`のようにして使えます。

<https://github.com/marketplace/actions/ssh-deploy>

- [GitHubの新機能「GitHub Actions」で試すCI/CD](https://knowledge.sakura.ad.jp/23478/)

### 環境変数を設定

ワークフローの中で利用できる環境変数は、リポジトリの`Setting`　→ `Secrets`　→ `New repository secret`から追加できる。

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

ワークフローでは${{ secrets.REMOTE_HOST }}`のように使える。

どうも`Environment secrets`と`Repository secrets`があって使い分け出来る。
`Repository secrets`の方が暗号化されていて個人ではリポジトリのオーナーだけ見られるようです。

[暗号化されたシークレット](https://docs.github.com/ja/free-pro-team@latest/actions/reference/encrypted-secrets)

## おわりに

以上でさくらのVPSにNuxt.jsの静的サイトをデプロイまでの手順を紹介しました。

１記事にまとめましたがかなり手順があって大変です。前回[NetlifyからVercelへの移行を検討した話](https://www.suzu6.net/)という話を書いた。Netlifyが遅い点をディスったが、Netlifyの無料で手軽にデプロイできるのは凄いことだなと改めて感じた。

マルチドメインで使えるようなNginxのバーチャルホストの設定や、Let’s EncriptでのSSL対応もしたのでこちらも記事にします。

とうとう自分のサーバを契約してブログだけでは持て余してしまう。
アプリを作りたいが、リソース管理やセキュリティの方面も学んでいきたい。
来年は使い倒していく。


GitHub Actionsで静的サイトジェネレーターをサーバにデプロイする



最近ブログを新しく作り直しました。
また、ブログのPV数も増え月に70GBほどの配信量となり無料枠の上限に迫ってます。

ここまで大きくなったのは、２年間Netlifyにはお世話になったおかげで無料枠で収まる範囲で利用を続けてきました。
CIで簡単にホスティング出来るのはめちゃくちゃ便利で好きなサービスです。

しかし、Netlifyのスループットが遅く1MBのファイルのダウンロードに１分超えることもありました。普段では2~4秒くらい。
サイトの速度のボトルネックがNetlifyのスループットの遅さとなりました。
課金をしてNetlifyの利用を続けるか、他のホスティングサービスやレンタルサーバに乗り換えるかの考えをまとめる。

現状とVercelについて書きました。

※無料枠での話です。

## Netlifyで公開しているサイトの速度

[PageSpeed Insights](https://developers.google.com/speed/pagespeed/insights/)とChromeのDeveloper toolで速度を測りました。


▼ PageSpeed Insightsで測定した結果。
| Netlify                           | モバイル  | パソコン  |
| --------------------------------- | --------- | --------- |
| スコア                            | **41**    | 73        |
| **First Contentful Paint（FCP）** | **2.4 s** | **0.6 s** |
| Time to Interactive               | 14.9 s    | 3.0 s     |
| Speed Index                       | 16.4 s    | 2.7 s     |
| Total Blocking Time               | 3,270 ms  | 370 ms    |
| Largest Contentful Paint（LCP）   | 2.5 s     | 0.7 s     |
| Cumulative Layout Shift（CLS）    | 0.163     | 0.004     |

▼ Developer toolで測定した結果。（日曜日の正午くらい）
| Netlify               | HTML          | 記事のJSON    |
| --------------------- | ------------- | ------------- |
| Size                  | 74.9 kB       | 1.8 MB        |
| ​**Waiting (TTFB)**   | **95.54 ms**  | **245.76 ms** |
| ​**Content Download** | **189.85 ms** | **2.73 s**    |

TTBFとContent Downloadが遅いため最初のレンダリングまでに時間がかかる。
たまに1MBのファイルのダウンロードに1分以上かかっていることもある。そのため記事のJSONの読み込みが遅く、自分でも少しイラつく。

Netlifyでは日本のCDNがないためスループットが遅いことが指摘されていました。
> 調べてみると、Netlify の無料プランの場合、CDN は世界で 8 箇所しかなく、日本は含まれていないそうです。サポートに問い合わせたところ、日本での CDN を有効にする場合は月額 3000 ドルから（！！！）のエンタープライズ契約が必須との回答でした。ありがとう Alejandra さん、ブッ飛んだぜ！  
> [Netlifyは遅い](https://www.yuuniworks.com/blog/2020-09-14-netlify-is-slow/)


先の記事でも紹介されている[Fast or Slow](https://www.fastorslow.com/app)で計測すると、USとEU圏は早いが他の地域は快適とは言えないのがわかる。
![fos](/images/posts/260/fos.png)

このブログのアクセスはほぼ日本からですので、日本にCDNがあるサービスに乗り換えたい。

## 静的サイトのホスティングサービス

Netlifyに類似したホスティングサービスは選択肢が多い。

▼ [Netlifyは遅い](https://www.yuuniworks.com/blog/2020-09-14-netlify-is-slow/)の表にVercelの料金と実測値（試行数1回）を足した。
| service          | price                                       | スループット | RTT     |
| :--------------- | :------------------------------------------ | :----------- | :------ |
| Netlify          | 200GB まで無料 <br> 以降従量制              | 約 100KB/s   | 約 50ms |
| GitHub pages     | 100GB まで無料 <br> 超えたら追い出される(!) | 数 MB/s      | 約 5ms  |
| Firebase hosting | 10GB まで無料 <br> 以降従量制               | 数 MB/s      | 約 5ms  |
| Vercel           | 個人アカウントは無料！                      | 2.8 MB/s      | 2.3 ms  |

既に70GB/月ほどなので他のサービスへの移行も難しいと考えていた。
レンタルサーバも含めて色々と探していたところ、Vercelに行き着いた。
まず、Vercelの配信量に上限がないのに驚く。
無料なので試してみた。


## Vercelについて

[Vercel](https://vercel.com/)

[NetlifyキラーのVercelでウェブサイトをホストしたら簡単すぎて笑顔になった](https://dev.classmethod.jp/articles/vercel/)という記事を読んで、Vercelのことを知りました。
- **個人で使う分には配信量に制限なし！**
- 日本にCDNの拠点があるらしい
- その他の制限が緩いこと

個人で使う分には制限が緩い。
ビルド実行回数やサーバレス関数の実行数も個人では十分枠がある。

企業や組織での開発では料金がかかるチームプランがあります。
ちょっと割高なのでチームの場合はGitHubPagesのほうが良いかも。

**非営利目的の場合に限ってhobby planが利用できるようです。**
このブログは広告貼ってあるので営利目的に当たるはず。
ということで速度の計測だけしてやめておく。
使い勝手は良いのでなにか作った際には利用したい。

料金については[公式](https://vercel.com/pricing)か[こちら](https://b.lollipop.onl/q2fgpwij4/)の記事にまとまってます。

## Vercelを使ってみる

サイトに行ってアカウント作っている中で、リポジトリとコマンドを指定したら公開できてた。
Netlifyと同じく簡単だし、最初の導入はVercelがさらに簡単で優れているように思う。
そして、公開したページで測定しました。

▼ PageSpeed Insightsで測定した結果。
| Vercel  (Netlifyと比べて)         | モバイル            | パソコン         |
| --------------------------------- | ------------------- | ---------------- |
| スコア                            | **44** (+3)         | 93 (+20)         |
| **First Contentful Paint（FCP）** | **3.8 s** (+1.4s)   | **0.8 s** (+0.2) |
| Time to Interactive               | 8.2 s (-6.7s)       | 2.0 s (-1.0s)    |
| Speed Index                       | 3.8 s (-12.6s)      | 0.9 s (-1.8s)    |
| Total Blocking Time               | 1,350 ms (-1,920ms) | 170 ms (-200ms)  |
| Largest Contentful Paint（LCP）   | 4.2 s (+1.7s)       | 0.9 s (+0.2s)    |
| Cumulative Layout Shift（CLS）    | 0.163 ($\pm0$)      | 0.11  (+0.106)   |

▼ Developer toolで測定した結果。（日曜日の正午くらい）
| Netlify               | HTML                    | 記事のJSON               |
| --------------------- | ----------------------- | ------------------------ |
| Size                  | 74.9 kB                 | 1.8 MB                   |
| ​**Waiting (TTFB)**   | **38.07 ms** (-57.47ms) | **220.55 ms** (-25.21ms) |
| ​**Content Download** | **49.76 ms** (-140.09ms | **0.63 s** (-2.10s)      |


▼ Netlifyを1としたときのVercelのベンチマーク。

![n-v](/images/posts/260/n-v.png)

スコア以外は小さくなったほうが性能は良い。
TTBFが若干減り**ダウンロード速度が５倍速くなった**ことで、体感的にもページの読み込み速度が上がった。

▼ Vercelの**Fast or Slow**のベンチマーク。(縦軸がNetlifyの結果と違うことに注意)
![fos-v](/images/posts/260/fos-vercel.png)

満遍なく黄色い。
日本に限って比べると4,300ms -> 3,200くらいに減った。
EUまたはUSでの配信はNetlifyのほうが早いが、その他の地域ではVercelがよさそう。

## NetlifyとVercelの比較のまとめ

- どちらもリポジトリとの連携とデプロイが簡単。
- Netlifyはスループットが遅い。
- EUまたはUSでの配信はNetlifyも早いが、その他の地域ではVercelがよさそう。
- Vercelは個人利用無料だが非営利目的に限る。

日本での利用はVercelよりもNetlifyに分がある。Vercelの利用者が増えていくはず。

今後はサーバを借りてこのブログの公開しようと思う。
サーバを借りたら自由度も高くなるし、一応インフラエンジニアなので自分で試せる環境も必要。
ただし、従量課金がないものを選びたい。

NetlifyからVercelへの移行を検討した話

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


**はてなブログ**のSEOってすごいんですね。  
ブログを移行したり、削除しても検索結果に~~しぶとく~~残り続けます。
中身のないページは検索してたどり着いた方の期待を裏切ってしまうため、後片付けはしっかりやりましょうという話。

はてなブログでは直接外部(移行先)へのリダイレクトの設定ができないため、
[JavaScriptを噛ませてリダイレクト](https://beiznotes.org/move-from-free-hatenablog-without-301/)させて行うようです。
これをやらずに移行先だけ示して放置していました。

今回は移行先（当ブログ）を示すだけのはてなブログのページが、移行先より検索順位が上にある原因について探ってみます。

記事を削除したい方は[はてなブログの記事を消してGoogleの検索結果からも削除する](https://www.suzu6.net/posts/67-hatena-delete)を参照してください。

## 現象

ちなみに**Pro**ではなく無料のユーザーでした。

記事を独自のブログへ移行しました。
その際、中身を消して移行先へ促すリンクだけにして半年経っても検索上位に残ります。
さらに、その記事すら削除して１週間経ちましたが、**Entry is not found**のページが検索結果に残っています。

検索キーワードは「Java post json」と、ニッチな技術記事なので競争が緩いのも原因ではあります。

![java-post](/images/posts/66/java-post.png)

２番目が中身を消したはてなブログの記事。
３番目が移行先の記事。

![not-found](/images/posts/66/not-found.png)

現時点ではてなブログのリンクを踏むと、**Entry is not found**になる。

下は消す前の移行を説明したページ。

![move](/images/posts/66/move.png)

このまま、半年程経っても上位に表示されていた。

ニッチな内容だからこそ中身のないページが上位に表示されるのは困るしとても申し訳ない気持ちになる。

## 経緯

- 2017/09/21　はてなブログへ記事を投稿する。
- 2018/07/28　ブログを移行、中身を消して移行先のリンクを表示する。
- 2019/01/11　公開していた記事を削除した。
- 2019/01/23　検索結果に残っていることを確認、削除を試みる。

## 移行先を示すだけのページがなぜ上位に表示されていたか。

本題です。

ブログを移行した際に、はてなブログのページは上述のように移行先だけを表示していました。
そのページが半年経っても上位に表示され、かつ、移行先のページよりも検索結果が上にあります。

コンテンツを移したページよりも、中身のないページの評価が高い。
考えられる理由は、

1. 更新後の中身の解析がされていない。
2. アクセスが続いているため、評価が下がらなかった。
3. はてなのページランクの評価がとても高い。

Googleのクローラーは優秀であるはずなので、数ヶ月の間１.が放置されることはないと思います。
2.は変わらず毎日100pvほど流入しています。
3.は、はてなのユーザーは固有のサブドメインを持ちます。
私の場合「suzu6.hatenablog.com」です。
サブドメインもドメインの影響を受けている？

## Googleの評価基準

比較する前にGoogleの評価基準を確認します。

Googleは検索エンジンのアルゴリズムを公開はしていませんが、
[Google が掲げる 10 の事実](https://www.google.com/intl/ja/about/philosophy.html)から**ユーザーの利便性を第一**に考えていることが伺えます。

2, 3, 4, 5の項目を自分なりに解釈してみると、**サイトの専門性**、**ページの表示速度**、**被リンクとそのドメインの評価**、**モバイルのユーザビリティ**あたりが重要だと思います。サイトの専門性は**コンテンツの中身**と**記事数**に分けて考えます。そのあたりを比較してみます。

また、Googleでは以下のガイドラインも策定しています。

- [検索エンジン最適化（SEO）スターター ガイド](https://support.google.com/webmasters/answer/7451184?hl=ja)
- [ウェブマスター向けガイドライン（品質に関するガイドライン）](https://support.google.com/webmasters/answer/35769)

ページランクや検索エンジンのアルゴリズムについては
<a target="_blank" href="https://www.amazon.co.jp/gp/product/4774167533/ref=as_li_tl?ie=UTF8&camp=247&creative=1211&creativeASIN=4774167533&linkCode=as2&tag=suzu60c-22&linkId=7eae971fa72edee63f5173d56651a072">検索エンジン自作入門 ~手を動かしながら見渡す検索の舞台裏</a><img src="//ir-jp.amazon-adsystem.com/e/ir?t=suzu60c-22&l=am2&o=9&a=4774167533" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />
がおすすめです。

## 比較

移行してから半年経っており、当サイトも検索結果に載った。
そのため、クローラーがやってきてページの評価を行なっている。

つまり、どこかの要因で当サイトのページが低く評価されているはず。

### コンテンツの中身

コンテンツの中身は移行したので、移行先の方が高いことは明白です。

### 記事数

はてなブログでは**４**つ記事を投稿していました。
当サイトでは少しづつ増やして、**60**記事以上になっています。

これが要因ではない。

### ページの速度評価の比較

はてなの記事は速いイメージがあります。

はてなの記事を復元して、[PageSpeed Insights](https://developers.google.com/speed/pagespeed/insights)でページ速度の評価を測ってみます。
復元は「記事の管理」の「ゴミ箱」からできます。

| url |モバイル|PC|
|:---|:---:|:---:|
|http://suzu6.hatenablog.com/entry/2017/09/21/234704|31|88|
|https://www.suzu6.net/posts/35|47|99|

PCのスコア

![hatena-insight](/images/posts/66/hatena-insight.png)
![suzu6-insight](/images/posts/66/suzu6-insight.png)

あれ？意外と勝っていた！？

2018年12月にブログの構成を**Netlify+Nuxt**の**静的サイト**に移したため、それが評価されたようです。
頑張って作って良かった。

[静的サイトを作る上でホスティングサービスの検討とNetlifyを使ってみた感想](https://www.suzu6.net/posts/55-hosting-service)

見にくる方は、PCがメインです。
モバイルはとりあえずこのままで行きましょう。
スコアはそこそこあるので、ページ速度が原因ではなさそうです。

---

補足

2018年07月に作った最初のブログは[AWS lambdaの上にPython +Flaskの構成](https://www.suzu6.net/posts/2)でした。
実はまだlambdaに残っていて[こちら](https://r92b7ujnsd.execute-api.ap-northeast-1.amazonaws.com/dev/article/35)から見ることができます。

![lambda-insight](/images/posts/66/lambda-insight.png)

モバイルは**74**

lambdaはアクセスがない間、スリープ状態になるため初回の応答はもう少し低いです。
また、DynamoDBにある文章を毎回書き出しているため、応答も1秒以上かかります。

### モバイルのユーザビリティ

はてなブログも当サイトも**レスポンシブ対応**しています。
見栄えの部分では大差なさそうです。

[PageSpeed Insights](https://developers.google.com/speed/pagespeed/insights)の評価は47対31と当サイトの方が若干高いです。

### 被リンク数のチェック

被リンクのチェックは[蟹さん](http://hanasakigani.jp/)で行います。
ページではなくサイト全体の引用数がわかるみたいです。

#### はてなブログ

0でした。。。
ブックマークに登録されるほどのものではないため、しょうがない。

#### 移行先（当サイト）

|被リンクのページタイトルとURL | OBL |
|:---|:---:|
|1	[suzu6 - Qiita](https://qiita.com/suzu6) ||
|2	[SAStrutsでPOSTされたもの（リクエストパラメータ／JSON文字列）を受け取る話 - liliel_OvO’s blog](https://liliel.hateblo.jp/entry/2018/09/10/172207) |65|
|3	[Python - ZappaでFlaskプロジェクトをデプロイする方法｜teratail](https://teratail.com/questions/154797)|0|

アンカーテキストとnfは空欄でした。
自分で貼ったものを除くと、１件引用されていました。ありがとうございます。

被リンク数は移行先の方が多い結果となりました。
少ないので大差はなさそうです。

### アクセス数

一応アクセス数にも言及する。

記事の性質上、平日にPCからのアクセスが多い。
サイト全体でははてなブログが**1000pv/月**ぐらい、当サイトが**3000pv/月**くらい。
記事数が10倍以上あるのに、pv数は3倍の開きしかない。。。すごいなはてなブログ。

ユーザー数など細かいものは、はてなブログをアナリティクスに登録していないため不明。

## ここまでまとめ

||移行先（当サイト）|はてなブログのマイページ|
|:---|:---:|:---:|
|コンテンツの中身|○|×|
|記事数|60以上|4|
|PageSpeed Insights PC|99|88|
|PageSpeed Insights Mobile|47|31|
|被リンク数|3|0|
|月間pv数|3000|1000|

あれ？
ここまでの比較では明らかに移行先の方が評価が高くなる結果になっている。
それでもはてなブログの記事の検索順位が落ちなかった要因は何だろうか。

その他関係しそうなのはこのあたり。

- 記事の投稿していた時間の差（２年の差がある）
- metaタグの設定
- HTMLの構造
- 広告の数

やっぱりサイトの構成がはてなブログは強いんだろうな。
はてなブログのエコシステムを活かせないほど弱小サイトだったが、恩恵は十分に得られていたのだろう。
コンテンツの内容で優っているはずでも、勝てないぐらいです。

**結論：独自のサイトよりもはてなブログの方が断然強い！**

自分向けには、改善する余地がたくさんあるから勉強していきましょう！です。

--- 

<iframe style="width:120px;height:240px;" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" src="https://rcm-fe.amazon-adsystem.com/e/cm?ref=qf_sp_asin_til&t=suzu60c-22&m=amazon&o=9&p=8&l=as1&IS2=1&detail=1&asins=4774167533&linkId=0cea9df1bbdd8c8413180076d97c2431&bc1=000000&lt1=_top&fc1=333333&lc1=0066c0&bg1=ffffff&f=ifr">
    </iframe>



実際に検索エンジンを開発してきた山田浩之氏と末永匡氏の著書です。
この機会にもう一度読んで手を動かしてみたいです。

---

次の記事：[はてなブログの記事を消してGoogleの検索結果からも削除する](https://www.suzu6.net/posts/67-hatena-delete)

はてなブログの評価が高すぎて移行先のページより検索結果が上位にある


**はてなブログ**のSEOってすごいんですね。  
ブログを移行したり、削除しても検索結果に~~しぶとく~~残り続けます。
中身のないページは検索してたどり着いた方の期待を裏切ってしまうため、後片付けはしっかりやりましょうという話。

[はてなブログの評価が高すぎて移行先のページより検索結果が上位にある](https://www.suzu6.net/posts/66-hatena-rank)からの続きになります。

ちなみに**Pro**ではなく無料のユーザーです。

## 現象

記事を独自のブログへ移行しました。
その際、中身を消して移行先のリンクだけにして4ヶ月経っても検索上位に残ります。
さらに、その記事すら削除して１週間経ちましたが、**Entry is not found**のページが検索結果に残っています。

検索キーワードは「Java post json」と、ニッチな技術記事なので競争が緩いのも原因ではあります。

![java-post](/images/posts/66/java-post.png)

２番目が中身を消したはてなブログの記事。
３番目が移行した先の記事。

![not-found](/images/posts/66/not-found.png)

はてなブログのリンクを踏むと、**Entry is not found**になる。
HTTPのステータスは`404 Not Found`。

ニッチだからこそ中身のないページが上位に表示されるのは困るしとても申し訳ない気持ちになる。


## 経緯

- 2017/09/21　はてなブログへ記事を投稿する。
- 2018/07/28　ブログを移行、中身を消して移行先のリンクを表示する。
- 2019/01/11　公開していた記事を削除した。
- 2019/01/23　検索結果に残っていることを確認、削除を試みる。
- 2019/02/06　削除依頼をしたページ以外が残っていることを確認。削除する。

## 404のページがなぜ消えないか

はてなブログの記事を削除すると**404**が返ってくる。
HTTPステータスコードの404は、「削除」ではなく「見つからなかった」を意味する。
ウェブブラウザが表示する「サーバが見つかりません」のようなメッセージは、サーバとの接続に失敗したことを表すもので、404とは別である。

検索結果からなかなか消えない理由について
[こちら](https://www.suzukikenichi.com/blog/why-dont-404-pages-disappear-immediately-from-search-results/)
の記事にGoogleのMatt Cutts(マット・カッツ)氏の翻訳された解説があります。
解説を要約すると、

- ページの削除を意味する**410**ステータスコードがある。
- Googleは2007年までは404も410と同等に扱って削除していた。
- 不注意によってページが消えていた場合など、復旧する道を残すための安全域としてインデックスに残すようにしている。

とのことです。
404を返すページでもすぐには消えないことがわかりました。

## 記事を削除してから

![not-found](/images/posts/66/access.png)

赤枠が記事を全て消してからのアクセス数。
１週間経っても元気にアクセス数を稼いでいることがわかる。

技術ブログは平日にアクセスが多いため、正月休みのあたりは

## 消し方

404を返しているため、このまま待っても自然と検索結果から消えるはずです。
それもいいですが、削除依頼をする方法もあるためやってみます。

Googleの[古いコンテンツの削除](https://support.google.com/websearch/answer/6349986?hl=ja)から削除依頼を申請できる。
こちらに検索結果に残っている「JavaからJSON文字列をPOSTで送信する - suzu6 - はてなブログ」のURLを貼ってリクエストした。

![delete-request](/images/posts/66/delete-request.png)

**このリクエストはすでに変更済みまたはウェブから削除済みのページや画像に対してのみ有効です。**
「ページが生きているけど消したい！」なんてことはできないようです。
個人情報など法的な理由での削除依頼は[こちら](https://support.google.com/legal/answer/3110420?visit_id=636838199502522675-2161226770&rd=1)から申請してください。

![response](/images/posts/66/response.png)

数分ほど待つと既に存在していないことを確認した旨のメッセージが出ます。
**削除をリクエスト**を押します。

![result](/images/posts/66/result.png)

リクエスト済みの一覧に「保留中」として追加されました。
これで、自然に待つよりも早く検索結果から削除されると思います。

---

翌　2019/01/24

昼頃確認すると、依頼したページが削除されていました！
仕事が早い！

![deleted](/images/posts/66/deleted.png)

ステータスが「削除済み」になっています。
検索でも確認しましたが、出てきませんでした。

サイトのページがインデックスされているか確認するには、Googleの検索フォームに`site:サイトのURL`を入力して確認できます。
`site:http://suzu6.hatenablog.com`で確認すると依頼したページだけ削除されていました。

![not-requests](/images/posts/66/not-requests.png)

はてなブログの記事を削除してから１週間以上残っていたページも
依頼を出して翌日に削除されるのはいいですね。
404のページは評価が下がるとも言われているため、待つよりも積極的に削除申請を出した方が良さそうです。

---

2019/02/05

１月に削除したページ以外が検索に残っていた。
削除依頼を出さないとまだまだ残っていそう。

![site](/../static/images/posts/66/site.png)

これらも削除しました。


## 参考

- [HTTP 404 - wiki](https://ja.wikipedia.org/wiki/HTTP_404)
- [Search Console ヘルプ](https://support.google.com/webmasters/answer/93641?hl=ja)

---

前の記事：[はてなブログの評価が高すぎて移行先のページより検索結果が上位にある](https://www.suzu6.net/posts/66-hatena-rank)

はてなブログの記事を消してGoogleの検索結果からも削除する


このブログは`Netlify`というホスティングサービスで動いています。
設定ミスからリダイレクトループを起こしてしまったため、
`ERR_TOO_MANY_REDIRECTS`が起きる事例として書き留めます。

このエラーは初めて見ました。
せっかくなので他の要因についても予習してまとめます。

## 繰り返しリダイレクトで接続できない

2019/01/18 にリダイレクト設定をいじったところ下のようなエラーがでて接続できなくなった。

![error](/images/posts/47/error.png)

どうやらリダイレクトが繰り返し行われたため、エラーが返ってきたらしい。
その時の設定がこちら。

```txt
# Redirect default Netlify subdomain to primary domain
https://www.suzu6.net/* https://www.suzu6.net/:splat 301!
# 記事の一覧へ
/posts           /tags/all 301!
# ブログの移行
/article/*  /posts/:splat  301!
```

2行目。。。まあ、そうなりますよね。
同じドメインの間でリダイレクトしあうようになっていました。

## 原因

```txt
https://suzu6-nuxt-blog.netlify.com/* https://www.suzu6.net/:splat 301!
```

もともと上のようにNetlifyのサブドメインからカスタムドメインへリダイレクトしていました。  
原因は、ブログの内部リンクを一括変換したときにリダイレクトの設定ファイルも変更してしまったことです。
ローカル環境では問題がなく、本番環境へデプロイしてから気づきました。

VSCodeの機能でプロジェクト内全体のファイルに対して変換していた。
対策は、ディレクトリを絞って変換するように気をつける。

## ERR_TOO_MANY_REDIRECTSに関して

せっかくなのでリダイレクトループに関してまとめます。

![error](/images/posts/47/error.png)

`ERR_TOO_MANY_REDIRECTS`が起きた時、**Cookie**を消去するよう指示を受けます。
今回の事例とは異なりますが、多くの要因は**Cookie**に因るようです。

以下、要因をまとめようと調べましたが、なぜCookieがこのエラーを引き起こす要因は特定できませんでした。
対処方法は多く見つかります。

[Amazonのページ](https://saketorock.com/chrome-redirects/)や、[誤ったブラウザ拡張機能が原因である可能性](https://www.drivereasy.com/knowledge/how-to-fix-err-too-many-redirects-error/)での報告もあるようです。

### 解決方法

ブラウザの Cookieの削除、ページの履歴の削除を行うことで問題が解消します。
Cookieの削除う方法については、**Cookieの削除方法**で検索をすることで多くの削除方法が見つかりますので、ここでの説明方法は省略します

### それでも解消しないときは？

サイトのリダイレクトの不具合分析には、無料のウェブツール
[Redirect Checker tool](http://www.redirect-checker.org/index.php)
が使えます。リダイレクトのログを追うことができるため、原因の推定に役立ちます。

また、こちらの[対策事例](https://blog.s-giken.net/96.html)を参照してください。

## まとめ

リダイレクトループするとエラーになる。
一括変換はフォルダを指定して影響範囲を制限する。

[Netlifyでのリダイレクトの設定方法](https://www.suzu6.net/posts/47-netlify-redirect)もどうぞ。

## 参考

[リダイレクトループが原因で「ERR_TOO_MANY_REDIRECTS」「このページを表示できません」が出たときの対策12事例＋α](https://blog.s-giken.net/96.html)

設定をミスしてリダイレクトループが起きた話 | Netlify


## はじめに

大学時代に所属していた基礎スキー部のサイトを作り直しているところです。
**Firebase Hosting**にNuxt.jsで作った静的サイトをホスティングしています。
大体出来上がってきたので、**カスタムドメイン**を設定します。

少しの設定でカスタムドメインとSSL（HTTPS）も使えるようになります。
自分でサーバを立てて設定するよりも格段に簡単でした！
良いサービスですね。

出来上がったもの：[北大基礎スキー部　https://www.huss.jp/](https://www.huss.jp/)

## 準備

ドメインとFirebase Hostingを準備します。

### ドメインを準備

ドメインは[ムームードメイン](https://px.a8.net/svt/ejp?a8mat=356RAD+AP7H6A+348+1C5BOX)から購入しました。

![ロゴ](/images/posts/58/muumuu.png)

[こちら](https://px.a8.net/svt/ejp?a8mat=356RAD+AP7H6A+348+1C5BOX)から欲しいドメインを購入します。
スキー部なので`.ski`(約5000円)にしようかと悩みましたがちょっと高いので、`.jp`（約3000円）にします。

購入手続きを進めてコンソールを開くところ待て進んで下さい。
サブドメインの設定も後述します。

[お名前.com](https://px.a8.net/svt/ejp?a8mat=2ZN724+DUBU42+50+2HHVNM)など他のサービスで取得しても大丈夫です。

### Firebase Hosting

既にプロジェクトは作成してあるものとします。
まだな方は[こちら](https://www.suzu6.net/posts/48-firebase-hosting/)を参考にウェブサイトを作ってみて下さい。

## ドメインの接続

まずは、Hosting。
ダッシュボードの**ドメインを接続**から設定していきます。

![1](/images/posts/58/1.png)

先ほど取得したドメイン名を記入します。
（必要であれば）サブドメインも含めます。

![1](/images/posts/58/2.png)

続いて**所有権の確認**に移ります。
これはドメインを取得したDNSにこの**TXTレコード**を置いて認証させることで、ドメインが自分のものであることを証明するためです。

![1](/images/posts/58/3.png)

TXTレコードをDNSに設定します。

ムームードメインのコンソールに移り、左メニューから**ムームーDNS**を開きます。
取得したドメインがあるので、**変更**をしていきます。

![1](/images/posts/58/dns.png)

種別を**TXT**、内容に先ほどの**TXTレコード**をコピペして貼り付け登録します。
サブドメインは空欄にしておく。

![1](/images/posts/58/dns-txt.png)

Firebaseに戻って所有権の確認をして通れば大丈夫です。
**TXTレコード**は反映にいくらか時間がかかります。

続いて、ドメインのDNSがホスティングしたサーバを認識できるようにします。
DNSに**IPアドレス**と**ホスト名**を登録するよう出てきます。
おそらく、この２つのIPアドレスのサーバにホスティングされているのだと思います。

![1](/images/posts/58/4.png)

**IPアドレス**と**ホスト名**を登録します。
サブドメインを`www`としてるのでこちらも記入します。
登録した結果↓

![1](/images/posts/58/5.png)

以上を行って、少し待つとステータスが**接続されています**と出ます。

![1](/images/posts/58/6.png)

これでカスタムドメインの登録ができました。
登録したドメインにアクセスして確認して下さい。

[北大基礎スキー部　https://www.huss.jp/](https://www.huss.jp/)

![1](/images/posts/58/7.png)

## おわりに

Firebase Hostingを使うとカスタムドメインやSSLの設定が簡単に行えます。
ほんまに良い世の中になったなーと常々体感しております。

個人的にドメインの検索は[ムームードメイン](https://px.a8.net/svt/ejp?a8mat=356RAD+AP7H6A+348+1C5BOX)で行うことが多いです。
UIが綺麗ですし、有名な`.com` や `.jp`以外にもたくさんの中から選べます。
あと、今回初めて実際に取得してみてわかったのは、サブドメインをワイルドカードで使えること、WHOISの情報の設定も簡単にできることは嬉しいです。
おすすめです。

合わせてこちらもどうぞ。

[FirebaseのHostingを使ってwebアプリを公開する](https://www.suzu6.net/posts/48-Firebase-Hosting)

[静的サイトを作る上でホスティングサービスの検討とNetlifyを使ってみた感想](https://www.suzu6.net/posts/55-hosting-service)


Firebase Hostingにカスタムドメインを割り当てる手順

いくつかのSNSボタンを貼り付けようと思ったが、コピペで済む良さげなものがないため自分で作ってしまいました。

公式のものはスクリプトの読み込みで遅くなったり、デザインがバラバラなため見送った。
シェアできれば良いので、ブックマークやいいねの数は表示は不要。
（数値が上がると嬉しいため、今後表示できるようにするかもしれません）

いろいろと探していたら、作れる気がしたのでNuxt用に作ってみました！
Vue.jsでも少しの変更で導入できるかと思います。
早速この記事の上下にも配置してあります。

よろしければシェアおねがします<__>

## できたもの

![ボタン](/images/posts/52/snslink.png)

Twitter, はてなブックマーク, Pocketの３つを用意しました。

Google+は[2019年にサービスが終了](http://nlab.itmedia.co.jp/nl/articles/1810/09/news057.html)します。
facebookとLINEは今後追加して行きたいと思います。

デザインは大きめのボタン風にして、幅がレスポンシブに変化します。
このブログではBulmaをCSSフレームワークとして利用しているおり、アイコンはWebフォントの[Material Design Icons](https://materialdesignicons.com/)です。

利用していないものもありますが、アイコンの宣言を載せておきます。

```html

<i class="mdi mdi-twitter"/>

<i class="mdi mdi-facebook"/>

<i class="mdi mdi-google-plus"/>

<i class="mdi mdi-pocket"/>

<b>B!</b>

<b>LINE</b>
```

はてブとLINEはなかったので強調タグで囲みます。

## コード

`components/ShareButtons.vue`

一つのファイルにまとめてありますが、見やすくするため`template`, `script`, `style`に分けてあります。

**template**

```html
<template>
  <section class="section">
    <aside>
      <ul class="social-list">
        <li class="social-list-item">
          <a
            class="social-list-link icon-twitter"
            :href="twitterUrl()"
            target="_blank"
            title="Twitterで共有"
          ><i class="mdi mdi-twitter"/></a>
        </li>
        <li class="social-list-item">
          <a
            class="social-list-link icon-hatebu"
            :href="hatebuUrl()"
            target="_blank"
            :data-hatena-bookmark-title="encodeURIComponent(url)"
            title="このエントリーをはてなブックマークに追加"
          ><b>B!</b></a>
        </li>
        <li class="social-list-item">
          <a
            class="social-list-link icon-pocket"
            :href="pocketUrl()"
            target="_blank"
            title="pocketで共有"
          ><i class="mdi mdi-pocket"/></a>
        </li>
      </ul>
    </aside>
  </section>
</template>
```

**script**

```html
<script>
export default {
  name: "ShareButtons",
  props: ["title"],
  data() {
    return {
      url: `https://www.suzu6.net${this.$route.path}`,
      twitter_url: "https://twitter.com/intent/tweet?url={0}&text={1}",
      hatebu_url:
        "http://b.hatena.ne.jp/add?mode=confirm&amp;url={0}&amp;title={1}",
      pocket_url: "http://getpocket.com/edit?url={0}"
    };
  },
  methods: {
    formatByArr(msg) {
      // フォーマット（引数可変（配列）版）
      var args = [];
      for (var i = 1; i < arguments.length; i++) {
        args[i - 1] = arguments[i];
      }
      // URLエンコード
      args = args.map(x => encodeURIComponent(x));
      return msg.replace(/\{(\d+)\}/g, function(m, k) {
        return args[k];
      });
    },
    // それぞれパラメータを埋め込む
    twitterUrl() {
      return this.formatByArr(this.twitter_url, this.url, this.title);
    },
    hatebuUrl() {
      return this.formatByArr(this.hatebu_url, this.url, this.title);
    },
    pocketUrl() {
      return this.formatByArr(this.pocket_url, this.url);
    }
  }
};
</script>
```

**style**

```html
<style scoped>
.social-list {
  list-style: none;
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  width: 100%;
  margin: auto;
  margin-bottom: 60px;
}

.social-list-item {
  height: 40px;
  line-height: 40px;
}
.social-list-item {
  flex-grow: 1;
  height: 50px;
  line-height: 50px;
  min-width: 90px;
  text-align: center;
}
.social-list-link.icon-twitter {
  background: #00b0ed;
}
.social-list-link.icon-hatebu {
  background: #008fde;
}
.social-list-link.icon-pocket {
  background: #eb4654;
}
/* .social-list-link.icon-line {
  background: #00c300;
} */
.social-list-link {
  display: block;
  color: #ffffff;
}
a {
  color: inherit;
  text-decoration: none;
}
.content li + li {
  margin-top: 0;
}
</style>

```

## 使い方

親コンポーネント

```html
<template>
  
  <share-buttons :title="title" />
</template>

<script>
import ShareButtons from "~/components/ShareButtons"

export default {
  components: {
    ShareButtons
  }
}
</script>
```

コンポートからimportしてShareButtonsを宣言する。
シェアボタンを設置したい位置に`<share-buttons>`を置く。

親から`v-bind`でtitleを渡してあげる。
ページのURLはShareButtonsの中で取得することができます。

他にも渡したいパラメータがある場合は、propsを拡張してください。


## SNSシェアボタンの公式スタイル

それぞれ、htmlにコピペできるコードをくれる。

- [はてなブックマーク](http://b.hatena.ne.jp/guide/bbutton)
- [Twitter](https://publish.twitter.com/?buttonType=TweetButton&widget=Button)
- [Pocket](https://getpocket.com/publisher/button)
- [Google+](https://developers.google.com/+/web/+1button/)
- [facebook](https://developers.facebook.com/docs/plugins/like-button/?locale=ja_JP)
- [LINE](https://social-plugins.line.me/ja/#lineitbutton)

ただ、スクリプトの読み込みで遅くなったり、デザインがバラバラなためカスタマイズすることを選んだ。

## 参考にしたサイトとメモ

> [Google+, Facebook, Twitter それぞれのシェアリンクを HTML a タグから直接作る方法 | yu8mada](https://yu8mada.com/2018/05/09/how-to-create-each-share-link-for-google-plus-facebook-and-twitter-directly-from-html-a-tag/)

サイトのデザインに合わせてSNSシェアボタンをカスタマイズできるように、リンクだけでシェアできる方法です。
どのようなURLを入れたら良いかまとまっている。
クエリパラメータの解説もあるのでとても参考になった。

URLエンコード用のJavaScriptのみでできるため、シェアの数を表示しない場合はこちらの方法にするとよい。

---

> [WebサイトにSNSシェアボタンを設置＆効果測定する方法のまとめ](https://qiita.com/imotoy/items/b7467d5cc869c69b6275)

SNSシェアボタンのためのメタタグやogpタグの実装例やGoogleアナリティクスと連携方法が載っている。
まだ、そこまでできていないので参考にして追加していきたい。

---

>  [文字列のフォーマット（String.Format的な処理）](https://st40.xyz/one-run/article/341/)

```javascript
// 引数を埋め込む関数
formatByArr("url={0}&text={1}", url, text) 
```

JavaScriptでこんな感じに、引数で渡したパラメータを埋め込んで文字列を返してくれる方法です。

---

> [Vue Router](https://router.vuejs.org/ja/guide/essentials/dynamic-matching.html#%E3%83%91%E3%83%A9%E3%83%A1%E3%83%BC%E3%82%BF%E3%83%BC%E5%A4%89%E6%9B%B4%E3%81%AE%E6%A4%9C%E7%9F%A5)

Vue.jsのドキュメント。子要素の中でも$route.path`で現在のURLパスが取得できるのは便利。

NuxtだけでなくVueも勉強しないとダメですね。

---

> [コピペで簡単!CSSだけで作るSNSボタンデザイン[サンプルコード付]](http://maerc.me/20161011/)

ボタンのデザインはこのページを参考にした。
ただし、コピペの方ではない。記事の前後にあるボタンを参考にしている。

（おそらく）WordPressのプラグインかテーマのもので、良いまとまり感がある。
アニメーションも取り入れたい。

---

> [JavaScript で title と meta description の値を取得する](http://sarchitect.net/10484)

Nuxtの静的サイトでは使えなかった。

## おわりに

ブックマークやいいね数の表示などリッチなことはできないが、URLだけでシェアボタンが機能することがわかった。
今回はNuxt用に作ったが、`JavaScript`と`Vue`用に軽いものを作っておきたい。

この下に今回制作したボタンがあるので、たくさん押して確かめてみて下さい^^


#### 書籍

Nuxtについての書籍はありますが、個人的には[公式のドキュメント](https://ja.nuxtjs.org/guide/)やGoogle先生頼りでいいかなと思います。
それよりも、[Vue](https://jp.vuejs.org/v2/guide/)についての理解を深めると捗りますね。

<div class="amakuri-default-comment" style="text-align: left; line-height: 1.5em; margin-bottom: 10px; overflow:hidden; _zoom:1;"><div class="amakuri-default-comment-image" style="float: left; margin: 0 20px 0 0;"><a href="https://www.amazon.co.jp/exec/obidos/ASIN/B07GJM9ZRR/suzu60c-22" target="_blank"><img src="https://images-fe.ssl-images-amazon.com/images/I/41qh2YgbPbL._SL160_.jpg" width="113" height="160" alt="Hello!! Nuxt.js 〈Vue&amp;Nuxt〉 (技術書典シリーズ（NextPublishing）)" style="border: none"></a></div><div class="amakuri-default-comment-desc" style="overflow: hidden; _zoom:1;"><div class="amakuri-default-comment-title" style="margin-bottom: 0.5em;"><a href="https://www.amazon.co.jp/exec/obidos/ASIN/B07GJM9ZRR/suzu60c-22" target="_blank">Hello!! Nuxt.js 〈Vue&amp;Nuxt〉 (技術書典シリーズ（NextPublishing）)</a></div><div class="amakuri-default-comment-posted" style="margin-bottom: 0.5em; font-size: small;">Posted at 2019.1.7</div><div class="amakuri-default-comment-author">那須 理也</div><div class="amakuri-default-comment-label" style="margin-bottom: 0.5em;">インプレスR&amp;D</div><div class="amakuri-default-comment-link" style="margin-top: 1em;"><a href="https://www.amazon.co.jp/exec/obidos/ASIN/B07GJM9ZRR/suzu60c-22" target="_blank">Amazonで詳細を見る</a></div></div></div>

<div class="amakuri-default-comment" style="text-align: left; line-height: 1.5em; margin-bottom: 10px; overflow:hidden; _zoom:1;"><div class="amakuri-default-comment-image" style="float: left; margin: 0 20px 0 0;"><a href="https://www.amazon.co.jp/exec/obidos/ASIN/4297100916/suzu60c-22" target="_blank"><img src="https://images-fe.ssl-images-amazon.com/images/I/41qzgSLFQwL._SL160_.jpg" width="127" height="160" alt="Vue.js入門 基礎から実践アプリケーション開発まで" style="border: none"></a></div><div class="amakuri-default-comment-desc" style="overflow: hidden; _zoom:1;"><div class="amakuri-default-comment-title" style="margin-bottom: 0.5em;"><a href="https://www.amazon.co.jp/exec/obidos/ASIN/4297100916/suzu60c-22" target="_blank">Vue.js入門 基礎から実践アプリケーション開発まで</a></div><div class="amakuri-default-comment-posted" style="margin-bottom: 0.5em; font-size: small;">Posted at 2019.1.7</div><div class="amakuri-default-comment-author">川口 和也, 喜多 啓介, 野田 陽平, 手島 拓也, 片山 真也</div><div class="amakuri-default-comment-label" style="margin-bottom: 0.5em;">技術評論社</div><div class="amakuri-default-comment-link" style="margin-top: 1em;"><a href="https://www.amazon.co.jp/exec/obidos/ASIN/4297100916/suzu60c-22" target="_blank">Amazonで詳細を見る</a></div></div></div>

Nuxtで作ったサイトに軽いSNSシェアボタンを設置した

このブログをNetlify + Nuxtへ移行する時、`Google AdSense`も移しました。  
Adsenseの広告ユニットのコードを貼り付けていくと、似たコードが至る所にあり嫌なのでいい方法はないかと調べました。

Nuxtのためのモジュールが見つかったのでその使い方を解説していきます。

## @nuxtjs/google-adsense

[nuxt-community](https://github.com/nuxt-community)からGoogle AdSenseのためのモジュール[google-adsense-module](https://github.com/nuxt-community/google-adsense-module)が提供されているので、それを使います。

ライセンス形態は[MIT License](https://github.com/nuxt-community/google-adsense-module/blob/master/LICENSE)なので大丈夫ですね。

使い方は簡単です。
インストール後に`nuxt.config.js`へ記述して、挿入したいところに`<adsbygoogle/>`を追加するだけです。

以下、[GitHub](https://github.com/nuxt-community/google-adsense-module)を参考に解説していく。
尚、ドメインの取得やGoogle AdSenseへの登録と審査はすでに終えているものとします。

###  install

```sh
npm install --save @nuxtjs/google-adsense
```

`--save`でpackage.jsonに記録している。
このブログはNetlifyを使ってホスティングしているため必須。

## モジュールをnuxt.config.jsに記述する

nuxt.config.js

```js
{
  modules: [
    // Simple usage
    ['@nuxtjs/google-adsense', {
      id: 'ca-pub-###########'
    }]
 ]
}
```

`id`にAdSenseのidを記述する。

idはAdSenseのアカウント情報にある`サイト運営者 ID`です。
`####`はpub-から続く数字が入ります。先頭の`ca-`は必ずつけてください。

自動広告はデフォルトでオフになったいるため、使う場合は`pageLevelAds: true`を追加します。

## 広告を挿入する

広告の場所を指定するには、テンプレートの中に`<adsbygoogle/>`を追加します。

また、v-bindを使っていくつかのパラメータを渡せます。

```html
<template>
  
  <adsbygoogle />
  
  <adsbygoogle v-bind:ad-slot="'1234567890'" />
</template>
```

広告ユニットを指定する場合は、`ad-slot`に広告ユニットのIDを渡します。
この時、IDは数値ではなく文字列として渡してあげる必要があります。そのため、'シングルクォーテーション'などで囲ってください。

```html
<template>
  
  <adsbygoogle :ad-slot="'1234567890'" />
  
  <adsbygoogle :ad-slot="1234567890" />
  


  
  <adsbygoogle data-ad-slot="1234567890" />
</template>
```

はじめ`:ad-slot`でエラーが出るため`data-ad-slot="1234567890"`としていましたが、広告が表示されていました。
確証はありませんので、OKの方法を利用してください。

いくつかのpropの抜粋と雑解説。正確には[公式](https://github.com/nuxt-community/google-adsense-module)をみてください。

prop | type | description
:--: | :--: | :--:
ad-slot | String | 広告ユニットのID。文字列として渡す必要がある。
ad-format | String | レスポンシブ広告。デフォルトは'auto'。
ad-style | Object | `<ins>`のスタイルを指定する。デフォルトは{ display: 'block' }
ad-layout | String | レイアウトの設定。'in-article'など。

## おわりに

NuxtでAdSenseを利用する（おそらく）最適解が見つかってスッキリしました。

また、このブログのNetlify + Nuxtの構成もまとめていきたいです。

### 参考

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



#### 書籍

<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%2F12855371%2F" target="_blank" ><img src="https://thumbnail.image.rakuten.co.jp/@0_mall/book/cabinet/0567/9784800710567.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%2F12855371%2F" target="_blank" >Google AdSense 成功の法則 57</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">染谷昌利 ソーテック社 2014年07月    </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%2F12855371%2F" target="_blank" >楽天ブックス</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/4800710561/suzu60c-22/" target="_blank" >Amazon</a></div><div class="shoplinkkindle"><a href="https://www.amazon.co.jp/gp/search?keywords=Google%20AdSense%20%90%AC%8C%F7%82%CC%96%40%91%A5%2057&__mk_ja_JP=%83J%83%5E%83J%83i&url=node%3D2275256051&tag=suzu60c-22" target="_blank" >Kindle</a></div>                              	  	  	  	  	</div></div><div class="booklink-footer"></div></div></div>

Nuxtで作ったサイトにnpmでGoogle AdSenseを追加する


ブログに使う画像の加工でお世話になっているツールの紹介。

[ILoveIMG](https://www.iloveimg.com/ja)は**無料**で圧縮,切り抜き,サイズ変更など画像の加工全般がオンラインでできるツールです。

![iloveimg](/images/posts/51/iloveimg.png)

特に便利なのは、**ドラッグ&ドロップでファイルを一括アップロード**できる点です。未登録の無料枠でも15枚(150MB)まで一括アップロードできます。

このブログでは良くスクリーンショットを記事に載せています。
そのままだとサイズが大きすぎて[PageSpeed Insights
](https://developers.google.com/speed/pagespeed/insights/?hl=ja)の評価が悪いため、主に画像の圧縮とサイズの縮小を利用しています。

## 無料枠でできること

※ 2017年12月現在

用意されているプランは、「未登録の無料」「登録済みの無料」「プレミアム（月額780円）」の３つです。
それぞれ機能ごとに一括でできるファイル数とサイズが大きくなっていきます。また、「プレミアム」ではサイトの広告がなくなるそうです。
詳しくは[iLoveIMG料金設定](https://www.iloveimg.com/ja/pricing)。

無料枠でも以下の全種類のツールが利用できます。私は「未登録の無料」ですが今のところ不便はないです。

- 画像の圧縮
- 画像のサイズ変更
- 画像の切り抜き
- JPGに変換
- JPGから変換
- 写真エディター
- 画像の回転
- 透かし画像
- ミームジェネレーター

## 圧縮性能は？

画像の形式はJPG、PNG、GIFに対応しています。

下の画像はILoveIMGのスクリ-ンショットを圧縮したものです。形式はpngです。
![iloveimg](/images/posts/51/iloveimg.png)

色の数が少ないフラットな画像だったのもありますが、80%も圧縮されました。
見た感じ文字の輪郭もはっきりとしており問題なさそうです。

![asshuku](/images/posts/51/asshuku.png)

画像の圧縮が終わると、自動でダウンロードされます。
複数枚の場合はzipファイルにまとめてダウンロードされます。

## サイズ変更

画像の幅は600pxあれば良いのでサイズも変更します。

サイズ変更は比率（25%, 50%, 75%）とピクセルの指定ができます。
ピクセルでは縦横の比率を維持したまま幅を指定できます。

![iloveimg](/images/posts/51/cut.png)


下の画像はILoveIMGのスクリ-ンショットを50％のサイズに縮小した後、圧縮したものです。
![iloveimg](/images/posts/51/iloveimg-50.png)

サイズ79KB。
少し輪郭がぼやけてきました。

横幅を600pxに縮小してから圧縮したものが下の画像です。
![iloveimg](/images/posts/51/iloveimg-600.png)

サイズ25KB。
これ以上小さくすると、輪郭がぼやけてしまったのでやめました。

## まとめ

スクリーンショットを50%に縮小してから圧縮すると、934KB -> 79KBとファイルサイズを10%以下に小さくすることができました。

- ドラッグ&ドロップでファイルを一括アップロード
- 無料枠でも15枚まとめて変換できる
- 圧縮の性能は良さげ

他にもツールがたくさんあるので是非使ってみてください。

オンラインで画像編集ができる無料ツールILoveIMG


## Serch Consoleの処理が終わらない

2018年7月7日に**Search Console**を登録してから２日経ちましたが、依然としてクロールエラーも検索アナリティクスも「データがありません。」と表示されています。

![google_console_init](https://www.suzu6.net/images/posts/8/google_console_init.png)

初めて作ったサイトであるため、不備があるかと思い設定を何度も確認しました。

結論を申し上げると、**待ちましょう**。調べると５日間程度は時間がかかるそうです。

待っている間に、sitemapやHTMLタグの整理を進めていきます。

## 登録から３日目

2018年7月10日にクロールエラーの報告が届きました。３日かかっています。
エラーは無いようなので安心です。

![google_console_crawler](https://www.suzu6.net/images/posts/8/google_console_crawler.png)

まだ、10日も経っていないサービスなのに、過去90日間まで調べたのでしょうか？

検索アナリティクスはもう少し待ちましょう。

## Google Adsence

一方、Google Adsenceは7月6日に登録していますが、（7月10日現在）まだ反映させれていません。

![google_adsence_init](https://www.suzu6.net/images/posts/8/google_adsence_init.png)

[グーグルアドセンスの審査期間が長いとき、審査を早める方法](http://www.nu-nobettenn.com/entry/adsense-sinsa-hayameru)

こちらを見ると審査に２週間程かかるそうです。
１日足らずで終わる方もいるんでしょうか？

Googleへ審査状況を問い合わせることができるようです。急ぎではないので、確認フォームを利用するのは審査開始から2週間以上経ってからにします。

今のうちに、記事を増やしてコンテンツを充実させておきます。


検索アナリティクス「トラフィックの処理が完了していません」

Serch Consoleの処理が終わらない

登録から３日目

Google Adsence