@threestarsoftware/tssgrid 0.1.27 → 0.1.28

package/CHANGELOG.md

@@ -3,6 +3,15 @@
 TssGrid の各リリースの変更点。日付は JST。形式は [Keep a Changelog](https://keepachangelog.com/ja/1.1.0/) 準拠（ゆるめ）。
 数値は特記なき限り**自社調べ**（headless Chrome / Windows 11・環境差あり）。
 
+## [0.1.28] - 2026-10-20
+
+### 追加（プラグイン）
+- **`tss-hyperlink`（セル内ハイパーリンク・安全URL）を追加** — 値を**クリックで開くリンク**にする `format` ヘルパ。値は「表示テキスト｜URL」または URL 単体。`columns[c].html:true` ＋ `format: TssHyperlink()` で使う。**URL は利用者データになり得る＝XSS を最初から潰す設計**：`http`/`https`/`mailto`/`tel` のみ許可（`javascript:`/`data:`/`vbscript:` 等は**リンクにせず素のテキスト**に落とす）、スキーム無しは `https://` 補完、表示テキスト・`href` は必ずエスケープ、`target=_blank` に `rel="noopener noreferrer"`。`TssHyperlink.safeUrl(u)` 単体でも利用可。例 `examples/hyperlink.html`（攻撃例含む）。
+- **`tss-cascade` に「その他」自由入力を追加** — 多段（フライアウト）プルダウンの葉に `other:true` を付けると、選んだとき**入力欄に切替**＝自由入力できる（IME 合成ガード・確定/戻る付き）。**`codeField` 指定時**は、値セル＝普通の葉は「大 / 中 / 小」のパス・その他は打った文字／`codeField` セル＝その葉（その他ノード）の `value`。**「その他」が枝ごとにあっても（有給▸その他／午前休▸その他）コードで親が区別できる**（勤怠区分など）。`codeField` 省略時は従来どおり葉の `value` を値セルに保存＝**後方互換**。`separator`/`otherPlaceholder` オプション追加。例 `examples/cascade-other.html`。
+
+### ドキュメント
+- **sparkline の `fill` オプションを明記**（`fill` 指定＝面グラフ／無し＝折れ線）。新規実装ではなく既存オプションの周知（`examples/sparkline.html` は既に使用）。
+
 ## [0.1.27] - 2026-10-14
 
 ### セキュリティ修正

package/README.md

@@ -729,6 +729,24 @@ columns: [
   formula: (row) => ['m4','m5','m6','m7','m8','m9'].map(k=>row[k]).filter(v=>v!=='').join(',') }
 ```
 - `type`('line'/'bar') / `width` / `height` / `color` / `strokeWidth` / `fill`(折れ線下の塗り) / `min`・`max`(既定は自動)。
+- **`fill` を指定すると折れ線の下が塗られて「面グラフ（area）」**になります（＝推移＋量感）。`fill` 無し＝ただの線（line）。別プラグイン不要で line/area を使い分け。
+
+### 同梱プラグイン: セル内ハイパーリンク（tss-hyperlink・安全URL）
+
+`plugins/tss-hyperlink.js`＝ セルの値を**クリックで開くリンク**に（format ヘルパ）。値は **「表示テキスト｜URL」** か **URL 単体**。`columns[c].html:true` ＋ `format: TssHyperlink()` で使います。動く例: [`examples/hyperlink.html`](https://tssgrid.threestarsoftware.co.jp/examples/hyperlink.html)。
+
+```html
+<link rel="stylesheet" href="plugins/tss-hyperlink.css">
+<script src="plugins/tss-hyperlink.js"></script>
+```
+```js
+columns: [
+  { data:'url', html:true, readOnly:true, format: TssHyperlink() },
+];
+// 値: 'GitHub|https://github.com' / 'https://example.com' / 'example.com' / 'メール|mailto:a@b.jp'
+```
+- **★安全URL**: `http`/`https`/`mailto`/`tel` のみリンク化。**`javascript:`・`data:` 等は素のテキストに落とす**（XSS 無効化）。スキーム無しは `https://` 補完、表示テキスト・href は HTML エスケープ、`target=_blank` に `rel="noopener noreferrer"` を付与。
+- `separator`(既定 `'|'`) / `target`(既定 `'_blank'`) / `className`(既定 `'tss-link'`)。`TssHyperlink.safeUrl(u)` で URL 安全化だけ単体利用も可（許可外は `null`）。
 - 数値しか SVG に入れない＝安全。`formula`/`html-cells` と同じ仕組みで、**有料グリッドの "セル内グラフ" を無料で**。
 
 ### 同梱プラグイン: セル内 横棒グラフ（bar・データバー）

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@threestarsoftware/tssgrid",
-  "version": "0.1.27",
+  "version": "0.1.28",
   "description": "軽量・ノービルド・日本語IME堅牢な編集グリッド（vanilla JS / 依存なし / MIT）。Excel ライクな入力画面を <script> タグ1本で。",
   "license": "MIT",
   "author": "ThreeStarSoftware (https://www.threestarsoftware.co.jp/)",
@@ -59,6 +59,10 @@
       "types": "./plugins/tss-time.d.ts",
       "default": "./plugins/tss-time.js"
     },
