107
48

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Last updated at Posted at 2019-04-17

本田とじゃんけんとは

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

本田の勝率

は?

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

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

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

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

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

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

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

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

ソースコード

リポジトリ

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日しか試せなそうで残念です(泣)

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

ありがとうございました

107
48
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
107
48

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?