omuriceman's blog

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

技術ブログをバズらせたくて必死で身につけた情報収集術

僕は2019年4月から技術ブログを始めているが、2ヶ月目くらいから「はてなブックマークホッテントリを取るための情報収集」を心がけるようになった。その影響もあって何記事かはてなブックマークホッテントリ入りすることもできたので、これから技術ブログなどでアウトプットを始める人の役に立てばいいなぁと思ってブログでまとめることにした。技術ブログを書く人でなくても情報収集先として参考になる部分はあると思う。

はじめに

まずはじめに、僕は「英語でしか紹介されていない面白い技術を日本語で紹介する」というのを意識して情報収集している。僕自身特定の技術に詳しいわけではないので、他の技術ブロガーさんのように「特定の技術を深く掘る記事」を書いてもきっと読んでくれないと感じていた。あとは単純に面白い技術が好き!というのもあって、上記の方針で情報収集を行うようになった。

なのでこれから紹介するサイトやメディアはほとんど海外のものだが、Google翻訳すればだいたい内容は理解できると思う。それぞれの紹介の後に僕が書いた記事も紹介するので読んでくれると嬉しい。

この記事を全部読んだ方は、もしかしたら僕のことを「必死すぎ!」と思うかもしれない。それについては反論の余地はなく、その通りだと思う。なぜここまで「バズる」や「ホッテントリ」を意識していたかについては次のブログで書こうと思っている。

GitHub Trending

まず有名なところでいくとGitHub Trendingというページがある。GitHubはネタの宝庫であり、これから紹介する全てのサイトが最終的にGitHubに帰着するといっても過言では無い。

github.com

GitHub Trendingは今日/今週/今月で人気のあったリポジトリがランキングになっている。ここで僕が効率よく情報収集する方法を紹介したい。

プログラミング言語PythonJavaScriptとTypeScriptを重点的に見る

これは「ブログにしたときに直感的に見せやすい」という理由が大きい。例えばPythonディープラーニング関連のリポジトリがたくさんあるので、実装したときに見た目のインパクトが出しやすいと思う。JavaScriptTypeScriptは実装しやすいし、AWS Amplify ConsoleGitHub Pagesなどでサンプルとして公開しやすい。両方とも「ぱっと見で興味を引かせるブログになるか?」を意識して情報収集している。

下のNever-Blinkというレポジトリは「まばたきしたら負けゲーム」なのだが、YouTubeのネタなんかにいいんじゃないかなと思っていた。

github.com

プログラミング言語以外にもUnknown languagesをチェックする

f:id:omuriceman:20190927213722p:plain

情報収集を行なっている時に気付いたのだが、Unknown languagesというどの言語にも属さないリポジトリも結構面白い。どんなものがあるかというと、ハンズオンチュートリアル/セキュリティチェックシート/データサイエンス系のチートシートなどである。

Advanced searchで直近の日付に絞り込む

Advanced searchについては情報の鮮度を意識している。話題になりそうな技術を隔週くらいでチェックしている。

f:id:omuriceman:20190927214159p:plain

上の例は日付とスター数を範囲指定している。スター数の範囲指定は埋もれている技術を効率的に探す目的で利用している。

github.com

GitHub Trendingを参考にしたブログ記事

GitHub Trendingから得た情報で書いたブログがこちら。この記事に関してはポジティブなフィードバックばかりで本当に嬉しかった。

omuriceman.hatenablog.com

Product Hunt

Product Huntは「世界中のプロダクトに投票できるサービス」で毎日面白いサービスが並んでいて見ていて楽しい。

このサイトも定期的に見るようにしていて、画像や動画があるので英語がわからなくても理解しやすく情報収集に向いていると思う。

www.producthunt.com

GitHub Trendingと違い公式のiPhone/Androidアプリがあるので、移動中や休憩中にチェックしては気になるプロダクトを自分宛のSlackになげてあとで振り返れるようにしている。

Product Huntを参考にしたブログ記事

Product Huntからの得た情報で書いたブログがこちら。

omuriceman.hatenablog.com

Reddit / Hacker News / Lobsters

他の方がRedditHacker Newsの情報を元に書いた記事がすごくバズっていて衝撃を受けた。それ以来Hacker Newsと競合のLobstersというサイトも合わせて定期的に情報収集を行なっている。

