(本サイトは、アフィリエイト広告を利用しています)

AIを駆使して zenn 本をEPUB(Kindle)にしてみる

知的生産

筆者テック大家さんはとうとう出版に足を踏み入れました。技術ブログサイトのzennのサービスを使って本を出版(公開・販売)したのです。

書籍の内容は、本ブログの読者の方ならよくご存知、SwitchBotです。SwtichBot API (Application Programming Interface)のプログラミングの本です。

テック大家さんの「本」配信中!

技術ドキュメントサイト zenn にて、SwitchBotのAPIの技術本を配信中。
「SwitchBot APIで始めるIoTプログラミング入門 – スマートホーム開発の第一歩」

ですが、せっかくならKindle(Amazon)で出版したい!

そう考えてzennの本をKindleで売れる形式=EPUB形式にしてみることにしました。

zenn本の書き方(まとめ)

zennの本はzennのサイトにログインして執筆することができます。ですが、さすがは開発者向けサイト。Zenn CLI という開発者なら使い慣れているコマンドラインツールが公開されています。

Zenn CLIを使った場合、執筆活動の体験は劇的(!)に変わります。

まずはMarkdown形式で記事を書きます。

その際、使い慣れたエディターを使えます。筆者の場合は、VS Codeを使います。

書いた内容は、ローカル環境でブラウザでプレビューできます。

GitHubと連携して、特定のブランチにpushすると本が公開されます。

非エンジニアがGUIで頑張る、というより、テキストエディタっでササッと記事書いてボタン一つで公開。なかなかのエンジニア向けワークフロー。いいですねぇ。

各章の構成に関しては、章ごとのMarkdownファイルを作ります。つまり、本のディレクトリの中に.mdファイルが章ごとに、わーっと並ぶイメージです。

章の順番はconfig.yamlで記述、本のタイトルや概要説明もこのファイルで書きます。

記事の公開もconfig.yamlのパラメータで設定します。

yamlファイルを編集するってのも、エンジニアのドキュメント管理ツールと言った感じでなかなか良いです。

最終的には、zennとGitHub連携してdeployすると通常のHTML/CSSの見た目が適用されてzenn本としての体裁が整う、という仕組みです。

zenn本をKindleで出版!?

