はじめに
本記事は Elixir Advent Calendar 2024 シリーズ１の２日目の記事になります
技術書典17（オンライン）に出したElixirDekstop本をどうやって書いたかを紹介します
技術書典とは
技術書典（ぎじゅつしょてん）は新しい技術に出会えるお祭りです。
技術書典は「いろんな技術の普及を手伝いたい」という想いではじまりました。技術書を中心として出展者はノウハウを詰め込み、来場者はこの場にしかないおもしろい技術書をさがし求める、そんな技術に関わる人のための場として我々は技術書典を開催しています。
by 技術書典ヘルプセンター
年に２回大体５月と１１月に開催されます
オンライン（２週間）とオフライン（１日）同時開催でオフラインは池袋で開催されています
出した本
ElixirDesktopで始めるモバイルアプリケーション開発・導入編
見どころ
ElixirDesktopの簡単な紹介と環境構築方法
スマホアプリをジェネレーターを使ってストア公開できる３種類のアプリ構成の作り方を解説しています
Elixir Advent Calendar 2023の20記事をベースにまとめましたが、
記事のようにアプリをきちんとした機能を作り込むにはページ数が足りなかったので、代わりにどんな構成のアプリが作れるのかを丁寧に解説しています。
目次
- ElixirDesktopについて
- ElixirDesktopの開発環境の構築
- スタンドアローン型アプリの開発
- 外部DB接続型のアプリの開発
- APIサーバーとAPIクライアントアプリの開発
どうやって書いたか
最初はRe:VIEWで書いていたのですが、しっくり来なかったのでVivliostyleで書き直しました。
Re:VIEW
Re:VIEWは電子書籍と紙書籍のための、簡潔かつ強力なデジタル出版ツールです。コンピュータ書等の技術書籍（紙・電子）の商業出版や同人出版に利用されています。
特徴
基本Markdownぽく書けるが細かい箇所はLaTeXで書く必要がある
ビルドはRubyのrakeで行うのでRubyの実行環境が必要(dockerを使う場合が多い)
記述
Markdown(.md)でも可能ですが、微調整が必要だったためRedPen(.re)で記述
mdで書いてreに変換して微調整をしていた
使用したテンプレート
TechBoosterさんのReVIEW-Templateを使用しました
参考書籍
Re:VIEWを使わなくても1~5章で技術書を書くために必要なことが大変参考になったのでぜひ読んでみてください
Vivliostyle
最新 Web 標準技術により、電子出版や Web 出版のための
新しい組版システムを作るオープンソース・プロジェクト
Vivliostyle Viewer はブラウザから、Vivliostyle CLI はコマンドラインから HTML ファイルを読み込み、CSS で組版後、PDF に書き出せます。
特徴
CSS組版といってHTML+CSSのページをPDF化する形式、ビルドはNode.jsで環境構築も楽
{{}}記法とJSを使用してfootnoteなど独自拡張も作成できます
記述
html+CSSで書くのですが、下記のテンプレートを使用してMarkdownで記述し、ビルドでHTMLに変換します
微調整はcssに素のCSSまたはTailwindで行います
使用したテンプレート
FootnoteやCodeBlockの便利拡張や、ビルドコンフィグの自走生成などとても便利で使いやすいテンプレートです
参考書籍
上記テンプレートの紹介やhandlebars.jsで作成した独自拡張の解説を丁寧されています
表紙の作成に生成AIを使う
もちろん絵心も表紙作成に詳しい知り合いもいなかったので生成AIを使って作ることにしました
ChatGPTを使って生成しました
作り方としては好きなタッチの画像をダウンロードして、添付した画像のタッチを使用して(シチュエーション)画像を生成してくださいと依頼
ベースの画像はこちらから
Elixirに関するRSS的なサイト
上位数件しか表示されないので過去記事を探したいときはTwitterがよいです
Phoenixこの記事のヘッダーの画像をダウンロードして
chatgptで以下のようにアウトプットされた画像に対して修正箇所を追加していきます
take 1 添付した画像に似たタッチでスマートフォンの中で羽ばたいているフェニックスの画像を生成してください
take 2 スマートフォンは斜めではなく正面で
take 3 dpi 350 jpegで
take 4 2079x2953 で 線をくっきりさせてください
最終的に以下の画像が出力されました
jpegに変換して貰う前はダウンロードしたときにファイル名が
DALL·E 2024-10-24 18.42.13 - A phoenix in a minimalistic and elegant line-art style, similar to the provided image, flying out of a smartphone seen from the front. The phone is po.webp
となっていたので、どうも生成AIのモデルはDALL・Eのようです
これをGIMPに放り込んで微調整してタイトルをつけて表紙のこの画像になりました
改善点
初めて作ってみたので、出品したあといろいろ改善点がでてきました
表紙の文字
とりあえず画像＋大きめ文字でやってみたのですが、技術書典で表示されるサムネイルだと大分視認性が悪かったです。
なので次回はオライリー形式、画像を小さく文字を大きく、画像に被せるなど定番レイアウトを試してみようかと思います。
参考
※ 12/3 追記
実際に読んでみて表紙を直してみました、次回の表紙にでも使ってみたいと思います
ページ数あたりの値段
電子のみだったのでとりあえずお求めやすい１０００円に設定しましたが
印刷する場合は１ページあたり１０円くらいにしとかないと利益がほぼないので1500円ぐらいが妥当なんでしょうね
構成
環境構築といきなりアプリを作る内容だったので、導入編なのにElixirやPhoenixの全くの初心者は置いてきぼりという内容だったので、ニッチがすぎるかなぁと思うので最低限の入門ぐらいあったほうが良いかなとは思いました
次回何を出す？
ストアに出しても問題ないレベルで作り込む内容を出したいなとは思います
合わせてElixirの入門もしてほしいので
Elixir+Phoenix 入門 500円
ElixirDesktop 環境構築 500円
ElixirDesktop in Production 1500円（ページ次第）
とかできればいいかなーと妄想だけしておきます
最後に
今回紹介したテンプレートを使用することでMarkdownを書くだけでいい感じのデザインの本が簡単に作れました
みなさんもアドカレで書いたqiita記事を転載して技術書典に出品してみませんか？
本記事は以上になります、ありがとうございました