React.js GCP Node.js

[React,Express] GoogleMapAPIとTwitterAPIで場所に紐づくツイートを探すアプリを作ってみた

どうも、シローです。

GoogleMapAPIでは「場所を入力すれば、緯度経度が取れる」

TwitterAPIでは「緯度経度があれば、周辺の投稿を取得できる」

(僕)「あれ?二つを組み合わせれば、場所を入力すればその周辺の投稿を取得できるんじゃね?w」

という誰でも思いつく素晴らしいことを思いついたので、ちょっとしたアプリを開発中です。

まだまだ、拡張予定ですが、とりあえずドヤしたい感が我慢できなかったので投稿しました。

デモ

本当はRadiusを変動して範囲指定をできるようにするつもりでした。

一見誰でも思いつくとは行っても、いざ行動に起こして作ろうとすると意外としんどかったです笑

構成

システムそのものは以下のような構成で動いてます。

当初はReact Appだけで動かせると思っていたのですが、nodeでTwitter APIを利用するモジュール(https://www.npmjs.com/package/twitter)がサーバサイドで動かすことを想定しているので、Expressをサーバとして立てて、React AppからサーバサイドのAPIを経由してTwitter APIにアクセスするようにしました。

React AppとExpressで公開しているポートが違うので、React Appに備わっているProxy MiddleWareで/api/**から始まるアクセスをhttp://localhost:5000/api/**に変換するようにしています。

ロジック解説

ソースの全部を載せるのはしんどいので、コアな部分だけ

  • GoogleMapAPIで場所名を緯度経度に変換する
  • TwitterAPIで緯度経度からツイートを取得する

を解説します。

検索ボタン押されたときの処理フロー

上の動画のように「Search」を押したときのフロートして

  1. 場所名から緯度経度に変換
  2. 緯度経度に紐づくツイートを取得

というふうになっています

GoogleMapAPIで場所名を緯度経度に変換

前回の記事(https://shiro-secret-base.com/?p=738)でも触れましたが、こちらのモジュール(https://www.npmjs.com/package/@react-google-maps/api)をインストールします。

で、実際に緯度経度に変換している部分はこちら

最終的に取得した緯度経度の情報をsetStateでステート更新してます。

この処理を実行した後で、次のツイート検索APIを実行します。

TwitterAPIで緯度経度からツイートを取得

geocodeLocationの実行が完了したら、ステートに緯度経度が保存されているのでそれをサーバAPIを介してツイートを取得します。

なので、フロントからサーバにAPIでアクセスする部分サーバからTwitter APIでツイートを取得してフロントに返す部分が必要になります。

フロントからサーバへのアクセスする部分はこちら、

緯度経度をクエリパラメータにして渡していますね、今回は範囲は500mで固定にしました。

サーバからTwiterAPIにアクセスする部分はこちら、

TwitterAPIに利用したモジュールはこちら(https://www.npmjs.com/package/twitter)

緯度経度を利用してツイートを取得できるTwitterのAPIのバージョンは1.1みたいでした。(新バージョンではない)

そして、リファレンスはこちら(https://developer.twitter.com/en/docs/twitter-api/v1/tweets/search/api-reference/get-search-tweets)

TwitterAPIの利用方法については省略します、デタラメなことを申請内容に書いても弾かれるので注意しましょう^^

APIが利用できれば、BearerTokenを発行し、.envTWITTER_BEARER_TOKENに設定します。

実行してフロントに返している結果はこんな感じになりました

後はフロントで上手く必要なデータを抽出して投稿を表示するだけです。

おしまい

 

-React.js, GCP, Node.js

© 2021 Shiro's secret base