+    "./plugins/tss-hyperlink.js": {
+      "types": "./plugins/tss-hyperlink.d.ts",
+      "default": "./plugins/tss-hyperlink.js"
+    },
     "./plugins/*": "./plugins/*",
     "./package.json": "./package.json"
   },

package/plugins/tss-cascade.css

@@ -13,3 +13,17 @@
 .tg-cascade .tg-casc-item.active { background: var(--tg-accent, #1573c0); color: #fff; }
 .tg-cascade .tg-casc-label { flex: 1; }
 .tg-cascade .tg-casc-arrow { font-size: 10px; opacity: .7; margin-left: 6px; }
+.tg-cascade .tg-casc-other { font-style: italic; opacity: .95; }
+/* 「その他」モードの入力欄（codeField モードで自由入力） */
+.tg-cascade.tg-casc-inputpop { overflow: visible; }
+.tg-cascade .tg-casc-inputwrap { padding: 4px; min-width: 180px; }
+.tg-cascade .tg-casc-input {
+  width: 100%; box-sizing: border-box; padding: 5px 8px; font: inherit;
+  border: 1px solid #c4ccd6; border-radius: 5px; outline: none;
+}
+.tg-cascade .tg-casc-input:focus { border-color: var(--tg-accent, #1573c0); }
+.tg-cascade .tg-casc-actions { display: flex; gap: 6px; margin-top: 6px; justify-content: flex-end; }
+.tg-cascade .tg-casc-actions button {
+  padding: 3px 12px; font: inherit; cursor: pointer; border-radius: 5px; border: 1px solid #c4ccd6; background: #f5f7fa;
+}
+.tg-cascade .tg-casc-actions .tg-casc-ok { background: var(--tg-accent, #1573c0); color: #fff; border-color: transparent; }

package/plugins/tss-cascade.d.ts

@@ -7,12 +7,22 @@ export as namespace TssCascade;
 declare function TssCascade(opts: TssCascade.Options): EditorDef;
 
 declare namespace TssCascade {
-  /** ノード。枝は `children`、葉は `value`（未指定なら `label` を保存）。 */
-  interface Node { label: string; value?: string | number; children?: Node[]; }
+  /** ノード。枝は `children`、葉は `value`（未指定なら `label` を保存）。
+   *  `other:true` の葉は「その他」＝選ぶと入力欄に切替わり、打った文字を値に確定する。
+   *  その時 codeField へ書くコードは、その「その他」ノード自身の `value`（枝ごとに変えられる）。 */
+  interface Node { label: string; value?: string | number; children?: Node[]; other?: boolean; }
 
   interface Options {
     /** 入れ子の選択肢。 */
     options: Node[];
+    /** コードの書き戻し先の列（data キー or 列 index）。
+     *  指定時: 値セル＝普通の葉はパス「大 / 中 / 小」・その他は打った文字／codeField＝葉(その他ノード)の value。
+     *  省略時: 葉の value を値セルに保存（従来・表示は pathFormat）。 */
+    codeField?: string | number;
+    /** 値セルに入れるパスの区切り（既定 ' / '）。pathFormat の separator と揃えると良い。 */
+    separator?: string;
+    /** 「その他」入力欄のプレースホルダ（既定 '自由入力'）。 */
+    otherPlaceholder?: string;
     /** シングルクリックで開く（既定 true）。 */
     openOnClick?: boolean;
     /** ポップアップに付ける任意クラス。 */

package/plugins/tss-cascade.js

@@ -1,33 +1,54 @@
 /*! TssCascade — 多段（フライアウト）プルダウン。TssGrid カスタムエディタ（ポップアップ型）。
  *
  *  メニューのように「大分類 ▸ 中分類 ▸ 小分類」とフライアウトで開き、葉を選ぶとセルに確定。
- *  保存はその葉の value（未指定なら label）。表示は TssCascade.pathFormat で「大 / 中 / 小」のパスにできる。
+ *  葉に `other:true` を付けると、その葉は「その他」＝選ぶと入力欄に切替わり、打った文字をセルに確定。
  *
- *  使い方:
+ *  ── 2つの保存モード ───────────────────────────────────────────────
+ *  (1) codeField 無し（従来）:
+ *      葉の value（未指定なら label）を**値セルに**保存。表示は TssCascade.pathFormat でパスに。
+ *      「その他」を選んだら、打った文字をそのまま値セルに保存。
+ *  (2) codeField あり（コードと表示を分離・combo と同じ流儀）:
+ *      ・値セル        … 普通の葉＝パス「有給 / 私用」／その他＝打った文字「通院」
+ *      ・codeField セル … 普通の葉＝その葉の value／その他＝その「その他」ノードの value
+ *      ＝「その他」が枝ごとにあっても（有給▸その他／午前休▸その他）、codeField を見れば
+ *        どの枝の「その他」かが分かる（文字だけで親が消えない）。値は人が読む表示に使う。
+ *
+ *  使い方（勤怠の区分・枝ごとの「その他」コード）:
  *    const OPTS = [
- *      { label:'営業', children:[
- *        { label:'国内', children:[ {label:'東日本', value:'sales.jp.east'}, {label:'西日本', value:'sales.jp.west'} ] },
- *        { label:'海外', value:'sales.global' },
+ *      { label:'有給', children:[
+ *        { label:'私用', value:'paid:personal' },
+ *        { label:'その他', other:true, value:'paid:other' },   // ← この枝の「その他」コード
+ *      ] },
+ *      { label:'午前休', children:[
+ *        { label:'私用', value:'am_half:personal' },
+ *        { label:'その他', other:true, value:'am_half:other' },
  *      ] },
- *      { label:'開発', children:[ … ] },
  *    ];
  *    columns: [
- *      { data:'category', editor: TssCascade({ options: OPTS }),
- *        format: TssCascade.pathFormat(OPTS) },   // 表示を「営業 / 国内 / 東日本」に（任意）
+ *      { data:'categoryCode' },                                 // コード列（paid:other 等・hidden:true でも可）
+ *      { data:'leaveReason', editor: TssCascade({
+ *          options: OPTS,
+ *          codeField: 'categoryCode',   // コードの書き戻し先（data キー or 列 index）
+ *      }) },
  *    ]
+ *    // 「有給 ▸ その他」で「通院」と入力 → leaveReason='通院' / categoryCode='paid:other'
  *
  *  opts:
- *    options     : 入れ子配列 [{ label, value?, children? }]。必須。value 未指定の葉は label を保存。
+ *    options     : 入れ子配列 [{ label, value?, children?, other? }]。必須。value 未指定の葉は label を保存。
+ *    codeField   : コードの書き戻し先の列（data キー or index）。指定時はモード(2)。省略でモード(1)。
+ *    separator   : 値セルに入れるパスの区切り（既定 ' / '）。pathFormat と合わせると良い。
+ *    otherPlaceholder : 「その他」入力欄のプレースホルダ（既定 '自由入力'）。
  *    openOnClick : 既定 true（プルダウン同様シングルクリックで開く）。
  *    className   : ポップアップに付ける任意クラス。
  *  静的:
- *    TssCascade.pathFormat(options, { separator }) => (value)=>string   // 列 format 用
+ *    TssCascade.pathFormat(options, { separator }) => (value)=>string   // 列 format 用（モード1の表示）
  *    TssCascade.pathOf(options, value, sep?) => string
  */
 (function (root) {
   'use strict';
   function esc(s) { return String(s == null ? '' : s).replace(/[&<>"]/g, function (c) { return { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;' }[c]; }); }
   function leafVal(n) { return n.value !== undefined ? n.value : n.label; }
+  function isBranch(n) { return !n.other && n.children && n.children.length; }
 
   // 値 → ラベルのパス配列（[大, 中, 小]）。見つからなければ null。
   function findPath(nodes, value, trail) {
@@ -43,20 +64,46 @@
   function TssCascade(opts) {
     opts = opts || {};
     var roots = opts.options || [];
+    var codeField = opts.codeField;
+    var sep = opts.separator || ' / ';
+    var placeholder = opts.otherPlaceholder != null ? opts.otherPlaceholder : '自由入力';
+
     var panels = [];              // 開いているパネル(div)。panels[0]=root, [1]=sub, …
-    var ctxRef = null, done = false, onDoc = null, onKey = null;
+    var chosen = [];              // chosen[d] = 深さ d で降りた枝ノード（葉のパス復元に使う）
+    var ctxRef = null, done = false, onDoc = null, onKey = null, composing = false;
 
     function teardown() {
       panels.forEach(function (p) { if (p.parentNode) p.parentNode.removeChild(p); });
-      panels = [];
+      panels = []; chosen = [];
       if (onDoc) document.removeEventListener('mousedown', onDoc, true);
       if (onKey) document.removeEventListener('keydown', onKey, true);
-      onDoc = onKey = null;
+      onDoc = onKey = null; composing = false;
     }
-    function closeFrom(depth) { while (panels.length > depth) { var p = panels.pop(); if (p.parentNode) p.parentNode.removeChild(p); } }
-    function commitLeaf(n) { if (done) return; done = true; var c = ctxRef; teardown(); c.commit(leafVal(n)); }
+    function closeFrom(depth) { while (panels.length > depth) { var p = panels.pop(); if (p.parentNode) p.parentNode.removeChild(p); } if (chosen.length > depth) chosen.length = depth; }
     function doCancel() { if (done) return; done = true; var c = ctxRef; teardown(); c.cancel(); }
 
+    // 書き戻し: 値セルは commit（履歴に積む）、codeField は別列へ setValueRaw（readOnly 貫通・独立undoを作らない）。
+    function writeCode(code) {
+      var c = ctxRef;
+      if (codeField != null && c.grid && c.r != null) { try { c.grid.setValueRaw(c.r, codeField, code); } catch (e) {} }
+    }
+    // 普通の葉を確定。モード(2)は値＝パス／code＝葉value、モード(1)は値＝葉value（従来）。
+    function commitLeaf(n, depth) {
+      if (done) return; done = true;
+      var c = ctxRef;
+      var path = chosen.slice(0, depth).map(function (x) { return x.label; }).concat(n.label).join(sep);
+      teardown();
+      if (codeField != null) { c.commit(path); writeCode(leafVal(n)); }
+      else c.commit(leafVal(n));
+    }
+    // 「その他」を確定。値＝打った文字／code＝その他ノードの value（枝ごとに違うコード）。
+    function commitOther(n, text) {
+      if (done) return; done = true;
+      var c = ctxRef; teardown();
+      c.commit(text);
+      if (codeField != null) writeCode(leafVal(n));
+    }
+
     function position(pop, anchor, depth) {
       var pw = pop.offsetWidth, ph = pop.offsetHeight, vw = window.innerWidth, vh = window.innerHeight, left, top;
       if (depth === 0) { left = anchor.left; top = anchor.bottom + 2; }
@@ -66,15 +113,43 @@
       pop.style.left = Math.max(6, left) + 'px'; pop.style.top = top + 'px';
     }
 
+    // 「その他」の入力パネル（submenu 相当・panels[depth+1] に積む＝外側クリックで閉じない）。
+    function openInput(n, depth, anchor) {
+      closeFrom(depth + 1);
+      var pop = document.createElement('div');
+      pop.className = 'tg-cascade tg-casc-inputpop' + (opts.className ? ' ' + opts.className : '');
+      pop._isInput = true; pop._depth = depth + 1;
+      pop.innerHTML = '<div class="tg-casc-inputwrap">' +
+        '<input class="tg-casc-input" type="text" placeholder="' + esc(placeholder) + '">' +
+        '<div class="tg-casc-actions"><button type="button" class="tg-casc-ok">確定</button>' +
+        '<button type="button" class="tg-casc-back">戻る</button></div></div>';
+      document.body.appendChild(pop);
+      panels[depth + 1] = pop;
+      position(pop, anchor, depth + 1);
+
+      var input = pop.querySelector('.tg-casc-input');
+      function back() { closeFrom(depth + 1); var pp = panels[depth]; if (pp && pp._active != null && pp._items[pp._active]) pp._items[pp._active].focus(); }
+      input.addEventListener('compositionstart', function () { composing = true; });
+      input.addEventListener('compositionend', function () { composing = false; });
+      input.addEventListener('keydown', function (e) {
+        if (e.key === 'Enter') { if (composing || e.isComposing || e.keyCode === 229) return; e.preventDefault(); commitOther(n, input.value); }
+        else if (e.key === 'Escape') { e.preventDefault(); e.stopPropagation(); back(); }
+      });
+      pop.querySelector('.tg-casc-ok').addEventListener('mousedown', function (e) { e.preventDefault(); commitOther(n, input.value); });
+      pop.querySelector('.tg-casc-back').addEventListener('mousedown', function (e) { e.preventDefault(); back(); });
+      setTimeout(function () { input.focus(); input.setSelectionRange(input.value.length, input.value.length); }, 0);
+      return pop;
+    }
+
     function openPanel(nodes, depth, anchor) {
       closeFrom(depth);
       var pop = document.createElement('div');
       pop.className = 'tg-cascade' + (opts.className ? ' ' + opts.className : '');
       pop.setAttribute('role', 'menu');
       pop.innerHTML = nodes.map(function (n, i) {
-        var branch = n.children && n.children.length;
-        return '<div class="tg-casc-item' + (branch ? ' branch' : '') + '" data-i="' + i + '" role="menuitem" tabindex="-1">' +
-          '<span class="tg-casc-label">' + esc(n.label) + '</span>' + (branch ? '<span class="tg-casc-arrow">▸</span>' : '') + '</div>';
+        var branch = isBranch(n), other = !!n.other;
+        return '<div class="tg-casc-item' + (branch ? ' branch' : '') + (other ? ' tg-casc-other' : '') + '" data-i="' + i + '" role="menuitem" tabindex="-1">' +
+          '<span class="tg-casc-label">' + esc(n.label) + (other ? '…' : '') + '</span>' + (branch ? '<span class="tg-casc-arrow">▸</span>' : '') + '</div>';
       }).join('');
       document.body.appendChild(pop);
       panels[depth] = pop;
@@ -83,16 +158,19 @@
       var items = pop.querySelectorAll('.tg-casc-item');
       pop._items = items; pop._active = null; pop._depth = depth;
       pop._activate = function (idx) { Array.prototype.forEach.call(items, function (el, k) { el.classList.toggle('active', k === idx); }); pop._active = idx; };
-      pop._enter = function (idx, viaKey) {          // 分岐なら submenu を開く（ホバー/→）。葉なら深いパネルを閉じる。
+      pop._enter = function (idx, viaKey) {          // ホバー/→: 枝なら submenu を開く。葉/その他はそれ以上開かない。
         var n = nodes[idx]; if (!n) return; pop._activate(idx);
-        if (n.children && n.children.length) {
+        if (isBranch(n)) {
+          chosen[depth] = n;
           openPanel(n.children, depth + 1, items[idx].getBoundingClientRect());
           if (viaKey) { var sub = panels[depth + 1], f = sub._items[0]; if (f) { sub._activate(0); f.focus(); } }
         } else closeFrom(depth + 1);
       };
-      pop._choose = function (idx) {                 // クリック/Enter：分岐→開く、葉→確定
+      pop._choose = function (idx) {                 // クリック/Enter: 枝→開く／その他→入力へ／葉→確定
         var n = nodes[idx]; if (!n) return;
-        if (n.children && n.children.length) pop._enter(idx, true); else commitLeaf(n);
+        if (n.other) { pop._activate(idx); openInput(n, depth, items[idx].getBoundingClientRect()); }
+        else if (isBranch(n)) pop._enter(idx, true);
+        else commitLeaf(n, depth);
       };
       Array.prototype.forEach.call(items, function (el) {
         var idx = +el.dataset.i;
@@ -104,6 +182,7 @@
 
     function handleKey(e) {
       var pop = panels[panels.length - 1]; if (!pop) return;
+      if (pop._isInput) return;                       // 入力モードのキーは input 側で処理
       var items = pop._items, idx = pop._active == null ? -1 : pop._active, n;
       if (e.key === 'ArrowDown') { e.preventDefault(); n = (idx + 1) % items.length; pop._activate(n); items[n].focus(); }
       else if (e.key === 'ArrowUp') { e.preventDefault(); n = (idx - 1 + items.length) % items.length; pop._activate(n); items[n].focus(); }

package/plugins/tss-hyperlink.css

@@ -0,0 +1,3 @@
+/* TssHyperlink — セル内リンク（plugins/tss-hyperlink.js）。色は --tg-accent を流用。外部CSSで上書き可。 */
+.tssgrid .tg-table td .tss-link { color: var(--tg-accent, #1573c0); text-decoration: underline; cursor: pointer; }
+.tssgrid .tg-table td .tss-link:hover { text-decoration: none; }

package/plugins/tss-hyperlink.d.ts

@@ -0,0 +1,19 @@
+// TssHyperlink — セル内ハイパーリンク（format ヘルパ）。columns[c].html:true ＋ format に渡す。
+export = TssHyperlink;
+export as namespace TssHyperlink;
+
+/** 値 "表示テキスト|URL"（または URL 単体）を安全なリンク HTML に変換する format 関数を返す。 */
+declare function TssHyperlink(opts?: TssHyperlink.Options): (value: any) => string;
+
+declare namespace TssHyperlink {
+  interface Options {
+    /** 表示テキストと URL の区切り（既定 '|'）。 */
+    separator?: string;
+    /** リンクの target（既定 '_blank'）。 */
+    target?: string;
+    /** <a> に付ける任意クラス（既定 'tss-link'）。 */
+    className?: string;
+  }
+  /** URL を安全化（http/https/mailto/tel のみ許可・スキーム無しは https 補完・許可外は null）。 */
+  function safeUrl(u: any): string | null;
+}

package/plugins/tss-hyperlink.js

@@ -0,0 +1,62 @@
+/*! TssHyperlink — セル内ハイパーリンク（format ヘルパ）。SVG/HTML 自前描画・無依存・コア無改変。
+ *
+ *  セルの値を「クリックで開くリンク」として描く。値の形式は "表示テキスト|URL"（区切りは separator）、
+ *  または URL 単体（その場合は URL を表示テキストにも使う）。`columns[c].html:true` ＋ `format` の seam に乗る。
+ *
+ *  ★セキュリティ: URL は利用者データになり得る＝XSS を最初から潰す。
+ *   - プロトコルは http/https/mailto/tel のみ許可（javascript: data: vbscript: 等は拒否＝ただのテキスト表示に落とす）。
+ *   - スキーム無し（example.com/path）は https:// を補完。表示テキスト・href は必ず HTML エスケープ（" ' も）。
+ *   - target=_blank には rel="noopener noreferrer" を付与。
+ *
+ *  使い方:
+ *    columns: [
+ *      { data:'site', title:'リンク', html:true, readOnly:true, format: TssHyperlink() },
+ *    ]
+ *    // 値: "GitHub|https://github.com" / "https://example.com" / "example.com" / "問合せ|mailto:a@b.jp"
+ *
+ *  opts:
+ *    separator : 表示テキストと URL の区切り（既定 '|'）
+ *    target    : リンクの target（既定 '_blank'。'_self' 等も可）
+ *    className  : <a> に付ける任意クラス（既定 'tss-link'）
+ */
+(function (root) {
+  'use strict';
+  function esc(s) {
+    return String(s == null ? '' : s).replace(/[&<>"']/g, function (c) {
+      return { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c];
+    });
+  }
+  // 許可: http/https/mailto/tel。スキーム無しで安全な文字だけなら https:// 補完。それ以外(javascript: data: 等)は null。
+  function safeUrl(u) {
+    u = String(u == null ? '' : u).trim();
+    if (u === '') return null;
+    if (/^(https?:|mailto:|tel:)/i.test(u)) return u;          // whitelist したスキーム
+    if (!/[:]/.test(u) && /^[\w./?#=&%+\-~@!$*,;()]+$/.test(u)) return 'https://' + u;  // スキーム無し＝ドメイン/パス→https 補完
+    return null;                                               // javascript: data: vbscript: 等＝拒否
+  }
+
+  function TssHyperlink(opts) {
+    opts = opts || {};
+    var sep = opts.separator != null ? opts.separator : '|';
+    var target = opts.target || '_blank';
+    var cls = opts.className != null ? opts.className : 'tss-link';
+    return function (value) {
+      var v = String(value == null ? '' : value);
+      if (v === '') return '';
+      var i = v.indexOf(sep);
+      var text = i >= 0 ? v.slice(0, i) : v;
+      var url = i >= 0 ? v.slice(i + 1) : v;
+      var safe = safeUrl(url);
+      var label = esc((text.trim() || url.trim()));
+      if (!safe) return label;                                 // 不正/未許可 URL＝リンクにせずテキスト表示（＝安全）
+      var rel = (target === '_blank') ? ' rel="noopener noreferrer"' : '';
+      return '<a href="' + esc(safe) + '" target="' + esc(target) + '"' + rel +
+        (cls ? ' class="' + esc(cls) + '"' : '') + '>' + label + '</a>';
+    };
+  }
+  // URL の安全化だけ外から使いたい時用（カスタム format 内など）。許可外は null。
+  TssHyperlink.safeUrl = safeUrl;
+
+  if (typeof module !== 'undefined' && module.exports) module.exports = TssHyperlink;
+  else root.TssHyperlink = TssHyperlink;
+})(typeof self !== 'undefined' ? self : this);