blog.morishin.me

「買ってよかったもの」というサイトをリリースした

「買ってよかったもの」という Web サイトをリリースした。リリースしたのは昨年のクリスマスイブだったけど、リリース記事を書きそびれてた。

https://twitter.com/morishin127/status/944830650195910656

作ってから少し経ってしまったけど、覚えてるうちに作った経緯とか開発の流れとかリリース後の反応とかを書いておく。

経緯#

自分が買ってよかったものを人に紹介したいと思うことが時々あって、ツイートしたり喋ったりしてたけど、そういう情報が集まる場所があれば良いかもと思ったのがきっかけ。年末になると「20XX年買ってよかったものまとめ」みたいなブログ記事がたくさん見られるから、紹介したい or 見たいニーズがありそうで、場があればブログ持ってない人も気軽に書けたり、情報が一箇所に集まることで見る人もより多くの人のおすすめを見られて良さそうと思った。

アイデアはぼんやりとあったものの作るタイミングが無くて温めていたのだけど、年末にクックパッドが 2017 Lifestyle Product Award by Cookpad というのを開催していたため、よっしゃこれに出すぞと思い11月から休日にちょこちょこと開発を進めて、クリスマスにリリースした。僕自身クックパッド社員なので、事前に「社員ですが応募していいですか」と聞いたところ、社員に賞を出すというのはできないかもだけど応募するのは問題無いとのことだったので応募した。本当は賞金狙いたかったけど、単純に自分の作ったサービスを見てもらってフィードバックがもらえるというのは嬉しいからまあええかと思って出した。

開発の流れ#

サービスの設計#

サービスを作るにあたって、使ってもらうユーザー、そのユーザーの持つ欲求、サービスが提供する価値を設定した。こういうのを明文化するときに、クックパッドが社内で使っている EOGS というフレームワークが便利なのでその形式で書いた。EOGS に関してはこの記事 (http://techlife.cookpad.com/entry/2015/06/01/135804) でちょっと触れられている。

「買ってよかったもの」のコンセプトを EOGS 形式で書くとこんな感じになった。ユーザーは投稿する人と見る人に分けて、それぞれの欲求と提供できる価値を設定した。こうやって明文化しておくと仕様を考えるときや改善するときに方向性を見失わなくて便利。チームで開発するときの認識合わせにも良い。今回はぼっち開発だけど。

仕様決定#

先述のコンセプトを踏まえてどんなカタチのサービスにしようかなというのを考えながら、必要そうな要素をダーッと書き出したメモはこんなのだった。

- 買ってよかった投稿サービス
    - 買ってよかったブログがたくさんある
    - ブログを書く人を楽に、読む人を増やす
- ログイン
    - Twitter
    - ユーザーID, ユーザー名
- 買ってよかったものを登録
    - 商品名, 商品画像, リンク, コメント
    - 投稿日
- 商品名で Amazon 検索 -> Amazon リンク
- Amazon に無いものはフリーテキストと画像とURLで登録できるようにする?
- Amazon リンクはアフィリエイトリンク
    - ユーザーが自分でアフィリエイトID?を設定できるようにする
    - 未設定の場合は僕のアフィリエイトIDが入るようにする
- 登録したものはユーザーページで一覧できる
    - https://xxxxxxx/users/morishin127
- リンククリック数が見えたら面白そう (ニコニコ市場みたいな)
- 友達一覧
    - Twitter のフォローと同期
- この商品はこの人も買ってよかったと言っています
- キーワード検索
- 画像はストレージ用意するの大変だからAmazonの画像リンクだけをDBに保存するのがいいかも

----

- トップページ
- ユーザーページ / マイページ
- アイテム詳細
- アイテム追加ページ
    - 検索窓 / 検索結果 / コメント編集

友達一覧とか、結局作らなかった機能もあるけどおよそメモ通りに作った。メモを元に実装タスクを issue に書き出して、休日か平日の夜中の開発時間が取れた時に順番に倒していった。

実装#

構成はふつうの Rails アプリ。トップ画面のページングや商品追加の検索画面など、ユーザー体験的に JavaScript での実装が必要だったので初めて Vue.js を使ってみたりした。

Rails 5 を使ったのも初めてだったけど webpack とかサポートしてて色々楽で良かった。自分で追加して使った Gem はこんな感じだった。

⋮
gem 'omniauth'
gem 'omniauth-twitter'
gem 'hamlit'
gem 'hamlit-rails'
gem 'rapa'
gem 'font-awesome-sass'
gem 'webpacker'
gem 'materialize-sass'
gem 'retryable'
gem 'google-analytics-rails'
gem 'rails_autolink'
gem 'meta-tags'
gem 'kaminari'
gem "typhoeus"

サーバーやデプロイ手段はどうしようかな、やっぱり Docker 使うかな、クラウドサービスは GCP かな AWS かなとか考えてたけど、同僚に相談した結果 Heroku にドーンが安いし楽だし最高のようだったので Heroku にした。結果ぎりぎり無料枠に収まってるし、デプロイが git push するだけでとにかく楽で最高だった。無料枠に収まらなくなっても普通に課金しそう。

UI 実装は Materialize というフレームワークを利用した。最初は CSS も全部自分で書くぞという気持ちだったけど2秒で諦めてフレームワーク導入した。ボタンやらカードやら色んなコンポーネントをそのまま使えて便利だった。特に Toast が便利で感動した。こういうのは PC とスマホ両対応で自分で作るの大変そう。

実装でめっちゃ困ったのは新規投稿時の Amazon の商品検索で使っている Product Advertising API で、この API、開発中で自分しか叩いていなくても3回に1回ぐらいエラーが返ってきてめっちゃつらい。サーバーアプリケーション側でリトライ機構を入れているもののやはり5回に1回ぐらいエラーが返ってきてしまう。元々 API 制限がちょっとキツめのはずだけどそれにしてもエラー出過ぎでつらい。結局改善できなくて今でもエラー祭り。

リリース後#

反応#

クリスマスにリリースしてツイートをすると、知り合いを中心にリツイートしてくれたり、使ってくれてまとめをシェアしてくれたりした。リリースしてすぐ反応が見られるのは嬉しかった。

リリース直後の反応ツイートをまとめたもの↓ (大半がフォロワーさん・知人ですね、ありがとうございます🙏💦)

利用状況#

リリース日翌日がアクセスのピークでそれ以降は全然だった。

ユーザーは登録した商品に自分のアフィリエイトリンクを貼ることができるんだけど、ユーザーによる設定が無い商品には僕のアフィリエイトリンクが設定されるようになっていて、それが収益になっている。アフィリエイト収益は結構渋くてこんな感じ。これまでの累計でも2万円も無いぐらい。PV 数の割には高いのかな、相場が分からないけど。

おわりに#

投稿という面では年末に使われるサービスっぽいので、年末に向けて改善と宣伝をしていきたいところ。良質な情報を集めて良質な生活がしたいのでみなさんのご利用をお待ちしております。