omuriceman's blog

iOS / AWS / Firebase / JavaScript / Deep Learning を中心とした技術を面白く紹介します!

技術書典7で販売が振るわず赤字を経験したので振り返るしかない!

技術書典6で本が売れたのを良いことに、技術書典7で調子に乗って本を印刷しすぎたら自爆しました。印刷部数に対して1/5程度しか販売できませんでした。みんなが原価回収できたというレベルのを爆死というのであれば印刷代を回収できていないレベルでの大爆死です。

ただこの爆死が良い経験になりましたし、BOOTHでもう少し販売を頑張れば(印刷代は)トントンになれるレベルなので悲観的にならず次の技術書典のサークル参加者のみなさまの参考となれるようにブログに残しておきます。

正直にいうと色々な環境(主に人間関係)の変化があり、我々の技術同人誌「Developers Magazine」は今回で最後にしようかなと思っていました。まだそれは撤回するつもりはありませんが、今は「リベンジしたい!」の気持ちが強いです。

[2020/1/30更新]リベンジすることになりました!

techbookfest.org

技術書典とは

技術書典とは、年に2回開催される日本最大の技術書専門の同人誌販売会です。一般的なIT関連の技術書だけでなく、とてもユニークな技術に関することまで幅広く取り扱っております。

綿を育てて布を作る本だったり

techbookfest.org

ケーブルハーネスを作る本も販売されていました

techbookfest.org

僕が所属していた「六木本未来ラボ」は今回で2回目の出典でした。

複数人で執筆を行なっており、執筆メンバー全員がAWSを共通で利用している経緯から「AWSに関する技術の詰め合わせマガジン」という位置付けで本を作っていました。

前回の頒布では印刷した280部全てが売り切れてしまったため、今回は少し多めに製本をしておりましたが実際は前回の半分以下しか売れず、ギリギリ赤字になったという状況です。

なぜ原価を回収できなかったのか

大きくはこの4つが考えられます。

  • イベント開催日の問題
  • 頒布場所の問題
  • 宣伝の問題
  • 本の内容の問題

以下に詳細を書いていきますが、最終的にはそれらの懸念事項を考慮せず印刷部数を決めてしまったことが自爆の原因です

イベント途中はいろんな運の無さと実力/宣伝不足に落ち込みましたがこうやってブログにかけることができたので今は前向きになれています。

このツイートが僕の思いの全てです。技術書典を通じてたくさんの人と知り合えましたし、執筆をしてお金をもらう機会ができたこと。感謝しかありません。

皆さんの励ましのいいねだったり3階のサークルさんからの「自分も爆死しました」ツイートをいただいたり。普段関わりの無い皆さまとの一体感…泣けます。

イベント開催日の問題

まずは「前回の来場者数より少ない(ほぼ横ばい)のにサークル数/面積は2倍に近い」というのが理由として考えられます。1人あたりの購入単価が2倍になれば解決できますが、それは難しいですよね。

速報値ベースだと技術書典6が10000人を超えたのに対して、今回の技術書典7は9700人程度だったようです。なぜ来場者数が少なかったのでしょうか?周りの方の意見も参考にリストアップしました。

  1. 台風の影響
  2. 3連休の中日
  3. 技術書典6から日が経っていない
  4. 他のイベントと被っている

4に関しては技術書典非公式アフター(技術書典直後に開催される打ち上げ会)で知ったのですが、他の即売会イベントと被っていたらしくハシゴで参加するという人もいたそうです。

同人即売会秋コレ イベント一覧ページ

ゲームレジェンド31 | GAMESOLDIER

陸海空魔合同演習5フレンズ

頒布場所の問題

我々は3階の「お23C」で頒布をしていたのですが、入場口があった2階に比べて人が全然来ませんでした。イベント途中に知り合いが応援に駆けつけてくれたのですが「ブースどこですか?3階あったんですねw」みたいな状況で、僕が売り子交代のタイミングで2階に行ったとき、人の多さにびっくりしました。

自分たちのサークルも最初の1時間くらいは人が来てくれましたが、その後はまばらに。

湊川あいさんのツイートがかなり的確なことを言っていると思いました。

後述する宣伝不足も相まって自分たちのサークルに来る人も少なく、ふらっと立ち寄るケースが少なかったと感じています。

