はじめに
はじめまして。SmartNewsでソフトウェアエンジニアをしている @kei-teckura と申します。
現在はSmartNews内の広告システムの開発を中心に、ユーザーにとって心地よい広告体験を提供できるよう、日々試行錯誤しながら取り組んでいます。
背景
今回は、エンジニア向けのキュレーションサービスを作った話を紹介しようと思います。
皆さんは普段、どのように技術系の情報を収集していますか？
私自身は、昔からはてなブックマークの熱心なユーザーで、毎朝「テクノロジー」カテゴリを眺めながら話題のニュースに目を通すのが習慣になっていました。
それに加えて、X（旧Twitter）で流れてくる情報も日々のインプットとして非常に役立っていて、タイムラインを追うことで多くの発見がありました。
ただ、そういった情報源はどうしてもニュース寄りだったり、内容が堅めだったり、カテゴリ分けが曖昧だったりと、技術ブログ以外の勉強会やスライド、技術書など、もう少し多様な情報も含めて、ひとつの場所で手軽にチェックできたらいいのに、と感じることが多くなりました。
そこで、自分の理想を形にしたのが「teckura.com」です。
ブログ・動画・勉強会・スライド・技術書といった多様な情報を横断的にまとめてチェックできる、エンジニアのためのキュレーションサービスを目指して作りました。
このサービスでは、あえてニュース系コンテンツは扱っていません。
というのも、もっと個人や小規模な発信者――たとえば技術ブログを書いている人やスライドを公開している人、ローカルで開催されているような勉強会の情報など――そういった「まだ埋もれている良い情報」が自然と見つかるような仕組みを作りたいと思ったからです。
また、機械的なレコメンド機能はあえて入れず、Xのように新着順で次々と流れてくるコンテンツを、気軽にザッピングするような感覚で楽しめる設計にしています。
そのため、操作もなるべくシンプルに。セレクトボックスのような操作を極力排除して、ワンクリックで切り替えられるようなボタン中心のUIにしています。
さらに、取り扱うテーマも技術だけに限定せず、キャリアや資格、英語学習といった、エンジニアが関心を持ちやすい周辺情報も含めて収集しています。
サービス
特徴
- 技術やキャリアのブログ動画、スライド、勉強会をカテゴリごとに情報を自動分類して整理
- ランキングで「今日の注目」がすぐわかる
- 毎日数回自動更新、常に新しい情報を提供
- ユーザ登録不要ですぐに利用可能
プロセス
さて、ここからは実際にサービスを完成させるまでの道のりについても、少し詳しく紹介していこうと思います。
具体的には、大きく分けて「調査」「設計」「開発」「認知」の4つのステップに沿ってお話ししていきます。
調査
まずは「調査」フェーズです。
ある程度作りたいサービスのイメージが固まった段階で、他に似たようなキュレーションサービスがないかをリサーチし始めました。
具体的には、「Menthas」「NewsPicks」「POSTD」「daily.dev」「TECHFEED」「TECHPLAY」など、すでに存在する類似サービスを洗い出し、それぞれのUIやコンテンツへの導線、掲載されている内容、搭載されている機能などを細かくチェックしました。
そうした調査を通して、自分自身が「一番よいと思えるユーザー体験」とは何かを掘り下げながら、どんな形であれば使いたくなるのか、どんな情報があれば嬉しいのかを丁寧に考えました。
設計
調査を終えた後は、大まかにイメージしたUIや必要な機能をスプレッドシートに書き出し、それを実現するために、具体的な技術要素の検討と設計フェーズに移りました。
ここでは、どのクラウドサービスを使うか、どの言語やフレームワークを採用するか、さらに連携する外部APIやRSSの取得方法など、技術的な選定を行っています。
以下に、実際に今回のサービスで採用した技術と、その理由を簡単にまとめます。
クラウド
-
GCP（Google Cloud Platform）
YouTube APIを利用するためにGCPプロジェクトの作成が必要だったため、そのままGCPをベースに採用。 -
Cloud Run / Cloud Scheduler / Firestore
とにかく「スピードとコスト」を最重視。できるだけコストを抑えつつ、素早く立ち上げられる構成として選定しました。
言語・フレームワーク
-
バックエンド：Go
普段から使い慣れており、開発スピードを優先して選択。 -
フロントエンド：React / TypeScript
こちらも同様に経験があり、Next.jsをベースに効率的なUI開発が可能なため採用。
ホスティング
- Vercel
Next.jsやNextUIなど、Vercel製のプロダクトと相性がよく、GitHubとの連携、デプロイのしやすさ、パフォーマンス計測機能などを評価して採用。
連携API
-
YouTube Data API v3
動画コンテンツの取得に利用。 -
Connpass API / Doorkeeper API
勉強会・イベント情報の収集に活用。 -
OpenAI API
ブログ記事のカテゴリの分類に利用。
RSS
- Speaker Deck
- Note
- Qitta
- Zenn
- 有名企業のテックブログ
全体のアーキテクチャ
当初想定していたアーキテクチャは以下の通りです。現在は一部変更していますが大枠の構成は同じとなっています。（一部のコンポーネントがAWSのリソース名になっているのは当初はAWSで構築する予定だったため）
開発
開発はまずフロントエンドから着手し、その後にバックエンドAPIと接続していく流れで進めました。
- まずはモックレベルでフロントのUIを実装
- 次に、ブログ・スライド・動画などのコンテンツを定期的に取得するバッチ・クローラを実装し、FireStoreにデータを保存できるように
- フロント側からデータを取得するためのAPIを開発
- 実際のAPIをフロントから呼び出し、リアルなデータを使ってUIに反映
- 細かなバグ修正や機能追加を繰り返しながら、イテレーションを重ねてブラッシュアップ
また、開発の進行管理にはシンプルにスプレッドシートを使い、タスクやバグ、気づいた改善点などをリスト化していました。
思いついたことはその都度書き足していきながら、一人で黙々と対応を進めていく、そんな地道な作業の積み重ねでした。
以下が、実際に使っていたスプレッドシートの一部です。雰囲気が少しでも伝わればと思います。
そのほか、特に苦労したのが YouTube APIのQuota制限 でした。上限を引き上げるにはGoogleとのやりとりが必要で、申請から承認までに何ヶ月もかかってしまい、なかなか思うように進まず、もどかしい時間を過ごすこともありました。
また、「技術書」ページを作る際にも工夫が必要で、Amazonのランキング情報はスクレイピングが禁止されているため、手動で技術書のCSVを作成し、それをFirestoreに登録するスクリプトを用意するという、かなり泥臭いやり方をとる必要がありました。
認知
さて、ファーストリリースに向けた開発がひと段落したあとは、「どうやってこのサービスを多くの人に知ってもらうか」に力を入れるフェーズに移りました。
具体的には、まずX（旧Twitter）アカウントを開設し、定期的にランキングや注目記事を投稿。投稿文ひとつひとつにも工夫を凝らして、少しでも目に留まるように試行錯誤を重ねました。
さらに、複数のスライド共有サービスでサービス紹介を行ったほか、ブログやZennへの記事投稿など、あらゆる手段を使ってサービスの魅力を発信し続けました。
そのほかにも、Discordなどのコミュニティにも参加し、少しでも多くの人に届くよう、認知拡大に努めました。
最後に
最後まで読んでいただき、本当にありがとうございます。
今回は、エンジニア向けキュレーションサービス「teckura.com」の紹介と、そこに至るまでの開発の道のりをまとめてみました。
この記事をきっかけに、teckura.comがより多くの方に使ってもらえるようになれば嬉しいですし、同じように個人で開発をしている方や、これから始めようとしている方にとって、少しでも参考になる部分があれば、それだけでもとても嬉しく思います。
引き続き、改善や発信も続けていく予定ですので、もし気になった方がいれば、ぜひ覗いてみてもらえると嬉しいです！