Go
Node.js
GitHub
homebrew
github-pages

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


はじめに

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

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


対象とするユーザー


  • Go?なにそれ?

  • 普段はnode.jsを使っている。

  • ターミナルを触ったことがある。

  • 自作のGitHubリポジトリにリンクカードをつけたい。

  • macユーザーである。


この記事の環境

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


  • macOS 10.14.3

  • node 8.11.4

  • go 1.11.5 darwin/amd64

  • Homebrew 2.0.0


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

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.0.0

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


Go環境の構築


インストール

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

brew install go

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

go version

go version go1.11.5 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で呼び出すことができます。

このコマンドが通るように、ターミナルにパスを通す必要があります。

このパスはホームディレクトリ直下の.bash_profileというファイルに保存されています。

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

export GOPATH=$HOME/go

export PATH=$PATH:$GOPATH/bin

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

MacでPATHを通す

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

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

~/.bash_profileへ移動します。

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


ターミナルの再起動

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

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

source ~/.bash_profile

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

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

以下のようなエラーが出る場合は、.bash_profileの反映ができていません。ソフトや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の画像ファイルが読み込めました!

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