また「お」のゾーンですが、催事スペースの間に結構な隙間があって、なかなか人が立ち寄らない。

f:id:omuriceman:20190925204304p:plain
あれ?避けられてる?

という感じで、周りのサークルさんも売り切れているところは少なかったです。技術書典6では隣のサークルさんが早めに売り切れて撤収!みたいな感じでその後は面積が気持ち広めに宣伝できたのですが、今回は最後まで近くのサークルさんも頑張って宣伝していました。

運営側も初めての大規模な2フロアだったと思うので、是非次回は満遍なく人がばらけるような導線を作ってもらえると、とても嬉しいです!

宣伝の問題

ここからは内部的な要因になります。まずは宣伝にかける時間が全然とれませんでした。

技術書典6では自分のブログでも再三にわたる宣伝ブログを書きました。

技術書典で本が売れたらAWS IoT ボタンを押してSlackに通知できるようにしました! - omuriceman's blog

新卒エンジニアにも読んでほしい!技術書典6で販売されるマンガの技術書をまとめてみた! - omuriceman's blog

【個人利用】Amazon Cloud Searchで技術書典6のサークル情報(ジャンル詳細/タグ)を全文検索できるツールを作成しました。 - omuriceman's blog

技術書典6開催直前!販売側で初参加して良かった点・改善点について。 - omuriceman's blog

それに引き換え今回は1記事でした。

omuriceman.hatenablog.com

業務の話は詳細に書けないのですが、時間に余裕ができたのも技術書典開催直前になってしまい、思うように宣伝ができませんでした。

前回と今回の被チェック数(来場者が事前にめぼしい本をブックマークするような機能です)の推移を比較してみました。

f:id:omuriceman:20190925104615p:plain

11日前まではそんなに開きがないことがわかります。その後に、「IOTボタンの記事」「マンガ技術書の記事」などの記事を徐々に出すことで少しずつ差を広げていったという感じです。もちろんこれだけが宣伝に影響したとは思いませんが、いろんな方にリツイートしてもらっていたので、若干の影響はあったと思います。

被チェックをもらっていれば三階にくる人も増えたはずなので、僕の力不足であり実力不足です。

本の内容の問題

とても言いづらい話になりますが、立ち読みからの返品率が多いなと感じました。 途中他のメンバーが販売をしているときに、立ち読みしてる方2人くらいから「本の内容が難しい」と言われたそうです。表紙に「Hello, World!」って書いてあるので、そういった導入本を期待して立ち読みしてくれた人が多かったのかもしれません。

技術書典非公式アフターで発表されていたyagitchさんのスライドをご紹介します。

このスライドを見て「我々のサークルの本は読者層との不一致が起きてるのかもなぁ」と感じました。

話は変わりますが、もともとは「(売り上げを度外視に)本を作りたいよね」という目的があり「業務をしながら1人で書くのは大変だからAWSをテーマに複数の人が協力して記事を書こう」から始まった企画でもあるので、シングルイシュー本と比べて売れないのは必然とも言えます。(余談ですが一つのテーマに絞った技術本を僕は「シングルイシュー本」と呼んでいます)。

それが、前回の技術書典6ではいろんな要素(導線が入り口に近い/テーマがよかったなど)が重なって完売できたことをいいことに今回のいろんな懸念要素に目をつぶり、印刷しすぎてしまったという状況です。

次回については、まだ決まってないのですがもっと初心者に向けて書くか(これはこれで非常に難しいと思っています)身の丈にあった部数にするか。色々と話し合いながら決めていきたいと思っています。

いろんな思いはあるものの、サークルに立ち寄って手にとって立ち読みしていただけただけで感謝です。どの章を読んでいるなとかチラ見させてもらい、改善に繋げさせてもらっています。

嬉しかったこともたくさん

Vol. 1を買ってよかったからVol. 2を買ってくれる人がいた

これはとても嬉しいですよね。自分たちが本を書くためにまとめた技術を読んでもらって面白いと感じていただいてまた購入していただく。誰かのお役に立てていると思うと、我々も感謝しかありません。

Vol. 2について好意的な評価をいただけた

書いた本がこうやって誰かの手に渡って喜んでもらえることって、お金では買えませんね。

爆死したサークル主たちとの一体感

