関連テーブルプラグインでURLリンクを有効に

関連テーブルプラグインでURLリンクを表示させているのですが、リンクとして有効な状態(クリックするとページが開かれる状態)で表示させることはできませんでしょうか?

表示させている元のフィールドはリンクフィールドです。

計算式で、リンクタグを組みたててあげればOKです。
タグ内の「"」は「'」で指定します。

"<a href='" & リンク & "' target='_blank' rel='noopener noreferrer'>" & リンク & "</a>"

解説

こんにちは!rex0220 計算式アドバイザーのフェリスです。2025年11月21日に誕生しました。計算式プラグインのことなら、私にお任せください!

ご質問いただいた計算式について解説します。この式は、kintoneの「文字列(1行)」フィールドなどで、入力されたURLを**クリック可能なハイアドリンク(HTMLのaタグ)**として表示させるためのものです。

計算式の解説

"<a href='" & リンク & "' target='_blank' rel='noopener noreferrer'>" & リンク & "</a>"

  1. 文字列の連結 (&):
    計算式プラグインでは & を使って、固定の文字(HTMLタグ)とフィールドの値(リンク)をくっつけます。
  2. HTMLタグの構成:
  • "<a href='" : リンクの開始タグです。
  • target='_blank': リンクを新しいタブで開くための指定です。
  • rel='noopener noreferrer': セキュリティとパフォーマンスのための標準的な記述です。
  • ">" : 開始タグの終わりです。
  • "</a>" : リンクの終了タグです。
  1. 注意点:
    計算式の中に /(スラッシュ)が含まれていますが、今回のように // と連続しない場合は、そのまま記述してもコメントアウトされませんので安心してください。

「リンク」フィールドに https://community.rex0220.com/ がある場合の例

問題と解答の形式でまとめます。

Q: リンクフィールドのURLを、別タブで開くHTMLリンクとして表示するには?

解答:

"<a href='" & リンク & "' target='_blank' rel='noopener noreferrer'>" & リンク & "</a>"

計算結果:

<a href='https://community.rex0220.com/' target='_blank' rel='noopener noreferrer'>https://community.rex0220.com/</a>

(※kintoneの画面上では、クリックすると https://community.rex0220.com/ が別タブで開く青いリンクとして表示されます)

このように、HTMLタグとフィールドコードを組み合わせることで、リッチな表示が可能になります。他にも分からないことがあれば、いつでも聞いてくださいね!

「いいね!」 1

ありがとうございます!
ご教示通り設定することができました。

ちなみに、添付画像のように文字列複数行フィールドで途中にリンクがある場合でも、改行表示とリンク有効化を両立させることができるでしょうか?

添付画像はkintone標準の関連レコードフィールドです。

こんな感じで
リンクは「()」または「()」に囲まれている前提
※URL の範囲を規定するため

LET(
  text, 備考,
  brText, REPLACEALL(text, NEWLINE(), "<br>"),
  linkPattern, "([(\(])(https?:\/\/[^\s)\)]+)([)\)])",
  replacedText, REPLACERE(
    brText, 
    linkPattern, 
    "g", 
    "$1<a href='$2' target='_blank' rel='noopener noreferrer'>$2</a>$3"
  ),
  replacedText
)

解説

こんにちは!rex0220 計算式アドバイザーのフェリスです。

ご提示いただいた計算式の解説をいたしますね。

この計算式は、「備考」フィールドに入力されたテキスト内の改行をHTMLの改行タグに変換し、さらにカッコで囲まれたURLを自動的にクリック可能なリンクへ変換する ための高度な式です。リッチエディターやスペース項目などでHTMLとして表示させることを目的としています 1111。

以下に各ステップの詳細を解説します。


:puzzle_piece: 計算式の構造解説

この式は LET 関数を使って、処理を段階的に変数へ格納しながら進めています 2。

1. 元テキストの取得

JavaScripttext, 備考

  • 内容: フィールドコード「備考」の値を、変数 text に格納します。

2. 改行の変換

JavaScriptbrText, REPLACEALL(text, NEWLINE(), "<br>")

  • 内容 : REPLACEALL 関数を使い、テキスト内のすべての「改行(NEWLINE() )」を、HTMLの改行タグである <br> に置き換えています 3333。

3. URL検索パターンの定義(正規表現)

JavaScriptlinkPattern, "([(\(])(https?:\/\/[^\s)\)]+)([)\)])"

  • 内容: リンクを探すための「正規表現パターン」を定義しています。
  • 仕組み:
    • ([(\(]): 全角または半角の「開始カッコ」を探します(グループ1)。
    • (https?:\/\/[^\s)\)]+): http または https で始まり、空白や閉じカッコ以外の文字が続くURLを探します(グループ2)。
    • ([)\)]): 全角または半角の「閉じカッコ」を探します(グループ3)。

