FileMakerでナレッジDBをつくるよ！Part 2

⏬️前回の記事

前回はローカルファイルで
HTMLエディタの動作を確認することができました。
今回は以下を進めていきたいと思います！

• FileMaker Serverへの移行（Data APIはどれくらい使える？）

• WebDirectなら画面が貼り付けられるのか？

• WebブラウザからFileMakerへの書き込み＆読み込み（Data API）

・・・

・・・

FileMaker Serverへの移行

まずは、FileMaker Serverへ移行し、
サーバ環境でもHTMLが動作するか確認していきたいと思います！

FileMaker Serverの説明を少ししたいと思います。

FileMaker Serverは、FileMakerで作成したデータベースを複数人で共有し、安定して運用するためのサーバです。
個人のPC上で動かすだけならFileMaker Proでも十分ですが、社内で継続的に使う仕組みにするなら、Serverの役割が大きくなります。

バックアップ、同時利用、公開、将来的な外部連携。
こうした「運用」の視点を持ち込めるのが、FileMaker Serverの強みです。

今回の社内ナレッジDBも、単なる試作で終わらせず、実際に使える基盤に近づけるには、この存在を避けて通れません。

と、いうことでまずFileMaker Serverに移行して動作するか、
試して見たいと思います！

・・・

ファイルの準備

まずは、アップロードの準備からします。
AdminのパスワードがないとFileMaker Server で公開できないので、
設定します。

ここで注意点です！
このパスワードを忘れてしまうとこのファイルを管理者権限で
開けなくなります。
必ず、控えておきましょう！

入力を終えると、「パスワードの設定」 「OK」を押します。
すると、管理者のアカウント名とパスワードの入力を求められます。

アカウント名：admin
パスワード：（先程設定したパスワード）

を入力してください。

アカウント名は大文字、小文字を区別しません。
パスワードは区別します。

・・・

FileMaker Server へアップロード

今回はすでにある FileMaker Server 2025 の環境にアップロードします。
FileMaker Server のインストール方法ですが、
Windowsでしたら以下が参考になるかと思います。

本環境は、Windows Server 2022 Datacenter にインストールされている
FileMaker Server 2025 を対象にしています。
以下がインストール対象のOSになっています。
（以前のバージョンですが、
　サーバOSではなく通常のOSにインストールし、
　動作することは確認しました。
　しかし、FileMakerとしては非推奨です。）

その他仕様はこちらをクリックしてください。

・・・

リモートデスクトップでサーバにアクセスします。

FileMaker Server をインストールするとデフォルト設定では、
以下のフォルダにあるFileMakerのファイルを
FileMaker Serverで公開することができます。

C:\Program Files\FileMaker\FileMaker Server\Data\Databases

今回作成した「knowledgeDB.fmp12」を上記のフォルダにコピーします。

FileMakerServerをインストールすると「Claris FileMaker Server Admin Console」というショートカットがデスクトップに作成されるので、
そちらをダブルクリックしてコンソールを立ち上げます。

・・・

FileMaker Serverでの設定

ショートカットのURL：

http://127.0.0.1:16001/admin-console/signin

「knowledgeDB.fmp12」は追加しただけだと公開されていない状態です。
「データベース」で「knowledgeDB」の v をクリックし、メニューを表示。
「開く」をクリックすると「knowledgeDB」が
FileMaker Server で共有状態になります。

これでクライアントの FileMaker Pro から
アクセスすることができるようになります。

・・・

クライアントのFileMaker Proから開く

今回のクライアント側の FileMaker Pro の
バージョンは 22.02.202 です。

※FileMaker Server と クライアントのバージョン差で
　アクセスできないこともあります。

そのため、以下のようなショートカットを作成し、実行します。

fmp://[サーバのIPアドレス]/Databases/knowledgeDB.fmp12

無事に開けたので次はHTMLエディタを使えるようにしたいと思います！

HTMLエディタを使用できるように設定