僕の爆死ツイートに続いて、他の皆さんも爆死ツイートしていました。お会いしたことないエンジニアの皆さんとこうやって爆死を称え合えるのも技術書典の醍醐味かと思っています。

次回こそはリベンジをしましょうぞ!

次回サークル主として参加するときに考慮すべきこと

以下の要素から被チェック数を含めて印刷部数を検討するのが良いかと思います。そして真剣に考慮したとしても、検討しきれない不慮の事態というもの大いにあると思います。それでも考えないより考えた方が良いです。

全体

  • 前回のイベントに比べて大きな違いはあるか
  • SNSでの反応はどうか(「見送る」「参加する」などの意見)
  • 他の技術書販売イベントの来場者数はどうか
  • 強豪サークルが近いか

日程

  • 他の有名なイベントと被っていないか
  • 当日の天気予報はどうなっているか
  • 前回のイベントからどれくらい日数が開いているか

導線

  • 広いフロアか階数がわかれているか
  • サークル場所は入り口からどの辺の位置にあるか
  • 混雑できそうな場所か(弱小サークルに狭さは重要だと思います)

初出典のサークル参加者に伝えたいこと

特に3階のサークルは辛い体験をしたと思います。僕も今回が初めての出典だとしたら、相当凹んでいたと思います。

前回我々のサークルが出した本は、初めての同人誌にも関わらずたくさんの人に読んでいただけました。そして上にも書いた通り、前回買ってよかったから今回も買ってくれる方もいました。技術書典はそういったエンジニアとエンジニアを繋ぐイベントだと思います。是非めげずに次回のイベントも改善を期待して待ちましょう。そして技術書典公式のアンケートに改善案をぶつけていきましょう。我々の意見が次の技術書典の改善に繋がると思うのです。

僕個人の思いとして技術同人誌界隈の勢いが無くなってしまうのが、日本全体としてもったいないと思うのです。

さいごに

まずは執筆から販売まで手伝ってくれたメンバーのみなさま、僕の宣伝ツイートをリツイートしてくれたみなさま、運営のみなさま、購入してくれたみなさまには本当に感謝しかありません。ありがとうございました。

もしかしたら技術イベントとして参加人数の頭打ち?ということはあるかもしれません。が、まだまだ改善の余地もありそうですし今後に期待したいです。

そして、今回赤字になったからといって僕はアウトプットをやめるつもりはありません。環境が変わっても誰かに役に立つアウトプットをこれからもずっと続けていきます。

宣伝

[2020/1/30更新]来たる2020/3/1に技術書典でまた本を出します。現在、鋭意製作中です。このページに訪れたみなさん興味があればお立ち寄りください。朝から待ってます!

techbookfest.org

何問正解できる?JavaScriptの学習アプリ「JavaScript暗記カード」でクイズに挑戦してみたら自信を無くしました!

どうやら私は雰囲気だけのJavaScriptエンジニアだったようです。

先日なんとなくAppStoreを検索していたところ「JavaScript暗記カード」というアプリを発見しました。JavaScriptの学習を促進するために「文字列」「配列」「数値」などの処理方法を学べたり関連するメソッドをクイズ形式で出題しています。

AppStore/GooglePlayのリンクを貼っておきますのでダウンロードしてみてください。

◼︎AppStore

JavaScript暗記カード

JavaScript暗記カード

  • Junki Hadano
  • 教育
  • 無料
apps.apple.com

◼︎GooglePlay play.google.com

言うても私、Vanilla JSPure JS(どちらも普通のJavaScriptをかっこよく言っているだけです。)の扱いについては業務も含めて慣れておりますので、楽勝にクリアしてやろう!という思いでダウンロードしました。

今回はアプリの使い方の紹介とクイズに挑んでみた結果を恥ずかしげもなくブログに記したいと思っています。

使い方

アプリを立ち上げるとコアJavaScriptクライアントサイドJavaScriptを選択できます。

f:id:omuriceman:20190918195217j:plain:w300

コアJavaScriptはNode.jsやReact Nativeでも使えるようなJavaScriptのデータ構造の扱い方や、PromiseやJSONの処理方法について学ぶことができます。

クライアントサイドJavaScriptは今だけ無料のようですが、主にWebサービスで使用するようなDOM操作やCanvasの描画、Windowオブジェクトの処理などを学習することができます。

