ファイルメーカーのWeb公開用に確認ダイアログを実装してみました。

ファイルメーカーと言えばクラリス社→ClarisWorksを連想する世代のshukakuです。最新版は「12」なんですよねぇ。時の流れは早いなぁ…。というのはさておき。

ファイルメーカーPro 11のインスタントWeb公開、ファイルメーカーサーバ 11のWeb公開においては、Web互換の問題からダイアログボックスを利用できません。そのため、例えば利用者のボタン操作に対して「よろしいですか？」という確認を求めることができず、即時実行となってしまいます。

ファイルメーカーの標準機能で対応するのであれば、画面遷移を設けて「この内容で実行してよろしいですか？」という画面を挟むことになります。でもそれでは大げさだったり、開発時の負担が増えることがあるため、簡易的な確認を利用できるようにしました。

【対処方法】

ファイルメーカーが生成・送出するHTMLを変更することはできないようなので、JavaScriptを利用して、後から変更を加えることを考えました。

幸いにもファイルメーカーの（インスタント）Web公開自身が種々の機能でJavaScriptを利用しており、その中で細工させてもらうことにしました。

【バックアップ】

まず、ファイル「fmi_iwp.js」を見付けてバックアップしておきます。下記はWindows版での所在の例です。

• ファイルメーカーPro 11
  • C:\Program Files (x86)\FileMaker\FileMaker Pro 11\Extensions\Web Support\Resources\iwpres
• ファイルメーカーサーバ 11
  • C:\FileMaker Server\Web Publishing\publishing-engine\wpc\Resources\iwpres

【JavaScriptの改造】

次に、fmi_iwp.jsの冒頭に下記の関数定義を追加します。ファイルを編集する際は、文字コードをUTF-8、改行コードをLFとします。全角文字を含んでいるため、文字コードをUTF-8にしておかないと、Web公開がエラーで機能しません。

// 名前の先頭と末尾が全角空白のリンクについて、実行前に確認を求める動作を追加。 // 関数updateStatusFrame内で呼び出し。 function addConfirmationToLinks() { // 実行の順序を保証するため、タイマイベントとして実装。 setTimeout(function() { // 最終フレーム（本文）内のリンクタグを処理。 var frames = document.getElementsByTagName("frame"); var links = frames[frames.length - 1].contentWindow.document.getElementsByTagName("a"); for(var i = 0; i < links.length; i++) { // 表示名の前後に全角空白を含むなら、onclickイベントハンドラに確認処理を追加。 if(/　.+　/.test(links[i].innerHTML)) { // 個々のイベントハンドラを個別に扱うため、全体を無名変数として実装。 (function(link) { // 元のハンドラを保存。 var handler = link.onclick; // イベントハンドラを書き換え。 var text = link.innerHTML.replace(/<[^>]+>/g, ""); link.onclick = function() { if(confirm(text + "を実行しますか？")) { handler(); } } // 再度の置換を回避するため、リンク名を変更。 link.innerHTML = link.innerHTML.replace(/　(.+)　/, "$1"); })(links[i]); } } }, 500); }

続いて、追加した関数の呼び出しを下記の部分に追加します。

this.setupControlFrame( this.controlFrame, info ); this.openUrlWindows( info.urls ); // update the title here; fix for 76808; custom title not updated when status is closed document.title = info.windowtitle; addConfirmationToLinks(); // ←この行を追加。 if( ! this.statusVisible ) return; var sFrame = this.statusFrame;

上記の変更を加えたfmi_iwp.jsを保存すれば改造は終了です。

【ボタンの準備】

実行前に確認を求めたいボタンは、その表示名の前後に全角空白を追加します。

• 元の名前の例：「申し込み」
• 変更後の例：「■申し込み■」（■＝全角空白）

上記のような名前に設定したボタンをクリックすると、JavaScriptによるダイアログボックスを開き、「○○○○　を実行しますか？」という確認メッセージを表示します。OKボタンをクリックすると処理を実行します。Cancelボタンをクリックすれば、何もせずにダイアログボックスを閉じます。

【要点】

追加した関数を呼び出しているのが画面上部のステータスバーを制御している部分で、その時点ではレコード内容の表示が完了していない（目的のHTMLを受信していない）可能性があります。

そのため、確認ダイアログボックスを表示するようにHTMLを書き換える処理の全体をタイマイベントとして記述して、「次のアイドルタイムに実行」するように意図しています。

また、再度の書き換えを繰り返してしまうことを回避するため、ボタン名の印である全角空白を取り除くようにしています。