PRO hyperlinks HYPERLINK formula v1.7
ハイパーリンク
リンクのあるセルをクリックすると新しいタブで開き、長押しすると開かずに選択します。setHyperlink()と=HYPERLINK()によるリンク、ホバー時の宛先表示、event.cancelでアプリ内の宛先を処理するonHyperlinkClickを紹介します。
デモの解説
v1.7.0で、リンクがExcelと同じように動くようになりました。リンクはセルタイプではなくセルの属性です。セルは自分の値と書式をそのまま保ち、リンクはクリックしたときの動作だけを決めます。コードからリンクを書き込むのはPro版の機能で、xlsxやJSONから読み込んだリンクの表示とクリックは両エディションで動作します。
- リンクのあるセルにホバーすると、カーソルが指の形になり、宛先のアドレスがチップに表示されます（ヒントを設定したリンクではその下に表示）。クリックする前に行き先を確認できます
- クリックすると
noopener,noreferrer付きで新しいタブに開きます。長押し（0.6秒）するとExcelと同じく開かずにセルを選択し、ドラッグすれば範囲選択になります - 最初の4件は
ws.setHyperlink(row, col, url, { tooltip })で付けたリンクです。ReoGridは見た目を変えないので、青い下線は普通のsetStyle({ color, underline: true })です — Excelの「ハイパーリンク」スタイルもただの書式です =HYPERLINK(アドレス, ラベル)はラベルを表示します。アドレスはホバー時とクリック時に評価されるため、2つ目の数式はC8から宛先を組み立てています。C8を別のデモID（例:zoom）に書き換えてみてくださいgrid.onHyperlinkClickは何かを開く前に発火します。「注文 #… を開く」のリンクはapp://の宛先を持ち、ページ側で処理します —event.cancel = trueにしてから、下の注文表で該当行を選択します。Intercept every linkにチェックを入れると、すべてのリンクを横取りします- 開くのは
http・https・mailto・telのアドレスだけです。Excelファイルによくあるfile:///のリンクは開かずにセルへ短いメッセージを表示し、javascript:のアドレスが実行されることもありません - リンクは行・列の挿入と削除、並べ替え、ドラッグ移動に追従し、xlsx（
<hyperlinks>）とReoGrid JSONでそのまま往復します
主要 API
ws.setHyperlink(r, c, url, { tooltip }) セルにWebやメールのアドレスをリンクします（Pro）。セルの値と書式はそのままです
=HYPERLINK(address, label) ラベルを表示し、クリックでアドレスを開きます。アドレスは他のセルから組み立てられます
grid.onHyperlinkClick(e => …) 何かを開く前に発火。e.cancel = true にすると、宛先を自前で処理したり確認したりできます
ws.getHyperlinkTarget(r, c) そのセルをクリックしたときの宛先 — 保存されたリンク、なければ=HYPERLINK()の数式
ws.getHyperlinks() シート上のすべてのリンク。xlsxやJSONから読み込んだリンク用にLite版でも使えます
ws.cell(r, c).setStyle({ color, underline: true }) コードで付けたリンクの見た目は変わらないため、青い下線は自分で付けます
ソースコード
TypeScript