Chromeブックマークレットでココナラ販売金額を1クリック合計する

はじめに

ココナラの取引管理画面で、取引中の案件に表示されている販売金額をざっと合計したい場面があります。画面上の金額を目で追って電卓に入れることもできますが、件数が増えると見落としや二重計上が起きやすくなります。

この記事では、ChromeのブックマークレットとしてJavaScriptを登録し、取引管理ページに表示されている販売金額を1クリックで合計する実装例を整理します。前回の分析データ取得用ブックマークレットとは違い、今回はクリップボードへコピーせず、件数と合計金額をその場でアラート表示するシンプルな用途です。

完成イメージ

大まかな流れは次の通りです。

1. JavaScriptコードをChromeのブックマークとして登録する
2. ココナラの取引管理ページを開く
3. 登録したブックマークレットをクリックする
4. 画面上の販売金額要素を読み取る
5. 重複を除外しながら合計する
6. 合計金額と件数をアラート表示する

ブックマークバーへドラッグして登録する

下のボタンをChromeのブックマークバーへドラッグすると、ブックマークレットとして登録できます。クリックでは実行されないようにしてあるので、ボタンを押すのではなく、つかんでブックマークバーへ移動してください。

登録後は、ココナラの取引管理ページを開いた状態で、ブックマークバーに追加された「販売金額合計」をクリックします。

手動で設定する方法

ドラッグ登録が使いにくい場合は、手動でブックマークを作成し、URL欄に javascript: から始まるコードを貼り付けます。

Chromeでは貼り付け時に先頭の javascript: が消えることがあります。手動で登録する場合は、貼り付け後にURL欄の先頭が javascript: になっているか確認してください。

コピー可能なコード

ブックマークのURL欄に貼り付ける場合は、下の改行なしコードを使います。

コードを読み込み中...

処理内容を確認したい場合は、下の改行ありコードを見ると読みやすくなります。実際にURL欄へ貼り付ける場合は、上の改行なしコードを使ってください。

コードを読み込み中...

実装ポイント

販売金額は、ページ内の .d-providerTalkroomCassettePrice_price という要素から読み取ります。画面構造が少し変わる場合に備えて、まずPC向けのブロック内を探し、見つからなければ同じ価格クラス全体を探すようにしています。

let priceEls = [
  ...document.querySelectorAll(
    '.d-providerTalkroomCassetteBlock-pc .d-providerTalkroomCassettePrice_price'
  ),
];
if (priceEls.length === 0) {
  priceEls = [...document.querySelectorAll('.d-providerTalkroomCassettePrice_price')];
}

金額テキストは 1,050円 のような形式で表示されるため、カンマ、空白、円マークを取り除いて数値に変換します。

const num = t => {
  const m = String(t || '').replace(/[,，\s円￥]/g, '').match(/-?\d+/);
  return m ? Number(m[0]) : 0;
};

同じ取引カード内に複数の金額要素が見つかった場合に二重計上しないよう、親カードをSetで管理します。すでに見たカードならスキップし、初めて見たカードだけ合計に加えます。

const seen = new Set();

for (const priceEl of priceEls) {
  const card =
    priceEl.closest('.d-providerTalkroomCassette') ||
    priceEl.closest('.d-transactionListProviderMain_item');

  if (!card || seen.has(card)) continue;

  seen.add(card);
  total += num(priceEl.textContent);
  count++;
}

既存ブックマークレット記事との違い

この実装は、ココナラ画面を対象にしたブックマークレット活用例の一つです。ただし、用途はほかの記事と少し違います。

• 予約可能日時コピー: 予約カレンダーの空き枠をテキスト化し、クリップボードへコピーする
• 分析グラフ値コピー: 分析ページの日別数値をTSVにして、Excelへ貼り付けやすくする
• 販売金額合計: 取引中ページの販売金額を集計し、合計金額をその場で確認する

つまり今回は、データを外へ持ち出して加工するというより、表示中ページの情報をその場で確認する小さな集計ツールとして使います。

注意点

ブックマークレットは、現在開いているページ上でJavaScriptを実行する仕組みです。便利ですが、使い方を誤ると意図しない処理を実行する可能性があります。

• 自分が管理している画面、または自分の作業補助として使う範囲に限定する
• 対象サービスの利用規約や自動取得に関するルールを確認する
• 高頻度で連続実行しない
• アカウント名、通知、顧客名、実績値などを公開画像へ含めない
• 画面構造が変わると、取得対象のクラス名が変わり、動かなくなる可能性がある
• 外部へ送信する処理がないか、登録前にコード内容を確認する

今回のコードは、表示中ページの販売金額テキストを読み取り、合計してアラート表示する処理に限定しています。外部サーバーへ送信する処理は入れていません。

関連記事

• Chromeブックマークレットでココナラ予約枠をクリックコピーする
• Chromeブックマークレットでココナラ分析グラフの数値をExcel用にコピーする
• UIと計算ロジックを分離する純粋関数パターン
• 静的サイトに検索機能を追加する

まとめ

ブックマークレットを使うと、既存のWeb画面に小さなJavaScript処理を差し込む感覚で、日々の確認作業を軽くできます。

今回の例では、取引管理ページに表示されている販売金額を読み取り、重複を避けながら合計し、件数と合計金額を1クリックで確認できるようにしました。大きなシステム改修までは不要でも、画面上の情報を少し集計したい場面では、ブラウザ上の小さな自動化テクニックとして役立ちます。