worktime-html-csv (@heiwa4126/worktime-html-csv)

ある特定のウェブページの HTML の特定テーブルを処理して、CSV として出力する npm パッケージです。きわめて特定の目的にだけ使われるので、汎用性は低いです。

テンプレートとして流用できるかもしれません。

仕様

Node とブラウザの両方で動作するように、CSV ライブラリは papaparse を使用

• Node.js バージョン: DOM アクセスはlinkedom を使って高速処理
• DOM バージョン: ネイティブ DOM API を使用
• IIFE バンドル: ブラウザ上では ESM スクリプトだけでなく、クラシックスクリプト版のビルドも添付(バンドル済み)
• CLI ツール: HTML ファイルから CSV に変換するコマンドラインツール付き
• デュアルフォーマット: ライブラリとして使う場合は ESM, TS(.d.ts), CommonJS をサポート

インストール

pnpm add @heiwa4126/worktime-html-csv
# または
npm install @heiwa4126/worktime-html-csv

使い方

ライブラリとして利用 (Node.js)

ES Modules (MJS)

examples/ex1.mjs

import { parseWorktimeHtmlToData, toWideArray, toCSVString } from "@heiwa4126/worktime-html-csv";
import { readFileSync } from "fs";

const html = readFileSync("test_data/test1.html", "utf8");
const rows = parseWorktimeHtmlToData(html);
const wideArray = toWideArray(rows);
console.log(toCSVString(wideArray));

CommonJS (CJS)

examples/ex1.cjs

const { parseWorktimeHtmlToData, toWideArray, toCSVString } = require("@heiwa4126/worktime-html-csv");
const { readFileSync } = require("fs");

const html = readFileSync("worktime.html", "utf8");
const rows = parseWorktimeHtmlToData(html);
const wideArray = toWideArray(rows);
console.log(toCSVString(wideArray));

ブラウザ版をライブラリとして使用

ウェブアプリケーションや Chrome 拡張ではブラウザ版を利用してください

import { parseWorktimeHtmlToData, toWideArray } from "@heiwa4126/worktime-html-csv/browser";
// 以下同様

ブラウザ版には DOM を直接参照する parseWorktimeDomToData(document) があります。

HTML 上で利用

クラッシックスクリプト版:

<script src="path/to/parse.browser.global.js"></script>
<script>
  const html = document.documentElement.outerHTML;
  const rows = WorktimeHtmlCsv.parseWorktimeHtmlToData(html);
  const wideArray = WorktimeHtmlCsv.toWideArray(rows);
  console.log(wideArray);
</script>

ESM スクリプト版:

<script type="importmap">
  {
    "imports": {
      "papaparse": "https://esm.sh/papaparse@5"
    }
  }
</script>
<script type="module">
  import { parseWorktimeHtmlToData, toWideArray } from "path/to/parse.browser.js";
  const rows = parseWorktimeHtmlToData(testHtml);
  const wideArray = toWideArray(rows);
</script>

詳しくは examples/local_http/*.html を参照。

CDN に展開されていたら CDN も使えます。 examples/cdn/*.html を参照。

CLI ツールとして利用

インストール後、CLI コマンドが利用できます。

$ worktime-html-csv -h

Usage: worktime-html-csv [-h|--help] [-v|--version] [--bom] <input.html> [<output.csv>]

Options:
	-h, --help     Show this help message
	-v, --version  Show version
	--bom          Add UTF-8 BOM for Excel compatibility

If <output.csv> is omitted, output will be written to stdout.

開発

# 依存パッケージのインストール
pnpm install

# ビルド
pnpm run build

# テスト(Node.js版+ブラウザ版をnodeで)
pnpm test

# Lint
pnpm run lint

# フォーマット
pnpm run format

# 公開前チェック(lint, 両バージョンのテスト, clean, build, smoke test)
pnpm run prepublishOnly

ブラウザ版のテスト

1. ビルド: pnpm run build

2. Hono で書いたテスト用 HTTP サーバーを起動: pnpm start

3. ブラウザでテストページを開く:

   http://localhost:3000/ をブラウザで開くと、以下が表示されます

   • classic.html - 見た目がつまらない.ブラウザのコンソール(F12)で結果を確認
   • classic2.html - ボタンを押すと画面更新&クリップボードにコピーされる
   • esm.html - 見た目がつまらない.ブラウザのコンソール(F12)で結果を確認
   • esm2.html - ボタンを押すと画面更新&クリップボードにコピーされる

CDN 版のテスト

npmjs 経由で各 CDN に出まわったら

• esm.sh で ESM 版のテスト
• jsDelivr で classic 版のテスト

でテストできます。サーバ不要。HTML をそのままブラウザで開けば OK

ライセンス

MIT