FileMakerの機能をJavascriptで拡張する例はWeb上でも多く見つけることができますが、今回はDBServicesのMason Stenquistさんによる、Vue.jsとの連携に関する記事を紹介します。

(記事内の動画で、Vue CLIのインストールから実際の開発の様子まで、詳しく解説しています。併せて参照されることをお勧めします。)

---

FileMaker Web Apps with Vue.js

(元記事はこちら)

Mason Stenquist
2019/7/17

成功したFileMakerカスタムAppであれば、必然的にWebに拡張しなくてはいけない段階(通常はカスタマーポータルとして)がやってきます。解決策としてはWebDirectで十分ですが、要求レベルがWebDirectの能力を超える場合は、標準のWeb技術(HTML、CSS、Javascript、PHPなどのバックエンドスクリプト言語など)を使用する必要があります。

Web向けのアプリケーションを作成することは、FileMaker開発者にとっては大変な作業です。FileMakerアプリと同じくらいインタラクティブでレスポンシブなWebアプリとなれば特にそうです。幸いなことに、高度に動的なWebアプリケーションの開発プロセスを単純化しスピードアップするためのJavascriptフレームワーク、具体的にはReact、 Angular、Vue.jsなどがあります。 FileMakerの開発者向けには、FileMakerの挙動と多くの類似点があるVue.jsをお勧めします。このフレームワークは段階的に開発を進めることができるので、必要に応じて適用範囲を広げていくことができます。また、VueはWebポータルに役立つだけではありません。Webビューア内でVueを使用して、ツリービュー、水平ポータル、クロス集計などを作ることで、FileMakerレイアウトで可能なことを拡張できます。

この記事では、Vue.jsのさまざまな概念と、それらがFileMaker開発者が開発プラットフォームとして期待している双方向性をどのように提供するかについて説明します。 また動画では、FileMakerのWebビューアで実行されるVueを使用して簡単なHTMLエディタを作成する方法を紹介します。

なぜVue.jsなの?

Vue.jsは段階的に開発できるWebフレームワークです。既存のページのただ1つのセクションだけで使用したいという場合も問題ありません。コンポーネント、ライフサイクルフック、状態管理、アプリケーションルーティングを含む完全なSPA(シングルページアプリケーション)を構築したいですか? それも大丈夫です。これらの用語が分からないとしても、問題ありません。Vue.jsはあなたのニーズと共に成長します。

Vue.jsはまた、パッケージサイズが小さく、極めて高速です。非常に人気があり、コミュニティは成長し続けています。多数のパッケージが提供されていて、ドラッグ&ドロップのサポートや入力フォームの検証などの機能を追加するために利用できます。Vue.jsはGithubの歴史の中で3番目に高いスター数を獲得しており、現在世界のトップ10,000のWebサイトのほぼ4％で使用されています。Vue.jsは、使い始めるのが最も簡単なフレームワークの1つで、Reactを使うときに必要なJSXなどを学習する必要もありません。またVue.jsには、Webアプリケーションのデバッグに我々がこれまでに使用した中で最も優れているdevtoolsもあります。

Vue.jsを非常に優れたものにしているいくつかの機能と、それらがFileMakerのどの機能に対応するかを見てみましょう。

双方向データバインディング

双方向データバインディングを使用すると、Webサイト上の入力・テキストなどをVueに保存されているデータにバインドできるため、入力・テキストなどに変更を加えるとその変更は自動的にデータに反映され、その逆もまた然りです。これは、すべてが同期していることを意味します。FileMakerの開発者にとっては、私たちのほとんどすべての作業が自動双方向データバインディングを含んでいるので、これはそれほど驚くことではないかもしれませんが、Webブラウザでそれを行うことはそう簡単ではありません。

以下の例では、もっとも簡単なアプリを作成します。’message’の内容を動的に表示する段落タグがあります。「メッセージ」はFileMakerのフィールドと考えることができます。このVueインスタンスで、’message’プロパティも宣言されているのに気付くでしょう。

次に入力です。この入力は、v-model ディレクティブを使用してメッセージフィールドに直接関連付けることができます。ディレクティブは特別な属性で、HTMLをインタラクティブにするのにして、日付の状態の変化に反応させることができます。これで、フィールドに入力したものはすべて、その上の段落タグにすぐに表示されるようになりました。

算出プロパティ

算出プロパティを使用すると、カスタムApp内のデータに基づいて自動的に計算される値を作成することができ、データが変更されると自動的に更新されます。これはFileMakerの格納された計算であるかのように考えてください。リアクティブプロパティが変更された場合にのみ計算されるからです。つまり、プロパティでDate.now()を使用すると、別のリアクティブプロパティが変更されない限り、常に最初に実行されたときの日付が返されます。

以下は簡単な算出プロパティで、メッセージデータプロパティを大文字にして、2番目の段落タグに “HELLO”を出力します。算出プロパティはすべて算出オブジェクトの中にあり、それぞれのプロパティは何らかのデータを返す関数を呼び出す必要があります。単純な文字列や数値だけでなく、複雑なオブジェクトや配列も返すことができます。

フィルタ

前の例で、メッセージを大文字にするために算出プロパティを使用しましたが、実際には、フィルタを使用することをお勧めします。フィルタは、テキスト・日付・数値の書式設定に最も一般的に使用されます。これは、FileMakerのレイアウトインスペクタパレットで設定されるデータフォーマットと同等です。フィルタは、何度も使用でき、1つのデータプロパティに結び付けられていないという点で、より柔軟性があります。

以下の例は、前の例と同じ目的を、フィルタを使用して達成しています。HTMLでここでもmessageプロパティを使用していることに注意してください。フィルタを使用してテキストをフォーマットすることをVueに指示するために、ただパイプ記号を追加しただけです。フィルタは、算出プロパティとほぼ同じ方法で宣言されます。唯一の違いは、それらが関数のパラメータとして値をとることです。Vue.jsはパイプシンボルの左側にあるものを自動的にパラメータとして使います。

メソッド

Vue.jsのメソッドはFileMakerのスクリプトに似ています。イベントやライフサイクルフックによって起動することができます。イベントは、FileMakerにおけるオブジェクトやフィールドトリガのようなもので、Vue.jsでは、ボタンクリック、入力フォームの送信、マウスオーバー、キー入力などが該当します。ライフサイクルフックは、Vueインスタンスが生成された時、コンパイルされる前、コンパイル時、準備ができた時、破壊される前、破壊時に、それぞれ発生します。これらを、レイアウトとファイルのスクリプトトリガと考えることができます。

すべてのメソッドは、methodsオブジェクトの下の関数として定義します。メソッドは、以下の ‘say’関数で渡される ‘message’パラメータなどのように、パラメータを受け取ることができます。HTMLからメソッドを呼び出すには、単にv-on:clickディレクティブを使用し、そこからパラメータを渡すだけです。

まとめ

Vue.jsは、FileMaker開発者がFileMakerアプリケーションの双方向性と即応性に匹敵する高度に動的なWebアプリケーションを構築するのを助けたり、FileMakerレイアウトで可能なことを拡張するために、使用できます。また、FileMakerと似た概念のため、他の一般的なJavascriptフレームワークと比較して、FileMaker開発者にとってはVueのほうが簡単に学習することができます。この記事の第2部では、VueとFileMaker Data APIを使用して、完全にレスポンシブなカスタマーポータルを構築します。