初めての個人開発でTwitterで自分と似たようなアカウントを探すWebサービスを作ってみた #C#

Webサービスの概要

以下のアプリを個人開発で作成しました。
https://focused-cori-f5cacd.netlify.app/

利用方法は簡単で、テキストボックスにあなたの先頭の@を除いたスクリーン名を入力してください。
10数秒待つと（Azure Functionsの一番安いプランのためです。ご承知おきください。）、検索ワードと関連づいたユーザー一覧が表示されます。

検索されたユーザーには、アカウント名と検索ワードで一致したツイートが表示されます。
検索されたユーザーをクリックすると、そのユーザーのタイムラインが右側に表示されます。
気に入った方がいらっしゃれば上のフォローボタンからフォローすることもできます。

以下に、 sony_jpn さんのアカウントで検索し、ソニーストア名古屋さんをクリックした際の例を示します。

sony_jpn さんでは"ブラビア"と"キャンペーン"という語句でツイートが多くなされているようでした。
（なお、形態素解析ライブラリが日本語向けのため、上手く解析できないと変な検索結果が出力されます。ご承知おきください。）

利用した技術

上記を作る上での技術要素を整理すると、全体観としては以下の通りとなります。

ソースコードはGitHubで管理します。
- netlify, Azure Functionsではリポジトリと紐付けられ、ソースコードの変更(pushされる)ごとに自動でデプロイされるようにしています。
- 私の場合はnetlify向け(フロントエンド)のリポジトリとAzureFunctions向け(バックエンド)のリポジトリの２つを用意しました。
フロントエンドを実現する際には、静的ホスティングサービスとしてnetlifyを利用しました。
- Webページを配置しますので、HTML, CSS, JavaScriptを使います。JavascriptライブラリとしてはReactを利用しました。
- ユーザーから入力を受けるとAPIリクエストをAzure Functionsに送り、ユーザー一覧を受け取ります。
バックエンドを実現する際には、サーバーレスコンピューティングサービスであるAzure Functionsを利用しました。
- Azure Functionsに用意したAPIが実行されるとTwitterにAPIリクエストを送り、必要な情報を取得します。
- Twitterの情報の取得に便利なライブラリ(CoreTweet)、Tweetの内容を形態素解析するためのライブラリ(MeCab.DotNet)を利用しました。

技術要素の採用理由にあまり深い意図はなく、紹介があったり、自分の使える技術と親和性があったりして使いやすそうだったからぐらいです。

アプリを作る上でのお役立ちURL

アプリを作る上でのチュートリアル記事が多めです。記事の通りに進めていけば、上図のライブラリ利用部分以外は大体実現できると思います。
わかりやすい記事が多く、大変助かりました。

netlify
- https://crieit.net/posts/Web-1
  - 上記の記事の[React+Netlifyで最小のアプリを作る]リンクが参考になります。
  - GitHubと連携するところまで親切に教えてくれます。
Azure Functions
- https://www.fenet.jp/dotnet/column/tool/1824/
  - Azure FunctionsでHello Worldするところまでできます。
  - Visual Studioを利用すれば、かなり簡単に実現できます。
- https://qiita.com/maaya8585/items/29301c4f14f34ea6928f
  - フロントエンドからAzure FunctionsにAPIリクエストを送るにはCORSの設定が必要です。
Twitter
- https://qiita.com/mngreen/items/5a05bd4fc5bbb6567b71
- TwitterのAPIを利用できるようになるまでと、そのTwitterのAPIを簡単に扱えるようにするライブラリを使えるようになるところまでを紹介しています。

まとめ

初めて利用する技術を調べながらではありましたが、個人開発でもそれなりに形にすることができました。
外部APIを利用したり、既にあるライブラリを利用したりすることで自分で自作すると大変そうなところも、割と簡単につくれます。
本記事がなにかWebサービスを作ろうと思った際に参考になると幸いです。