Koto Tech NewsというITエンジニアの情報収集のためのニュースアプリを開発しました。
本稿ではIT情報のキャッチアップの選択肢としてKoto Tech Newsをご紹介します。
なぜ開発したのか
- Yahoo!ニュースが好き。ITニュース版が欲しい
- 新しいITニュースや技術の知識を仕入れたい、試したい、人と話すネタがほしい
- ITニュースを毎日チェックして、たまに関連する記事をたどってだらだら見たりしたい
- RSSリーダーはFeedの登録・更新が面倒
全ユーザーがそれぞれFeedを管理しているのが面倒に思う。サービス側で情報ソースを管理してほしい - 情報ソースをサービス側で管理するのであれば、RSSリーダーでは難しい機能も提供できそう
- 情報ソースごとに最適化した、本文抽出精度の高い記事リーダーモード
- 全情報ソースの記事から、興味のあるキーワードを持つ記事だけを表示
- 全情報ソースの記事から、今読んでいる記事に関連する記事の一覧を表示
- 生成AIで記事のピックアップや要約をしてほしい
Koto Tech Newsとは
ITエンジニアのためのニュースアプリです。
120を超える情報ソースの最新IT情報を、快適にキャッチアップできるようになっています。
日々のIT情報収集をしたい方、他の情報収集ツールに不満のある方は、一度ご利用してみてください。
主な画面
ニュース記事の一覧
ニュース記事の一覧では、記事をクリックするか、一覧をスクロールすると自動的に既読になります。
記事リーダー
情報ソースごとに表示が最適化された没入感の高い記事リーダーです。
AIによる記事の要約
記事の一覧や記事リーダーでは要約を表示でき、時短でキャッチアップできます。
モバイルでのニュース記事一覧と記事リーダー
スマホやタブレットではモバイルに最適化された表示になります。
関心事 (興味のあるキーワード) の一覧
関心事をクリックするとキーワードを含んだ記事の一覧が表示されます。興味のある記事だけをすばやくピックアップできます。
記事のランキング
注目度の高い記事のランキングを表示します。
利用技術
利用した技術について説明します。
インフラ技術
Koto Tech Newsは、主に以下のインフラ技術を使っています。
AWSをメインにして必要に応じて外部サービスと連携しています。AWSをメインにしたのは、使い慣れていることと、CDKを使ってTypeScriptでIaCできるのが快適だからです。
| カテゴリ | 技術 |
|---|---|
| フロント | Amazon Route 53、CloudFront、WAF、ALB |
| アプリ | Amazon ECS、EC2、ECR |
| ストレージ | Amazon RDS for PostgreSQL、S3、S3 Vectors、Redis |
| 外部サービス | Gemini、OpenAI、Stripe |
| 監視 | Amazon CloudWatch、SNS、Slack |
| CI/CD | GitHub Actions、CircleCI |
ECS/ECRを使ってEC2上にKoto Tech Newsアプリのコンテナをデプロイしています。FargateではなくEc2を使っているのは、EC2は無料枠を使うためです。
ストレージはメインのデータはPostgreSQL、大きめの文字列のキャッシュはS3、記事のembeddingはS3 Vectors、クエリ結果などのキャッシュはRedisに格納しています。
Gemini、OpenAIは記事の要約・ピックアップやキーワード抽出やembeddingの取得に使っています。Stripeは決済用です。
アプリが出力したログはCloudWatchに収集され、エラーログ出力時などにはSNSを経由してSlackに通知されます。
コードはすべてGitHubリポジトリにモノレポで格納しています。アプリのAMD64コンテナイメージはGitHub Actions、ARM64コンテナイメージはCircleCIを使って無料枠でビルド&デプロイしています。
開発技術
Koto Tech Newsは、主に以下の開発技術を使っています。
TypeScriptを中心に据えて選んでいます。KotlinとSpringが好きな人だったのですが、TypeScriptだけでいろんなことをやってしまいたいと思って、TypeScriptを選びました。React Router、Drizzle ORM、AWS CDKを使ってできるだけTypeScriptで書けるようにしています。
| カテゴリ | 技術 |
|---|---|
| 基本 | TypeScript、pnpm、WebStorm、JetBrains AI Assistant、Gemini CLI、 biome、tsdown、vite、vitest |
| フルスタック | React Router (Framework mode) |
| フロントエンド | shadcn、tailwindcss、Zustand、Confirm、zod、 react-intersection-observer、short-uuid |
| バックエンド | Inversify、Drizzle ORM、keyv、pino、zod、p-limit、async-retry、 AWS SDK、Google Gen AI SDK、OpenAI APIライブラリ、Stripe SDK |
| IaC | AWS CDK (TypeScript) |
| CI/CD | GitHub、GitHub Actions、CircleCI、Docker |
JetBrainsのIDEが好きなのでWebStormです。Visual Studio Codeはメモ帳代わりに使っていますが、設定が大変なので開発ではあまり使っていません。生成AIにはJetBrains AI Assistantを主に使っていて、たまにGeminiやGemini CLIも使っています。
ビルドはtsdownとviteを使っています。バッチアプリやライブラリは手軽なtsdown、WebアプリはReact Router標準のviteを使っています。
フルスタックフレームワークにはReact Routerを使っています。小さく作るためにフロントエンドとバックエンドを物理的に分けるのは避けて、フルスタックなものを選びました。loader、action、componentで作っていくのが理解しやすくて快適に作れています。Next.jsは追いかけるのが面倒だったので除外しました。
バックエンド部分は全体的にInversifyでコンストラクタインジェクションさせる設計にしてます。テストでmockしやすいようにです。use-case、query、service、repositoryなどをDIで組み立てる形にしています。
DBへの接続にはDrizzle ORMを使っています。スキーマ定義もクエリも、すべてTypeScriptで記述できる夢のようなライブラリです。性能もよいです。Kotlin + Springを使っていた人間としては、ただのobjectではなくclassのインスタンスにマッピングされてほしいですが。
IaCにAWS CDK (TypeScript)を使っています。TypeScriptでIaCできて夢のようです。
特徴
日々のキャッチアップを支援
最新のニュース・記事の一覧を様々な観点で表示できます。
- ピックアップニュース
最新のニュースから重要度の高いものをピックアップして表示します - 関心事
最新のニュース・記事から自分が関心を持つキーワードを含む記事だけを表示します。新着の確認もできます - ランキング
最新のニュース・記事から注目度の高い記事のランキングを表示します - カテゴリ
最新のニュース・記事をカテゴリごとに表示します - あとで読む
あとで読むためにマークしておいた記事の一覧を表示します - タグ
タグをつけておいた記事の一覧を表示します
ゼロコンフィグ
サインインした直後からゼロコンフィグで最新のニュース・記事のキャッチアップを始められます。使い始める前に面倒な設定や登録作業をする必要はありません。
- 120を超える情報ソースの記事を収集
120を超える幅広い情報ソースの記事を、設定なしでキャッチアップできます。
どこでも読める
PCでもMacでもLinuxでもスマホでもタブレットでも、ブラウザさえあればどこでもニュース・記事を読めます。車移動中にスマホでめぼしい記事を見つけて、自宅や職場でじっくり読むという使い分けできます。
- クラウド管理された既読状況・ブックマーク・タグ
既読状況やブックマーク・タグなどはクラウドで管理されているので、作業を中断後、どの端末でも作業を続けられます - レスポンシブルデザイン
PCでもスマホでもタブレットでも快適に読めます
快適な閲覧体験
快適なニュース記事の閲覧体験を提供します。
- サイトごとに最適化された本文抽出機能を備えた、没入感の高い記事リーダー
記事本文に関係のない広告や画像などを取り除いて、快適に記事を読むことができます。サイトごとに本文抽出処理を最適化しているため、ブラウザやRSSリーダーのリーダー機能よりも高品質な本文が表示されます - ダークモード
ダークモードに対応。黒色を基調とした表示でニュース記事を閲覧できます
AIによる要約で時短
記事を要約して表示できます。長い記事を読むときの補助にしたり、溜まりがちな「あとで読む」の記事をポイントだけ把握したりできます。
関連記事で深堀り
関連する記事を一覧表示できます。興味を持った記事と似た主題の記事をさがして、さらにキャッチアップを進めることができます。
類似アプリ・サービスとの比較
他のニュースアプリとの比較
Koto Tech Newsは、
- IT関係のニュース記事だけを対象とします。それ以外のニュース記事は対象としません
まとめサイトとの比較
Koto Tech Newsは、
- 既読や「あとで読む」などの閲覧状況がクラウドで管理されるので、
PCでもスマホでも、家でも職場でも、同じ閲覧状況を共有できます - 関心事機能で自分が興味のある記事だけをピックアップ表示できます
RSSリーダーとの比較
Koto Tech Newsは、
- 設定・登録作業なしで120を超える情報ソースの最新記事をキャッチアップできます
- 情報ソースごとに最適化した、本文抽出精度の高いリーダーモードで記事を読めます
- 現在読んでいる記事と関連する記事を一覧表示できます
- 関心を持つキーワードを含む記事だけを新着確認・一覧表示できます
- 注目度の高い記事のランキングを見られます
おわりに
ここまで読んでいただいてありがとうございました！
Koto Tech Newsは無料でご利用できますので、ぜひ使ってみてください。