Docker Desktopを使ったRe:VIEWの導入
主な改定履歴
- 2024/06/10 新規公開
はじめに
この記事ではDocker Desktop(for Windows)を利用して、Re:VIEWの利用環境を導入する方法を解説します。
また、TechBoosterさんの「技術書をかこう！〜はじめてのRe:VIEW〜第3版」の書籍のテンプレートリポジトリを元に、PDFの出力手順についても解説していきます。
この記事を読む上での前提条件
-
VS Codeがインストール済で、使い方を知っていること。 -
Linuxのコマンドを知っていること。
なおDocker Desktopについては事前にインストールしておいてください（インストール手順については割愛します）。それ以降の操作については本記事内で説明します。
Re:VIEWについて
Re:VIEW（読み：りびゅー）は、無料で利用できる書籍制作者向けのツールです。独自のマークアップ言語を用いて記事を書くことで、製本用のPDF、EPUBなど複数のファイルへの出力が可能です。（本記事の随筆時点ではバージョンRe:VIEW 5.9が最新です。）
Re:VIEWはRuby言語で書かれていますが、記事を書く上ではRubyの知識は必要ありません。
DockerおよびDocker Desktopについて
Dockerは仮想の実行環境を実現するためのソフトウェアです。Docker Desktopはその管理ツールです。
Dockerでは「イメージ」という単位で環境が定義されており、利用者は配布されたイメージをもとに「コンテナ」という実行環境を作成します。
（1つのイメージに対し、複数のコンテナが作成可能。コンテナに新たに機能を入れることが可能だが、もとのイメージには影響しない。）
この記事ではRe:VIEWの設定が事前に準備されているイメージを取得することでその機能を利用します。
リポジトリ取得
テンプレートリポジトリを取得する
リポジトリを取得する方法はgithubのリポジトリをgitでクローンするか、zipでダウンロードするかの二通りあります。
なお、gitでクローンした場合は改行コードに注意が必要です（詳細は後述）。
zipファイルをダウンロードする場合
https://github.com/TechBooster/FirstStepReVIEW-v3
zipファイルを展開したらローカルの任意の場所に展開します、またフォルダ名を変更します。ここではMyBookとします。
このフォルダをVS Codeで開きます。
リポジトリをgitでcloneする場合
コマンドラインからローカルの任意の場所でgit cloneを実行します。
git clone https://github.com/TechBooster/FirstStepReVIEW-v3
フォルダ名を任意の名前に変更します。ここではMyBookとします。
move FirstStepReVIEW-v3 MyBook
フォルダに移動し、.gitフォルダを削除します。
cd MyBook
rd /s /q .git
現在のフォルダをVS Codeで開きます。
code ./
Dockerイメージのダウンロードとコンテナの作成
VS Code の画面を開いたら、 Ctrl+@でターミナルを開きます。
ここからは、VS Codeのターミナルでの操作になります。
Re:View5.9のDockerイメージをダウンロードします。ファイル容量が大きいため多少時間がかかります。
docker pull vvakame/review:5.9
Dockerイメージ一覧を表示します。
docker images vvakame/review
Dockerイメージの一覧を表示し、先ほど指定したイメージが表示されるか確認します。
REPOSITORY TAG IMAGE ID CREATED SIZE
vvakame/review 5.9 020bdc058bbe 3 weeks ago 2.74GB
docker run コマンドでコンテナの作成と起動を行います。ここでは myrevcontという名前でコンテナを作成していますが、別の名前でもOKです。
ここでは-vオプションでコンテナ内のbookフォルダを現在のフォルダをマウントするように指定しています。つまり、コンテナ内のbookフォルダに出力されたファイルはローカル環境の現在のフォルダに出力されます。
docker run --name myrevcont -itv ${pwd}/.:/book vvakame/review:5.9 /bin/sh
コンテナの作成に成功すると、作成したコンテナのターミナルに入った状態になります。
#
docker run コマンドについて
docker run はコンテナを作成するコマンドです。繰り返し実行するとその都度コンテナが作成されるので注意してください（上記のコマンドはオプションで名前を指定しているので同コマンドの2回目の実行は名前の重複でエラーとなります）。
起動だけの場合は後述するstartコマンドを使用します。
setup.shファイルの実行
setup.shをVS Code内で開き、画面右下の改行コードを確認します。
CRLFになっている場合は、その場所をクリックして、画面上部の検索バーあたりにLFが表示されるので選択し、保存して閉じます。
（これはWindowsのGit Bashでは初期設定によりクローンした際に改行コードの自動変換が行われるため、それを戻す対応です。）
コンテナのターミナルでbookに移動し、setup.shを起動します。npm installが起動し、必要なファイルのインストールが実行されます。（node_modulesフォルダが作られます。）
cd book
sh setup.sh
コンテナを停止し、ターミナルから抜けます。
exit
ローカルのターミナルに戻ったら、docker psコマンドでコンテナの一覧を表示し、先ほど作成したコンテナを確認します。
docker ps -a
PS D:\techbook\MyBook> docker ps -a
CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES
f4edb6426afe vvakame/review:5.9 "/bin/sh" 15 minutes ago Exited (0) 8 seconds ago myrevcont
ここまででコンテナの準備は完了です。
PDFの作成
取得したリポジトリには既に書籍のデータがあり、そのままPDFに出力できますが、ここでは少し手を加えてみましょう。
VS Codeのファイルエクスプローラから、articlesフォルダ下の、config.ymlファイルを開き、19行目以降にあるブック名、書名、著者名を任意のものに変更します。
# ブック名(ファイル名になるもの。ASCII範囲の文字を使用)
bookname: MyFirstBook
# 記述言語。省略した場合はja
language: ja
# 書名
booktitle: {name: "やってみよう技術書随筆！", file-as: "ヤッテミヨウギジュツショズイシツ"}
# サブタイトルはオプション。コメントアウトで省略します。
subtitle: {name: "～はじめての技術書～", file-as: "ハジメテノギジュツショ"}
# 著者名。「, 」で区切って複数指定できる
aut: [{name: "○○太郎", file-as: "marumarutarou"}]
コンテナの起動を行います。
docker start myrevcont
コンテナへの接続（アタッチ）を行います。（コマンド入力後、エンターを2回押す）
docker attach myrevcont
コンテナ内のbookフォルダに移動し、npm run pdf でPDF出力を実行します。
cd book
npm run pdf
処理が走り、緑の文字でDone.が表示されれば成功です。
VS Codeのファイルエクスプローラーから、articlesフォルダの中にPDFが出力されているのを確認します。
なお、ここで出力されるPDFは製本用です。
exitでコンテナのターミナルを終了します。
exit
なお、上記の一連の作業（docker startからexitまで）は、以下のコマンドでも同様に行えます。
頻繁に出力する場合は.batファイルを作成しておくと楽です。
docker start myrevcont
docker exec -it myrevcont sh -c "cd /book && npm run pdf"
docker stop myrevcont
PDF作成の補足
電子書籍用PDFの出力はnpm run pdfコマンドの代わりに、以下のコマンドを使います。
REVIEW_CONFIG_FILE=config-ebook.yml npm run pdf
その他
Dockerについての補足
-
Docker DesktopはPDF出力等を行う際にのみ必要なので、それ以外では起動してなくても問題ありません。パソコンの環境によってはメモリの逼迫により動作が遅くなります。タスクトレイからDockerアイコンを選び、Quit Docker Desktopを選びます。 -
Docker Desktopの自動起動を無効にするには、次のように行います。
Discussion