Let (
[
    /* ==================================
       ① コメント欄を指定
       ================================== */

    comment = GetAsText ( 注文情報::コメント表示 ) ;


    /* ==================================
       ② 赤色で強調するキーワード
       ================================== */

    redWords = List (
        "キャンセル" ;
        "住所変更" ;
        "返品" ;
        "返金"
    ) ;


    /* ==================================
       ③ 黄色で強調するキーワード
       ================================== */

    yellowWords = List (
        "置き配" ;
        "領収書" ;
        "ラッピング" ;
        "同梱" ;
        "のし"
    ) ;


    /* ==================================
       ④ HTML表示用に文字を変換
       ================================== */

    safeComment = Substitute (
        comment ;
        [ "&" ; "&" ] ;
        [ "<" ; "&lt;" ] ;
        [ ">" ; "&gt;" ]
    ) ;

    safeRed = Substitute (
        redWords ;
        [ "&" ; "&amp;" ] ;
        [ "<" ; "&lt;" ] ;
        [ ">" ; "&gt;" ]
    ) ;

    safeYellow = Substitute (
        yellowWords ;
        [ "&" ; "&amp;" ] ;
        [ "<" ; "&lt;" ] ;
        [ ">" ; "&gt;" ]
    ) ;


    /* ==================================
       ⑤ Webビューアの表示内容
       ================================== */

    html =
    "<!DOCTYPE html><html lang='ja'><head>" &
    "<meta charset='UTF-8'>" &
    "<style>" &

    "body{margin:0;padding:12px;background:#f7f8fa;" &
    "font-family:Meiryo,sans-serif;color:#333;}" &

    ".panel{background:white;border:1px solid #ddd;" &
    "border-radius:10px;padding:15px;}" &

    "h3{margin:0 0 12px;font-size:16px;}" &

    ".status{padding:10px;margin-bottom:12px;" &
    "border-radius:6px;font-size:13px;font-weight:bold;}" &

    ".warn{background:#fff1d6;color:#986600;}" &
    ".ok{background:#e5f5e9;color:#207240;}" &
    ".empty{background:#eee;color:#666;}" &

    ".comment{padding:12px;border:1px solid #ddd;" &
    "border-radius:6px;white-space:pre-wrap;" &
    "overflow-wrap:anywhere;line-height:1.8;" &
    "font-size:14px;max-height:300px;overflow:auto;}" &

    "mark{font-weight:bold;padding:2px 3px;" &
    "border-radius:3px;}" &

    "mark.red,.chip.red{background:#ffd2d2;color:#a00000;}" &
    "mark.yellow,.chip.yellow{background:#fff0a0;color:#775500;}" &

    ".tags{margin-bottom:10px;}" &

    ".chip{display:inline-block;margin:3px;" &
    "padding:4px 8px;border-radius:5px;font-size:12px;}" &

    "</style></head><body>" &

    "<div class='panel'>" &
    "<h3>お客様コメント確認</h3>" &
    "<div id='status' class='status'></div>" &
    "<div id='tags' class='tags'></div>" &
    "<div id='comment' class='comment'></div>" &
    "</div>" &

    "<div id='source' style='display:none'>" &
    safeComment & "</div>" &

    "<div id='redWords' style='display:none'>" &
    safeRed & "</div>" &

    "<div id='yellowWords' style='display:none'>" &
    safeYellow & "</div>" &


    /* ==================================
       ⑥ キーワード判定処理
       ================================== */

    "<script>" &
    "(function(){" &

    "var text=document.getElementById('source').textContent||'';" &
    "var rules=[];" &
    "var seen=Object.create(null);" &

    "function addRules(id,color){" &
    "var value=document.getElementById(id).textContent||'';" &
    "var words=value.split(String.fromCharCode(13)).join(String.fromCharCode(10)).split(String.fromCharCode(10));" &
    "for(var i=0;i<words.length;i++){" &
    "var word=words[i].trim();" &
    "if(word&&!seen[word]){" &
    "rules.push({word:word,color:color});" &
    "seen[word]=true;" &
    "}" &
    "}" &
    "}" &

    "addRules('redWords','red');" &
    "addRules('yellowWords','yellow');" &

    "var output=document.getElementById('comment');" &
    "var status=document.getElementById('status');" &
    "var tags=document.getElementById('tags');" &

    "if(!text.trim()){" &
    "status.className='status empty';" &
    "status.textContent='コメント未入力';" &
    "output.textContent='コメントがありません';" &
    "return;" &
    "}" &

    "var pos=0;" &
    "var hits=Object.create(null);" &

    "while(pos<text.length){" &
    "var next=-1;" &
    "var selected=null;" &

    "for(var j=0;j<rules.length;j++){" &
    "var index=text.indexOf(rules[j].word,pos);" &
    "if(index>=0&&(next<0||index<next||" &
    "(index===next&&rules[j].word.length>selected.word.length))){" &
    "next=index;" &
    "selected=rules[j];" &
    "}" &
    "}" &

    "if(!selected){" &
    "output.appendChild(document.createTextNode(text.slice(pos)));" &
    "break;" &
    "}" &

    "output.appendChild(document.createTextNode(text.slice(pos,next)));" &

    "var mark=document.createElement('mark');" &
    "mark.className=selected.color;" &
    "mark.textContent=selected.word;" &
    "output.appendChild(mark);" &

    "hits[selected.word]=true;" &
    "pos=next+selected.word.length;" &
    "}" &

    "var count=0;" &

    "for(var k=0;k<rules.length;k++){" &
    "var r=rules[k];" &
    "if(hits[r.word]){" &
    "count++;" &
    "var chip=document.createElement('span');" &
    "chip.className='chip '+r.color;" &
    "chip.textContent=r.word;" &
    "tags.appendChild(chip);" &
    "}" &
    "}" &

    "if(count>0){" &
    "status.className='status warn';" &
    "status.textContent='要確認：'+count+'種類のキーワード';" &
    "}else{" &
    "status.className='status ok';" &
    "status.textContent='注意キーワードはありません';" &
    "}" &

    "})();" &
    "</script></body></html>"

] ;

    "data:text/html;charset=utf-8;base64," &
    Base64EncodeRFC ( 4648 ; html )
)