技術書典16 執筆記録 紙の本を出版しよう！
2024/06/14 UE Tokyo .dev #3 (2024.06)でLTをしました
このページの概要となる内容のLTを「UE Tokyo .dev #3」で登壇しました。
技術書典に本を書きたいと行動を始めた方向けに書いているので、リアルな販売数も書いてあります。
技術書典は楽しいので、技術書を書きましょう！
使用アカウントやツールについて
【技術書典の参加に必要】
- 参加に必要
- 技術書典アカウント
- サークル名と公開用ペンネーム
- 銀行口座（振込用）
- 売り子さんをお願いするのに必要
- 売り子さんの技術書典アカウント+登録したメールアドレス
【使用ツール】
- Re:VIEWに必要なツール
- Re:VIEW
- GitHub
- GitHubアカウント
- Gitクライアント（GitHub Desktop）
- Docker
- 執筆に使用したツール
- iPad + Apple Pencile
- Visual Studio Code
- Spilit City: Lofi Session
- ScreenPresso（スクリーンプレッサー）
- 画像編集ソフト Affinity
- Affinity Photo 2
- Affinity Designer 2
- PDF編集ソフト
2023/11/12 技術書典 15に一般人として参加する
前々から気になっていた技術書典15のオフライン会場に足を運んでみました。
ありとあらゆるジャンルがあって、好きなことを書いているのがまぶしく感じました。
ページ数も少なかったので「これなら書けそう」という気持ちになりました。
技術書典16のスケジュール
LT用の資料でスケジュールについて1枚の図にまとめてみました。
2024/02/03 サークル出展の受け付け開始
サークル出展の受け付けが開始されたので、さっそく申し込みました。
2024/03/09 サークル出展の当選・落選についてのお知らせが届く
当選していたので嬉しかったです。
2024/03/12 iPad+ApplePencile+Goodnotes 6で執筆開始
昨年の「Udemyおすすめ講座をシェアしよう！ by Udemy Advent Calendar 2023」で書いた記事が最優秀賞を頂くことができ、賞品として頂いた「iPadとApple Pencile」が開封されずにいました。
そろそろ書き始めようと開封しました。
「Goodnotes 6」というアプリが良さそうだったのでインストールしました。
買い切りとサブスクリプションの2パターンがあり、サブスクリプション(1350円)を選択しました。
使いやすいので買い切りでもよかったです。
お昼ごはんを食べ終わった後に少しずつ頭の中にあるイメージを書き起こし始めました。
ノートみたいにページを追加できるので、マンガのネームみたいに本が構成できたので自分には合っていました。
2024/04/11 Spilit City: Lofi Sessionを購入する
お昼にGoodnoteで書いたラフを清書しようと家に帰ってからPCを立ち上げるもののなかなか書けませんでした。
リリースされたばかりの「生産性向上リラックスゲーム『Spirit City: Lofi Sessions』」が気になったので購入してみました。
清書作業はできなくても、細かい本の修正作業は進んでいくので購入してよかったです。
隠れているスピリットを解放しているだけでも何か進んでいる気分になっていくのでやる気を取り返せました。
2024/04/13 Re:VIEW環境を構築しよう
- Docker for Windowsをインストールする
- Re:VIEWのテンプレートリポジトリを作成する
- Visual Studio Code環境を整える
- Re:VIEWのExtensionをインストールする
- Workspaceを作成する
- DockerでPDFを作成する
Docker for Windowsをインストール
Docker for Windowsのインストール
「Docker Desktop Installer.exe」を実行します。
「OK」ボタンをクリックします。
インストールが開始されます。
「Close and Restart」をクリックするとPCが再起動されます。
サインアップ（無料の場合はContinue without signing in）
「Accept」をクリックします。
「Finish」をクリックします。
無料で使用するには「Continue without signing in」をクリックします。
アンケートに答えるかスキップします。
Docker for Desktopが使用できるようになりました。
Re:VIEWテンプレートからリポジトリを作成する
Re:VIEWのリポジトリからテンプレートを使用して新しいリポジトリを作成します。
Re:VIEWのテンプレートからリポジトリを作成する
「Use this template」>「Create a new repository」をクリックする。
新規リポジトリの情報を設定します。
| 入力項目 | 設定する値 |
|---|---|
| Repository name | リポジトリ名を設定する |
| Description | リポジトリの説明 |
| Public or Private | 公開か非公開かを選択する |
「Create repository」をクリックします。
Re:VIEWテンプレートからリポジトリが作成されます。
リポジトリのCloneを作成する
GitクライアントからPCにCloneを作成します。
SourceTreeが一般的ですが、GitHubを扱う際には意外とクセがなく設定が楽なので「GitHub Desktop」を使用しています。
リポジトリのクローンを作成する
「File」>「Clone repository...」を選択します。
作成したリポジトリを選択して、Cloneを作成します。
リポジトリのファイルがPC側に生成されます。
Visual Studio CodeにRe:VIEWのExtensionをインストールする
Extensionの検索では一覧に表示されなかったので、WebページからVisual Studio Codeにインストールします。
Visual Studio CodeにRe:VIEWのExtensionをインストールする
「Install」をクリックし、「Visual Studio Codeを開く」をクリックします。
Visual Studio Code側で「Install」をクリックします。
リポジトリのClone用のWorkspaceを作成する
Visual Studio Codeで執筆できるようにリポジトリのClone用のWorkspaceを作成します。
リポジトリのClone用のWorkspaceを作成する
Visual Studio Codeを開きます。
WorkspaceにリポジトリのCloneを作成したフォルダを追加します。
リポジトリのCloneフォルダを選択します。
ファイルの一覧が表示されるので、Visual Studio Codeからファイルを選択して編集できるようになります。
Workspaceを保存します。
DockerでPDFを作成する
DockerでPDFを出力します。
DockerでPDFを出力する
Dockerのバージョンを確認します。
コマンドが実行されればDockerを使用できるか確認できます。
> docker version
「vvakame/review」からreviewのイメージをpullします。
docker pull vvakame/review:5.8
「articles」フォルダに「docker-compose.yml」を作成します。
「(リポジトリ名)」に作成したリポジトリを設定します。
version: '3'
services:
review:
image: vvakame/review:5.8
volumes:
- .:/(リポジトリ名)
build: .
working_dir: /(リポジトリ名)
「articles」フォルダで「cmd」を実行して、コマンドプロンプトを表示する。
コマンドを実行してPDFを作成します。
docker-compose run --rm review rake pdf
「articles」フォルダにpdfが作成されます。
デフォルトの設定では「デフォルトはB5・印刷用の設定」になっています。
2024/04/13 タイトルを決める
2024/04/14 Re:VIEWで書き始める
Zennに紙の本の執筆記録を書き始めました。
PDFが出力できるようになったので、「Re:VIEW」の設定をして書き始めました。
長くなりそうだったので別のページで書いていきます。
2024/04/26 オフライン会場のサークル配置のお知らせが届く
サークル配置についてメールが送られてきました。
今回は「さ02」になりました。
2024/04/27～5/09 GW執筆頑張る
QRコード作成サイト
QRコードでZennのページに飛ばしたかったので、以下のサイトでQRコードを作成しました。
買い切り画像編集ソフト「Affinity（Photo2とDesigner2）」
画像編集には「Affinity」を使用しました。
Adobe製品とは操作がかなり違うので慣れないですが、半額セールの時に買っておいてよかったです。
買い切りPDF編集ソフト「PDF Extra」
Re:VIEWから出力したPDFのページを差し替えたかったので、買い切りのPDF編集ソフトを探しました。
2ページ表示だと表紙ページが含まれてしまうので印刷した時の見開きページを確認できませんでした。
PDF Extraでは「表紙を区切る」ボタンで表紙だけを2ページ表示から除外できるので見開きページを確認できるようになりました。
2024/05/09 表紙を書く
本の登録などいろんなところで表紙画像が必要になるので用意しました。
日光企画さんで印刷させていただこうと考えていたので、「テンプレート」ページの「表紙用トンボテンプレート（PSD）」から印刷用に使用するPSDファイルをダウンロードしました。
表紙を描きました。（カワイイ）
裏表紙も描きました。
2024/05/11 売り子をお願いしたのでサークル通行証の発行をする
そろそろ当日の動きも考えなければいけないなぁと考えだしました。
当日の売り子をお願いしたので「サークル通行証」の発行をしました。
【必要な情報（サークル主）】
- 技術書典のアカウント ＋ 登録メールアドレス
- 名前 ＋ 読み（カタカナ）
- 電話番号
【必要な情報（売り子さん）】
- 技術書典のアカウント ＋ 登録メールアドレス
サークル通行証（QRコード）の発行手順（サークル主）
マイページの「イベント出展」の「サークル通行証」をクリックします。
サークル通行証を「使用するユーザーのアカウントのメールアドレス」を入力します。
売り子さんの場合はここまでで、入力したメールアドレスにサークル通行証についてのメールが飛びます。
サークル主は次に「緊急連絡先」を入力します。
以下の項目を入力して「登録」をクリックします。
- 名前（漢字）
- ナマエ（ヨミガナ）
- 電話番号
サークル通行証のQRコードが表示できるようになります。
2024/05/12 書籍を登録して審査を受ける
印刷できる準備はできたけど、審査が必要なことに気付きました
技術書典の開催前は3営業日後に審査結果が届くそうです。
早割りに申し込みたかったので、審査が通ることを前提に早割り価格で入稿してしまいました。
「書籍を登録したり審査を受けたりするにはどうすればいいですか？」に書いてある手順にしたがって登録しました。
審査中でも出品の登録ができました。
「技術書典オンラインマーケットとオフライン会場に書籍を出品するには」に書いてある手順にしたがって登録しました。
2024/05/12 入稿方法について日光企画 池袋同人工房を訪問する
2024/05/13 物理本特集の一覧に表示される
表紙が一覧に表示されてはじめて「販売するのか」って気持ちになれました。
2024/05/14 技術書典後のUnrealEngineのLTイベントで話すことにする
たまたま6/14（金）に「UE Tokyo .dev #3 (2024.06)」が開催されることを知ったので、次回へつなげるためにもふりかえりもかねてLT枠で登録することにしました。
2024/05/15 入稿する
早割りに申し込みたかったので、審査が通ることを前提に早割り価格で入稿してしまいました。
にこぷり.comから見積もり＋クレジット決済する
にこプリ.comのアカウントを持っていなかったのでアカウントを作成します。
アカウントが作成できたらログインします。
ログイン後に「自動見積もり+クレジットカード決済」をクリックします。
「参加イベントを選択」を選択して以下のように設定します。
| 項目 | 説明 |
|---|---|
| 開催日を選択 | イベントの開催日を設定する |
| イベントを選択 | バックアップイベント[都内] |
各種セット -> 「見積もりをする」をクリックします。
遊び紙が必要のようなカスタマイズが必要な場合は「基本料金」側の「見積もりをする」をクリックします。
Step1ではセット・印刷サイズを選択します。
| 項目 | 説明 |
|---|---|
| 印刷種別 | オフセット |
| セット | スタンダードフルカラーセット |
| 割引選択 | 20%OFF（イベントのしめきりを要確認） |
| サイズ | A5 |
おおよそ1週間前が通常料金です。
イベント開催2週間前くらいが割引対象です。
Step2ではページ数と印刷部数を選択します。
ページ数は「表紙4ページ＋本文のページ数」になります。
今回は本文が60ページなので64ページになりました。
64ページなので68ページとして選択します。
Step3では表紙と本文の印刷の方法について設定しました。
デフォルトから以下の項目を変更しました。
| 項目 | 説明 |
|---|---|
| トジ方向選択 | 左トジ |
| PP選択 | マット（紙質は実物で確認して決めました） |
Step3まで入力ができたら「納品・お客様情報へ進む」をクリックします。
次に「納品・お客様情報」を入力します。
Step1では基本情報を入力します。
| 項目 | 説明 |
|---|---|
| 作品タイトル | （作品名を入力する） |
| 著者名 | （著者名を入力する） |
| 割引選択 | Windows7までしかなかった |
| サイズ | その他（Affinity Photo2, Affinity Designer 2）入稿するデータが大事なのでソフトは参考 |
| 項目 | 説明 |
|---|---|
| 部数 | 納品する部数を入力する（入力に時間がかかるからテキストエディタから数字をコピペした方がいいこかも） |
| スペースNo. | （サークル配置番号） |
| サークル名 | （サークル名） |
Step2まで入力できたら「確認へ進む」をクリックします。
入力内容を確認したら、「ご利用規約」のチェックボックスを有効にして、「クレジットカードで見積書の発行を行う」をクリックします。
「ご本人情報」と「クレジットカード情報」を入力したら「お申込み内容確認」をクリックします。
「お申し込み」をクリックしたら完了です。
続いて日光企画のページからWeb入稿を行います。
今回はオフセット印刷のWeb入稿を行いました。
「表紙・本文同時入稿」を選択しました。
Web入稿する
| 項目 | 説明 |
|---|---|
| お名前 | （本名を入力する） |
| メールアドレス | （メールアドレスを入力する） |
「フリガナ」、「電話番号」、「郵便番号」と住所を入力します。
| 項目 | 説明 |
|---|---|
| イベント搬入 | イベント開催日、イベント名を入力する |
| イベント搬入先 | イベントの会場情報と納品数を入力する |
にこプリで設定した本の情報を入力します。
| 項目 | 説明 |
|---|---|
| 本のタイトル | （本のタイトルを入力する） |
| セットまたは仕様は？ | にこプリで設定した仕様を選択する |
| 本文入稿予定日 | （入稿した日付） |
| サイズ | A5 |
| 表紙込みページ数 | 表紙（4ページ）+ 本文のページ数 |
| 冊数 | 300 |
「トジ方向」は「右」がデフォルトなので、左の場合は必ず変更するように気を付けます。
| 項目 | 説明 |
|---|---|
| トジ方向 | 左（デフォルトは右なので要注意） |
| トジ種類 | 開閉じ（無線綴じ） |
表紙の印刷方法について設定します。
| 項目 | 説明 |
|---|---|
| 表紙用紙 | NP ホワイト200kg |
| 表紙印刷/オプション（複数選択可） | 表紙の種類を選択する |
本文の印刷設定を行います。
| 項目 | 説明 |
|---|---|
| 本文用紙 | 上質90kg |
| 本文印刷 | オフセットスミ刷り |
| 遊び紙 | （遊び紙を選択する） |
| 本文始まりのページ（ノンブル） | 1 |
| 項目 | 説明 |
|---|---|
| 事前予約や見積もりは取っていますか？ | 取っている（にこぷり） |
| ご使用のOSとアプリケーション | 使用しているアプリケーションに「〇」をつける |
| 添付ファイル | 表紙（PSD）と本文(PDF)をZipファイルにまとめてアップする |
「上記内容に同意します」にチェックを入れて、「家訓画面へ」をクリックします。
確認画面に移動して問題が無ければ「送信」をクリックします。
送信完了が表示されたら入稿完了です。
2024/05/16 表紙を修正して差し替え
お昼に表紙についてお電話をいただいたので表紙を修正して差し替えました。
【修正点】
- レイヤーが統合されていない
- 表紙と裏表紙の左右の余白がズレている
修正して、「差し替え窓口」から修正データを入稿しました。
2024/05/16 「完全手ぶらセット」に申し込む
技術書典16から「完全手ぶらセット」という無料で当日の会場をセッティングできるセットを提供してくれました。
メールに申し込みフォームのURLが送られてくるので回答しました。
- メールアドレス
- サークル代表者名
- サークル名
- サークル配置番号
2024/05/17 名刺を作成する
オフラインイベントが7月まで毎月あるのでポジTA名刺を作ることにしました。
ショップカードみたいな感じで当日気軽に持っていけるようにしました。
裏面のQRコードから「プロフィール＋お問い合わせ」のGoogleフォームに移動できます。
Googleフォーム側を修正すればいいので更新が楽だと思い採用しました。
2024/05/18 無事審査が通る
審査が通過したことを通知するメールが届きました。
5/12に登録してから5日くらいかかりました。
マイページの「販売物の管理」ページが「審査通過」のステータスに変わりました。
商品ページにも無事購入できることが表示されるようになりました。
審査が通過したので告知できるようになりました。
2024/05/18 前から印刷に登録する
「前から印刷」と「後から印刷」という受注印刷できる仕組みがありました。
「早割りの割引（20%）」＋「前から印刷（20%）」の重ね掛けもできるようなのでありがたかったです。
日光印刷さんで印刷した場合に限り使用できる制度でした。
【前から印刷に必要な情報】
- 名前
- フリガナ
- 電話番号
- サークル名
- サークル配置番号
- 本のタイトル
2024/05/20 技術書典「第8回 刺され！技術書アワード」に申し込む
「第8回 刺され！技術書アワード」は「新刊」で出展した本を自薦で応募できるアワードです。
アワード応募作品は時間が許す限りYouTubeの公式チャンネルで紹介してくれるそうです。
（過去のアワード応募作品は「タレコミ」という形で再度応募できるそうです）
せっかく出展したので申し込んでみました。
【入力に必要な情報】
- メールアドレス
- 代表者名
- サークル名
- 応募技術書のタイトル
- 応募技術書のタイトルよみがな
- 応募書籍の技術書典16出展URL
- 応募書籍の特徴、刺さって欲しいポイント
- レビューして欲しい人など選考に関する要望
2024/05/22～23 入稿前にURLを修正してしまったので電子版を再審査
開始前に再審査が通ったので安心した（2024/05/23）
2024/05/22 Zenn版も完成
本側にZennのページへのQRコードを入れたかったけど、審査が通らなそうだったので断念しました。
次の技術書典用にZenn側で定期更新していきます。
Zennはクーポンが発行できると売りやすくなるのになぁ。
2024/05/23 名刺が届く
水曜日にも受け取れなかったので、木曜日に受け取りました。
若干左寄りに切り取られていたのが気になりますが、ようやくお外で活動できるような準備ができて満足しました。
2024/05/23 サークル設定を行う
本の販売ページでアイコンが設定されていなかったのが気になったので「サークル設定」を行いました。
「マイページ」の「サークル設定」をクリックします。
アイコンを設定し、サークル情報を入力したら「決定」ボタンをクリックします。
2024/05/24 お品書きを書く
サークル慣れしている作家さんたちが「お品書き」を書いていたので真似して書いてみました。
これって印刷して持っていくものっぽいなぁ。
以下のURLデ当日用意するモノについて分かりやすく解説されています。
2024/05/25 技術書典16が開催される
いよいよ「技術書典 16」が開催されました。
「電子＋紙」のステータスが有効になります。
「ゲームメーカーズスクランブル」のランチタイムにラーメン屋でメールを確認すると購入していただいた結果が大量に送られていました。
本を書き続けてから3年目になってようやく一気に反応が返ってきました。
技術書典の規模と最近のUnreal Engineの需要がちょうどマッチしたタイミングで本を出せてよかったです。
2024/05/25 お品書きを印刷する＋ダイソーで備品を購入する
「ゲームメーカーズスクランブル」を途中で離脱してお品書きを印刷しに行きました。
「KINKOS」が土日休みだったので「ACCEA」に行きました。
少し厚いマット紙をA3で印刷しました。
A2までならポスターも当日印刷できるようでした。
銀座のダイソーに当日必要なものを買いに行ったらパネルも売っていたので購入して夜な夜な工作しました。
【ダイソーで購入したもの】
- 見本誌用の透明なA5のブックカバー
- 見本誌を置くための透明なブックスタンド
- おしながきを貼るパネル
- おしながきのパネルを立てるためのミニ三脚
- お金を入れるようのケース
持っていくものについてわかりやすい記事でした。（先に見てからダイソーに行きたかった）
2024/05/26 技術書典（オフライン）開始
夜な夜な工作をしていたので、朝起きられるのか心配でしたが無事起きることができました。
オフライン当日がまさかの誕生日だったので風船が飛びました。
サークル関係者の開場10分前くらいに現地に到着しました。
「天下一武道会にでも参加するのかなぁ」と思うぐらいつわもの達が集まっていました。
サークルの場所に着くと「完全手ぶらセット」と「日光企画」と書かれた段ボールが2つ置かれていました。
セッティングはこのような感じになりました。
机の上には1箱分を置いたので、約150部くらいになります。
ダイソーで購入した「クリアブックカバー」に「完全手ぶらセット」の中に入っていた値札のプラスチックとシールを貼って見本誌を作りました。
手に取ってみると本になっていたので感動しました。
日光企画さんの入稿の相談に乗っていただいたお姉さんがその後確認をしに来てくれました。本当にありがとうございました。
開始直前のサークル側から見た視点です。
出口の真ん前だったので購入した本を戦利品として撮影しているのが見れたり、取材の様子を見れたので終始景色が変わって面白い場所でした。
開始直前に「iOSのバグが発生して修正するのに開場が遅れます」というアナウンスが流れて会場が笑っていました。
「さすが、技術系のイベントだなぁ」というほほえましいスタートでした。
午前中はぽつりぽつりと一定間隔でブースを訪れる人がいました。
午前中から急に忙しくなってきました。
「ゲーム関連の列だからやっぱり午後からだよね」みたいな夜型な業界なのだなぁとしみじみ感じました。
一定間隔で見本誌を手に取っていただけたり、購入してくれていたりでなかなか席を立つタイミングがありませんでした。
だいたい9割近くブースにいることになりました。
会社の人だったり、SNSのポジTAファン？の方たちが来てくれてうれしかったです。
「UnrealEngineをインストールしたけどそこから触れていない。」
という方たちが数人かいて購入していっていただけたので、書いてよかったなぁと思いました。
基本的に開発者に向けて記事を書いているので、入口で躊躇している人にも役に立つのかという発見に至りました。
無事帰宅をして感謝メッセージを書きました。
開場への行き方についてけっこう分かりずらかったのでこの記事はありがたかったです。
ファーストペンギンとしての役割は果たせたかなぁと思いました。
UEを触っている人たちが次回以降の技術書典で本を出すきっかけになれたらうれしいです。
夜な夜な今までの収支計算のスプレッドシートを作成して、経費より売り上げが上回ることができました。
じょじょにデザインやイラストなどは一緒に本を書いていただける人への報酬としてお支払いできるようにしていきたいです。
2024/05/26 Zenn版の公開
Zenn版の公開に関してはすごい悩みました。
「技術書典で購入した人には無料クーポン発行したい」
みたいな気持ちがあったけど、現状のZennにはクーポンのような仕組みはないし、Zenn側としても困るだろうし。
ちゃんとお金を取らないといつまでも一人で膨大な執筆した内容をメンテナンスしなくてはならないし。
これも試練だなぁと思い有料（￥1000）で公開することにしました。
「Zenn版と紙の本で連携をしたかった」というカタチをじょじょに理解してもらえるように頑張ります。
2024/05/27 開場から配送した本が届く
オフラインイベントが終了するとヤマトの着払いで会場から家に送ることができました。
次の日の午前中の指定ができたので受け取ってから出社できました。
ありがとうございました。
活動にもお金がかかるようになってきたので、「収支がマイナスにならないように本を売る」というのも裏テーマとして頑張ります。
2024/05/27 手渡しで献本する
執筆にあたりお世話になった人達や書くきっかけとなったアーティストさんたちに書いた本を献本できました。
開始前にお渡ししたかったのですが、会場で本を受け取ったため後になってしまいました。
今回書いた内容はまだ粗削りなので、今後は現場のアーティストさんたちとブラッシュアップをしながら良い本に成長させていきます。
2024/05/27 LTの準備を始める
6/14にLTがあるので発表用の資料を作り始めました。
販売履歴がCSVとかを出力できないのでChatGPTを使ってPythonスクリプトを作りました。
グラフをだせるようになったのでLT資料に仕込んでいきます。
2024/06/09 技術書典16 オンライン終了
技術書典16が終了しました。
長いようであっという間でした。
終わって見れば「160部」を販売できました。
ありがとうございました。
2024/06/10 オンライン購入分の宅配搬入 or 受注印刷分の対応
技術書典の出展者はオンライン購入分を購入者に届ける作業が残っています。
「受注生産の場合」は6/10に何部印刷するのかを申告して振込まで終わらせる必要があります。
300部印刷していたので、追加印刷する必要がありませんでした。
「宅配搬入」でオンラインの購入分をヤマト運輸で送ることにしました。
技術書典の参考となるURL
- 技術書典公式
- mochikoAsTeckさんの書籍とGitHub
- 印刷所：日光企画さん
- にこぷり.com
【印刷】
【その他】
執筆ツール参照URL
Spirit City: Lofi Sessions
Docker関連
Re:View関連
Affinity
「Affinity Designer 」の公式ヘルプ
Discussion