GitHub Link Card Creatorがカッコいいのでnpm scriptsに組み込む

## はじめに

[みんなにOSSを見てもらいたい人の為に、GitHubリポジトリのOGP的画像を自動生成してくれるサービスを作った](https://qiita.com/po3rin/items/eac851304cf058c532af)

こちらの記事で紹介されているGitHub Link Card Creatorが素晴らしくカッコいいので、node.jsのnpm scriptsに組み込む方法を模索してみました。

<a href="https://github.com/po3rin/github_link_creator"><img src="https://qiita-image-store.s3.amazonaws.com/0/186028/d8d54864-fe66-56cf-2f62-c11687192dc7.png" width="400px"/></a>

### 対象とするユーザー

* Go?なにそれ？
* 普段はnode.jsを使っている。
* ターミナルを触ったことがある。
* 自作のGitHubリポジトリにリンクカードをつけたい。
* macユーザーである。

### この記事の環境

この記事は以下の環境を想定しています。各ソフトのバージョンが異なると、記事の内容は適用できない場合があります。ご注意ください。

* macOS 10.15.2
* node 12.16.3
* go 1.14.2 darwin/amd64
* Homebrew 2.2.14

### この記事で解消したい問題

GitHub Link Card CreatorにはオフィシャルのWebアプリケーションがあります。

[GitHub Link Card Creator](https://ghlinkcard.com/)

こちらのWebアプリケーションを利用すれば、画像の生成からリンクコードの出力までが一気にできます。
しかし、出力された画像URLがQiitaでは直接利用できないという問題があります。(参考 :[issue#4](https://github.com/po3rin/github_link_creator/issues/4))

現状では、生成された画像をQiitaの記事内にアップロードし、生成されたリンクURLを書き換えることで対応が可能です。
しかしQiitaに画像をアップロードしてしまうと、カード情報の更新のたびに再アップロードが必要になります。

この問題を解消するため

* GitHub Link Card Creatorをローカル環境で動かす。
* npm scriptsのタスクに組み込む。
* 生成された画像をGitHub Pagesにプッシュする。
* Qiitaの記事から画像を読み込む。

という組み込み作業を行ってみます。

## Goとは

[Go公式ページ](https://golang.org/)

GoはGoogleが主導して開発しているプログラム言語およびその環境です。
正式な名称はGoですが、golangと呼ばれることもあります。
開発環境はオープンソースで、パッケージをインストールすればマルチプラットフォームで動作します。

## 設定

macOS環境で、Homebrewを経由してGoパッケージをインストールします。

### Homebrewのインストール

[Homebrew](https://brew.sh/index_ja)
HomebrewはmacOS用のパッケージマネージャーです。Homebrewからさまざまなパッケージをインストールできます。
すでにHomebrewを導入している人は、この項目をスキップしてください。

このスクリプトをターミナルに入力すると、Homebrewがインストールされます。

```bash
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
```

インストールが成功したか確認するためにバージョンを表示してみます。

```bash
brew -v
Homebrew 2.2.14
```

バージョン番号が表示されたら無事インストール成功です。


### Go環境の構築

#### インストール

先ほどインストールしたHomebrewを利用して、Goのパッケージをインストールします。

```bash
brew install go
```

パッケージのサイズが100MB以上ありますので、少し処理に時間がかかります。ゆっくりお待ちください。

```bash
go version
go version go1.14.2 darwin/amd64
```

こちらもバージョン情報が表示できればインストール成功です。

#### GitHub Link Card Creatorのインストール

GitHub Link Card Creatorパッケージは、以下のコマンドでインストールできます。

```bash
go get github.com/po3rin/github_link_creator/cmd/repoimg
```

ホームディレクトリ直下のgoフォルダーの中にファイルが保存されていれば、インストールは成功です。


#### パスの設定

GitHub Link Card Creatorはターミナルからコマンド`repoimg`で呼び出すことができます。
このコマンドが通るように、ターミナルにパスを通す必要があります。

##### シェルの確認

macOS 10.15から、デフォルトのシェルがbashからzshに変更されました。
現在どちらのシェルを利用しているかは、以下のコマンドで確認できます。

```bash
echo $SHELL
```

それぞれのシェルでは、設定を以下のファイルに保存しています。
この記事では「プロファイル」を以下のいずれかのファイルに読み替えてください。

+ zshの場合 : `~/.zprofile`
+ bashの場合 : `~/.bash_profile`

`~`は[ホームディレクトリ](http://e-words.jp/w/%E3%83%9B%E3%83%BC%E3%83%A0%E3%83%87%E3%82%A3%E3%83%AC%E3%82%AF%E3%83%88%E3%83%AA.html)を指します。プロファイルはホームディレクトリ直下に隠しファイルとして保存されています。

##### パスの追加

プロファイルに以下の2行のパスを追加します。

*▼.zprofile*

```.zprofile
export GOPATH=$HOME/go
export PATH=$PATH:$GOPATH/bin
```

ターミナルからプロファイルを編集する方法はこちらの記事をご参照ください。

[MacでPATHを通す](https://qiita.com/nbkn/items/01a11392921119fa0153)

また、Finderとお好きなテキストエディターを使って編集することもできます。

![](https://www.evernote.com/l/AAmhqt38of1InrA5ytrLf190X_4i_l2EdNAB/image.png)

Finderから「移動」→「フォルダへ移動…」を選択し

![](https://www.evernote.com/l/AAkxc6awft1LK4R4QDRwhvwLYvxpOVPsYzEB/image.png)

プロファイルへ移動します。
ここで表示されたファイルをお好きなテキストエディターで編集してください。


#### ターミナルの再起動

プロファイルの変更はそのままでは反映されません。再読み込みのコマンドを実行するか、ターミナルを再起動する必要があります。

再読み込みのコマンドは以下の通りです

```bash
source ~/.bash_profile
```

[.bashrcや.bash_profileなどの変更設定をすぐに反映させたい](http://www.itmedia.co.jp/help/tips/linux/l0450.html)

WebStormやVS Codeなどのターミナルを内包しているソフトも、再起動をする必要があります。

以下のようなエラーが出る場合は、プロファイルの反映ができていません。ソフトやmacの再起動を試してみてください。

```console
bash: repoimg: command not found
```

ここまでの作業でGitHub Link Card Creatorがターミナルから呼び出せるようになりました。

```bash
repoimg -n <GitHubのユーザー名>/<リポジトリ名>
```

で画像が生成されれば成功です。

### GitHub Pagesの設定

次に、GitHub Pagesの公開設定を行います。

![](https://www.evernote.com/l/AAnxEify66JI1qB7aC0l6XhdURZ7xCDtC6EB/image.png)
まずは作成済みのリポジトリのWebページにアクセスし、Settingsを開きます。

![](https://www.evernote.com/l/AAnN_XD9FkxKR4kzD4cAYAdbCAIOhFhL8UoB/image.png)
次に、GitHub Pagesの設定項目に移動し、Sourceを``master Branch /docs folder``に変更します。

これでリポジトリの``./docs``以下が``https://<ユーザー名>.github.io/<リポジトリ名>/``でアクセスできます。

### npm scriptsに統合

最後に、npm scriptsに``repoimg``コマンドを組み込みます。

*▼package.json*

```json
  "scripts": {
    "doc:card": "repoimg -n <GitHubのユーザー名>/<リポジトリ名> -o ./docs/card.png"
  }
```

このスクリプトで``./docs/card.png``が生成されます。
このファイルをプッシュすると以下のURLでアクセスができます。

```console
https://<ユーザー名>.github.io/<リポジトリ名>/card.png
```

このURLを[GitHub Link Card Creator](https://ghlinkcard.com/)で生成される埋め込みコードに組み込むと

<a href="https://github.com/MasatoMakino/createjs-cache-util"><img src="https://masatomakino.github.io/createjs-cache-util/card.png" width="400px"></a>

無事Qiitaの記事からGitHub Pagesの画像ファイルが読み込めました！

以上、ありがとうございました。