メインコンテンツへスキップ
見出し画像

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 で公開できないので、
    設定します。

    画像
    セキュリティを開きます
    画像
    Adminアカウントを選択し、右のペンマークをクリックしてください。
    画像
    最初はAdminアカウントのパスワードが設定されていませんので、
    パスワードを設定してください。
    上下のボックスに同じパスワードを入力してください。

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

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

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

    を入力してください。

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

    ・・・

    FileMaker Server へアップロード

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

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

    画像
    FileMaker Server 2025 は FileMaker Server 22.x と同等です

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

    ・・・

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

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

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

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

    画像
    「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 と クライアントのバージョン差で
    　アクセスできないこともあります。

    画像
    本来なら「ホストを表示」から先程追加した「knowledgeDB」を開けるのですが、
    私の環境だとセキュリティがかかっており表示できません。

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

    fmp://[サーバのIPアドレス]/Databases/knowledgeDB.fmp12
    画像
    最初に開いた場合、アカウントの入力を求められるので、
    先程設定したadminアカウントを入力してください。
    資格マネージャにパスワードを保存すると、今後は自動的に開かれます。
    画像
    無事に開くことができました✨

    無事に開けたので次は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\
    画像
    フォルダに「editor」フォルダを作成します
    画像
    「editor」フォルダ内に前回使用した「tinymce」フォルダと
    editor.html を配置します

    ・・・

    これで準備は完了です。

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

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

    画像
    無事、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が動作していない可能性があります。

    画像
    クライアントからもHTMLエディタが開けました。

    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
)

    すると…

    画像
    FileMakerで表示することができました☺️

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

    ・・・

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

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

    画像

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

    画像

    対策：恒久対応

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

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

    画像
    knowledgeDB::WebCacheKey テキストタイプで追加

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

    画像

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

    画像

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

    画像

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

    画像

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

    画像
    Get( UUID ) の値をコピペ

    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 #システム設計 #保守運用 #内製開発 #検証ログ #連載企画


     
     

    いちごいぬ

     
     
    「ちょっと疲れた心に、やさしいAIの居場所を。」 現代の孤独や生きにくさをAIの力で少しでも和らげたい。 そんな想いから、“ゆるこみ”プロジェクトを始動しました。 もし共感してもらえたら、固定記事を読んでみてください😊

    あなたへのおすすめ