shotaide / tweettheater Goto Github PK

View Code? Open in Web Editor NEW

0.0 0.0 0.0 528 KB

Twitterに投稿された動画をクリック無しに自動再生していくWebアプリ

Home Page: https://tweet-theater.web.app/

Python 26.29% HTML 1.90% CSS 1.09% TypeScript 70.72%

tweettheater's Issues

自動デプロイ用の環境変数の更新

以下を追加する

REACT_APP_SITE_TITLE
REACT_APP_SEARCH_TEXT

スマホ対応

スマホ用のレイアウトを作ることで、スマホでも利用可能にする

ブラウザーの設定で自動再生をオフにできないか
PC版のレイアウトが崩れてしまった
PC版でツイート一覧ボタンは非表示にする
ロゴの高さが揃っていない
ロゴを白黒に変更
Pixel4でタイトルが折り返してしまう
ツイート一覧で一番上までスクロールできるようにしたい
ツイート一覧で右スクロールできる
全画面に表示されるのを防ぐ

メモ

スマホ・タブレット縦では2画面構成にする
- 動画再生画面、ツイートリスト画面
- 戻るためのナビゲーションボタンが必要
- 2画面にした際もツイートリスト画面で動画再生が途切れないようにする

ツイートが削除されると再生が停止してしまう

検索一覧取得時には存在していたツイートが自動再生時に削除されていると、そのツイートに選択が当たった際に自動再生が止まってしまう

サインイン画面の説明を拡充する

開発環境で確認
本番環境のOptimizeを開始
本番環境を準備
本番環境のシークレットを追加
検索結果の取得以外に利用しないことを明記し、使う際の心理的ハードルを下げる
Optimizeが無効になった際の処理

検索一覧の結果の見直し

Twitterに直接動画を投稿しているツイートも取得できていない気がするので、取得APIの生成を見直し、取得できるようにしたい

自分のツイートはいいねしない

非公開のいいね機能に関して、自分のツイートはいいねしないように修正する

CORS設定を狭める

現状全てのオリジンからのアクセスを許可しているので、必要最小限に狭める

1回のリクエストで取得できなかった情報をロードする機能を追加

無限スクロール、またはページネーション機能を追加し、少し前に投稿されたツイートも確認できるようにする

投稿順に並び替える機能を追加する

以下でもらった要望
https://twitter.com/Antigua_jobim/status/1305332914146533377

以下のような選択肢を作り、操作を簡単にする

1日前の21時以降の投稿を表示する

サインイン前の説明のA/Bテストを終了し、デフォルト固定とする

テストの結果、デフォルトの説明が一番コンバージョン率が高いので、デフォルト固定に戻す

A/Bテストセッションがサインイン済みのユーザーに対しても開始されてしまう

サインインしていない状態でのみテストセッションを開始し、セッション数の母数が正しい値になるように修正する

スマホ用にマニフェストファイルを用意する

スマホでホーム画面にブックマークを追加するための表示名・アイコンなどを用意する

ユーザー作成時の秘匿情報の格納はトークンエラーが発生しても実施する

トークン利用が早すぎるエラーが発生した場合、送信された秘匿情報を破棄しているため、とりあえずDBに格納するように修正する

クライアント側のエラーを解消する

開発モードでエラーが出ているため、開発効率向上のため修正する

メニューを開いたとき
スナックバーが表示されたとき
ツイート一覧が開いたとき

一覧に通し番号を追加

カードをクリックしてタイトルを見ないと何曲目かが分からないため、一覧のカードに通し番号を追加する

スマホ向け画面でフェッチ中であることが分かりづらい

スマホ向け画面ではフェッチ中も動画とその詳細しか表示されておらず、スケルトン表示がないため、フェッチ中であることが判別できない

DBインスタンスが不要になるように構成を変更する

DBでユーザーの秘匿情報を管理せずCookieで管理することで、運用費を抑える

DjangoでCookieをセットする
既存ユーザーの取り扱い
Cookieの期限はどのように設定すればいいか
開発環境と本番環境のDBをローカルファイルのJsonに切り替え
開発環境で、DB.jsonファイルを生成し自動デプロイに組み込む
開発環境で、DJANGO_DATABASE_* の3つの環境変数を自動デプロイ環境から削除する
本番環境で、DB.jsonファイルを生成し自動デプロイに組み込む
本番環境で、DJANGO_DATABASE_* の3つの環境変数を自動デプロイ環境から削除する

Safariでも実現する方法を模索

Cookieを利用する際に変更したCORS関連の設定をリバート
開発環境で、暗号化キーの環境変数を自動デプロイに組み込む
本番環境で、暗号化キーの環境変数を自動デプロイに組み込む

データ抽出のSQL

select uid, access_token, secret from api_usercredential;

MySQLから抽出したCSVファイルのJson変換のための置換表現

^([0-9a-z]{28}),([0-9a-z-]{50}),([0-9a-z]{45})$
"$1":{"token":"$2","secret":"$3"},

パターン

user/create
- 暗号化されたアクセストークン・シークレットをレスポンスに含める
search/
- LocalStorageに暗号化されたアクセストークン・シークレットが存在しない場合
  - JSONから読み込んで、アクセストークン・シークレットを取得
  - Twitterの検索APIを叩いて検索結果を取得
  - 検索結果を整形し、暗号化したアクセストークン・シークレットとともに、レスポンスを返す
- LocalStorageにアクセストークン・シークレットが存在する場合
  - Twitterの検索APIを叩いて検索結果を取得
  - 検索結果を整形し、レスポンスを返す