前回はローカルフォルダにhtmlを置いて参照していました。
それをサーバに配置し、HTMLエディタが動作するか確認します。

FileMaker Server では下記のフォルダがwebのrootになります。
ここにファイルを配置しようと思います。

C:\Program Files\FileMaker\FileMaker Server\HTTPServer\conf

・・・

ファイルを配置しよう！

サーバの
C:\Program Files\FileMaker\FileMaker Server\HTTPServer\conf
を開きフォルダを追加します。
下記のようなフォルダ構造にします。

C:\Program Files\FileMaker\FileMaker Server\HTTPServer\conf\editor\
    editor.html
    tinymce\
        tinymce.min.js
        skins\
        plugins\
        themes\

・・・

これで準備は完了です。

http://<サーバ名>/editor/editor.html

上記URLを実行するとeditor.htmlの内容が表示されます

後はFileMaker側のWebビューアの参照先を変更すれば、
移植完了です！

・・・

FileMaker：Webビューアの参照先変更

FileMakerで knowledgeDB.fmp12 を開きます。

fmp://[サーバのIPアドレス]/Databases/knowledgeDB.fmp12

レイアウトモードにします。
表示 → レイアウトモード
もしくは、Ctrl + L で実行可能です。

Webビューア部分をダブルクリックしてください。
（下図で選択されている部分がWebビューアです）

すると、下図のダイアログが開かれるので「指定」をクリックしてください。

以下の内容を計算式に反映してください。

Let ([
  serverHost = Get ( ホスト IP アドレス ) ;
  editorPath = "/editor/editor.html" ;

  contentB64 = Base64Encode ( TextEncode ( knowledgeDB::HTML_Content ; "UTF-8" ; 0 ) ) ;
  b64q = GetAsURLEncoded ( contentB64 ) ;

  URL = "https://" & serverHost & editorPath & "?b64=" & b64q
] ;
  URL
)

右下にある「OK」ボタンをクリックし、
「Webビューアの設定」画面も「OK」をクリックしてください。

・・・

TIP💡：FileMakerの計算式のコメントアウト

FileMakerの計算式でコメントアウトをする方法は2種類あります。

//一行だけコメントアウトしたい場合

/*
複数行
コメントアウト
したい場合
*/

上の画像では下部に前回の計算式を残していますが、
/* */ で囲っているためコメントアウトされています。

・・・

画面をブラウズモードに切り替えます。
表示 → ブラウズモード をクリック
もしくは、Ctrl + B で ブラウズモード にします。

以下のダイアログが表示されますが「OK」をクリックしてください。
「保存しない」を押すと今回の変更が全てなくなるので、
注意してください。
（今後もレイアウトを変更すると下図がでてくきますが、
　「保存」をクリックしてください）

ブラウザにすると下図のようになっていました。
httpなので、SSL認証がないから発生しているように見えます。

「詳細設定」をクリックし、
赤枠内にある「<IPアドレス>に進む（安全ではありません）」を
クリックしてください。

表示されました。
しかし、HTMLエディタは表示されず、
ただのHTMLのテキストボックスが表示されています。
なぜだ？
デバッグですね。

デバッグ：WebビューアでHTMLエディタが表示されない

まず、クライアントからURLを実行したら、
ブラウザでHTMLエディタを開けるのかを確認しましょう。
サーバでは確認していましたが、クライアントからは実行していませんでした。
以下を実行してください。

http://<サーバ名>/editor/editor.html

無事、クライアントから開くことができました。
ということは、FileMaker内部から参照するとJavaScriptが動作していない可能性があります。

Webビューアの計算式がどのように見えているのか確認します。
先程設定した下記の計算式です。

Let ([
  serverHost = Get ( ホスト IP アドレス ) ;
  editorPath = "/editor/editor.html" ;

  contentB64 = Base64Encode ( TextEncode ( knowledgeDB::HTML_Content ; "UTF-8" ; 0 ) ) ;
  b64q = GetAsURLEncoded ( contentB64 ) ;

  URL = "https://" & serverHost & editorPath & "?b64=" & b64q
] ;
  URL
)

