Node.jsを使って本田とじゃんけんする

## 本田とじゃんけんとは

ペプシジャパンが急に始めた企画である。特定のツイートをすると本田とじゃんけんでき、勝つとペプシコーラがもらえるらしい。

https://www.pepsi.co.jp/campaign/cvs/

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">／<br>あと3日!<br>4/19まで <a href="https://twitter.com/hashtag/%E6%AF%8E%E6%97%A5%E6%8C%91%E6%88%A6?src=hash&amp;ref_src=twsrc%5Etfw">#毎日挑戦</a> <a href="https://twitter.com/hashtag/%E6%AF%8E%E6%97%A511%E6%99%82start?src=hash&amp;ref_src=twsrc%5Etfw">#毎日11時start</a><a href="https://twitter.com/hashtag/%E6%9C%AC%E7%94%B0%E3%81%A8%E3%81%98%E3%82%83%E3%82%93%E3%81%91%E3%82%93?src=hash&amp;ref_src=twsrc%5Etfw">#本田とじゃんけん</a><br>＼<a href="https://twitter.com/pepsi_jpn?ref_src=twsrc%5Etfw">@pepsi_jpn</a> をフォロー<a href="https://twitter.com/hashtag/%E6%9C%AC%E7%94%B0%E5%9C%AD%E4%BD%91?src=hash&amp;ref_src=twsrc%5Etfw">#本田圭佑</a> とじゃんけん勝負✌<br>勝てばその場で <a href="https://twitter.com/hashtag/%E3%83%9A%E3%83%97%E3%82%B7?src=hash&amp;ref_src=twsrc%5Etfw">#ペプシ</a> <a href="https://twitter.com/hashtag/%E3%82%B8%E3%83%A3%E3%83%91%E3%83%B3%E3%82%B3%E3%83%BC%E3%83%A9?src=hash&amp;ref_src=twsrc%5Etfw">#ジャパンコーラ</a><br>計16万名様にコンビニ無料引換えクーポンがあたる!<br>あなたは何を出す？<br>※混みあうと返信が遅くなります<a href="https://t.co/HyiM9s2Tu1">https://t.co/HyiM9s2Tu1</a></p>&mdash; Pepsi（ペプシ） (@pepsi_jpn) <a href="https://twitter.com/pepsi_jpn/status/1118333256456212481?ref_src=twsrc%5Etfw">2019年4月17日</a></blockquote>

### 本田の勝率

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">本田圭佑のじゃんけん勝率はざっと見て98%を超えており、ペプシジャパンのツイート数約807000のうち80万件がペプシの当落リプと仮定すると、1本600mlのペプシ(100mlあたり47kcal)を本田圭佑は784000本以上飲んでおり、そのカロリーは2億2千万kcalにものぼる。これは90分のサッカー約22万試合分に相当。</p>&mdash; スタバじょし (@yaba_resi) <a href="https://twitter.com/yaba_resi/status/1117753422436921345?ref_src=twsrc%5Etfw">2019年4月15日</a></blockquote>

は？

### 本田とじゃんけんする方法

当初はペプシ公式のツイートにあるボタンを押さなければいけないと思っていたのだが、どうやらペプシジャパンへのリプライにしてハッシュタグが入っていれば反応するようだ。

というわけで、結論としては以下のツイートを投稿すれば本田とじゃんけんできることになる。

```
@pepsi_jpn #本田とじゃんけん #本田に〇〇で勝つ
```

### Node.jsで本田とじゃんけんするには？

Twitter APIでもいいですが、APIキーがないと使えないので今回はpuppeteerを使って本田とじゃんけんをしていきたいと思います。

puppeteerはヘッドレスブラウザでChromeを弄れるすごいやつです。

ググると色々情報が出てくるので、詳しい情報は他の方の記事で見てみてください。

## ソースコード

リポジトリ
<a href="https://github.com/SugarShootingStar/honda-auto-rock-paper-scissors"><img src="https://github-link-card.s3.ap-northeast-1.amazonaws.com/SugarShootingStar/honda-auto-rock-paper-scissors.png" width="460px"></a>

```javascript
const puppeteer = require('puppeteer');
require('dotenv').config();

async function main() {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();

  try {
    await login(page);
    await tweetPepsi(page)
  } catch (error) {
    console.log(error);
  } finally {
    browser.close();
  }
}

async function login(page) {
  const URL = 'https://twitter.com/login';

  await page.goto(URL, {waitUntil: "domcontentloaded"});

  // ログイン情報入力、ログインボタン押下
  await page.evaluate((id, password) => {
    document.querySelector('.js-username-field').value = id;
    document.querySelector('.js-password-field').value = password;
    document.querySelector('.js-signin').submit();
  }, process.env.ACCOUNT_ID, process.env.ACCOUNT_PASSWORD);

  await page.waitForNavigation();

  console.log('✨  ログイン成功');
}

async function tweetPepsi(page) {
  const tweetText = '@pepsi_jpn #本田とじゃんけん #本田にパーで勝つ';

  // ツイートモーダル開く
  await page.evaluate(({}) => {
    document.querySelector('#global-new-tweet-button').click();
  },{});

  await page.waitFor(500);

  // ツイート文入力
  await page.evaluate((tweetText) => {
    document.querySelector('#Tweetstorm-tweet-box-0 > div.tweet-box-content > div.tweet-content > div.RichEditor.RichEditor--emojiPicker.is-fakeFocus > div.RichEditor-container.u-borderRadiusInherit > div.RichEditor-scrollContainer.u-borderRadiusInherit > div.tweet-box.rich-editor.is-showPlaceholder > div').textContent = tweetText;
  }, tweetText);

  // ツイート
  await page.evaluate(({}) => {
    document.querySelector('.SendTweetsButton').click();
  },{});

  console.log('🐤  ツイート完了');
}

main();

```

### 使用ライブラリ

- dotenv
    - Twitter IDとパスワードの秘匿用
- puppeteer
    - ヘッドレスブラウザ

### 処理解説

処理としては
- ヘッドレスブラウザを立てる
- Twitterのログインページに遷移
- querySelectorでログイン情報を入れる
- querySelectorでクリックイベント起こしてログイン
- ツイートモーダル開く
- ツイート文章入れる
- ツイートボタン押下

これだけです。

## 今後の課題

- FirebaseなりLambdaなりGASなり使って定期実行トリガーを設定したい
- リプライを確認してバッジがついたらペプシジャパンからの返信ツイートを確認したい
  - リプライの文章から勝ち負け判定

## なお

本田とじゃんけんの期間は4/19までみたいです。

今から定期実行トリガー作っても2日しか試せなそうで残念です（泣）

というか勝てる気がしないので、ドンキでコカ・コーラを買ってきたいと思います。

ありがとうございました