最新の技術書に出会えるサイトを自己最速でリリースした


## 自己最速が遅すぎる

つい先日リリースしたBranew という最新の技術書に出会えるサイト。
こんなもの作ろうかな、と思ってから2週間でリリースしました。

https://branew.dev

2週間でオンライン会議ツールのようなもの* をつくってしまう方がいるくらいなので
ぶっちゃけこんなただの１枚もののサイトを2週間なんて遅すぎるわけですが、
がっつりフルタイムで働きつつ、土日も全部は突っ込めない状況で
我ながらよくやったなと思ったので、どう  ~~頑張ったか~~ 実現したかをまとめたいと思います。



以下、僕が密かに憧れている freeriderこと山田俊輔さんの note より。
> そして、最初の一行を書き始めたのが、今年の1月12日です。約2週間後に、LAで開催されるProduct Huntの5周年パーティーに参加する予定があったので、どうせならそれまでに完成させよう、Rayan Hooverにピッチしよう、と寝る間も惜しまず書き続きました。

[元無職がシリコンバレーで起業する](https://note.com/svfreerider/n/n72fdac75759b)
*記事内の、Remotehourのことです。


## 自己最速（？）の意図せぬはじまり

2023年12月12日
前日に意気揚々と決めた最重要タスクが、いとも簡単にぶち壊されました。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">つい数日前に、<br>1月末までは英語の勉強を最重要タスクする<br>と決めたのですが…<br><br>久しぶりに個人開発で作りたいものがでてきまして<br>時間ねぇなとなっています…<br><br>どうする…</p>&mdash; マーティ | サーバーサイドエンジニア (@marty_ojiya) <a href="https://twitter.com/marty_ojiya/status/1734526228663853435?ref_src=twsrc%5Etfw">December 12, 2023</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


なぜこんなことが起きたのでしょうか？

## Amazonアソシエイトに登録した

[Branew](https://branew.dev) を訪れていただいた方はお分かりかと思いますが、記事カードは全てAmazonにリンクしています。

はい、そうです。アソシエイトリンクです。

審査が厳しいらしいな〜ということくらいしか知らず、まあ申し込んでみるかと思って
ポチポチ進んでいくと、アソシエイトリンクを作成できるようになりました。

そしてようやく審査の内容を知るのです。

> サインアップ後、一定の適格販売が発生すると、アソシエイト・チームがあなたの申請を確認します (サインアップから 180 日以内に 3 回以上の適格販売の発生が必要です)。


[申請の審査プロセスについて](https://affiliate.amazon.co.jp/help/node/topic/G8TW5AE9XL2VX9VM)


もちろん、審査に通るような媒体を持ち合わせていなかったので、
最初はXに商品紹介をポストするという悪あがきをしていました。


## 誰でも思いつく案、爆誕

そんな期待値 0 の悪あがきをしていく中で、ふと誰でも思いつくであろう「最新技術書のキュレーション」という案が浮かびました。

さっと調べた限りでは
技術書に特化しているものはなさそうだと判断して
何となくどう作るかを考えました。

後述する方法なら爆速でリリースできそう、と思い 2023年12月12日のポストに至ります。

## 自己最速（？）をどう実現したのか

やったことは7つあります。
1. 知っている技術を使う
1. Generative AI を使う
1. 機能を削る
1. 機能を削る
1. 極限まで機能を削る
1. 極限まで機能を削る
1. 極限まで（略）

### 知っている技術を使う

フロントエンドは Next.js、バックエンドは Django を使っています。

いつも使っているDocker Composeがあり、コマンドをいくつか打てばすぐに開発をスタートできます。

Django は大規模はアプリケーションも開発できる
Pythonのオールインワンフレームワークですが

実は今回、コマンドとテストしか作成していません。（爆笑）

それほどまでに ~~面倒だった~~ 時間が惜しかったのです。

### Generative AI を使う

2年ほど前は、ばりばりフロントエンドも書いていたのですが
現職ではほとんど書いておらず、とてつもなく忘れてしまったのと
Next.jsが進化しまくっていたので、いろいろ手伝ってもらいました。

特に、本の一覧を表示するコンポーネントを、スタイルの指示だけ出しつつ
ほぼコード書かずに作ってもらって、AI使いこなしてる気分になりました。

### 機能を削る * 5

[Branew](https://branew.dev) に訪れていただいた方はわかるかもしれませんが
最初に表示されるページが、このサイトの唯一のページです。

そのため

- 出版社別に閲覧する
- 技術別に閲覧する
- 検索する
- 本の詳細を表示する
- レビューを表示する

といった、キュレーションサイトならできそうな、あらゆることができません。

必要最小限の商品とはよく言われることですが、
~~つくるの面倒だったので~~ 今回はそれをとても意識しました。


## 自己最速（？）の裏話

少々自虐的に書きましたが、いろいろ考えていることもあったりします。

### Django を採用した裏の理由

もちろん自分が使いやすいだったり、環境構築が秒、というのはその通りです。

もう1つの理由として、将来的にはどこかにデプロイして
Product Advertising API を使って手作業をゼロにしたい、というのがあります。

使えないのですよ、審査通ってないと…

> アソシエイト・プログラムの審査に合格した後に、Product Advertising APIのページにてアクセスキーを取得してPA-APIの利用を開始してください。

https://affiliate.amazon.co.jp/help/node/topic/GVJ2BJP35457CLML

だから今は全部手作業でリンク取得したりしてるんですよ…。
洒落にならんですよ、まじで…。

### 爆速表示の実現

バックエンドをどこにもデプロイしていないので、データストアも存在しなければAPIもありません。
今は、フロントエンド側でJSONファイルを持っていて、そこからデータを呼び出しています。

更にフロントエンドはサーバーサイドレンダリングなので、爆速表示を実現しています。
（前はパフォーマンスも90超えてたんです、本当です。信じてください。）
![Screenshot 2023-12-25 at 21.27.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/560551/f62ae1c1-28fe-f7ca-3a0b-4ffca7a846eb.png)

### 機能を削りに削ってRSSフィードは削らなかった理由

もうここまで読んでいただいた方はご認識の通り
[Branew](https://branew.dev)にはサイトなのに SEO という概念が皆無な状態でリリースされています。

こんなサイトは、リリースしたときがピーク。
その後は誰にも見つけられず、常時アクセス 0 の植物状態。

そんな未来が
鮮明に見えています。

そこで、RSSフィードを用意しました。
https://branew.dev/feed

直接サイトを訪れなくても、お好みのRSSリーダーやSlackなどに
酔っぱらってでも登録してもらえたら
その後はほぼ毎日、そのユーザーとは接点を持つことができます。


## 今後のアップデート

- 出版社別に閲覧する
- 技術別に閲覧する
- 検索する
- 本の詳細を表示する
- レビューを表示する

こんなのはやっていきたいなあと思っています。
そしてゆくゆくは、ガジェットとか、本以外のものも取り扱えたらななんて。

しかし、そんな話は全てアソシエイトの審査通ってから！！！
審査通らなきゃお話になりません。

ここまで記事を読んでくださってありがとうございます！
その勢いで、サイト訪れて、ポチポチっと何冊かお願いします！

・・・。

そんな冗談はさておき、
サイトをつくりながら「こんな本あるんだ〜」となったのは本当です。
きっと好奇心をくすぐられる、新しい本に出会えると思うので、ぜひ覗いてみてください。


https://branew.dev


## アソシエイトの審査通りました！ 2023/12/29 更新

おかげさまで、リリース2日目でAmazonアソシエイトの審査通りました。
素晴らしい書籍と出版社とAmazonに敬意を持ってアップデートしていきます。
今後ともよろしくお願いします。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">お陰様でリリースから2日目で<br>アソシエイトの審査通ってました〜っ<br><br>素晴らしい書籍と出版社に敬意を持って<br>激しょぼなサイトを<br>アップデートしていきます！ <a href="https://t.co/XsykR4bD03">https://t.co/XsykR4bD03</a></p>&mdash; マーティ | サーバーサイドエンジニア (@marty_ojiya) <a href="https://twitter.com/marty_ojiya/status/1740149058457747493?ref_src=twsrc%5Etfw">December 27, 2023</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

## リリース時の反省 2023/12/29 更新

何かしらサイトやサービスを開発される方は、
GA4やGoogle Tag Managerの設定をされていると思います。

僕も漏れなくそうしており、
以下は今後の改善に活かせるため
クリックイベントを取得する設定をし
プレビューでしっかり確認までしていました。
- 特にどの商品がクリックされたか
- RSS feedリンクコピーはされているか

しかしその設定を「公開」しそびれていて
リリースから4日ほどずっとイベントを取得できていませんでした（泣）

みなさまも何かリリースされる際はGTMをしっかり公開してあげてください…

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">何でクリックイベント取れないんだろうと思ってたら<br>GTMの設定、公開し忘れてた…<br><br>リリースから4日分くらい<br>データとれてないのまじで悔しい…</p>&mdash; マーティ | サーバーサイドエンジニア (@marty_ojiya) <a href="https://twitter.com/marty_ojiya/status/1740507177675272579?ref_src=twsrc%5Etfw">December 28, 2023</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>