Twitter自動運用ツール「Heartroid」

サービス URL：https://mamitter.com(AWSとTwitter API の料金高騰のため現在不可動)
説明動画：https://youtu.be/BIVLdpGBEbY
コード：https://github.com/Y-Kenn/dreamon

開発期間:2023 年 5 月〜2023 年 7 月

■サービス概要

Heartroid（ハートロイド）は自動でTwitterフォロワーを増やす、認知度を高めること目的としたサービスで、集客目的にも利用できます。
手作業でのTwitterアカウント運用の仕方が分からない方や、運用に時間をかけたくない方向けのサービスとなります。

ユーザーが設定したキーワードをもとに自動でいいね、フォロー、フォロー解除が実行されます。

独自のロジックにより、高いフォローバック率の確保とアカウント凍結対策を両立しています。

■基本機能

• Twitter API v2を使用した、いいね、フォロー、アンフォローの自動実行
• 予約投稿
• 複数アカウントの同時運用
• ダッシュボードでのフォロワー増加数や自動機能のパフォーマンスを表示
• メンションツイートの表示
• Twitter OAuth2.0による新規登録、ログイン、アカウント追加
• メールアドレス、パスワードによるログイン
• Twitterアカウント凍結の検出とメールでの通知、ダッシュボード上での警告
• その他ログアウト、パスワードリセット、退会、お問合せ、各種メール通知、TOPページ等のWebサービスの基本機能
  
  

■フォロワー増加ロジック

'いいね’と’フォロー’を同じアカウントに対して同時に実行します。
いいねだけ、フォローだけを行う場合よりも高いフォローバック率を得ることができます。

相手のアカウントに興味を持っているように伝わり、また人間が手動でいいね、フォローしているように見えるため不快感を与えません。

■使用技術

フロントエンド

• JavaScript / Vue 3
  • VueRouterとVuexによるSPA
• HTML / CSS
  • SCSS, FLOCSS（CSSフレームワーク不使用）
  • レスポンシブ

バックエンド

• PHP / Laravel 10
  • Blade（TOPページやログインページ、お問合せページ等）
  • Laravel Breeze
  • Twitter API（ライブラリを自作）
  • キュー/ワーカーによる並列処理（サーバーではSupervisorにより管理）
  • PHPUnitによるユニットテスト

インフラ

• AWS / Amazon Linux 2

その他

• MySQL, Apache
  
  

■フロントエンド詳細

○Vue.jsによるSPA

Heartroidはインターフェースとしての側面が強いため、高いUX実現のためにSPAを採用しました。
VueRouterとVuexを使用してユーザーフレンドリーなSPAを実装し、かつ保守性の高さも確保しました。

○バックエンドとの連携

フロント⇔バック間の非同期通信はAxiosを使用しています。

バックエンドで処理が正常に行われなかった場合はレスポンスにエラーのステータスコードを乗せ、フロントではステータスコードに応じた処理を実行します。
(セッションが切れている場合はログイン画面へ遷移、CRUD処理に失敗した場合はアラートで処理されなかった旨を通知など)

○画面設計・機能設計

使用方法や状態が一目で分かるように設計しています。
具体的な例を挙げると以下のようになります。

• 機能ごとに画面を分ける
• メリハリのある色使いやアイコンで、直感的に意味や状態を理解できるようデザイン
• 各コンポーネントの状態によって使用できないボタン等ある場合は表示しない(例：アカウント切り替えページ)
• 各アカウントの状態ごとに表示するコンポーネントを切り替える(例：パスワード設定画面ではパスワード未登録と登録済みで表示するコンポーネントを分けている)

○レスポンシブ

PC、スマートフォン、タブレットで利用できます。

○訴求力のあるTOPページ

以下のポイントを意識しました。

• 具体的な数字を出してイメージさせる、リアリティのあるデータを示す
• 信頼感のあるデザイン
• このサービスを使うメリットを強調したコピーライティング
• 見込み客の疑問や不安をTOPページで解消する

■バックエンド詳細（主に自動機能）

○自動機能概要

外部APIのレスポンスを受け取るのは時間がかかるため、自動機能をシングルスレッドで実行する場合、ユーザーが増えた場合に処理が間に合いません。
そのためLaravelのキュー/ワーカーを使用して並列処理できるように実装しました。

自動機能は基本的にはLaravelのタスクスケジュール機能により定期的にジョブ発行の処理を実施し、ユーザーのTwitterアカウントごとにジョブを発行(キューに投入)、複数のワーカーが並列して各ジョブを実行します。

