はじめに
皆もすなるWebビューアといふものを私もしてみむとてするなり。
FileMaker ProでMermaid記法を使ってみた。フローチャートを書いて、要素(ノード)をクリックするとFileMakerのスクリプトが動きます。
※要素(ノード)をクリックすると該当レコードに移動するスクリプトが動く
Mermaid記法とは
Mermaid記法は、テキストでいろんな図がかけるというすごいやつです。フローチャート、ガントチャート、シーケンス図、ER図、色々できるみたい。
https://mermaid.js.org/
しかもめっちゃ簡単。要部はこんだけ
graph LR;
JP-->US;
これで以下の図が書ける。
えめっちゃ簡単。これで特許のファミリー図かけちゃいそう！
まず、ファミリー図をかいてみた
とりあえず図だけ。クリックしても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>
</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など)を渡します。
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)渡すのができたら、あとはスクリプト内でどうにでもなるよ～！