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

2019/02/09
GoNode.jsGitHubhomebrewgithub-pages

はじめに

みんなにOSSを見てもらいたい人の為に、GitHubリポジトリのOGP的画像を自動生成してくれるサービスを作った

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

対象とするユーザー

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

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

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

この問題を解消するため

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

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

Goとは

Go公式ページ

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

設定

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

Homebrewのインストール

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

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

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

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

brew -v
Homebrew 2.2.14

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

Go環境の構築

インストール

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

brew install go

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

go version
go version go1.14.2 darwin/amd64

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

GitHub Link Card Creatorのインストール

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

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

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

パスの設定

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

シェルの確認

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

echo $SHELL

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

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

~はホームディレクトリを指します。プロファイルはホームディレクトリ直下に隠しファイルとして保存されています。

パスの追加

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

▼.zprofile

export GOPATH=$HOME/go
export PATH=$PATH:$GOPATH/bin

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

MacでPATHを通す

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

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

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

ターミナルの再起動

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

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

source ~/.bash_profile

.bashrcや.bash_profileなどの変更設定をすぐに反映させたい

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

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

bash: repoimg: command not found

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

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

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

GitHub Pagesの設定

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

まずは作成済みのリポジトリのWebページにアクセスし、Settingsを開きます。

次に、GitHub Pagesの設定項目に移動し、Sourceをmaster Branch /docs folderに変更します。

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

npm scriptsに統合

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

▼package.json

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

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

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

このURLをGitHub Link Card Creatorで生成される埋め込みコードに組み込むと

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

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