【愛をAIで手に入れろ】TinderのメッセージをChatGPTで良い感じに自動返信する拡張機能を作ってみた話

## はじめにデモ
ご挨拶の前に今回作成したツールをご覧あれ！
chrome拡張機能でTinderのブラウザ版を自動操作してChatGPTでメッセージ返信しているところです。※作者は倫理観が高いので実際に送信していません😁

![ezgif.com-video-to-gif (1).gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/658983/bf9f0169-272c-8aaa-bb40-bc4dc09309bd.gif)

いくつか生成されたメッセージを紹介します。
gpt3.5モデルですがなかなか良い感じの精度が出ています。
gpt4モデルを用いるともっと良い感じになるかもしれません^^

> ◯◯さん、マッチングありがとうございます！とても優しそうな雰囲気が出ているので、お話してみたいと思いました！自己紹介にも興味があります。おいしくてつよくなるって、何がおいしくてつよくなるんですか？散歩やヨガ、読書も共通の趣味ですね！どんな本を最近読まれたり、どんな散歩コースがお気に入りですか？教えてください！。

-> 相手のプロフィールにも適度に突っ込んで良いかんじです

> 最近は暖かくなってきたから、外でビール飲むのが気持ちいいですよね🍻
お互いお酒好きだから、一緒に飲みに行けると楽しそうです！
タイミングが大事って言ってたけど、今週末なら会えますか？楽しみにしてます〜😊

-> 会話の履歴やプロフィールの共通点にも触れ、自然な文章が生成されています。

> △△さん、はじめまして！✕✕と申します。最近は国内旅行を楽しんでいるんですね、素敵です！私も旅行が趣味で、特にカフェ巡りが好きなんです。お互いの趣味に共通点がありそうですね！お話しするのを楽しみにしています♪

-> カフェ巡りは旅行なのか？という。。。


## 作ろうと思ったきっかけ
みなさんはマッチングアプリを使ったことはありますか？
新たな出会いを求める人にとっては今や欠かせないサービスなのではないでしょうか。
僕も以前はマッチングアプリにハマり、たまに女性とのデートを楽しんでいたのですが、気づけば時間もお金も浪費され何度も後悔した苦い過去があります ^^;

使ったことがある人はきっと共感してくれると思うのですが

- <font color="red">**メッセージのやり取りが面臭い！！**</font>
- <font color="red">**気の利いたメッセージが出来ずに会話が続かない**</font>
- <font color="red">**テンプレ文章が相手にバレて無視される**</font>

きっと、こんな悩みにあふれているのではないかと推察します。
僕自身も、実際に会ってからじゃないと人柄や相性なんて分からないし、そこからが本当の勝負なんだよなあ、と思っていました。

