【2021年】Twitter APIを利用したスマホアプリの作成に参考になったサイトたち【React Native + Expo】

5 minute read

スポンサーリンク

最近、自分が所属する学生向けにスマホアプリを作成しました。構成としてはTwitter API, Google Cloud Platform, Google Spreadsheet API, React Native, Expoです。

周りにReact Native, Expoについて明るい方がいないので完全に独学になりました。が、その分2021年現在でも問題なく参考になるサイトを把握できたのと、お気に入りバーが狭くなってきたので自分の備忘録がてらシェアしときます。

※ もちろん、ここで紹介したサイト以外にも参考になるページは色々あると思います。

Twitter APIについて

今回作成したアプリではTwitter APIとしてuser_timelineAPIとoEmbedAPIを用いました。それぞれ下記リンクの通りです。

通常、Twitter APIを利用してツイートを外部のアプリケーションで表示する際にはTwitterの埋め込み機能が推奨されています(おまけにTwitterの利用規約なども全て満たせています)。これはwebアプリケーションなどではそのままhtmlのタグを読み込むだけなので簡単に実装できます。

しかしながら、スマホアプリ、しかもReact Native+ Expoだと、ツイートの埋め込みは少々面倒な手順となります。特に、Flatlist内にhtmlタグを埋め込むにはサードパーティのライブラリをがっつり導入することになったり、そもそもExpoのmanaged flowでは実装できない可能性が高いです(私には実装方法が分からなかった)。

そこで、htmlタグでの埋め込みを回避し、Twitterの利用規約や「外部アプリでツイートを表示する際に必ず守らなければならないデザインの要綱」を全て満たし、React NativeのViewやTextタグにスタイルを付けて実装しました。

ツイートを外部アプリで表示するためには下記の5~7番目などのTwitterの規約を守る必要があります。なかなか細かく決まっていますが根気よく読んで、違反箇所が無いように気を付けるしかかないと思われます。

  1. GET statuses/user_timeline - ユーザータイムラインを取得する
  2. 140文字以上のツイートを取得する - Qiita
  3. Twitter APIのユーザータイムライン(GET statuses/user_timeline)をデータベースに切れ目なく保存する(その4~since_idとmax_idの組み合わせについて) – エコテキブログ
  4. TwitterAPI でツイートを大量に取得。サーバー側エラーも考慮(pythonで) | コード7区
  5. Display requirements – Twitter Developers | Twitter Developer
  6. More on restricted use cases – Twitter Developers | Twitter Developer
  7. 開発者契約 − Twitter開発者 | Twitter Developer

React Native - Flatlist関連

先ほど話したFlatlistですが、いくつかオプションを付けることが可能です。Flatlistの使い方などを詳しく説明しているページで、なおかつ2021年でも問題なく使えるものは以下の通りでした。

  1. React Native Official Menu about Flatlist
  2. React Native リストの一番上の更に上までスクロールしたら最新のリストをロードする - Qiita
  3. 【ReactNative】FlatListの基本の使い方 - PUROGU LADESU
  4. javascript - React-Native nested Flatlist - Stack Overflow
  5. 【ReactNative】FlatListの検索バー - PUROGU LADESU
  6. How to Add a Search Bar in a FlatList in React Native Apps

React Native - AsyncStorage関連

Twitter APIを実行してFetchしてきたデータの管理にはAsyncStorageを利用しています。また、データの書き込み、呼び出し、代入はuseStateuseEffectと切っても離せない関係にあると思います。

これらの使い方は下記リンクを参照しました。

  1. リロードしてもデータを保持するためには「localStorage」 - Qiita
  2. FileSystem - Expo Documentation
  3. AsyncStorage official Menu
  4. AsyncStorage - Expo Documentation
  5. TypeScriptでReact Hooksに入門するチュートリアル - Qiita
  6. React useEffectを理解する | アールエフェクト
  7. CodeVsColor text input clear button
  8. React Nativeで遊んでみよう - 其ノ弐:react native storage でデータを保存 - Photosynthesic blog

React Native - View関連

React Nativeでというよりもアプリケーション全般に関して、アプリのデザインからは逃れられないですね。ひとまず参考になったサイトは以下の通りです。

  1. SafeAreaView - Expo Documentation
  2. GitHub - react-native-webview/react-native-webview: React Native Cross-Platform WebView
  3. レイアウトを整える【これからはじめるReact Native】 - bagelee(ベーグリー)

まとめ

現在進行形でワイ史上初のスマホアプリのアップデートも行っています。

なのでこのページのリンクもアプリのアップデート共に増えていくと思います。乞うご期待(白目)

スポンサーリンク