今後、jQueryReactについてもコンテンツが追加されるようなので楽しみですね。個人的にはVue.jsやNuxt.jsなども覚えたいので追加されると嬉しいなぁと思っています。

学習コンテンツについて

2019年9月時点でコアJavaScriptの学習コンテンツは以下のようになっています。

  • String(文字列の処理)
  • Number(数値の処理)
  • Array(配列の処理)
  • Object(オブジェクトの処理)
  • Function(関数の処理)
  • Math(数値の計算)
  • Date(日付の処理)
  • Promise(非同期処理の処理)
  • グローバル関数(JavaScriptに組み込まれている内部関数)
  • JSON(JSONの処理)

各コンテンツは暗記モードクイズモードの2つが用意されています。

f:id:omuriceman:20190918204824j:plain:w300

暗記モード

暗記モードは最初に処理したい内容がかかれています。

f:id:omuriceman:20190918211612p:plain:w300
「文字列を先頭から延長する」なんてメソッドありましたっけ。。。

タップすると正解が表示されます。

f:id:omuriceman:20190918211909p:plain:w300
知らんかった。ここで少し自信を失いかけました。

便利なのが、それぞれのメソッドに対してサンプルコードも紹介しているところです

f:id:omuriceman:20190918212107p:plain:w300

2文字分0埋めしていて、埋まってる場合は何もしない。というのがサンプルコードから読み解けます。理解しやすくていいですね。

クイズモード

クイズモードは制限時間内にメソッド名を答えていき、最終的に何問正解したかで自分の理解力を知ることができます。

f:id:omuriceman:20190918212900p:plain:w300

制限時間が結構あせります。

アニメーションが触ってて気持ちいい

スクショを見てもらうとわかりますが、デザインがとても綺麗です。操作している時のアニメーションも気持ちがいいので、触ってて楽しいです。

f:id:omuriceman:20190918214018g:plain:w300

gifアニメーションなので伝わりにくいですが操作時の効果音も聞いてて気持ちいい!

クイズに挑戦

最初に書いたように、私は「配列処理」のクイズに挑戦してみました。

結果は・・・

f:id:omuriceman:20190918214207p:plain:w300

心、ボキィッ!!

100点中39点というなんとも情けない結果に終わってしまいました。いかに自分がGoogle検索という外部ストレージに頼っているかがわかりました。

というか皆さんこれ全問正解できるんですか?!

まとめ

私は「楽しく遊んで学べるサービス」をいつか作りたいなと思っていたのですが、とても良い取り組みのアプリでした。

  • JavaScript専用学習アプリ
  • デザインや効果音にもこだわっていて触っていて楽しい
  • 少しJavaScriptを使っている人たちの学び直しに最適
  • 知らなかったメソッドとの出会い
  • 入力中にキーボードの予測変換が勝手に入って焦る
  • 問題文の理解が少し難しいかも。出力結果が書いてあると良いかもなと思いました。  

「文字列を先頭から延長する。 出力例:"7" → "07"」

みなさんがどれだけJavaScript知っているかとても気になるので是非ダウンロードしてみてください!

宇宙空間をブラウザ上で視覚化できるJavaScript製OSS / 「Spacekit」で宇宙を創造する

f:id:omuriceman:20190917011940p:plain

宇宙にいきたいと思ったことは無いだろうか。私は行きたいとは思わない。しかし手軽に宇宙目線の人間を超越した存在になれるとしたら面白そうではないだろうか?そんなことを可能にするのが「Spacekit」というJavaScriptライブラリである。

github.com

概要

タイトルにほとんど書いている通りだが、地球や月・太陽系などの宇宙空間をインタラクティブに作成できるJavaScriptライブラリである。いくつかのサービスの描画エンジンとして使用されているようだ。

  • 古代の地球を見るサービス

dinosaurpictures.org

www.asterank.com

  • 流星群可視化サービス

www.meteorshowers.org

インストール方法

今の所、npmなどでインストールできる方法はない。公開されているGitHubのファイルを読み込むか、生のファイルをダウンロードして設置するかのどちらかになる。

次の事例ではGitHubのファイルを読み込む方法で宇宙を創造する方法を紹介している。

Webサイトで宇宙を表現する

太陽と地球を創造する

まずは太陽と宇宙を創造しよう。そのための一番シンプルなコードがこんな感じになると思う。