ただ、アプリで恋人を作るには、メッセージのやり取り頻度と内容が濃いコミュニケーションが重要だということが [マッチングアプリ大学](https://jsbs2012.jp/matchingapp/question/self-disclosure.html) 調べで分かっています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/658983/4890483f-7d37-f9d1-54b5-ed64a0c7c10d.png)
「そんなこと言っても、オレはbotじゃないんだよ...」 
「ん、bot!? そっか。ChatGPTに良い感じにデートまでこぎつけてもらえれば良いんだ！」

という倫理観もクソもない、糞エンジニアらしい解決策でTinderのメッセージをChatGPTで自動返信するChrome拡張機能を作っちゃいました。

## 工夫したところ
### Chrome拡張機能でブラウザ操作した
最初はPythonたNodejsでデスクトップアプリを作成して、SeleniumやPuppeteerでブラウザ操作を行おうと思ったのですが、Tinderの認証を突破する必要があるのと、ローカルアプリにデータを同期するためにクローラを走らせなければならない都合上、使いやすさと導入ハードルを低くするためにChromeの拡張機能で実装することにしました。

Chromeの拡張機能の実装は初めてで技術的なチャレンジも出来て楽しかったです。
以下はキャッチアップでお世話になった参考リンクおよび教材なので紹介しておきます。
React×TypeScriptとChrome拡張機能開発がどちらも学べて一石二鳥でした！！

[参考リンク]
* [chrome for Developers](https://developer.chrome.com/docs/extensions/)
* [React & TypeScript Chrome Extension Development [2023]](https://www.udemy.com/course/chrome-extension/)
* https://zenn.dev/alvinvin/books/chrome_extension

### ChatGPTのプロンプトの生成
やはり良い感じにメッセージを生成するにはプロンプトエンジニアリングを頑張る必要がありました。具体的には以下の点を注意してプロンプト文を作成することで良いメッセージが作れるようになったと感じます。

1. 自分と相手のプロフィール情報をプロンプトに入れる
    -> 相手からの返信率を高めるには、趣味や仕事、嗜好性や過去の経験など、共通の話題を見つけると良さそうと思い、相手の名前・年齢・趣味・特徴などを、スクレイピングして情報をプロンプトに埋め込むことで、それについて質問やコメントをするようにしました。
また、自分のプロフィールは設定画面で設定したものを埋め込むことにしました。![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/658983/b773965b-56fa-3c45-afd7-298fe8ab8e73.png)

2. 過去のメッセージ履歴を入れる
    -> これまでのやり取りで何が話題になったか、どのような反応があったかを把握して、話し口調や話題の流れを理解させるようにしました。↓の会話履歴をスクレイピングしてプロンプトに含めています。![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/658983/99f97549-5d8a-b328-6409-b0aadafc0cd1.png)

3. 自分の目的と期待
    -> デートにつなげたいのか、友達を作りたいのか、目的と期待値を明確にしておくと、それに合わせたメッセージが生成できると考え、こちらも入れました。

以上を踏まえて、APIにわたすプロンプト文をこのようにしています。

```javascript
const messages = [
  {
    role: "system",
    content : `
    あなたはデーティングアプリのTinderで、相手が返信を送りやすく、またデートに誘いやすい状況を作るための会話を生成するアシスタントです。
    絵文字は1メッセージにつき最大3つまで、ジョークは適宜交えてください。質問は1メッセージにつき1回のみ使用し、文末には「です」「ます」「〜」「！」などを使用してフランクな会話を心がけてください。
    プロフィールや過去のメッセージから共通の趣味や話題があれば、それを元に会話を展開してください。また、日本語で自然な口語体と敬語をバランスよく使用してください。`
  },
  {
    role: "user",
    content: `
    自分と相手のプロフィール情報および会話履歴を元に、返信を日本語100文字以内で生成してください。
    生成するメッセージは自分が相手に対して送信するメッセージとして出力されます。

    [参考情報]
    #自分のプロフィール
    ${myprofile}
    #相手のプロフィール
    名前：${name}
    年齢：${age}
    自己紹介：${introduction}
    パーソナリティ：${personalities}
    #会話の履歴
    ${conversationContent}
    `
  }
]
```
ポイントとしては、以下を意識して作成しました。
* `system` メッセージでChatGPTに与える役割を指示
* プロンプトの目的を明確に「相手が返信を送りやすく、デートに誘いやすい状況を作る」と強調
* 絵文字やジョーク、質問の制限、文字数の制限などを曖昧にせず具体的な数や頻度を指定
* どのようにプロンプト文を生成すると最高の結果を得られるかもgpt4を使ってPDCAを繰り返す

他にも、もっとプロンプトを充実させて、相手を褒めるように仕掛けたり、
何回メッセージが続いたらデートへの誘いをしてみたり、
など改良の余地はまだまだありそうです！

## さいごに
ChatGPTの威力をまざまざと見せつけられました。
実際にchrome拡張機能はクセがあってハマりポイントも多かったのですが、ChatGPTの力を借りることでわずか数日でキャッチアップ含めて開発もおえることができました。

昔の自分のために作ったアプリなので、現在彼女がいる身においては怒られちゃいそうですが（実際、デバッグでTinderの画面開くのも憚られました。もちろんメッセージ送信前寸止めしてますよ笑）

とまあ、自分ではあんまり使えないので、需要があれば個別に配布やストアに展開しようと思ってます！！

お仕事依頼も募集中です〜〜

ではでは