また1つのアカウントのジョブが同時に実行される場合はTwitter運営に自動化が検出され、アカウントの凍結やサービス停止につながる恐れがあります。

そのため、いいね、フォロー、アンフォローのジョブはジョブチェーンの機能を使用して各アカウントごとに1つのまとまりとして発行し、ジョブの実行順序や実行間隔が必ず守られるように実装しています。

また各自動機能ごとに1日ごとの実行数上限や１時間ごとの制限を設定し、さらに各アカウント個別にフォロワー数等に応じてより厳しい上限を計算、適用しているため、アカウント凍結のリスクを抑えることができています。

○自動いいね

ユーザーが登録したキーワードをもとにマッチするツイートを取得、対象ツイートの情報をターゲットとしてDBに登録します。
DBにターゲットが登録されている場合にいいねを実行します。

キーワードは、ユーザーがAND, OR, NOTの選択ができるようになっています。

○自動フォロー

いいねが実行された場合、いいねを付けたアカウントに対してフォローします。

自動いいねと同様に、キーワードにより対象アカウントのプロフィールとキーワードのマッチを取り、フォロー対象を絞り込むことができます。

キーワードを設定しない場合はいいねを付けたアカウントを全てフォローします。

○自動アンフォロー

自動フォロー済みのアカウントがHeartroidでの設定値を上回った場合に自動でアンフォローします。

自動フォローしたアカウントの中から不活発なアカウントをターゲットとしてDBに登録し、DBにターゲットが登録されている場合にアンフォローを実行します。

アンフォロー保護機能が実装されており、ユーザーがアンフォローしたくないアカウントを登録することができます。

○予約投稿

ユーザーが日時と投稿する文章をDBへ登録し、その日時になると自動でツイートが投稿されます。
投稿済みのツイートもHeartroidサービス内から削除することができます。

予約ツイートのジョブは他のジョブより優先して処理されます。

○定期実行される処理

Laravelタスクスケジュールに登録しているコマンド(処理)は以下の5つになります。

• throw-chains（いいね/フォロー/アンフォローのジョブチェーン発行）
• throw-tweets（予約ツイート投稿のジョブを発行）
• throw-update-twitter-data（フォロー数・フォロワー数をDB登録するジョブを発行）
• throw-update-following（自動フォロー済みアカウントの情報を更新するジョブを発行）
• check-stuck-accounts（ジョブの未確認のエラーでスタックしているアカウントを復帰）
  
  

■データベース設計

下の図の通りとなります。

■AWS構成

下の図の通りとなります。

現在設置しているWebサーバは１つですが、ユーザが増加した場合は予備のサブネットに増設し、アクセスを振り分けることができます。

また現在メールはSESを使用していますが、今後申請が通った場合、用意したメールサーバを使用することも可能です。

■反省

○良かった点

• SPAやバックエンドでの並列処理、外部APIの使用など、全体的にレベルの高いものが作れた。
• フロント・バックともにエラーで停止する事なく稼働し続けられている。
• Vueのライフサイクルやその他基礎的な部分を理解していたため、バグが発生してもスムーズに原因を特定できた。
• 各機能の実装方法検討段階で十分なリサーチと検証ができたため、限られた期間の中でも実用的なサービスを作り上げることができた。

○悪かった点

• バックエンドに時間がかかったためフロントにはそこまで時間を割けなかった。アニメーションや各コンポーネントのデザインにもう少し力を入れたかった。
• 読みづらいコードを書いてしまった部分が多々あるので、序盤に上手く設計できるように経験を積み重ねて行きたい。またコントローラでの記述量が多くなってしまっているので、ロジックの責務に応じてモデルに切り出していくなど、Laravelの使い方についても勉強していきたい。
  
  

■今後について

TypeScriptやReactの習得に力を入れたいと思っています。

今回Heartroidの開発を通して、規模の大きいサービスやチームでの開発において静的型付けのメリットは大きいのではないかと感じたこと、またTypeScriptを使用しているプロジェクトが多いことがTypeScriptを学びたい理由です。

Reactに関してはVueと並んで使用される機会が多く、習得していれば参加できるプロジェクトの幅が広がるためです。またReact Nativeではスマートフォンアプリの開発ができるため、個人でもユーザーの多いサービスを開発できるようになると考えています。

今後も自分のアイディアを形にし、世の中に面白い影響を与えるため、日々勉強を続けていきます。

長くなりましたが、ここまでご覧いただきありがとうございました。