ブログ

2025/08/27
【プリザンター】 第311回)コメントがもっと便利に!自動アンカーリンクで操作性アップ

「あのコメント、どの項目のこと?」と迷ったことはありませんか?

こんにちは、シーイーシーカスタマサービスの新村です。

プリザンターでレコードにコメントを残す際、特定の項目に言及する経験はないでしょうか。
今回ご紹介するカスタマイズでは、コメント内の特定の単語に自動でアンカーリンクを付与することで、該当項目へ遷移しやすくさせます。
この設定を行うことで、視認性と操作性が向上し、コメントの確認や対応がスムーズになります。

スクリプトでコメント内の特定の単語を aタグ に置換

プリザンターのコメント欄は <div id="CommentList"> 内に出力されるので、JavaScript(jQuery)でその内容を走査し、特定の単語を <a> タグに置換することで実現できます。
例えば「分類A」という文字列を見つけて、ページ内の対応するアンカー #Results_ClassA にリンク、
そして「分類B」という文字列を見つけて、ページ内の対応するアンカー #Results_ClassB にリンクさせる場合は以下のコードで実現できます。

※「テーブルの管理」の「スクリプト」タブで、出力先を「編集」に指定し下記コードを追加します。


$p.events.on_editor_load = function () {
// 複数の単語に対応させるための辞書
const linkMap = {
"分類A": "#Results_ClassA",
"分類B": "#Results_ClassB"
};

// コメント内の特定の単語をアンカーリンク化する処理
$('#CommentList .body').each(function () {
let html = $(this).html();
$.each(linkMap, function (word, target) {
const regex = new RegExp("(" + word + ")(?![^<]*</a>)", "g");
html = html.replace(regex, '<a href="' + target + '">$1</a>');
});
$(this).html(html);
});
}
linkMap に単語とリンク先の対応を登録しておくことで、複数の語句に柔軟に対応できます。
正規表現では、すでにリンク化されている語句を除外する工夫もしています。

それでは、実際の画面動作をご覧ください。

まとめ

いかがでしたか?

この仕組みを応用すれば、コメント内の製品名や担当者名などにもリンクを付けることが可能です。
より複雑な条件分岐や動的なリンク生成にもチャレンジしてみてください!

弊社では、プリザンター導入・活用に関して以下のサービスをご提供しています。
年間サポート
各種書籍
帳票出力(Excel/PDF)支援パック

プリザンターの導入から開発・運用をあらゆる角度から全力サポートいたします。
ぜひお気軽にご相談ください!

☆☆☆
サービスの説明などをご希望の方は【 問い合わせフォーム 】よりお気軽にお問い合わせください。
☆☆☆

お問い合わせ
PAGE TOP