はじめてのサークル参加
技術書典4で一般参加して「なんか出す側のほうが楽しそうだなぁ」と思ってサークル参加してみた。
大変なこともあったけど、結果的にめちゃくちゃ楽しめた。
頒布したもの
Vueのコンポーネント設計の本。テストのしやすさという観点から、これまでVueを使ってきて感じたアンチパターン的な話と、コンポーネントの分類、テストのやり方なんかを書いた。BOOTHでDL版販売中です(宣伝)
本にするネタ
今回はVue Fes JapanのCFPに出して落ちたネタがあったので、それを本にまとめる形にした。
「売れる内容を考える」みたいなのはしなかったけど、興味を引くようにタイトルは何個か案を考えて最終的に「後悔しないためのVueコンポーネント設計」にした。
執筆環境
PDF生成のために執筆環境構築が必要になる。
はじめは自力での構築を試したが、つらくて挫折した。結局TechBoosterのリポジトリをcloneして使った。
レイアウトもそのまま使って(見た目にこだわる優先度が低い)設定ファイル、表紙、本文だけ自前のものにすればPDF生成までできて楽だった。ビルドは用意されてるdockerコマンドで。
エディタはVSCode。Re:Viewプラグインは次のやつを使用。
本文を書く
とにかく書く。お仕事で技術文書をそこそこ書いているのもあって、執筆自体が全く苦ではないのでスムーズに完了した。
CFPを出すときに練りまくったので、構成と内容の流れみたいなのはちゃんとできたかなと思う。CFPを書くときは次のやつを何回も読んだ。
今回本にした内容は、自分の経験から感じていたことや考えていたことを文章に起こす形だったので、無理なく書けた気がする。
ただ構成とかページ数の関係で削った内容がぼちぼちあるので、それはまたの機会に発散したい。
表紙を作る
表紙は妻にイラストを書いてもらった。
かわいいでしょ。
入稿する
本文と表紙ができたらあとは入稿するだけ。
今回は技術書典のバックアップ印刷所であるねこのしっぽさんを利用した。イベント当日にブースまで本を運んでもらえるの超楽なので助かった。
プランは「ねこスパーク」という締切遅めだけどそこそこ安いやつ。
入稿はまず申し込みフォームからページ数やサイズを入力、利用するプランを選択して申し込み。
その後、本文だけのPDFファイルと、表紙と背表紙をそれぞれPSDファイルでアップロード。アップロードしたファイルで印刷してOKですよ、というの印刷会社に伝えるUIがあるので入稿完了状態にする。
入稿完了後「コードブロックがはみ出してるけどこれは意図してるやつですか?直しますか?あと表紙用のPSDのサイズがちょっと合ってないから少し拡大しますか? 」と確認の電話があった。
コードブロック、一行が長いと割とすぐにはみ出す(印刷所からの電話で気づいた😳
— じまぐ📚技術書典 こ32📚 (@nakajmg) 2018年9月28日
修正して再度アップロードして入稿完了の報告をWebで。その後もう一度電話があり問題ないとのことで無事印刷に進めた。
細かいところまで見てくれて大変助かった。また次もお願いしたいと思いました。
DLカードの準備
冊子のほかにPDFのダウンロード版も用意した。
印刷は名刺の印刷でググって出てきたとこに適当に決めた。
入稿用のテンプレートがアプリケーションごとにあったので楽だった。
表面に光沢のある用紙を選択したけど、出来上がりを見てマットなやつで角丸とかにしたほうがよかったかな?と思った。
DLカードの表面は表紙をそのまま使って、裏面にPDFをDLするためのURLとQRコードとZipファイルを解凍するためのパスワードを書いた。
個人名刺もついでに作った。
PDFファイルを置く場所
よくあるDropboxで〜ユニークなURLを〜みたいなのがめんどくさそうだったので、BOOTHにパス付きzipファイルを置いて0円でDLしてもらう運用にした。
下書き状態があるので、あらかじめ商品を登録してURLを決めておいて、そのURLをDLカードの裏面に印刷し、当日の朝に公開した。
技術書典の次の日からBOOTHでDL版を買えるようにしたかったので、あらかじめページを作っておいて次の日に公開処理だけすればよい状態にしておいた。BOOTH使いやすい。
事前に準備したもの
サークル向けガイドラインを読んで、ブースの設営に必要そうなものを準備した。
以下持ちこんだ物
- お釣り(1000円札40、5000円札2)
- 頒布物の価格は1000円のものだけ
- 見本誌を立てるやつ*2
- 見本誌を取ってもらいやすくするように2つ
- 冊子売り切れたときには完売札を立てた
- ポスター吊るすやつ
- 机に広げる布
- 布はあったほうが圧倒的にサークル感が出る
- スケッチブック
- 見本誌マークや完売札を作ったり、いろいろ使える
- マッキーのセット
- ハサミ
- スケッチブックで書いたものを切り取る
- 養生テープ
見本誌立てはなんとなく2つ用意していったけどわりと正解だったぽい。見本誌を結構読んでもらえた。
#技術書典 設営完了。 こ32 でお待ちしてます pic.twitter.com/2RAFWxnYbD
— じまぐ📚技術書典 こ32📚 (@nakajmg) 2018年10月8日
(自分の文字を書く能力はレベル1のまま止まってるので、全部妻に書いてもらった)
決済方法
今回使えるようにしたのは次の3つ。
- 現金
- 技術書典かんたん後払い
- pixiv Pay
圧倒的に現金が多かった。お釣りの千円札をかなり用意したけど、1万円札or5千円札を出してきた人は合わせて6人くらいでほぼ使わなかった。参加者の人もお釣りがでないように崩してきてる感あってやさしい世界。
かんたん後払いは70部くらい。かんたん後払い用のQRコードは運営側で用意してくれていて、スタンドとして立てられるようになっていて大変よい感じだった。感謝。
pixiv Payは圧倒的に認知が少ないのか、使ってくれたのは6人だった。この利用人数だとサークル側としてはオペレーションが複雑になるだけなので、次回はなしかな〜?といったところ
被チェック数
自サークルの配置場所はこ32
。サークルリストを見るとわかるんだけど、リストの下から9番目の位置。500近いサークルがある中でめっちゃ後ろの方にあるので、サークルリストからサークルカットでのチェックに頼ると伸びが悪いだろうなと思った。
ということでこのリストからのチェックはあまり重視せずに、Twitterからの流入で被チェック数が伸びるといいなと思って何回かつぶやいた。
Vueコンポーネントの設計とか分類とかテストについて書いたやつを出しまーす https://t.co/OnfFiyIBYQ#技術書典 pic.twitter.com/MmgeL59Tgv
— じまぐ📚技術書典 こ32📚 (@nakajmg) 2018年9月12日
#技術書典 Vueのコンポーネント設計の本出します。設計に合わせて何をどうテストするかについても書いてます👐
— じまぐ📚技術書典 こ32📚 (@nakajmg) 2018年9月26日
サークルチェックもよろしくおねがいします👇https://t.co/OnfFiyIBYQ pic.twitter.com/Ui8xnWJ9bX
月曜日は #技術書典 よろしくおねがいしますhttps://t.co/OnfFiyIBYQ pic.twitter.com/vP5ETDJODF
— じまぐ📚技術書典 こ32📚 (@nakajmg) 2018年10月6日
つぶやくときは#技術書典
のハッシュタグをつけて、出すものの内容とサークルページへのリンクをセットで。
被チェック数の推移
被チェック数は開催3日前くらいまではゆるやかに伸びて、そこから一気に増えた。
- 9/12: 15
- 9/27: 50
- 10/2: 77
- 10/4: 103
- 10/7: 181
- 10/8: 270
最終的な被チェック数は270。
これは読めない。読めないが、この伸び方は理解できる。
前回自分が買う側で参加したとき、サークルチェックしたのは前日の夜&当日の朝だった。早めにチェックしてるのは多分サークル参加する人たちで、一般参加の場合は直前にチェックするのが合理的な行動っぽい。
印刷の部数
今回は250部刷った。初サークル参加だし、Vue.jsというテーマに絞っていたので、自分のなかではかなり冒険した部数。
印刷の部数を決めたのが開催日の10日前くらいで、そのときの被チェック数が50。
被チェック数が50の段階で部数を250に決めたのはいくつか理由があって、一番大きいのは次の記事を読んでなんか大丈夫そうと思ったから。
- 気持ち的に印刷代だけ赤字にならなければいいかなと思ってた
- 100刷るより200くらい刷ったほうがコスパよくなる
- 250刷ると70ちょっと売れれば赤字ラインを超える
- 在庫出たら出たでそのとき考える
という感じで、赤字じゃなければもうどうなってもいいやと思った。10日前で被チェック数50あるなら70以上はまぁ売れるでしょとかなり楽観的だった。
当日の結果
開始45分の時点で赤字ラインを乗り越え、14:30に冊子244部(見本誌とか自分用で6部)が完売。1分に1冊以上なペースで息つく暇もない感じで冊子が売り切れた。
見本誌を見ずに買ってくれる方もぼちぼちいたけど、見本誌を読んで買ってくれる人のほうが多かったかなという印象。この結果をみるに、Vue.jsというテーマの引きは結構強いんだなと認識を改めた。
冊子がなくなったあとはDLカードのみに切り替え。17:00の閉会までで30枚くらい。やはり物理本は強く、「冊子ないのか〜残念」となる人が多かった。
最終的な頒布数は合計で275部。すごい。
冊子がなくなったペースをみるに、たぶん物理本は400刷ってもちょっと余るくらいで済む感じのやつだったのかなと推測。
BOOTH公式のこのアナウンスがあと数日早かったら300部にしてたかも。
10/8(月・祝) #技術書典5 会場にて、サークル様の多めに持ち込んだ作品を【BOOTH倉庫に無料発送できる窓口】を設置します🙌
— BOOTH公式@技術書典5 ス03 (@booth_pm) 2018年10月1日
倉庫への「保管申込」を済ませ、梱包した荷物に「保管ID・品番」を明記し「荷物作業スペース」へお持ちください!
会場でスマホからも申込み可!https://t.co/tS021S3KDa pic.twitter.com/pcTAnYY1l5
DL版
技術書典の翌日朝にBOOTHでDL版の販売を開始した。
#技術書典 にだしたVueコンポーネントの本、Boothで販売開始しました📚https://t.co/YUErV3b8DJ
— じまぐ📚技術書典 こ32📚 (@nakajmg) 2018年10月9日
とりあえず出すけどそんな売れないだろう、と思ってたけどそこそこのペースで売れててびっくりしている。
BOOTH、わりと売れててビビる
— じまぐ📚技術書典 こ32📚 (@nakajmg) 2018年10月9日
いろいろな人に届いてる感じで嬉しい。BOOTH使いやすいし、技術書が売れる土壌が育ってる気がする。
次回へのあれこれ
- 書きたいことは書ききる
- 入稿してから「削ったあれやっぱ無理やりねじこんでもよかったな〜〜〜」はもったいない
- 多少構成が崩れても書きたいことを書こう
- サークル参加の申し込みをした段階から準備する
- 当選してから書きはじめると少し苦労するぞ
- 落ちたら誰かのとこに委託するくらいの意気込みで
- 見本誌は透明なカバーつけるといいかも
- 「見本誌」マークをテープで貼ったら表紙剥がれて悲しい
- というか表紙の仕上げをツルツルのやつにしたほうがいいかも
- 名札作っていったほうがよさそう
- ただでさえアイコンと顔が一致しないので認知してもらうためにもあったほうがいい
次回サークル参加するとしたら
- Slackクライアントの作り方
- Functional Vue.js
のどちらかをテーマにしようかなと考え中。
TweetDeck風Slackクライアント作成中。最低限見れるとこまで進んだ。作りたいもの作るの楽しすぎる pic.twitter.com/kYaIQxzTEm
— じまぐ📚技術書典 こ32📚 (@nakajmg) 2018年8月29日
「Functional Vue.js」というワードが頭に浮かんできたので怪文書のネタに入れておこう
— じまぐ📚技術書典 こ32📚 (@nakajmg) 2018年9月20日
おわりに
とにかく楽しかった。終わったあとに妻と飲んだビールは最高においしかった。
渋谷に戻って乾杯🍻おつかれさまでした😁 pic.twitter.com/sImLWTXx96
— じまぐ📚技術書典 こ32📚 (@nakajmg) 2018年10月8日
ブースに来てくれたみなさまありがとうございます。戦利品の写真に自分のが写ってると嬉しいですね。ブースに来てくれた人の中に「これを買うために技術書典きました」と言ってくれた人がいて、なんだよ最高のイベントかよと思いました。
購入報告とか感想とかありがとうございます
Twitterで購入報告とか感想を書いてくれてる人がちらほらいて感無量でございます。ありがとうございます😭
自分の中で「Vue.jsのエキスパートとして開発をやっている人」みたいなのを初めて観測したのがじまぐさんなので、じまぐさんが本を出してると2秒くらいで買ってしまった
— potato4d (@potato4d) 2018年10月9日
サク読みした。今はじめての中規模Vue案件で結構このバッドパターンを知らずにやってる部分が多いのでありがたい(>_<)
— ナユ / to-R Inc. (@nayucolony) October 9, 2018
後悔しないためのVueコンポーネント設計 @nakajmg 読了。僕が半年かけて泣きながら学んだことが全部書いてあるので、まだVueやってない人がこれ読んだら実質半年若返ると思う pic.twitter.com/h8lbCF7n0M
— しゃべる椎茸 (@tottokotkd) October 8, 2018
現地で買って拝読しました!実務からの指針が丁寧に書いてあってとても参考になりました。ありがとうございました!
— こにふぁー (@konifar) October 9, 2018
技術書典行けなかったので買ってみた!ちょうど本業・副業両方でVueを使うので、これを機にちゃんとしたコンポーネント設計のベストプラクティスを身につけたい。 https://t.co/P7bif7aUGn
— Ken Shimizu@移住したい系エンジニア (@kaonash_) October 9, 2018
ちょうど今VueでWebアプリ作ってて、どんな設計にするのが良いか悩んでいたところ、ピンポイントな本が...!
— 堤 健 (@tsutsu_ken) October 9, 2018
公式ドキュメントでは言及されていない、痒いところに手が届く感じで、めっちゃ勉強になりました! https://t.co/5NdM08hBvW
戦利品。
— paichi (@paichi81) October 8, 2018
「後悔しないためのVueコンポーネント設計」はほぼほぼテストの本で勉強になるわー#技術書展5 pic.twitter.com/70Pt2WQNjP
読んだ。常にテストを意識した作りになるようなTipsが散りばめられてました。作者のコンポーネントの分け方、テストケースの考えを知れて面白かったです。 #技術書典 #技術書典5
— 山口さんちのいがにん (@IganinTea) October 8, 2018
後悔しないためのVueコンポーネント設計 | PonyHead https://t.co/Xx2FfsRe5s #booth_pm
「後悔しないためのVueコンポーネント設計」
— さがっと (@sagattosaga) 2018年10月8日
めちゃいい!
筆者の実際のコンポーネントの分け方や、テスト方法が凄くわかりやすくまとめられていて参考になる!
こういう本がたくさん出るといいなぁ〜。 pic.twitter.com/HawRm4RhwO
こういう感想とか反応がもらえるとめちゃ嬉しいし、書いてよかったな〜。
自分のに限らず、本を手にした人たちは一言でもいいので感想をつぶやくと著者の人がめっちゃよろこぶと思います。
自分がゲットした本については別途感想を書きます。
技術書典の戦利品😁 pic.twitter.com/WRMFDg6u94
— じまぐ📚技術書典 こ32📚 (@nakajmg) 2018年10月8日
おつかれさまでした。