はじめに

クレジットカードの利用明細はPDFやCSVでダウンロードすることができますが、これらを手動で取得するのは手間がかかります。
うまく改造すればfreeeへの自動連携なども考えられます。
ビジネスカードのAPI非対応の履歴も取れますので、色々と利用できそうです。
そこで、Playwrightを使って自動化することで、手動での取得作業を自動化することができます。

以下は取得したcsvから月の支払金額をLine通知するサンプルです
https://github.com/natsumeaurlia/rakuten-csv

準備

適当な作業ディレクトリを作成。
必要なパッケージのインストール方法
以下のコマンドで、必要なパッケージをインストールします。

npm init playwright@latest
npm install playwright dotenv

ドライバーのダウンロードと設定方法

Playwrightでは、実行するブラウザに応じたドライバーを必要とします。本クローラーでは、Chromiumを利用するため、以下のコマンドでChromiumのドライバーをダウンロードします。

npx playwright install

dotenvを使った環境変数の設定方法

セキュリティ上の理由から、本クローラーではIDとパスワードを環境変数として設定します。.envファイルをプロジェクトのルートディレクトリに作成し、以下のように設定してください。

.env

ID=<楽天カードのログインID>
PASS=<楽天カードのログインパスワード>

起動処理

main.ts,tsconfig.jsonを作成してください。

tsconfig.jsonはこのような形です。

tsconfig.json

{
  "compilerOptions": {
    "target": "es2018",                           
    "module": "commonjs",                         
    "strict": true,                               
    "esModuleInterop": true,                      
    "skipLibCheck": true,                         
    "forceConsistentCasingInFileNames": true      
  }
}

main.tsはこのような雛形になります。

main.ts

import * as dotenv from 'dotenv';

dotenv.config();

(async () => {
    try {

    } catch (err) {
        console.error(err);
    }
})();

まずはenvからIDとPASSがあるか確認します
tryブロックの中に追記してください

const ID = process.env.ID;
const PASS = process.env.PASS;
if (!ID || !PASS) throw new Error("ID or PASS is not set.");

これでID,PASSがなかったら実行されません。

次に以下のように追記してください。


const downloadDir = path.join(__dirname, 'storage');
const browser = await chromium.launch({
  headless: true,
  downloadsPath: downloadDir,
  args: [
    '--incognito',
    '--user-agent=Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.77 Safari/537.36'
  ]
});
const context = await browser.newContext({
  acceptDownloads: true,
});
const page = await context.newPage();

csvの保存ディレクトリを選択。
chromium起動オプションで、シークレットモード、agent偽装、headless、ダウンロード許可状態で起動します。

ログイン処理

ログイン画面に移動し、3秒待機。
ログイン情報を入力欄に記載しログインボタンを押します。
少しスリープを入れてしっかり画面が開くようにします。


await page.goto("https://www.rakuten-card.co.jp/e-navi/index.xhtml");
await page.waitForTimeout(3000);

await page.fill('input[name="u"]', ID);
await page.fill('input[name="p"]', PASS);

await Promise.all([
  page.click('input[id="loginButton"]'),
  page.waitForLoadState('networkidle'),
]);

await page.waitForTimeout(2000);

明細取得処理

利用明細をcsvにする関数は下記のように表せます。
unixtimeなどをつけてcsv名の重複を防いでいます


// 利用明細CSVのダウンロード
const downloadFunc = async () => {
  const downloadPromise = page.waitForEvent('download', {timeout: 10000});
  await page.click('.stmt-c-btn-dl.stmt-csv-btn');
  const download = await downloadPromise;
  const unixtime = Math.floor(new Date().getTime() / 1000);
  await download.saveAs(path.join(downloadDir, unixtime + 'rakuten-card.csv'));
})

これを利用してダウンロードは行います。

それでは利用明細に移動します。
移動したら、楽天カードの利用可能なものを取得します。

main.ts

// 利用明細画面に遷移する
await Promise.all([
  page.goto('https://www.rakuten-card.co.jp/e- navi/members/statement/index.xhtml?l-id=enavi_all_glonavi_statement'),
  page.waitForLoadState('networkidle'),
]);

const availableOptionsTexts = await page.evaluate(() => {
      const cardSelect = <HTMLInputElement>document.querySelector('.stmt-head-regist-card__select__box');
      return Array.from(cardSelect.querySelectorAll('option'))
            .filter((option) => !option.innerText.includes('利用不可'))
            .filter((option) => option.selected === false)
            .map((option) => option.innerText);
        });

あとはダウンロードしましょう

main.ts


// 初期の利用可能なカードの利用明細をダウンロード
        await downloadFunc();

        // その他利用可能なカードの利用明細をダウンロード
        for (const option of availableOptionsTexts) {
            // カードを選択
            await page.locator('.stmt-head-regist-card__select__box').selectOption(option);
            await page.waitForLoadState('networkidle');
            await downloadFunc();
        }

await browser.close();

最終コード

main.ts

import { chromium } from 'playwright';
import * as path from 'path';
import * as dotenv from 'dotenv';

dotenv.config();

(async () => {
    try {
        const ID = process.env.ID;
        const PASS = process.env.PASS;
        if (!ID || !PASS) throw new Error("ID or PASS is not set.");

        // storageフォルダに保存
        const downloadDir = path.join(__dirname, 'storage');
        const browser = await chromium.launch({
            headless: true,
            downloadsPath: downloadDir,
            args: [
                '--incognito',
                '--user-agent=Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.77 Safari/537.36'
            ]
        });
        const context = await browser.newContext({
            acceptDownloads: true,
        });
        const page = await context.newPage();

        await page.goto("https://www.rakuten-card.co.jp/e-navi/index.xhtml");
        await page.waitForTimeout(3000);

        await page.fill('input[name="u"]', ID);
        await page.fill('input[name="p"]', PASS);

        await Promise.all([
            page.click('input[id="loginButton"]'),
            page.waitForLoadState('networkidle'),
        ]);

        await page.waitForTimeout(2000);

        // 利用明細画面に遷移する
        await Promise.all([
            page.goto('https://www.rakuten-card.co.jp/e-navi/members/statement/index.xhtml?l-id=enavi_all_glonavi_statement'),
            page.waitForLoadState('networkidle'),
        ]);

        const availableOptionsTexts = await page.evaluate(() => {
            const cardSelect = <HTMLInputElement>document.querySelector('.stmt-head-regist-card__select__box');
            return Array.from(cardSelect.querySelectorAll('option'))
                .filter((option) => !option.innerText.includes('利用不可'))
                .filter((option) => option.selected === false)
                .map((option) => option.innerText);
        });

        // 利用明細CSVのダウンロード
        const downloadFunc = async () => {
            const downloadPromise = page.waitForEvent('download', {timeout: 10000});
            await page.click('.stmt-c-btn-dl.stmt-csv-btn');
            const download = await downloadPromise;
            // Wait for the download process to complete
            console.log(await download.path());
            // Save downloaded file somewhere
            const unixtime = Math.floor(new Date().getTime() / 1000);
            await download.saveAs(path.join(downloadDir, unixtime + 'rakuten-card.csv'));
        }

        // 初期の利用可能なカードの利用明細をダウンロード
        await downloadFunc();

        // その他利用可能なカードの利用明細をダウンロード
        for (const option of availableOptionsTexts) {
            // カードを選択
            await page.locator('.stmt-head-regist-card__select__box').selectOption(option);
            await page.waitForLoadState('networkidle');
            await downloadFunc();
        }

        await browser.close();

    } catch (err) {
        console.error(err);
    }
})();