FileMaker ProでMermaid記法を使う #JavaScript

はじめに

皆もすなるWebビューアといふものを私もしてみむとてするなり。
FileMaker ProでMermaid記法を使ってみた。フローチャートを書いて、要素(ノード)をクリックするとFileMakerのスクリプトが動きます。

※要素(ノード)をクリックすると該当レコードに移動するスクリプトが動く

Mermaid記法とは

Mermaid記法は、テキストでいろんな図がかけるというすごいやつです。フローチャート、ガントチャート、シーケンス図、ER図、色々できるみたい。
https://mermaid.js.org/

しかもめっちゃ簡単。要部はこんだけ

    graph LR;
        JP-->US;

これで以下の図が書ける。

えめっちゃ簡単。これで特許のファミリー図かけちゃいそう！

まず、ファミリー図をかいてみた

とりあえず図だけ。クリックしてもFileMakerのスクリプトは呼び出されない。

mermaid.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://unpkg.com/mermaid/dist/mermaid.min.css">
  <script src="https://unpkg.com/mermaid/dist/mermaid.min.js"></script>
  <title>Family</title>
</head>
<body>
  <div class="mermaid">
  graph LR;
      JP-->JP2;
      JP2-.->|分割|JP3;
      JP-->US;
      JP-->EP;
      EP-.->|Validation|DE;
      EP-.->|Validation|FR;
  </div>
</body>
</html>

上記のコードをメモ帳にでも貼って、「mermaid.html」って名前で保存する。
できたファイルをダブルクリックしたらChromeやEdgeあたりで開かれるんじゃないかな～。そしたら図ができていて嬉しい気持ちになるよ！

クリックしたらスクリプトが起動するようにした

この図では、レコード間の関係を示したい。レコードを示す要素(ノード)をクリックしたら、そのレコードに飛べるといいな！と思いついたのでやってみよう。
要素(ノード)をクリックするとFileMakerのスクリプト「btn_clickEvent」が動きます。引数としてnodeName( P24999JPなど)を渡します。

mermaid.html

data:text/html, <!-- FileMakerで使うときはこの行がいるらしい -->
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://unpkg.com/mermaid/dist/mermaid.min.css">
  <script src="https://unpkg.com/mermaid/dist/mermaid.min.js"></script>
  <title>Family</title>
  <style>
    /* Mermaid.jsのツールチップを非表示にする */
    .mermaidTooltip {
      display: none;
    }
  </style>
</head>
<body>
  <div class="mermaid">
  %%{init:{'theme':'neutral'}}%%
  graph LR;
      classDef customNode fill:#8bb5f9,stroke:#8bb5f9,stroke-width:2px;
      P24999JP-->P24999JP2;
      P24999JP2---->|分割|P24999JP3;
      P24999JP-->P24999US;
      P24999JP-->P24999EP;
      P24999EP-.->|Validation|P24999DE;
      P24999EP-.->|Validation|P24999FR;
      P24999JP:::customNode;
      click P24999JP clickEvent "P24999JP"
      click P24999JP2 clickEvent "P24999JP2"
      click P24999JP3 clickEvent "P24999JP3"
      click P24999US clickEvent "P24999US"
      click P24999EP clickEvent "P24999EP"
      click P24999DE clickEvent "P24999DE"
      click P24999FR clickEvent "P24999FR"
  </div>
  <script>
    mermaid.initialize({
      securityLevel: 'loose',
    });

    function clickEvent(nodeName){
      FileMaker.PerformScript("btn_clickEvent", nodeName);
    }
  </script>
</body>
</html>

コードができたらFileMakerに入れてみよう。FileMakerに入れるやり方は、以下を参考にしてください。
https://www.youtube.com/watch?v=absZUT6WYfU
https://www.claris.com/ja/blog/2023/fmgems-web-viewer

「JavaScript による FileMaker スクリプトの実行を許可] オプション」にチェックいれるのを忘れないでね。FileMakerスクリプト内でhtmlを扱うときはスクリプトステップ「テキストを挿入」を使うと、特殊文字( " とか)の処理を省略できるからオススメだよ！

完成！

※要素(ノード)をクリックすると該当レコードに移動するスクリプトが動く

まとめ

とりあえず動いた！やった！securityLevel: 'loose'とか気になるけど！

FileMakerのスクリプト名の指定(btn_clickEvent)と、引数(nodeName)渡すのができたら、あとはスクリプト内でどうにでもなるよ～！