はじめに
騎空士の皆さんお疲れ様です。
HeadlessChromeを最近知ったので何か試して見たいと思い、楽しい（辛い）古戦場の息抜きに、コンソール画面で動く救援ツール作ってみました。
というのも、twitterのUserStreamというAPIが2018年6月20日に廃止されるとの事で、サードパーティー製のtwitterクライアントアプリが終わる・・・。救援ツールも危ないのでは？という話題が団内で出た為、息抜きついでにtwitterのAPIを使用しないツールを作ってみました。
動作環境
- macOS Sierra
- puppeteer
- nodejs 9.11.1
- HeadlessChrome
詳しくは前回の記事を参考にしてください。
作成したツール
コンソール画面でtwitterに投稿された指定モンスターの救援IDを表示させるだけの簡単なものです。
今回はHeadlessChromeを試したかったので、HeadlessChromeを使いtwitterAPIを使用しないで作成する。という条件をテーマに作って遊んでみました。
その1：twitter公式サイトで検索かけた結果を取得して表示する
※twitterの利用規約ではスクレイピング等が禁止されているようですので、ヘッドレスクローム動作の参考程度に見てください。
機能概要
コマンドで受け取ったtwitterユーザーでログインし、検索ワードを検索して最新救援IDを取得して表示する。数秒ごとに再検索し、常に最新のIDを表示し続ける
ソースコード
getIdFromTwitter.js
const puppeteer = require('puppeteer');
const id = process.argv[2].toString();
const pass = process.argv[3].toString();
const search = process.argv[4].toString();
(async() => {
const browser = await puppeteer.launch({ headless: false });
const page = await browser.newPage();
await page.goto('https://twitter.com/login?lang=ja');
// ログイン
await page.type('.js-username-field', id);
await page.type('.js-password-field', pass);
const buttonElementLogin = await page.$('button[type=submit]');
await buttonElementLogin.click();
await page.waitFor(1500);
// 検索
await page.type('.search-input', search);
const buttonElementSearch = await page.$('button[type=submit]');
await buttonElementSearch.click();
await page.waitFor(2000);
const buttonElementRealtime = await page.$('a[href^="/search?f=tweets"]');
await buttonElementRealtime.click();
await page.waitFor(2000);
while (true) {
// 検索結果の最新救援IDを無限に取得
var searchText = await page.$eval('.TweetTextSize', e => e.innerText);
var multiId = searchText.substr(0, 8);
console.log(multiId);
await page.waitFor(5000);
await page.reload();
await page.waitFor(2000);
}
//await browser.close();
})();
使用方法
node getIdFromTwitter.js twitterID twitterPASS 検索ワード
その2：yahooリアルタイム検索での結果を取得して表示する
機能概要
コマンドで受け取った検索ワードを検索して最新救援IDを取得して表示する。yahooリアルタイム検索ではajaxで自動に画面が更新されるので常に一番上（最新）のデータを取得する。ただし、初回描画時はベストツイートなるものがしゃしゃり出てくるので、それを除外する必要がある（めんどくさいので今回はやりませんでした）
ソースコード
getIdFromYahoo.js
const puppeteer = require('puppeteer');
// nodeの場合コマンドライン引数は2から
const search = process.argv[2].toString();
(async() => {
const browser = await puppeteer.launch({ headless: true });
const page = await browser.newPage();
await page.goto('https://search.yahoo.co.jp/realtime');
// 検索
await page.type('#yschsp', search);
const buttonElementLogin = await page.$('form input[type=submit]');
buttonElementLogin.click();
// ページ遷移を待つ
await page.waitForNavigation({
timeout: 5000,
waitUntil: 'domcontentloaded'
});
while (true) {
// 検索結果の最新救援IDを2秒毎に取得
var searchText = await page.$eval('.cnt', e => e.innerText);
var multiId = searchText.substr(0, 8);
console.log(multiId);
await page.waitFor(2000);
}
// 自分で止めない限り終了させないようにコメントアウトしてます
//await browser.close();
})();
使用方法
node getIdFromYahoo.js 検索ワード
使用結果
こんな感じで取れました。
おわりに
HeadlessChromeを試しに使用できた事に関しては満足しましたが、救援ツールとしてはまだまだ実用的ではないなというのが今回の感想です。
HeadlessChrome使えば救援ID取得してグラブル起動してマルチ参戦してワンパン、まで自動化できそうですが、それだとグラブルの規約に引っかかってしまうのでやりません。規約に引っかからないとなると救援ID表示するまでが精一杯ですね。
救援ツールとしての実用性を考えると、今回の方法よりtwitterのserchAPIとか使用してツール作った方がいいような気がしますし、yahooリアルタイム検索をchrome拡張でさらに使いやすくする方が良いなと感じました。（団員の方がchrome拡張作ってこの機能を作成していて、その手があったかと感心しました）
twitterのUserStreamApiは廃止になるみたいですが、影響を受けるのはtwitterのクライアントアプリ（TweetDeck等）でTLがリアルタイムで流れなくなるなどで、特定の検索データを取得するSearchAPIの方はなんら問題なく使用できるようです。また、一般の開発者が使用するAPIと企業などが使用するエンタープライズ契約のAPIとでは、仕様や制限が異なるみたいですので気になる方は詳しく調べてみてください。
？？？「古戦場から逃げるな」
コメント