ツール → データビューア を実行してください。
（ツールが表示されていない方は下にあるTIP💡をお読みください）

「監視」タブを開き、「＋」をクリックしてください。

式の中に先程の計算式を貼り付けてください。
そうすると結果に表示されているのが、今回Webビューアで実行しているURLになります。

この赤枠内にある値を確認すると、httpsになっていました。
計算式に間違いがありそうです。

https://10.18.8.16/editor/editor.html?b64=%0D%0A

このURLをブラウザで実行してみましょう。
FileMakerで開いたときと同じ安全かどうかの確認があり、
IPアドレスを開くを実行すると問題なく表示できました。

念の為、Webビューアの計算式の https://～ を http://～ に変更してみます。

Let ([
  serverHost = Get ( ホスト IP アドレス ) ;
  editorPath = "/editor/editor.html" ;

  contentB64 = Base64Encode ( TextEncode ( knowledgeDB::HTML_Content ; "UTF-8" ; 0 ) ) ;
  b64q = GetAsURLEncoded ( contentB64 ) ;
  
  URL = "http://" & serverHost & editorPath & "?b64=" & b64q
] ;
  URL
)

結果変わらずで、表示できませんでした。

JavaScriptが呼ばれていない可能性があります。
editor.html に一時的に下記を入れJavaScript が実行されているか確認します。

<script>
window.addEventListener('load', () => {
  alert('tinymce=' + typeof tinymce);
});
</script>

サーバの以下のフォルダにあるeditor.html を編集します。

C:\Program Files\FileMaker\FileMaker Server\HTTPServer\conf\editor

デバッグ用のHTMLをChatGPTに作成してもらいました。

editor.html

<!doctype html>
<html>
<head>
<meta charset="utf-8">

<script src="./tinymce/tinymce.min.js"></script>

<script>
function log(msg){
  const el = document.getElementById('debug');
  if(el){
    el.textContent += msg + '\n';
  }
}

window.addEventListener('error', function(e){
  log('JS ERROR: ' + e.message + ' @ ' + e.filename + ':' + e.lineno);
});

function b64ToUtf8(b64){
  const bytes = Uint8Array.from(atob(b64), c => c.charCodeAt(0));
  return new TextDecoder("utf-8").decode(bytes);
}

function getParam(name){
  const u = new URL(location.href);
  return u.searchParams.get(name) || "";
}

window.addEventListener('load', () => {
  log('load start');
  log('location=' + location.href);
  log('tinymce typeof=' + typeof tinymce);

  try{
    const b64 = getParam("b64");
    log('b64 exists=' + (b64 ? 'yes' : 'no'));
    log('b64 length=' + (b64 ? b64.length : 0));

    window.__initialHtml = b64 ? b64ToUtf8(b64) : "";
    log('__initialHtml length=' + (window.__initialHtml ? window.__initialHtml.length : 0));
  }catch(e){
    log('b64 decode error=' + e.message);
    window.__initialHtml = "";
  }

  try{
    log('before tinymce.init');

    tinymce.init({
      selector:'#editor',
      height:900,
      base_url:'./tinymce',
      license_key:'gpl',
      suffix:'.min',
      setup:(ed)=>{
        log('setup called');

        ed.on('init', ()=>{
          log('editor init event');
          ed.setContent(window.__initialHtml || "");
        });

        ed.on('change keyup', ()=>{
          log('change/keyup event');
          fmSave();
        });
      }
    });

    log('after tinymce.init');
  }catch(e){
    log('tinymce.init error=' + e.message);
  }
});

function fmSave(){
  try{
    const html = tinymce.get("editor").getContent();
    log('fmSave length=' + html.length);
    FileMaker.PerformScript("SaveHTML", html);
  }catch(e){
    log('fmSave error=' + e.message);
  }
}
</script>

