Zenn
💻

[2020年版] MarkdownをCircleCI上でPDFに変換してGoogleドライブにデプロイする

2020/04/09に公開
CircleCI
tech

以前、以下のような記事を書きました。

MarkdownをCircleCI上でPDFに変換してGoogleドライブにデプロイする
https://tech.quartetcom.co.jp/2018/05/14/markdown-pdf-circleci-googledrive-deployment/

時代が変わってちょっと内容のアップデートもあるので改めて2020年版として記事にまとめます。

使う道具

  • CirleCI 2.0
  • markdown-pdf
    • MarkdownをPDFに変換するためのCLIツール
    • npmでインストール
  • gdrive
    • Googleドライブを操作するためのCLIクライアント
    • PDFのアップロードに使う
    • バイナリをダウンロードしてインストール

具体的な方法

事前準備（サービスアカウント）

CircleCIからGoogleドライブにファイルをアップロードするためには、サービスアカウント での認証が必要なので、以下の手順で準備しておきます。

  1. Google API Console でサービスアカウントを作って、秘密鍵をJSON形式で生成する
  2. デプロイ先にしたいGoogleドライブ上のフォルダを、サービスアカウントに共有する
    image
  3. CircleCIのプロジェクト設定で、サービスアカウントの秘密鍵のJSON文字列から改行を削除して、環境変数として登録する
    image

markdown-pdf

インストール方法

npmで https://www.npmjs.com/package/markdown-pdf をインストールするだけです。

npm i -S markdown-pdf

使い方

例えば、 src/ 配下にMarkdownファイル群が階層構造で格納されているとして、それらを同じ階層構造で build/ 配下に拡張子だけを .pdf に変えて出力したい場合、以下のようなシェルスクリプトで実現できます。

for file in `find src -type f` ; do
    name=`echo $file | sed -r 's/src\\/(.*)\\.md/\\1/'` # src/<ファイル名>.md から <ファイル名> を取り出す
    npx markdown-pdf -s css/style.css -o build/$name.pdf $file
done

-s css/style.css でレンダリングに使用するCSSファイルを指定しています。これは本来は必須ではありませんが、こちらで指摘されているとおり、デフォルトのCSSだと [text](url) というMarkdownが text (url) という表記に変換されてしまうため、これを回避するために最低限以下のCSSを当てる必要があります。

abbr[title]:after,
a[href]:after {
    content: "";
}

GitHub風のCSSを適用

markdown-pdfはMarkdownパーサーとして remarkable を使っており、remarkableはデフォルトで GFM（GitHub Flavored Markdown）をコンパイルできるようです。

せっかくなのでGitHub風のCSSを適用して、それらしい見た目でPDFが生成されるようにしておきましょう。

とりあえず今回は泥臭く、github-markdown-cssのcss をコピペして .markdown-body を body に置換しました。フォントサイズも必要に応じて変更するとよいでしょう。

body に置換すればいいと判断したのは、markdown-pdfのデフォルトのcss がそうなっていたからです。

ワンライナー化してpackage.jsonにscriptsとして追加

以下のようにワンライナー化して、npm scriptsから実行できるようにしておくと便利です。（ついでに、ビルド時に build/ 配下を一旦全削除するようにしてあります）

{
  "dependencies": {
    "markdown-pdf": "^8.1.1"
  },
  "scripts": {
    "build": "rm -rf build/* && for file in `find src -type f` ; do npx markdown-pdf -s css/style.css -o build/`echo $file | sed -r 's/src\\/(.*)\\.md/\\1/'`.pdf $file ; done"
  }
}

gdrive

インストール方法

公式のREADME に書かれているダウンロードURLからバイナリをダウンロードして実行権限を付ければ使えます。

# 例えばMacなら
$ wget "https://github.com/gdrive-org/gdrive/releases/download/2.1.0/gdrive-osx-x64" -O gdrive
$ chmod +x gdrive
$ ./gdrive help
gdrive usage:

gdrive [global] list [options]                                 List files
gdrive [global] download [options] <fileId>                    Download file or directory
gdrive [global] download query [options] <query>               Download all files and directories matching query
  :
  :

使い方

