はじめに
こんにちは！「Loglass Tech Blog Sprint Review 2024」編集長の粟田（@wooootack）です！
今日は、先日無事に完成した、Loglass初の技術同人誌「Loglass Tech Blog Sprint Review 2024」の制作の裏側を公開します！
「なんか凄そうに言ってるけど、薄い本なんでしょ〜？」と思った方もいるかもしれませんが、こちらなんと200ページ近くのボリュームがあります！
この記事では、「どんな風にしてこの技術同人誌を完成させたのか」「エンジニアならではの制作時の工夫」「シンプルに苦労した話」など、包み隠さず書いていこうと思います。
ぜひ最後までお楽しみください！
なぜ同人誌を作ることになったのか
はじめに、なぜ「Loglass Tech Blog Sprint Review 2024」を制作することになったのか、その経緯をお話しします。
弊社はさまざまなカンファレンスやイベントのスポンサーをしており、ブースを出展させていただくことが多くありました。
これまでも、そこでステッカーやポストカードなどのノベルティを配布していたのですが、よりエンジニアに刺さるような何か新しいノベルティを作ることができないかと企画していました。
そこで社内で有志のエンジニアを募って作戦会議をした結果、「遊び心がある」「オリジナリティがある」「ログラスらしさが伝わる」といった理由から、技術同人誌を作ることになりました。
そしてなんと、制作が決まった時点で入稿まであと1ヶ月程度しかない！という状態で短納期ではありましたが、無事にKotlin Fest 2024・開発生産性カンファレンス2024・Platform Engineering Kaigi 2024といった、3つのカンファレンスで配布することができました！
Loglass Tech Blog Sprint Review 2024のコンセプト
「Loglass Tech Blog Sprint Review 2024」は、これまでに「Loglass Tech Blog Sprint」という取り組みで投稿された記事の中から、厳選された20記事を収録した技術同人誌です。
zenn.dev
今回はピックという形なので掲載される記事とされない記事がありますが、そこに優劣はないということだけは最初に改めてお伝えしておきます！
「Loglass Tech Blog Sprint」で投稿された記事は、さまざまなジャンルのものがあって、どれも素晴らしい記事ばかりです。
また、この「Loglass Tech Blog Sprint」という取り組み自体をもっと多くの人に知ってもらいたいという思いも込められています。
そしてピックした記事を「設計」「技術的投資」「品質」「アジャイル開発」「チームビルディング」と5つのカテゴリに分類して掲載することにしました。
このカテゴリに自分たちがこれまで大事にしてきたことやログラスらしさの一部分が表れたのかなと感じています。
また、このカテゴリにない項目にも大事にしてきたことやログラスらしさは隠れていて、それについても今後は積極的に発信していきたいなと思いました。（具体的にどういうところなのかは後述します）
記事の最後に掲載されている記事のリンクをまとめておきますので、興味のある記事があればぜひご覧ください！
技術同人誌のおおまかな流れ
おおまかなタスク一覧をまとめてみました。
- コンセプトの決定
- 掲載記事の選定
- リポジトリや執筆環境の整備
- タイトルの決定
- 製本会社の選定
- 記事の加筆修正
- 本の構成作成
- 表紙作成
- 免責事項の執筆
- まえがきの執筆
- あとがきの執筆
- 目次作成
- ブログ記事から物理本にするために微調整
- 法務、広報チェック
- 製本会社に見積もり依頼
- 製本会社に支払い
- 製本会社に入稿
- 納品後のチェック
改めて羅列すると、大量のタスクをこなしたんだなとしみじみ感じますね。
今回は、特にこだわった作業と苦労した作業をピックアップして詳しく書いていこうと思います！
まずはどんな風に進めていくかを考えたのですが、今回はzennに書いてある記事をベースに本を作ることや、エンジニアが主導で進めることを考えて、以下のような構成にしました。
主に使用した拡張機能は以下の3つです。
最初のMarkdown PDFがあればMarkdownをPDFに変換できますが、自分はMarkdownのプレビューや目次の自動作成・HTMLのプレビューなども欲しいなと思って、他の2つも同時に使っていました。
また、extensions.jsonにこれらの拡張機能を記述して、他の人が環境を整えやすいようにしていました。（こういう細かい気遣い、大事ですよね）
{
"recommendations": [
"yzane.markdown-pdf",
"yzhang.markdown-all-in-one",
"koppt.vscode-view-in-browser"
]
}
Markdown PDFの使い方については良い記事がたくさんあり、自分も参考にさせてもらったので特に良かったものをいくつか紹介しておきます。
qiita.com
qiita.com
mseeeen.msen.jp
ブログ記事から物理本にするために微調整
次に実際に物理本に仕上げていくために行った作業を紹介します。
ここの作業が思ったよりも大変だったので、ぜひ参考にしてもらえると嬉しいです。
ざっとやったことをまとめると以下の通りです。
- 見出しレベルの統一
- 目次の作成
- 改ページの調整
- リンクの見せ方変更
- zenn特有の記法の修正
- フォントや色の調整
ここでも特に苦労した作業をピックアップして詳しく書いていこうと思います。
そしてぜひいろんな苦労があったんだなと感じながら、改めて技術同人誌を読んでもらえるとうれしいです。
リンクの見せ方変更
これは物理本ならではの苦労かもしれません。
これまではWebサイトで記事を公開していたので、リンクは何も気にしなくてもある程度いい感じに表示されていましたが、物理本だとそうはいきません。
特にテキストをリンクにしてある場合は、そのまま物理本にしてしまうとリンクが失われてしまいますし、色も黒になってしまうのでただの文字列のように見えてしまいます。
他の商業誌や同人誌を参考にしつつ以下のような方法を考えました。
- 各ページのフッターにリンク先を載せる
- 巻末にリンク一覧を載せる
- Notionでリンク一覧ページを作成して、そこにアクセスするためのQRコードを載せる
ただ、今回はやり切る時間が取れず、テキストの後ろに括弧書きでURLを記載することにしました。
具体的にはこのような形になっています。
実際のPDFのスクリーンショット
ここは今回やりきれなかったという後悔が残ってしまっている部分なので、次はもっと読みやすくリンクにアクセスしやすい方法でやりたいなと思っています。
zenn特有の記法の修正
※「Loglass Tech Blog Sprint」の記事はほとんどがzennで書かれたものだったので、この特殊な作業が発生しました。
これも当たり前なんですが、Markdown PDFでPDFに変換する際に、zennの独自記法はうまく変換されません。
例えば、以下のような記法がそのままだと変換されないことがありました。
zenn特有の記法は公式から記事が出ているので、そちらを参考にしつつHTMLを直接書くように修正したり、別の対応している記法に変換したりしていました。
zenn.dev
今回はそこまで数が多くなかったのでなんとかなりましたが、数が増えてくると大変そうだなと感じると同時に、zennの表現力は凄いなと感心しました。
フォントや色の調整
これも当初あまり深く考えていなかったのですが、実際に物理本にすることを考えると、細かくフォントを考える必要がありました。
例えば以下の部分は全て異なるフォントを使っており、この辺りにもしっかりこだわって作りました。
フォントや色に関しては、ほとんどがうまくいったなと感じているのですが、1箇所だけ失敗した部分があるので懺悔させてください。
それが以下のようなコードブロックの部分です。
PDFのスクリーンショット
PDFをPC上で見る分には、そこまで違和感がないかもしれませんが、実際に物理本にすると思ったよりも見にくくなってしまいました。
このあたりは、デザイナーにレビューしてもらう時間を取れずにPDFで見て大丈夫そうだなと進めてしまったので、これは次回に活かしたい反省点です。
製本会社に見積もり依頼
よーし、いい感じのPDFができてきたぞ〜！ということで製本会社に見積もりを出そうとしていると、どうやら見積もりに当たって紙質や製本方法を選定する必要があるということに気づきました。
後から思い返せば当たり前なんですが、完全に忘れており完全に後手に回ってしまいました。
今回は日光企画さんに製本を依頼したのですが、注文フォームで入力するべき紙質や製本方法が分からず途方に暮れていました。
そんな時に、弊社のデザイナーが救いの手を差し伸べてくれました。
おかげで値段は抑えつつも安っぽくならず、しっかりとした本に仕上げることができました。
平綴じ・中綴じ・無線綴じの違いなどの本に関する知識を得ることができるという副産物もあったので結果オーライかなと思っていますが、今後同人誌を作る予定があるエンジニアの方はこの辺りだけでも先に調べておくことをおすすめします！
感想
ここまでは経緯や進め方などを書いてきましたが、編集長としての個人的な感想もつらつらと書いていこうと思います。
まず、無事に完成させることができたこと、そしてカンファレンスで多くの方が手に取ってくれたことが何よりも嬉しかったです。
改めて、制作に関わってくれたメンバー全員に感謝を申し上げたいです。
製作開始から入稿までの期間も短く、割と短納期な依頼をすることもあったのですが、嫌な顔一つせずに協力してくれ本当に感謝しています。
せっかくなので、良かったところも簡単に思い返してみます。
今回、特に良かったなと思っているのは、GitHubで管理することでエンジニアなら誰でも参加しやすい次に繋がる作りにできたことです。
「Loglass Tech Blog Sprint Review 2024」というタイトルに2024が入っているということは……つまりそういうことかもしれません。
また、今回の技術同人誌はページ数の都合でいくつかの記事を泣く泣く掲載を見送る必要がありました。
その際に複数人で「ログラスっぽさが他よりも低い」という基準で相談して判断したのですが、そこで自分たちが思っていた「ログラスっぽさ」というものをアップデートしていく必要があることに気づく機会にもなりました。
VPoEからのフィードバックコメント
ポジティブな表現でありながらもとても大切なメッセージが込められていて、とても素敵な発信だなと思いました。
一方で、デザインや支払い周りの相談が遅れて後手に回ってしまったり、読者の感想を回収する仕組みを仕込ませるのを忘れたりと反省点も多くありました。
同人誌を作るぞ！という話が出てから、約半月程度はエンジニア2名だけで進めていたのですが、デザイナーやHRなど他部署のメンバーともっと早く連携を取っておけばよかったなというところは特に反省と感じています。
今回は初めての同人誌制作でいろいろとバタついてしまいましたが、次は今回の経験や資産を活用してより素早く高品質なものが作れるといいなと思っています。
おわりに
こうやって振り返ってみると、改めて作ってよかったなと感じました。
普通にエンジニアをやっているだけでは得られない経験もできましたし、何より達成感が半端じゃないです。
また、実際にカンファレンスでブースに立って直接お渡しできたり、ポジティブな反応を多く頂くことができたので、非常に嬉しかったです。
長くなりましたが、今回の記事はこのあたりで終わりにしようと思います！
技術書展とかに本を出してみたいなと思っている方など、もっと詳しく聞きたいことがあれば気軽にコメントやDMをお待ちしています！
それでは皆さま、次回作にもご期待ください！
掲載記事へのリンク集
設計
zenn.dev
zenn.dev
zenn.dev
zenn.dev
zenn.dev
技術的投資
zenn.dev
zenn.dev
zenn.dev
zenn.dev
品質
zenn.dev
zenn.dev
zenn.dev
zenn.dev
zenn.dev
zenn.dev
zenn.dev
チームビルディング
zenn.dev
zenn.dev
zenn.dev
zenn.dev