</head>
<body>
<div id="debug" style="white-space:pre-wrap; font-size:12px; border:1px solid #ccc; padding:8px; margin-bottom:8px; background:#f7f7f7; max-height:220px; overflow:auto;"></div>
<textarea id="editor"></textarea>
</body>
</html>

ブラウザから実行した場合の正常動作。

FileMakerのWebビューアで実行

FileMaker側が同じ画面しか表示されていないのでキャッシュがクリアされていない可能性があります。
Webビューアの計算式を以下のようにしました。

Let ([
  ts = Get ( 現在の時刻 UTC ミリ秒 );
  URL = "http://cmscsv606/editor/editor.html?ts=" & ts
] ;
  URL
)

すると…

キャッシュクリアが問題だったようです。

・・・

TIP💡：「ツール」メニューの表示方法

メニューの 編集 → 設定 をクリックします。

「高度なツールを使用する」にチェックを入れます。
その後、FileMakerを再起動すると「ツール」が表示されます☺️

対策：恒久対応

今後、キャッシュを避けるためにパラメータを追加しようと思います。
まず、knowledgeDB::WebCacheKey フィールドを作成します。

データベースの管理（Ctrl + Shift + D）

FileMakerをレイアウトモードにします。（Ctrl + L）
下の赤枠内をクリックすると画面にフィールドを追加できます

フィールドを表示したい場所にクリック＆ドラッグで場所を決めます。
WebCacheKey を選択し、「OK」をクリックします。

knowledgeDB::WebCacheKey のフィールドをレイアウトに表示できました。

knowledgeDB::WebCacheKey に Get( UUID ) の値を入れます。
ツール → データビューア → ＋ボタン で以下の画面まで行くので、
結果をコピーします。

その値を knowledgeDB::WebCacheKey にペーストします。

Webビューアの計算式を以下のようにします。

Let ([

  cacheKey = knowledgeDB::WebCacheKey ;
  serverHost = Get ( ホスト IP アドレス ) ;
  editorPath = "/editor/editor.html" ;

  contentB64 = Base64Encode ( TextEncode ( knowledgeDB::HTML_Content ; "UTF-8" ; 0 ) ) ;
  b64q = GetAsURLEncoded ( contentB64 ) ;
  
  URL = "http://" & serverHost & editorPath & "?v=" & cacheKey & "&b64=" & b64q
] ;
  URL
)

これで問題なくFileMakerでHTMLエディタが表示できましたね☺️

デバッグが終わったので、editor.htmlのデバッグ部分をコメントアウトしましょう。

HTMLの場合コメントアウトは以下のようにします。

<!--
複数行の
コメントアウトです
1行のコメントアウトはありません
-->

これで、デバッグ部分の表示が消えました☺️

今回の生成物

以下からダウンロードできます☺️
ご利用前に、免責事項と利用条件をご確認ください。

Tinymceは含まれていませんので、README.txtを確認し、
同じフォルダ構造になるように配置してください。

FileMakerのID／Password
admin／admin

おわりに

今回はFileMaker Server に移行するところまで進めました。

• FileMaker Serverへの移行（Data APIはどれくらい使える？）

• WebDirectなら画面が貼り付けられるのか？

• WebブラウザからFileMakerへの書き込み＆読み込み（Data API）

次回は、WebDirectの動作確認から進めていきたいと思います☺️

いちごいぬ🐶

⏬️次回の記事

#FileMaker #社内ナレッジ #ナレッジベース #ナレッジマネジメント #業務改善 #社内DX #情報整理 #ドキュメント管理 #FAQ #RAG #生成AI #ローカルLLM #ベクトルDB #セマンティック検索 #OCR #OneNote #Python #TinyMCE #JavaScript #WebViewer #WebView2 #DataAPI #FileMakerServer #WebDirect #システム設計 #保守運用 #内製開発 #検証ログ #連載企画