Markdown
1 組織(Org)に複数のシステムが相乗りする環境や、Vlocity (OmniStudio) / EPC を含む複雑な構成において、GitHub を活用した資材管理・デプロイパイプラインの全体像と設計ノウハウをまとめたドキュメントです。
| ツール / SaaS | 概要・特徴 | おすすめのチーム | 費用感 |
| <!DOCTYPE html> | |
| <html lang="ja"></html> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>index.mjs</title> | |
| </head> | |
| <body> | |
| <h1>index.mjs</h1> | |
| <script type="module" src="index.mjs"></script> | |
| </body> |
ここではTabulatorの表示機能について解説します。データの編集については触れません。
Tabulatorは、HTML上で多機能かつ高品質なテーブルを直感的に作成できる強力なJavaScriptライブラリです。従来の単純なHTMLの表とは異なり、Excelのような高度な操作をウェブブラウザ上で実現します。 主な特徴は、動的なデータのソート、多機能なフィルタリング、セル内での直接編集、ドラッグ&ドロップによる列の並べ替え、そしてウィンドウ枠の固定(frozen columns)などです。また、仮想DOM(Virtual DOM)技術を採用しているため、数万行規模の膨大なデータであっても、メモリ消費を抑えながら非常に高速で滑らかな描画が可能です。 JSON、CSV、TSVなど多様なデータ形式を簡単に取り込めるほか、CSSによるデザインのカスタマイズ性も高く、業務用のデータ管理システムから分析ツールまで、データ集約型のアプリケーション開発において世界中で広く採用されています。
| <!DOCTYPE html> | |
| <html lang="ja"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <!-- CSSの読み込み --> | |
| <link href="https://unpkg.com/tabulator-tables/dist/css/tabulator.min.css" rel="stylesheet"> | |
| <!-- JSの読み込み --> | |
| <script type="text/javascript" src="https://unpkg.com/tabulator-tables/dist/js/tabulator.min.js"></script> |
| Id Name ProductCode Description IsActive Family CreatedDate CreatedById LastModifiedDate LastModifiedById IsDeleted CurrencyIsoCode | |
| 01t000000000000001 Product 1 SKU-00001 Sample product 1 description. TRUE Hardware 2024-01-01T10:00:00.000Z 005000000000000001 2024-01-02T10:00:00.000Z 005000000000000002 FALSE USD | |
| 01t000000000000002 Product 2 SKU-00002 Sample product 2 description. TRUE Software 2024-01-02T10:00:00.000Z 005000000000000002 2024-01-03T10:00:00.000Z 005000000000000003 FALSE USD | |
| 01t000000000000003 Product 3 SKU-00003 Sample product 3 description. TRUE Service 2024-01-03T10:00:00.000Z 005000000000000003 2024-01-04T10:00:00.000Z 005000000000000001 FALSE USD | |
| 01t000000000000004 Product 4 SKU-00004 Sample product 4 description. TRUE Subscription 2024-01-04T10:00:00.000Z 005000000000000001 2024-01-05T10:00:00.000Z 005000000000000002 FALSE USD | |
| 01t000000000000005 Product 5 SKU-00005 Sample product 5 description. TRUE Consumable 2024-01-05T10:00:00.000Z 005000000000000002 2024-01-06T10:00:00.000Z 00500000000 |
| function myFunction() { | |
| const fileId = '読み込むtsvファイルのID'; | |
| const spreadSheetId = 'スプシ'; | |
| const sheetName = 'シート1'; | |
| const filterRowNumber = 2; // 1オリジン | |
| const tsvData = [fileId].map(readFile).map(parseTsv)[0]; | |
| writeToSheet(tsvData, spreadSheetId, sheetName, filterRowNumber); | |
| } | |
| function writeToSheet(data, spreadSheetId, sheetName, filterRowNumber = 1) { |
| import { DatabaseSync } from 'node:sqlite'; | |
| const isMemory = true; | |
| const path = isMemory ? ':memory:' : 'path/to/file'; | |
| const database = new DatabaseSync(path); | |
| export class ChangeEventTable { | |
| /** @type {DatabaseSync} */ | |
| db; |
| // yocto-queue からの引用 | |
| // https://github.com/sindresorhus/yocto-queue | |
| /* | |
| How it works: | |
| `this.#head` is an instance of `Node` which keeps track of its current value and nests another instance of `Node` that keeps the value that comes after it. When a value is provided to `.enqueue()`, the code needs to iterate through `this.#head`, going deeper and deeper to find the last value. However, iterating through every single item is slow. This problem is solved by saving a reference to the last value as `this.#tail` so that it can reference it to add a new value. | |
| */ | |
| class Node { | |
| value; | |
| next; |
| const event = { | |
| action: 'idle', | |
| onGround: false | |
| } | |
| const stateMaChines = [ | |
| { | |
| state: 'idle', | |
| events: [ |
| /** | |
| * @typedef {"eval" | "forFilter" | "forMap" | "forReduce" | "if" | "milestone"} ProcessType | |
| */ | |
| /** | |
| * @typedef ProcessObject | |
| * @property {any} [input] | |
| * @property {ProcessType} type | |
| * @property {string} [process] | |
| * @property {string} [referenceId] - The id to store the output of this process in the payload |