入力したCSVファイルを、ITablesとvite-plugin-singlefileを使用して 『インタラクティブな表形式(JqueryのDataTables)で、CSVのデータを表示する、オフライン環境でも動作可能な単一HTMLファイル』 に変換するプログラムです(node.jsとpythonを併用)。
手持ちのCSVファイルをブラウザ上で表示可能なものに変換したい時、CSVファイルを軽量かつ見やすい形式で配布したい時などに使えます。
DataTablesの公式サイトでインタラクティブな表のサンプルを見ることができます
https://datatables.net/
ITablesのto_html_datatableで出力したhtmlをオフライン化する方法のサンプルという面が強いです。このプログラムはitables==2.1.4の使用を前提にしています。ITablesにバージョンアップが入り機能が変化したらお役御免になる可能性もあるので注意です。
https://mwouts.github.io/itables/html_export.html
| 技術項目 | 使用しているもの |
|---|---|
| プログラミング言語 | JavaScript・Python |
| パッケージ管理とタスク処理 | npm |
| Pythonの仮想環境 | venv |
| CSVをDataTables使用の表HTMLに変換 | ITables |
| HTMLとCSSとJavaScriptのバンドル化 | vite・vite-plugin-singlefile |
これらのインストールが必須です。動作確認はWindows10とPowerShellとFirefoxでやりました。おそらく他のOSやターミナルでも動くと思います。
| 事前インストールが必要 | 動作確認したver |
|---|---|
| npm | v10.7.0 |
| node.js | v20.14.0 |
| Python | v3.11.0 |
ターミナルでリポジトリをクローンし、cdでディレクトリに入ってください。gitがない場合はZIPでダウンロードして解凍してください。
git clone https://github.com/TweeTeaFOX223/csv-to-interactive-table-html-offline.git
cd csv-to-interactive-table-html-offline
npmのスクリプトを実行して、JavaScriptのパッケージインストールとPythonの仮想環境作成とPythonのパッケージインストールを行ってください。
npm install
npm run create-venv
npm run install-pip-requirements
./01_inputに変換するCSVファイルを設置して、./convert.pyのCSVファイルを読み込む部分に相対パスを入れてください。最初の時点ではsample.csvが入っています。※sample.csvはこのサイトで生成しました。
https://tm-webtools.com/Tools/TestData
ITablesの初期設定によって、64KBを超えるCSVはデータがダウンサンプリングされるようになっています。制限を変更したい場合は、下記を参照して、 初期値は取り敢えず400MBに設定しました。
https://mwouts.github.io/itables/downsampling.htmlmaxBytesの値を書き換えてください。 最終的なhtmlは元のCSVの2倍ぐらいのサイズになるので、100MBぐらいが限界かもしれないです(未検証)。
Node.jsやChromeで使われてるV8エンジンが、512MB以上の文字列(JavaScriptファイルも含む)を読み込めないとのことでした。加工による容量増加も考慮すると400～450MB辺りのCSVが限界と思われます。
https://qiita.com/mod_poppo/items/f3fcbc673526c84b9387#%E6%96%87%E5%AD%97%E5%88%97%E3%81%AE%E9%95%B7%E3%81%95
https://zenn.dev/faycute/scraps/c037099fadc9f3#comment-c2c83119ba7ea9
npmのスクリプトを実行し、作成したPythonの仮想環境で./convert.pyを実行します。./02_tmp_htmlにバンドルする前の一時HTMLファイルが生成されます。
npm run generate-tmp-html
実行に成功したら、ViteのdevサーバーでHTMLを確認して、インタラクティブな表形式での表示が成功しているか確認してください。
npm run dev
npmのスクリプトを実行して、一時HTMLファイルを単一HTMLファイルにバンドルします。./03_output_html/index.htmlとして生成されます。previewのサーバーでHTMLを確認して問題がなければ成功です！このindex.htmlは概要の説明にある通りで、オフライン環境でも動作可能かつブラウザから直接開くことが可能です。
npm run build
npm run preview
Pythonの部分はpoetryとtaskipyでやろうと思っていたのですが、1ファイルだけだったのと、下記のものを見て「npmでvenvのアレコレをしたら良さそう」と思って何となくで試してみました。
poetryのプロジェクトでnpm-scriptsを使用したら良かったという記事を見た。
https://kimuson.dev/blog/python/python_with_npm_scripts/- VSCodeのPython拡張機能が、
.venvのディレクトリ内にあるPython実行ファイルのパスを直接指定して動かすコマンドを打っているのを見た。
https://zenn.dev/tweeteafox300/scraps/692ccfc673d496