<!DOCTYPE html>
<html lang="ja">
<head>
    <style>
        html,body{
            height: 100%;
        }
        #main-container {
            width:100%;
            height: 100%;
        }
    </style>
</head>
<body>
    <div id="main-container"></div>
    <script src="https://typpo.github.io/spacekit/build/spacekit.js"></script>
    <script src="./main.js"></script>
</body>
</html>

scriptファイルのmain.jsの中身はこのような状態になっている。

const viz = new Spacekit.Simulation(document.getElementById('main-container'), {});

viz.createObject('sun', Spacekit.SpaceObjectPresets.SUN);
viz.createObject('earth', Spacekit.SpaceObjectPresets.EARTH);

完了してみたらhtmlファイルを開いてみよう。これが本当の「Hello, World!」かもしれない。。

f:id:omuriceman:20190916204605p:plain
漆黒の闇、太陽の周りを地球がぐるぐると回っている

余談ではあるが、DOCTYPE宣言時のhtmlとbodyはheightが0になってしまうので100%を指定すると画面全体に宇宙が描画される。うまく画面が表示されない時は確認してほしい。

他の惑星を追加する

他の惑星の追加の仕方は、上記のコードをみれば創造できると思うがcreateObjectメソッドにて追加ができる。

viz.createObject('mercury', Spacekit.SpaceObjectPresets.MERCURY);

オリジナルの惑星を作成する

オリジナルの惑星は静止状態のものと、他の惑星と同じように太陽を周回するオブジェクトを作成できる。

  • 静止オブジェクトの作成
const obj = viz.createObject('myobj', {
    position: [1, 1, 1],
});
  • 周回オブジェクトの作成

このサンプルは人工惑星になったテスラロードスターが軌道を周回する情報になっているらしい。

electrek.co

const roadster = viz.createObject('spaceman', {
    labelText: 'Tesla Roadster',
    ephem: new Spacekit.Ephem({
      // These parameters define orbit shape.
      a: 1.324870564730606E+00,
      e: 2.557785995665682E-01,
      i: 1.077550722804860E+00,
      
      // These parameters define the orientation of the orbit.
      om: 3.170946964325638E+02,
      w: 1.774865822248395E+02,
      ma: 1.764302192487955E+02,
      
      // Where the object is in its orbit.
      epoch: 2458426.500000000,
    }, 'deg'),
  });

Ephemクラスに渡すプロパティについては下記を参考にパラメーターを調整する。

Ephem | spacekit.js

太陽・水金地火木土天海冥・テスラのロードスターを視覚化してみたのがこちら。

f:id:omuriceman:20190917000859p:plain

天王星/海王星/冥王星を画面に映そうとすると地球が小さく見える。

背景のデザインを宇宙にする

今のままだと惑星の背景が黒いままなので宇宙感のある背景を追加する。背景を宇宙の写真にするには簡単に2つの関数が用意されている。

  • createSkybox
  • createStars

createSkyboxはライブラリが用意している画像を読み込んで表示される。createStarsは画像ではなく星のデータを読み込んで、実際に画面上に反映させる方法である。そのためcreateStarsの方が処理速度が早いが、繊細な部分は表現しきれない。

個人的には両方ともセットすると綺麗な宇宙ができるのでオススメしたい。

viz.createStars();
viz.createSkybox(Spacekit.SkyboxPresets.NASA_TYCHO);

できあがった宇宙がこちら

f:id:omuriceman:20190917010714g:plain

createSkyboxに渡す引数のデータを変更すると違う背景になってこちらもとても美しいので紹介したい。

viz.createStars();
viz.createSkybox(Spacekit.SkyboxPresets.ESO_GIGAGALAXY);

f:id:omuriceman:20190917013132g:plain

まとめ

今回紹介したSpacekitは紹介した機能以外にも色々な機能があり、今回は省いたのだが興味のある方は是非公式のドキュメントやGitHubソースコードを追ってみてほしい。

個人的には宇宙関連のサイト構築が会った時に使える日が来たらいいなと思って待つことにする。

また宇宙旅行に行ってみたいけど怖い・お金が無い。みたいな人は是非こちらで宇宙を体感してほしい。

参考サイト

  • ドキュメント

typpo.github.io

  • 惑星の軌道要素について

ja.wikipedia.org