このようにハレてzennサイトにて自費(?!)出版を果たしたテック大家さん。せっかく本を出版するならKDP (Kindle Direct Publishing、つまりAmazonで本をウリたい。そんな野望がふつふつと湧いてきました。

調べてみると、自分が著作者であれば、他で公開したコンテンツもKDPで売れるようです。ただし、Amazonの専売が必須なKindle セレクトは不可。Kindleセレクトじゃないと売上としては若干不利のようです。が、そこを気にしなければ夢の(!?)Amazon出版が可能、ということになります。

手元にあるのは各章を記述したzenn向けのMarkdown(.md)ファイルです。

一方、KDPで受け入れ可能なフォーマットは何でしょう。

公式サイトでは、Microsoft Word(DOC/DOCX)が一番上に書かれています。推奨なのでしょうか…

せっかくMarkdownで書いているのにWordで書き直すのは手間以外のなにものでもありません。

さらに公式サイトをよく見ると、EPUBがOKとあります。

EPUBって電子書籍では一般的なのでしょうか。筆者は、随分むかし、電子出版がはしりの頃に名前くらいは聞いたことがあります。たしかHTMLベースだったような…

EPUBの仕組み

そこで、最近の良きパートナーClaude.aiに確認してみました。

EPUBフォーマットは、かんたんに言ってしまうとHTMLのディレクトリをzip圧縮したものです。ただし、ディレクトリ内部にいくつか本の体裁を整えるために必要となるファイル(メタ情報)が必要です。

中身はおおよそ下図のような構造です。

EPUB内部構造のサンプル(生成AIによる作成)

EPUBに必要なもの。それは第一に、mimetypecontainer.xmlなどEPUBであることを示す固定的なファイルです。これでzipファイルがEPUBたることを示します。ちなみに、拡張子は.epubとします。

各章は個別のHTML(xhtml)になっていれば良く、HTMLファイル間の関係性(章の順番)はtoc.ncxなどで記述します。なんとなく、zenn本のconfig.yamlと同じような内容になりそうです。

画像フォルダやCSSの扱いは普通のHTMLコンテンツと変わりません。

ということは、MarkdownをHTMLにコンバートできれば、半自動的にKDP対応できるということではないでしょうか。夢は広がります。

zennのMarkdownをHTMLにする

さて、ここで筆者はMarkdown をHTML/CSSに変換する必要に迫られたことになります。

Zenn CLI で変換できるのかな、と思いzenn build!などと打ってみましたが、駄目でした(笑)

ただ、MarkdownをHTMLにするくらいのライブラリは巷によくありそうではないでしょうか。本ブログでも以前扱ったHugoという静的サイトジェネレータもMarkdownでコンテンツを記述するツールでした。

そう考えて調べてみると、なんとzenn公式が公開しているではありませんか(下記リンク参照)。

いくつかパッケージが別れており、その中にzenn-markdown-htmlというTypeScriptで書かれたライブラリが存在。その名の通り、zenn用に書いた本のMarkdown ファイル一つを単一のHTMLに変換してくれるようなライブラリになっています。また、CSSもzennサイトのテイストになるようなものが公開されています。

どちらのパッケージもNPMで配信されているのでJavaScriptやTypeScriptで使えます。これでzenn本からEPUBへのコンバーターが実装できそうです。ありがたや…。

バイブコーディングでzenn本をEPUBにする

「では、ジェネレーターを作りましょ」といって、ゴリゴリとプログラミングを始めるのは前世代的しごとのやり方というものです。

筆者のお気に入り、Claude Codeにプログラムを書いていただきましょう。

つまり、バイブコーディングというAIと対話しながらコーディングする手法です。「対話しながらコーディング」といっても、筆者はコードは全く書きません。これで、zenn本 → EPUBコンバーターを作ろうと。これこそ現代的、2025年的、じゃないですか(笑)。

はじめは、booksフォルダにある複数のMarkdown (.md)ファイルを一つづつ個別のHTMLファイルにコンバートするためのコーディングです。

CSSはZennのものを持ってきましたが、Kindle PreviewerというAmazon公式ツールにかけるとCSSが正しく反映されません。ならば、とClaude CodeにカスタムのCSSを生成してもらい…

本で使っている画像ファイルをコピーして、参照パスを解決するコードを書いてもらい…

HTML/CSSができたところで、コンテンツやYamlファイルをパースして章のタイトルやらなんやらをEPUB用のXMLに埋め込んで生成してもらい…

build用のコマンドを作ってpackage.jsonに設定したりして…

ツール公開用のconfigの生成やら、README.mdの記述やら、すべてAIにお願いして…

できました、zenn本からEPUB生成コンバータ。

生成されたEPUBコンテンツはKindle Previewerでも、目次も含めてちゃんと表示されています↓

zenn本をEPUBに変換してKindle Previewerで表示したところ
zenn本をEPUBに変換してKindle Previewerで表示したところ

なんやかんやで、バイブコーディングでの作業は2日くらいかかりました。でも、自分がやったら2週間以上かかっていた気がします。

そして最終的に完成した本ツールzenn-epub-genは、筆者GitHubにて公開中です(↓)あなたのzenn本もコマンド一発でEPUBにできますよ(一部制約あり)。

それにしても、生成AIによるバイブコーディング。ここまでできるとはたいしたものです。

こんな風に個人が自分の課題解決のためにカスタムのプログラムをAIにこしらえてもらう。今後はこういうスタイルが加速していくんだろうなーと感じずにはいられない体験となりました。

テック大家さんが本を出版しました!

技術ドキュメントサイト zenn にて、SwitchBotのAPIの技術本を出版しました。
「SwitchBot APIで始めるIoTプログラミング入門 – スマートホーム開発の第一歩」
是非、一度お手にとってご覧ください。

メールマガジンにて本サイト(Tech Landlordテック大家さん)の更新情報をご連絡します。
本サイトのプライバシーポリシーをご確認の上、是非メールアドレスをご登録下さい!


友だち追加

プロフィール

テック大家さん
ソフトエンジニア兼不動産オーナー。
某超有名日本メーカーにおいてソフトウエア開発畑を30年近く勤務。
かつてはWindowsのアプリ開発や、組み込み機器のソフト開発を行う。プロジェクトマネジメント・オフショア開発・要件管理などの経験あり。現在は、個人開発で、JavaScript/TypeScript/React/Express、PHP/Laravel、Firebase、Google cloud、Arduino(C++)などでプログラミングを楽しむ。
サラリーマンの傍ら不動産経営を始め、現在、1棟モノの賃貸4物件を東京・神奈川に所有。夫婦でおよそ20年の賃貸経営の実績。
最近の物件では、入居者向けフリーWiFiなど、テック系の設備はDIYで自ら構築。
海外MBA取得。
テック大家さん
テック大家さん
@kazushi@tech-landlord.com

ソフトエンジニア兼不動産オーナー。
某超有名日本メーカーにおいてソフトウエア開発畑を30年近く勤務。
かつてはWindowsのアプリ開発や、組み込み機器のソフト開発を行う。プロジェクトマネジメント・オフショア開発・要件管理などの経験あり。現在は、個人開発で、JavaScript/TypeScript/React/Express、PHP/Laravel、Firebase、Google cloud、Arduino(C++)などでプログラミングを楽しむ。
サラリーマンの傍ら不動産経営を始め、現在、1棟モノの賃貸4物件を東京・神奈川に所有。夫婦でおよそ20年の賃貸経営の実績。
最近の物件では、入居者向けフリーWiFiなど、テック系の設備はDIYで自ら構築。
海外MBA取得。

79件の投稿
0人のフォロワー