課題
給与受け取り口座がGMOあおぞら銀行に変更になった。マネーフォワードが対応してなくて、残高確認のために、毎回GMOあおぞら銀行のページを徘徊するのは煩わしい。自動化して毎日チェックできないものか。
解決策
もっとも理想的なのはマネーフォワードがGMOあおぞら銀行に対応することである。しかし実装予定の予告も出ていないので、神に祈るしかない。無神論者は神に祈る習慣はないので自分でなんとかすることにする。
労力が少なく具体的な解決策を一つあげるとすれば、スクリプトを書いてcronで毎日流して通知する形がいいのではないか。なのでPuppeteerの練習も兼ねてNode.jsでやってみる。
「Puppeteer入門 スクレイピング+Web操作自動処理プログラミング」を購入して、少し練習して挑戦してみた。
Puppeteer入門 スクレイピング+Web操作自動処理プログラミング
- 作者: ヴェネチア冒険團,美崎薫,小原亮一,酒井一成
- 出版社/メーカー: 秀和システム
- 発売日: 2018/09/19
- メディア: 単行本
- この商品を含むブログを見る
具体的な解決策として Puppeteer を用いて自動ログインしてみる
最初に完成したコードを記載しておく。
Puppeteer_practice/aozora_login.js at master · ryuchan00/Puppeteer_practice
まずはPuppeteerのインストールから始める。
npm install puppeteer
次はPuppeteerの読み込みをする。
const puppeteer = require('puppeteer');
ユーザーIDとパスワードの取り扱い
迷ったのが、ユーザーIDとパスワードをどこから取得するかだ。思いつくだけでも以下の場所から取得できそうだ。
この中で選択するのであれば、ソースコードを公開する時に安全で環境によって値を変更できる「環境変数」で保持した方が良さそうだ。dotenvというライブラリを使えば.envファイルに書いたものを環境変数として扱ってくれるらしい。
### dotenvのインストール npm install dotenv
dotenvの読み込み
require('dotenv').config();
const USER_ID = process.env.AOZORA_USER_ID;
const PASSWORD = process.env.AOZORA_PASSWORD;
.envファイルの中身
AOZORA_USER_ID="aaaaa" AOZORA_PASSWORD="bbbbb'
環境変数AOZORA_USER_IDにはユーザーIDを、AOZORA_PASSWORDにはパスワードを入れる。
GMOあおぞら銀行のページまで自動で遷移する
すでにユーザーIDとパスワードを用意してしまったが、まずは自動でGMOあおぞら銀行のログインページまで遷移してみることにする。最初の歩幅を縮めて一つ一つ確認していこう。初めて使うツールならなおさらだ。ログインページまで自動でたどり着くには、ブラウザの新しいページを開いて、gotoメソッドで遷移先のURLを引数として与えてあげる。node aozora_login.jsで実際に実行して確認していく。ログインページが開ければOKだ。
(async() => {
// Puppeteerの起動
const browser = await puppeteer.launch({
headless: false,
slowMo: 50,
});
// 新しいからのページを開く
const page = await browser.newPage();
// view portの設定
await page.setViewport({
width: 1200,
height: 800,
});
// GMOあおぞら銀行のログインページまで移動する
await page.goto('https://sso.gmo-aozora.com/b2c/login');
})();
自動ログインしてみる
ログインするためにはユーザーIDとパスワードをフォームに入力する。こうやって日本語で書いたら何を当たり前なこと的なことを書いているが、実際にコードで表現すると以下のようになる。typeメソッドで各フォームに入力していく。要素はユーザーIDはname="username"、パスワードはname="password"を指定する。(余談だが、もしPOSTメソッドにて実行するのであれば、トークンが必要なのだった。)ログインボタンをクリックするためにはclickメソッドを使用する。これで会員トップページまでたどり着ける。
// ユーザーIDを入力する
await page.type('input[name="username"]', USER_ID);
// パスワードを入力する
await page.type('input[name="password"]', PASSWORD);
// ログインボタンをクリックする
await page.click('button[type="submit"]');
会員ページトップの残高情報を取得してみる
残高の情報をコンソールに表示できるようにしてみる。まず残高の情報が表示されるまで、スクリプトを中断させる必要がある。waitForメソッドを用いて6秒待つことにする。それ以下だと先にスクリプトが残高の要素を取得しようとして失敗することがある。残高の要素はamountクラスのspanタグの要素である。evaluateメソッドを使用して、定数amountに残高の数値を代入する。これでCUIで残高を表示することができた。最後にブラウザを終了するようにすれば完璧だ。
await page.waitFor(6000);
// 要素の取得
const amount = await page.evaluate((selector) => {
// evaluate関数に渡す第一引数のfunctionは、
// 第二引数として渡したパラメータをselectorに引き継いでブラウザ内で実行する
return document.querySelector(selector).textContent;
}, 'span.amount span');
console.log('残高:' + amount);
// ブラウザの終了
await browser.close();
これから
これをChrome extensionに移植してマネーフォワードのページを開いた時にGMOあおぞら銀行の情報も追加してあげたい。できるだろうか。年末にやってみる。