これらのサイトについては、色んな技術のごった煮感+英語が苦手なため個人的にサイトが見辛く感じるのでGoogle翻訳を必ず行う。アプリもあるのだが、翻訳が簡単にできないため頻繁には利用していない。

www.reddit.com

news.ycombinator.com

lobste.rs

Redditを参考にしたブログ記事

Redditの情報から書いたブログがこちら。

omuriceman.hatenablog.com

Best of JavaScript

Best of JavaScriptJavaScript界隈のOSS人気ランキングが載っていて、世間の注目度合いも測れるので情報収集に良いと思う。

bestofjs.org

POPULARというタブは総合人気ランキングなので代わり映えせず新しい情報も手に入れにくいので、僕はTRENDINGのTodayやThis Weekなどを重点的にチェックしている。

f:id:omuriceman:20190930133341p:plain

OS Awards

最近注目しているのが、こちらのOS Awardsというサイト。日本ではまだそんなに話題になっていないと思う。

osawards.com

GitNationという財団が運営しているサイトで、JavaScript / Vue.js / React.js / React Nativeに関連するOSSで人気になったものがノミネートされている。

情報が頻繁にアップデートされるサイトではないが人気(になりかけ)のOSSが掲載されているので探しやすいし、記事にしやすい技術なので見ていてとてもワクワクする。

IssueHunt

IssueHuntGitHubクラウドファンディングのようなもので、GitHubのIssueに対して投げ銭ができるようになっていて、そのIssueを解決したコントリビュータに対して報酬が支払われるというサービスである。

issuehunt.io

Issuesの方は情報収集としては見にくいので、Repositoriesを中心に見るようにしている。

f:id:omuriceman:20190930141229p:plain

YouTube

YouTubeの情報収集も行なっている。良く見ているチャンネルについては以前ブログで紹介をした。

omuriceman.hatenablog.com

最近面白かったのはhandtrack.jsを使ってエアギターをするという動画。

youtu.be

とてもくだらないのだが、こういった動画で映える技術を紹介できるのがYouTubeの面白いところであると思う。「見て面白い技術を紹介する」を目指しているので、YouTubeのフォーマットはとても参考になる。

Libraries.io

Libraries.ioは色んなプログラミング言語OSSを検索できる。特に便利だなと思うのが各パッケージのトレンドが見れるところ。

f:id:omuriceman:20190930192410p:plain

とても良いサイトだと思うのだが、如何せんサイトが重くて頻繁にタイムアウトになる。これがなければ、とても便利なサイトだと思う。

libraries.io

トレンドの「See more >>」をクリックしない限りはタイムアウトエラーもそんなに発生しないので、情報収集先の1つとしてオススメしたい。

情報収集のルーティンについて

これらを踏まえて僕はこんな感じのルーティンで情報収集を行なっている。

  1. 出勤時にProduct Hunt / Redditをアプリでチェック
  2. 出勤後にGitHub Trending / Best of JavaScript / Hacker Newsをチェック
  3. たまにLibraries.ioやOS Awards、IssueHuntをチェック
  4. 退勤時に疲れていなければ技術系のYouTubeをチェック
  5. 隔週くらいの頻度でGitHubのAdvanced searchを使って、注目されてなさそうなリポジトリや中国系のOSSをチェック

1~5の情報収集で気になった技術はSlackで自分宛に送信しておいて、時間のある時にChrome拡張などではてなブックマーク数を調査。自分なりの面白さを付け足して紹介できそうだなと思ったらブログにまとめるという感じの習慣にしている。

さいごに

よく言われることだが、これらを実践してもブログがバズるとは限らない。というか基本的にはバズらずにスルーされるのがほとんどだ。

だけどこの情報収集を習慣づけてからはコンスタントにブックマークをもらえるようになった気がするので、僕と同じようにもがいている人の参考になれば嬉しいなぁと思っている。

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

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

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

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

技術書典とは

技術書典とは、年に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階のサークルは辛い体験をしたと思います。僕も今回が初めての出典だとしたら、相当凹んでいたと思います。

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

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

さいごに

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

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

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

宣伝

他のメンバーも頑張って書いた「Developers Magazine Vol.2」興味のあるテーマが書いてあるなと思ったら是非購入してみてください。 devmaga.booth.pm

何問正解できる?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知っているかとても気になるので是非ダウンロードしてみてください!