3
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

Fableをつかって昔運営してクローズしたサービスをよみがえらせた話

3
Posted at

こんにちは、昔Markdownで技術同人誌が作れるサービスをつくって運営していました。

その後多少機能追加をした後、4年ほど前にクローズしました。当時は解決できない課題があったり、サーバー代がかかっていたのでコアのエンジンをOSSとして公開して終わりにしたという経緯があります。

Fableがやってきた

そんなとき、Fableがやってきました。7/7まで一定程度使えるということなので、手元のリポジトリで改善できないものがないか見ていたところでFlightBooksのコードを見て、これを題材にちょっとやってみようと思いました。

当時は解決できなかった課題があった

当時解決できなかった課題が2つありまして、ひとつはNoto Sans JPの利用ともう一つは目次のページ番号です。

Noto Sans JP問題は、Chromium(Puppeteer)の仕様で、PDF生成時に大きなOTFフォントを埋め込めない(分割しちゃう)という問題です。これは現在も「仕様」として引き継がれており、かわりません。

もうひとつは、目次のページ番号で、ページ数は印刷プレビューしないとどの見出しが何ページになるかわからないのであらかじめ目次を作ることができないという問題でした。

これらを、Fableに何とかならないか?と聞いたところ、なんとかなりますよ!とのことで何とかしてもらいましたw

新しいアーキテクチャへ

Fableさんの提案で、HTML→PDFの変換をChromiumからPythonのweasyprintへ、WebアプリをPHP+VueからHono(Cloudflare worker)にしました。

weasyprint化により、Noto Sansの埋め込みができるようになりました。そんなに難しいCSSレイアウトをしていないので、仕上がりとしてもChromiumと遜色なく、変換自体もworkersからcontainerを起動できるので60秒かからないくらいでPDFが錬成できます。

そして、CSS3のtarget-counterファンクションを使うことで、目次のページ指定もできるようになりました。今どきのCSS、めっちゃスクリプトですね。

さらに、これまでページ内組版はあきらめる、としていた柱にも対応しました。紙を閉じると、見開きのまんなか部分は余白を多めにとったほうが読みやすいってやつですね。こちらはCSS Paged Mediaの疑似クラスleft / rightで対応できました。

ついでにAPIもはやしておいた

で、作ったんだけど、いまはVSCodeで執筆してるのでブラウザの入力欄にいちいちコピペするの面倒だな~おもい、APIもはやしてSKILLも作ってもらいました。

これで、手元の環境からいつでもPDFを生成して読むことができます。

使ってみてください!

手持ちのMarkdownを流し込んでぜひビルドしてみてください!APIキーを発行して、SKILL.mdを落としてきてエージェントに操作させることもできます。

この記事は100%人間によって書かれています。

3
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?