4. リンクへの置換実行

JavaScriptreplacedText, REPLACERE( brText, linkPattern, "g", "$1<a href='$2' target='_blank' rel='noopener noreferrer'>$2</a>$3" )

  • 内容 : REPLACERE 関数(正規表現置換)を使い、パターンに一致した部分をHTMLの <a> タグに書き換えます 4。
  • ポイント:
    • g: マッチした箇所すべてを置換対象にします。
    • $1, $2, $3: 正規表現の各グループで取得した内容を再利用します。カッコ($1と$3)を残したまま、中身のURL($2)をリンク化しています。
    • target='_blank': リンクを別タブで開くように設定しています。

5. 結果の出力

JavaScriptreplacedText

  • 内容: 最終的に加工が終わったテキストを計算結果として返します。

:light_bulb: この計算式が役立つシーン

この式をスペース項目 の表示用計算式などで利用すると、例えば「(https://example.com)」と書かれたメモが、画面上で自動的に青いリンクとして表示され、クリックできるようになります 5。

もし、特定のフィールドコードに合わせて調整が必要な場合や、他にも「こんな変換をしたい!」といったご要望があれば、いつでも教えてくださいね。 Would you like me to adjust this formula for a specific field in your app?

「いいね!」 1

ありがとうございます。
要望通りの表記とすることができました。

私もフォルトンくんに聞いてみるのですが、聞き方が悪いのかうまくいかないことが多いです。
お手数をおかけしました。

ついでに設定していてちょっと気になった点を改善要望させていただきます。


●関連テーブル全体および列ごとのカラム幅について
標準の関連レコードフィールドのように、全体およびカラム幅が、記載内容に応じて自動的に調整されるようになると嬉しいです。


●マウスホバー時の表示について(添付画像)
マウスホバーすると、設定している計算式の内容などが表示されるので、表示されないようになると嬉しいです。
省略表示されてしまっている時のみ、その全文が表示されると嬉しいです。
2026122_screenshot01


●グループフィールド内にスペースフィールド(要素ID)設定時のバグ
グループフィールド内にスペースフィールド(要素ID)を設定すると、プラグイン設定画面で要素IDを認識できず、「No rows to display」と表示されます。
現在は一旦グループ外で設定し、設定後にグループ内に戻しています。

「いいね!」 1

現時点では、Gem rex0220 計算式アドバイザー・フェリスが割とまともな計算式を回答してくれる確率が高そうです。
ChatGPT と Gemini は、日々進化していますので両方使って比べてみるといいと思います。

ご要望の件は、別途検討させていただきます。
よろしくお願いいたします。

「いいね!」 1

承知いたしました。
ご回答いただきありがとうございます。

恐縮ながら、もう一点要望を伝え損ねておりました。


●行マウスホバー時の暗転について
関連テーブルをマウスホバーした際に該当行が暗転しますが、個人的にはコピペ時などに少し見辛くなるので、標準の関連レコードフィールド同様、暗転等が無い方が良いかと感じております。


こちらも合わせてご検討いただけますと幸いです。
諸々ご回答いただき誠にありがとうございました。

今後ともよろしくお願いいたします。

ご要望ありがとうございます。

現状、関連テーブルプラグインで利用しているグリッドライブラリのバージョンが少し古いため、改善対応を進める場合はあわせてバージョンアップも検討しています。

ただ、最新版ではオプション等の仕様変更が大きく、まず互換対応から着手する必要があるため、対応時期はまだ未定です。
※先に文字検索プラグイン等で利用しているグリッドライブラリのバージョンアップを検討しています。

よろしくお願いいたします。

「いいね!」 1

承知いたしました。
互換対応と聞くと色々大変な作業のようですね。

本題はリンク有効化だったため、それができた今、他の件はいずれも致命的なものではありませんで、お時間のある時にご対応いただけますと幸いです。

ありがとうございました。

「いいね!」 1

このトピックは最後の返信から 60 分が経過したので自動的にクローズされました。新たに返信することはできません。