gdriveコマンドで build/ ディレクトリを丸ごとGoogleドライブの特定のフォルダ配下にアップロードする方法は、以下のとおりです。

gdrive upload --config $(pwd) --service-account credential.json --parent <ここにデプロイ先フォルダのID> --recursive build

credential.json が置かれている場所を --config で指定する必要があります。--config の値はデフォルトでは $HOME/.gdrive になっています。ここでは、credential.json がカレントディレクトリに置いてある想定で、 $(pwd) としています。

CircleCIの設定ファイル

では、以上を踏まえて、CircleCIの設定ファイル .circleci/config.yml を書いてみます。

キャッシングなどを省いて処理の要点だけを書くと、以下のような内容になります。（書式の詳細については 公式リファレンス をご参照ください）

version: 2
jobs:
  build:
    docker:
      - image: circleci/node
    working_directory: ~/wd
    steps:
      # 日本語のフォントがないと、PDF生成時に日本語部分がレンダリングされない
      - run: sudo apt-get update && sudo apt-get install fonts-ipaexfont -y
      # gdriveのバイナリをダウンロードして、チェックサムを確認して、実行パーミッションをつける
      - run: |
          wget "<ここにgdrive-linux-x64のダウンロードURL>" -O gdrive
          [ `sha1sum gdrive | awk '{print $1}'` = '<ここにgdrive-linux-x64のshasum>' ]
          chmod +x gdrive
      - checkout
      - run: npm i
      - run: npm run build
      - deploy:
          command: |
            # 環境変数から認証情報を取得してJSONファイルに出力
            echo $GOOGLE_SERVICE_ACCOUNT_CREDENTIAL > credential.json
            # 成果物のディレクトリ名を日時でリネーム
            dirname=`date +%Y%m%d_%H%M%S` && mv build $dirname
            # 成果物のディレクトリを丸ごとデプロイ
            ./gdrive upload --config $(pwd) --service-account credential.json --parent <ここにデプロイ先フォルダのID> --recursive $dirname

build_and_deploy ジョブでPDFの生成とGoogleドライブへのデプロイを一気に行っています。

日本語フォントが何も入っていない環境だとPDFを生成するときに日本語部分がレンダリングされないので、 build_and_deploy ジョブのはじめで fonts-ipaexfont をインストールしています。インストールするフォントは何でもOKです。

deploy ステップでは、CircleCIのコンテナにサービスアカウントの認証ファイルを設置するために、事前準備で登録しておいた環境変数の中身をJSONファイルに書き出しています。また、 build というディレクトリ名のままだと分かりにくいので、日時の名前にリネームしてからデプロイするようにしています。

gdriveの 2.1.0 はバージョン番号の変更なしに中身の違ういくつかのパターンが配布されているので要注意

以前の記事を書いた2018年5月の時点で、すでにgdriveの最新バージョンは2020年4月現在の最新と同じ 2.1.0 だったのですが、そのときの状況として

  • READMEで配布されていたバイナリがソースコードの 2.1.0 タグの内容と一致していない（古い）
  • なのにREADMEのダウンロードリンクには 2.1.0 と書かれている

という問題がありました。

2.1.0 より古いバージョンでは --service-account オプショションが実装されていなかったため、 --service-account オプションを使うためには、配布されているバイナリを使わずに自分でソースをコンパイルする必要がありました。

現在はソースコードの 2.1.0 タグの内容と一致しているバイナリが リリースされている ため、ダウンロードしたバイナリでも --service-account オプションを使えるようになっています。

なお、こちらでも言及されていますが、Homebrewで配布されているgdriveは、2020年4月現在においても、バージョン表記は 2.1.0 にもかかわらず --service-account オプションが実装されていない状態となっています。

要注意です😓

実装例

今回説明した手法を一通り実装した例を以下のGitHubリポジトリに上げてあります。よければ参考にしてみてください。

https://github.com/ttskch/markdown-pdf-googledrive-ci-sample

実際に動かすと、以下のように日時のフォルダ配下に成果物がデプロイされます👍

image

まとめ

需要なさそうな内容ですが、自分用のメモのために最新情報にアップデートしました。どこかの誰かのお役に立てば幸いです😇

GitHubで編集を提案

Discussion