06. [J] Reactor Development チュートリアル
https://paper.dropbox.com/doc/06.-Reactor-Development-Tutorial--BtMSl0GazlQfKftO5gx9DVOyAg-8SUVxuMSTZLDLBsaVSu50
- 1 06. Reactor Development チュートリアル
- 1.1 Section A: BlackBoxの管理
- 1.1.1 1. BlackBox ファイル
- 1.1.2 2. BlackBox の 関数とパラメーター
- 1.1.3 3. コンパイル と プレビュー
- 1.2 FR Toolbox と FileMakerとの対話
- 1.2.1 1. 概要 : FRToolBox と 非同期性
- 1.2.2 2. パラメーターの使用
- 1.2.3 3. 対象レコードからレコードを取得する
- 1.2.4 4. 単一のレコードを取り出す
- 1.2.5 5. レコードの更新
- 1.2.6 6. 新しいレコードの作成
- 1.2.7 7. レコードの削除
- 1.2.8 8. 変更のポーリング
- 1.2.9 9. スクリプトを実行する
- 1.2.10 10. オブジェクトの画像を取り出す
- 1.2.11 11. スターティング（開始）テンプレートの使用
- 1.2.12 12. デバッグ
- 1.1 Section A: BlackBoxの管理
06. Reactor Development チュートリアル
以下は、Reactor で独自の BlackBox を作成する (または他のものを変更する) ために知っておくべきことすべてを提供します。
最初のセクションでは、Reactor での BlackBox の管理について紹介します。
2 番目のセクションは、FileMaker アプリケーションとの通信に使用される FR Toolbox https://splashdocs.atlassian.net/wiki/spaces/FusionReactor/pages/2203287639 機能のより高度なガイドです。
このチュートリアル全体は、単一の BlackBox 用にいくつかの関数を構築することに関するものです。関数の動作を確認したい場合は、完全に完成した BlackBox をここからダウンロードできます。
https://www.dropbox.com/s/6fn6eo85h66ly56/TutorialBB%20%281%29.rbb?dl=0
これを Reactor アプリケーションにインポートするには、新しい BlackBox を追加し、インポートを選択します。
Reactor 開発を学習する最善の方法は、このチュートリアルをStep-by-stepに進めることですが、すでに完成した BlackBox を使用して、コードの個々のスニペットにアクセスしたり、独自の BlackBox で発生する可能性のある問題を解決したりすることができます。
Section A: BlackBoxの管理
1. BlackBox ファイル
これまでに行ったことがない場合は、Reactor のアプリ内チュートリアルを実行するのに最適な時期です。これは、Reactor Core のサポート画面から実行できます。
管理する BlackBox を作成または選択するときは、「ソース ファイル」タブから始めます。
これは、デモ BlackBox の 1 つをクリックすると表示されるもので、BlackBox のメインファイルと必要なサポートファイルで構成されています。新しい BlackBox の作成を開始すると、このリストは空から始まります。先に進み、TutorialBB という名前の新しい BlackBox を作成します。
このチュートリアルを終了するまでに、TutorialBB は Reactor を介して FileMaker と通信する機能でいっぱいになります。 BlackBox は、これらの機能を呼び出す任意のコンピュータにインストールできる移植可能なファイルです。
ファイルのアップロードを開始するか、最初の関数を作成した後に HTML テンプレートを作成するように求められます。次のセクションを参照してください。
追加したファイルはすべて、ファイルのリストに表示されます。それぞれに2つのボタンがあります。（編集と削除）
編集ボタンをクリックすると、選択したエディタでドキュメントが開きます。Moogie がまだわからない場合は、何をすべきかを尋ねます。 Mac の場合は BBEdit、Windows の場合は Notepad++ をお勧めしますが、それは完全にあなた次第です。
これらは、ソースファイルを編集するときの既定のアプリケーション設定です。 「your editor」の下をクリックして、変更することもできます。最初のオプションはテキストエディタ用で、2 番目のオプションはイメージ エディタ用です。
ファイルを編集すると、そのエディタでファイルが開きます。
そのドキュメントは現在「公式に」公開されています。つまり、BlackBox をコンパイルすると、ファイルが Reactor に戻されます。そのため、最初にエディタ自体で、行った変更は保存する必要があります。
「アップロード」をクリックして手動で行うことができます。変更を Reactor に戻す必要がなくなった場合は、[閉じる] をクリックします。テキスト エディタ内のファイルは閉じませんが、自分で閉じる必要があります。また、いつでもファイルを再度開くことができます。つまり、変更が完了し、これらの変更を取り込みたい場合は、[アップロード] をクリックします。その後、[閉じる] をクリックできます。
2. BlackBox の 関数とパラメーター
「functions（関数）」タブをクリックすると、BlackBox の関数のリストが表示されます。ほとんどの場合、BlackBox ごとに 1 つの関数がありますが、1 つの BlackBox に対して一連の BlackBox ユーティリティを作成する場合は、それぞれに関数を作成できます。
新しい BlackBox を作成したら、最初に関数を作成する必要があります。
これを行うには、関数リストの上部にある [+] ボタンをクリックして、詳細を入力します。
TestFunction という新しい BlackBox の新しい関数を呼び出します。
関数ができたので、新しいパラメーターを追加します。それに MyParameter という名前を付けて、それがオプションかどうか、非表示かどうか、および/またはパラメーターへの変更が BlackBox の更新をトリガーするかどうかを Moogie に知らせます。また、「データ型」をTextに設定してください。
次に、BlackBox に何かをさせる必要があります。テンプレートファイルを作成しましょう。 BlackBox ファイルが何をするかについては、より高度なガイドを参照してください。ただし、最も純粋な意味では、必要な定型文の コードで開始する関数の HTML ドキュメントが用意され、カスタマイズする準備ができています。
「html テンプレート…」ボタンをクリックして作成します。
生成している関数名と同じものが自動的に作成されます。それでは、先に進んで、ビルドしてみましょう。
関数にテキストベースのパラメーターを 1 つだけ設定したので、テンプレートビルダーは自動的にそれを JavaScript ブロックに取り込み、変数として保存します。
この時点で、BlackBox に組み込むためのすべての詳細が提供されました。[プレビュー] タブをクリックします。
3. コンパイル と プレビュー
[コンパイル] をクリックし、[関数] タブに戻ると、BlackBox の詳細の下にファイルが表示されます。 BlackBox ファイル自体 - 次の関数を使用して、どこにでも取得およびデプロイできるようになりました。：
BlackBoxAdd( <<bb_containerfield>> )それでは、BlackBox をプレビューしてみましょう。
これで、BlackBox が… 何もしないことを確認できます。それは、作成したのは空白のページだけだからです。ここで、JavaScript を使用して、実際に BlackBox に何かを実行させます。
FR Toolbox と FileMakerとの対話
1. 概要 : FRToolBox と 非同期性
BlackBox を作成すると、FRToolBox.js という 1 つのファイルが常に含まれます。
<script type='text/javascript' src='FRToolBox.js'></script>これは、FileMaker と対話するために使用できる JavaScript ライブラリです。
基本的に、操作する必要があるデータを取り出したり、書き戻すために使用されます。さらに、FileMaker のスクリプトを実行するためにも使用できます。テンプレートから HTML ドキュメントを作成する場合、このライブラリを自分でインポートすることを心配する必要はありません。自動的に含まれてインポートされます。
呼び出す FRToolBox 関数はすべて非同期であることに注意することも重要です。 Web 開発よりも FileMaker 開発に精通している人にとっては、「完了を待つ」をオフにしてサーバーでスクリプトを実行するのと同じです。
覚えておく必要があるのは、関数を呼び出すときは、単に FRToolBox に何かをするように指示しているだけであり、それから自分の人生を続けているということです。コードの次の行は、それがどのように行われたか、または返されたものを渡されることを必ずしも知っているわけではありません。
ただし、FRToolBox にはコールバック関数が組み込まれているため、結果の FileMaker データを処理する方法もあります。
2. パラメーターの使用
最初のセクションのテスト用 BlackBox を使用して、パラメーターで何かを実行してみましょう。パラメーターは何でもかまいません。通常は、データのプル/プッシュに使用されるフィールド名か、テキスト、数値、日付などの文字列などです。
前に作成した index.html ドキュメントを編集します。：
<!–– This is the main HTML for the BlackBox ––>これを置き換えます
<?Reactor Reactor?> タグの間のすべてが Reactor によって解釈されます。 $ は Reactor にパラメーターを参照していることを伝え、MyParameter はパラメーター名です。
ここに配置するのは、HTML の <body> 要素内にあるからです。 BlackBox のメインコンテンツはここに移動します。
ドキュメントを保存して再コンパイルします。パラメーターにまだ値を指定していないため、まだ何も表示されません。パラメーター名の横に入力することで、プレビュータブでこれを行うことができます。：
右に目を向けると、リアルタイムで更新されていることがわかります！
私たちの BlackBox は何かをするようになりました！
3. 対象レコードからレコードを取得する
通常、1 つまたは複数のパラメーターが FileMaker フィールドを参照するため、データをクエリできます。
先に進んで新しいパラメーターを追加しますが、今回は「データ型」はField Nameにする必要があります。
Reactor でデータをクエリするときに最初に行うことは、対象レコードからレコードを取得することです。
開始するには、HTML コンテンツの前の <script> ブロック内に次のコードを追加します。
最初の行は、FileMaker アプリケーションへのパスを参照するために使用される単純な定数です。
2 行目は、パラメーターからフィールド名を取得します。
3 行目では、パラメーターを使用して、扱っているテーブルオカレンスを特定します。
4 行目は、現在のコンテキストからテーブルオカレンスとのリレーションシップを調べます。
5 行目は、データが戻ってきたときにデータを配置する場所を示しています。
次に、この下に、FileMaker からデータを取得する関数を記述します。
これは、FRTB.find FRToolBox 関数を呼び出します。テーブルのオカレンス名とフィールド名を使用して、何を取得するかを認識します。
It sets the where clause, so that only data that relates to the table occurrence per your current context comes through. In other words, the relationship in FileMaker is honoured.
where句を設定して、現在のコンテキストごとのテーブルオカレンスに関連するデータのみが通過するようにします。つまり、FileMaker での関係は尊重されます。
InitData は別の関数の名前で、データが戻ってきたときに呼び出されます。 FRToolBox の非同期性により、次のコード行のデータを単純に解析することはできません。
次に、先に進み、InitData 関数を作成しましょう。:
この関数へのresponseパラメーターは、FRToolBox がデータをクエリしたときに返されるものです。
AllData は、戻ってくるレコードを含む配列です。
for loopは、返されたデータを通ります。それぞれに対して、Record というオブジェクトを作成し、現在のレコードの MyField フィールドに含まれる値として返される MyFieldプロパティを設定します。次に、このレコードをレコードの配列にプッシュします。
しかし、この関数内で AllData オブジェクトを定義したため、関数の外ではアクセスできません。そのため、この関数の外で定義したオブジェクト RecordsObj に渡します。
関数を定義したら、ある時点でそれらを実行する必要があります。 InitData 関数の後で、関数を呼び出してデータを取り込みましょう (次に、関数を呼び出してデータを解析します。
Reactor に FileMaker からデータを取得し、それを JavaScript が使用できる形式に変換するように指示しました。しかし、この時点では、それはすべて JavaScript オブジェクトです。どこにも表示されません。
したがって、次の行を for loopの最後に追加して、各レコードのフィールドの値を HTML に追加します。：
<br> はそれぞれの末尾に改行を追加するため、読みやすくなります。
<script>ブロックの内容は次のようになります。：
それでは、テストのために、Reactor Schedules テーブルを使用してみましょう。:
Reactor は、現在のコンテキストから関連セットに含まれるレコードの Schedules::Descriptionフィールドの値を取得しています。
4. 単一のレコードを取り出す
対象レコードからレコードを取得できますが、単一のレコードを取得する場合はどうすればよいでしょうか?
対象レコードを取得することでそれを行うこともできますが、リレーションシップを (リレーションシップ グラフで) 単一のレコードを指すように制限します。
または、JavaScript 内から行うこともできます。
このチュートリアルでは、Planets テーブルに対してクエリを実行します。このテーブルには、各惑星のレコードがあり、各レコードには惑星名と惑星の説明があります。それでは、関数が Neptune の説明を知りたいだけだとしましょう。
これを行うには、PlanetDescription という新しい関数を作成し、3 つのパラメーターを追加します。
PlanetNameField: 値がわかっているフィールドの名前
PlanetDescriptionField: 値を知りたいフィールドの名前
QueryValue: チェック対象の値
まず、PlanetDescription という新しい関数を作成し、次のパラメーターを指定します。
この関数は、以前に行ったこととは異なるアクションを実行するため、新しいソース ドキュメントを追加しましょう。この関数の新しい html テンプレートを作成します。
最初に <script> ブロック内にあるものをすべて消去します。この事前に生成されたコードの詳細については、開始テンプレートの生成に関するセクションを確認してください。
<script>ブロックに入力したコードを消去して、次のように入力します。：
このコードにはいくつかの重要な違いがあります。：
クエリ値を渡しているので、探している惑星 (海王星) がわかります。
PlanetName フィールドを渡しているので、その値がどこにあるかがわかります。
PlanetDescription フィールドを渡しているので、どのフィールド値を返すかがわかります。
where句は、テーブルのオカレンスからのリレーションシップを使用しませんが、PlanetName=QueryValueの単純な一致を使用します。返される値は 1 つだけ (多くても) であるため、応答をループする必要はありません。最初の値を確認するだけで済みます。
応答を処理するために別の関数に渡すのではなく、
find内で無名関数を定義しています。シンプルにするために、すべてを1つのコードブロック内に保持します探している惑星とその説明を HTML に書き込みます。
[プレビュー] タブに戻り、新しい関数に切り替えます。ここで、プレビューのパラメーターとしていくつかの値を指定する必要があります。：
そして、BlackBox が右側にその仕事をしているのが見えるはずです：
QueryValue を別の惑星に変更しようとすると、それに応じて出力が変更されます。：
5. レコードの更新
このセクションでは、2 つの新しい関数を作成します。：
PlanetList: 惑星の名前と説明を一覧表示する
SetPlanetDescription: 特定の惑星の説明を更新します
PlanetList には、2 つのパラメーターがあります。：PlanetNameField とPlanetDescriptionField
新しいテンプレート ドキュメントを作成し、もう一度 <script> ブロックで自動的に生成されたすべてのコードを削除します。
それを次のように置き換えます。：
このコードが何をするかわからない場合は、対象レコードからのレコードの取得に関する上記のセクションを参照してください。異なるパラメーターを持つ別のテーブルを使用しているだけです。また、シンプルにするために多少圧縮されています。
[プレビュー] タブに移動し、この機能に切り替えて、プレビュー パラメーターを設定します。
わかりました、それは簡単です。
次に、特定の惑星の説明を更新する関数を作成します。
新しいテンプレート ドキュメントを作成し、<script> ブロックに以下を記述します。：
このコードの最初の部分は、今ではおなじみのはずです。 2 番目のブロックは、planetname レコードを更新する関数であるため、その説明は、指定された planetname に対応するレコードの newdescription に設定されます。
完了すると、 HTMLに「Done!」が出力されます。 そして Web ビューアに。
しかし、それをどのように呼びだすのでしょうか。 JavaScript コンソールに飛び込んで UpdateRecord() を実行することもできます。または、BlackBox に組み込みます。
テンプレート ドキュメントの HTML には、開始するための <div> ブロックが含まれています。これを次のように置き換えます。：
これにより、div がボタンのように見えるようにスタイル設定され、ボタンがクリックされたときに JavaScript 関数を実行するように指示されます。
今それを回転させてください。
[レコードの更新（Update Record）] をクリックすると、完了したことを知らせるレポートが返されます。 PlanetList 関数に切り替えて、地球（Earth）の説明が変更されているかどうかを確認します。：
成功！
2 つの新しい関数を作成しました。すべての惑星とその説明を一覧表示するものと、任意の惑星の説明を変更できるものです。
先に進んで、「The Blue Planet」に戻してください。
6. 新しいレコードの作成
このセクションでは、新しいレコードを作成する新しい関数を作成しましょう。
CreatePlanet
2 つのパラメーター：PlanetNameField と PlanetDescriptionField
ただし、これらの値を提供する HTML にいくつかのテキストフィールドを追加してみます。
新しいテンプレート ドキュメントを作成し、もう一度 <script> ブロックで自動的に生成されたすべてのコードを削除します。
次のステップは、HTML 要素を提供することです。 HTML の <body> タグの間に次のコードを挿入します。：
これはかなり明白なはずですが、基本的な形式です。これは、2 つのテキストフィールドとそれに付随するラベル、およびボタンです。
新しい HTML ドキュメントを使用するように新しい関数を設定し、変更をコンパイルして、プレビューします。
見栄えがよくありませんか？いくつかの基本的な CSS でクリーンアップしましょう。 HTML ドキュメントの <style> タグの間に次のコードを挿入します。：
保存、再コンパイル、プレビュー：
ほら、もう少し実際のフォームのように見えます。
これで、HTML ドキュメントの構造とルック アンド フィールができましたが、何もしません。ボタンをクリックしたときに何をすべきかをボタンに伝える必要があります。 <button> タグを次のように更新します。：
これは、ボタンがクリックされたときに JavaScript 関数addPlanet() を実行するように HTML に指示しています。
次に、実際の関数を記述する必要があります。これを <script> ブロック内に追加します。
これにより、テキスト フィールドに入力した値であるスクリプト パラメータが取得され、指定された値で新しい Planet レコードを作成するように Reactor に指示が送信されます。
いずれかのフィールドに値が含まれていない場合、ユーザーに警告を発し、それ以上は処理しません。
値をデータ オブジェクトにパッケージ化して Reactor に送信します。
関数を再コンパイルしてプレビューし、動作を確認します。：
成功です！
次に、PlanetList 関数に戻り、新しい惑星が表示されたことを確認します。：
そして、そこにあります！
7. レコードの削除
このセクションでは、レコードを削除する新しい関数を作成しましょう。前のセクションと同様に、HTML インターフェースを作成します。今回は、削除したい惑星を識別します。
したがって、新しい関数を作成します。：
DeletePlanet
次の 2 つのパラメーターを使用します。：
PlanetIDField
PlanetNameField
最初のフィールドは、削除するレコードを識別するために使用されます。もう 1 つのフィールドは、惑星のリストに使用されます。
新しい HTML テンプレート ファイルを作成し、HTML の <body> タグ内のコンテンツを次のように置き換えます。：
これは非常に単純で、2 つの要素だけです。 1 つ目は <select> 要素です。初心者にとっては、FileMaker のドロップダウン フィールドに相当します。 2 つ目は、アクションを実行するためのボタンで、DeletePlanet() という関数です。
また、次の CSS を <style> タグの間に追加して、ボタンの見栄えを良くします。
Now pop the following within the <script> tags:
<script> タグ内に次の内容を挿入します。：
この JavaScript には 2 つの関数があります。
GetData()関数は、ListPlanets 関数の関数と似ていますが、重要な違いが 1 つあります。惑星データをプレーン テキストとして HTML に書き込む代わりに、それを <select> ドロップダウン要素に追加しています。各レコードは単一の <option> 要素です。可視値は惑星名で、レコード ID も非表示の id パラメータとして保存します。
DeletePlanet 関数は、ボタンが HTML からクリックされると￥実行されます。まず、リストから選択した惑星を識別します。レコード ID や惑星名がなければ、先に進むことはできません。一方、そうすると、選択した惑星の ID と一致する ID を持つ Planet レコードを削除するよう Reactor に命令が送信されます。レコードが削除されると、ドロップダウンがクリアされてリロードされます。
コンテンツを処理する HTML コンテンツ、HTML のスタイルを設定する CSS、データを取り込み、ボタンがクリックされたときにレコードを削除する JavaScript を用意したら、新しい HTML ファイルを新しい関数のメイン ソース ファイルとして設定します。 BlackBox をコンパイル/再コンパイルしてプレビューします。
ドロップダウンをクリックすると、惑星のリストが表示されるはずです。
前のセクションで作成した惑星を選択して、[惑星の削除] をクリックしてみてください。
祝う前に、それが削除されていることを確認しましょう。：
リストにはありませんが、念のため、PlanetList関数に行ってセカンドオピニオンを取得してみましょう。：
成功！私たちのテスト惑星はもうありません。
8. 変更のポーリング
データの変更をリアルタイムで表示したい場合があります。このセクションでは、Reactor のポーリング機能を利用します。
次のパラメーターを使用して、LiveTable という名前の新しい関数を作成します。：
新しいテンプレート ファイルを作成します。
まず、HTML でテーブルを定義する必要があるため、HTML ブロックを次のように置き換える必要があります。：
先に進む前に、Reactor ポーリングの仕組みについて少し説明します。
フィールド名を使用して Reactor にデータを取り込むと、Reactor は変更タイムスタンプ自動入力フィールドを利用して、最初のクエリ後の変更をチェックし続けることができます。
これは zModID と呼ばれ、ポーリングするクエリを実行しているすべてのテーブルに存在する必要があります。：
ポーリングによって取得される変更には、次の 3 つのタイプがあります。：
New records 新しいレコード
Deleted records 削除されたレコード
Updated records 更新されたレコード
わかりました、それで邪魔にならないように、コードを続けます。 <script> ブロックを次のように置き換えます。：
GetData() 関数は通常どおり、Planet レコードをクエリしますが、1 つの顕著な違いがあります。：
.poll(PollChanges) をクエリに添付すると、ポーリング時に PollChanges() 関数を実行するように Reactor に指示されます。
PollChanges 関数には 3 つの個別のブロックがあります。各ブロックは異なるループであり、それぞれがポーリング データの異なるサブセットをループします。 1 つは新しいレコード用、1 つは更新されたレコード用、もう 1 つは削除されたレコード用です。
新しいレコードが作成されると、新しいレコードのテーブルに新しい行を追加するだけです。
更新されたレコードが検出されると、そのレコードを再クエリし、テーブルのセルを更新します。
レコードが削除されたら、テーブルから削除します。
ドキュメントを保存し、再コンパイルしてプレビューします。
新しいウィンドウを開き、新しい惑星レコードの追加、削除、および変更を開始します。これをリアルタイムで反映する Web ビューアが表示されます。
9. スクリプトを実行する
このセクションでは、Reactor を使用して Web ビューア内から FileMaker スクリプトを呼び出します。
まず、新しい FileMaker スクリプトを作成しましょう。このスクリプトを「Show Dialog」と呼びます。次のスクリプトステップです：
これは非常に単純なスクリプトで、パラメーターを受け取り、それをカスタムダイアログに表示します。
それでは、新しい BlackBox 関数を作成しましょう。この関数は惑星のリストを表示し、惑星をクリックすると FileMaker スクリプトを実行します。
ChoosePlanet という関数を作成します。関数には次のパラメーターが必要です。：
新しい HTML テンプレート ファイルを作成し、 <body> ブロックを次のように置き換えます。：
これにより、Web ビューアの基本構造が設定されます。これは、ユーザに惑星を選択するように指示するヘッダーであり、リスト要素 (具体的には順不同のリスト) を使用します。
次に、 <script> ブロックを次のように置き換えます。：
GetData() 関数は、これでかなり明確になったはずです。これは、惑星の名前と説明を取得します (パラメーターとして渡されたフィールド名に基づいて)。次に、惑星レコードごとに新しい <li>要素を作成し、それを <ul> リスト要素に追加します。各リスト項目に表示される値として惑星の名前を取り、説明を属性として保存します。また、惑星がクリックされたときに RunScript()という JavaScript 関数を実行するように HTML に指示し、惑星の名前と説明を渡します。
下に目を向けると、RunScript() 関数が表示されます。これは名前と説明を受け取り、ScriptName パラメーターとして渡されたスクリプトを実行するように Reactor に指示します。
また、次の CSS を <style> タグの間に追加して、HTML にルック アンド フィールを与えます。：
ドキュメントを保存して、新しい関数を確認してください。パラメータを次のように設定します。：
BlackBox をコンパイルして、動作を確認します。：
成功！クリックした惑星名を FileMaker スクリプトに送信します。
それで、私たちは何をしましたか？我々は下記の機能を持っています：
惑星のデータセットから取得します
惑星を一覧表示し、ユーザーが 1 つを選択できるようにする UI を作成しました
クリックした惑星を FileMaker Pro に送り返して処理します
そのため、惑星名という 1 つのパラメーターを送信しました。複数のパラメーターを介して送信したい場合はどうすればよいでしょうか? 最善の方法は、JSON として送信することです。
これを行うには、惑星の名前と説明を含む新しい JavaScript オブジェクトを作成し、オブジェクトを JSON テキストに変換して、その JSON をスクリプトに送信します。
RunScript() 関数の内容を次のように置き換えます。：
そして、JSON から惑星の名前と説明を取得するように FileMaker スクリプトを更新し、カスタム ダイアログを変更して、タイトルが惑星の名前になり、メインコンテンツが惑星の説明になるようにします。：
HTML ドキュメント、FileMaker スクリプトを保存し、再コンパイルして、もう一度やり直します。：
成功！これで、Reactor 関数内から FileMaker スクリプトに複数のパラメータを渡すことができました。
10. オブジェクトの画像を取り出す
Reactor 関数を作成するときに、オブジェクトフィールドをパラメーターとして送信することもできます。 Reactor は、このオブジェクトフィールドを受け入れて、コンテンツを画像として取り込むことができます。
1 つのパラメーターを使用して、ViewPlanet という新しい関数を作成しましょう。：
(データ型は必ずContainerに設定してください)
新しいテンプレート HTML ファイルを作成し、 <body>ブロックを次のように置き換えます。：
これは、PlanetImageField パラメータに基づいて、PlanetImages <div> 要素内にコンテナ イメージを取り込むように Reactor に指示します。最初のパラメータは画像を取得するフィールドで、2 番目のパラメータは各画像のファイル名を設定します。
保存してコンパイルし、次のパラメータを設定してテストします。：
うまくいきました。見つかったレコードのセットから画像を引き出すことができます。
<div> タグ内に画像を <img> 要素として配置するだけです。
ただし、画像の表示方法を少し制御したい場合があります。惑星のリストから選択し、選択した惑星の画像を表示したいとしましょう。まず、画像を取り込み、HTML 構造に保存する必要があります。
そのため、惑星名を取得する関数の 2 番目のパラメーターを追加します。これが画像のファイル名を形成し、この方法で個々の画像にアクセスできるようになります。
そして、HTML を変更して、各画像に惑星名をファイル名として割り当てる必要があります。また、 <div> を非表示に変更して、画像を保存している間は、必要になるまで表示しないようにします。
更新した関数をコンパイルしてプレビューすると、空の Web ビューアが表示されます。
では、HTML を更新して、惑星名をドロップダウン リストに取り込むための構造を組み込み、選択した惑星の画像を表示してみましょう。 <body> ブロックの内容を次のように置き換えます。：
これは、惑星のリストのドロップダウン、惑星が選択されたときの <img> プレースホルダーを示しています。Images <div> は、Reactor にPlanetImageField パラメータから画像を取得するように指示しますが、まだ表示していません。
ここで、惑星のドロップダウンを埋めるためのロジックを構築し、そのリストから惑星が選択されたときに <img>プレースホルダーを設定する必要があります。 <script>ブロックの内容を次のように置き換えます。：
GetData() 関数は一目瞭然で、惑星名を取得し、それらを使用して惑星リストのドロップダウンに入力します。
ChangeImage() 関数は、現在選択されている惑星の名前を調べ、対応する惑星の画像を <img> プレースホルダーに入力します。この関数は、惑星リストの <select> 要素が別の選択に変更されたときに呼び出されます。また、リストの最初の惑星に設定するために惑星名が最初に取り込まれるときにも呼び出されます。
BlackBox を再コンパイルして、プレビューしてみましょう。 PlanetImageField をフルサイズの画像フィールドに変更します。：
ドロップダウン リストで惑星を変更すると、画像が切り替わるはずです。
11. スターティング（開始）テンプレートの使用
このチュートリアルでは、コードをゼロから書いています。関数の HTML テンプレートを生成すると、基本的な HTML 構造だけでなく、次のコードも含まれます。：
BlackBox の [ソース ファイル] タブにリストされているすべての JavaScript および CSS ドキュメントをインポートします (Reactor 関数に必要な
FRToolboxライブラリを含む)。テキストベースのパラメーターを変数として設定します。
コンテナイメージを取り込み、非表示の
<div>に格納します。フィールドベースのパラメーターに対して次の処理を実行します。
フィールド名、テーブルのオカレンス、および関係の述語を変数として格納します。
レコード値を取得し、オブジェクトの配列として格納するための関数を記述します。
JavaScript オブジェクトから新しいレコードを作成する関数を記述します。
JavaScript オブジェクトから特定のレコードを更新するための関数を記述します。
テンプレート コードは完璧ではありませんし、多くの場合、(このチュートリアルで説明したように) 単純にその多くを削除したいと思うかもしれませんが、それは作業を開始するのに役立ち、時間を大幅に節約できます。
12. デバッグ
すべての開発と同様に、BlackBox を構築するときに問題が発生することがあるでしょう。問題が起こらずにこのチュートリアルを最後までたどり着くことは、ほとんどありません。
Reactor には、この問題が発生したときに役立つデバッグ モードがあります。
次の関数でアクセスできます：BlackBoxDebugging( "Yes" )
デバッグ モードを有効にするには、Webビューアに挿入することができます。：
または、スクリプトの一部として実行します。：
デバッグ モードを有効にすると、[プレビュー] タブなど、Reactor 機能を使用する Web ビューアの右下に小さなアイコンが表示されます。：
表示されない場合は、レイアウト モードに切り替えてから、ブラウズ モードに戻ってみてください。
クリックすると、次のタブが表示されます。：
Console タブでは、JavaScript コンソールにアクセスできます。 JavaScript にエラーが含まれている場合は、ここにリストされ、JavaScript をリアルタイムで実行できます。これは、変数のデバッグ、関数の実行などに役立つ場合があります。：
HTMLタブを使用すると、Web ビューアでレンダリングされる HTML 構造を確認できます。これは、スクリプト パラメーターやコンテナフィールド イメージなど、<?reactor reactor?> タグに何かを挿入している場所に関するエラーをデバッグするのに役立ちます。各 HTML 要素の CSS を検査することもできます。
CSSタブでは、HTML が使用する CSS ファイルと同じ数の HTML の CSS を表示できます。 CSS プロパティをリアルタイムで変更することもできます。これにより、ルック アンド フィールを微調整し、変更をすぐに確認できます。変更は保存されませんので、CSS/HTML ドキュメントで実際に変更を戻す必要があります。
Requests タブでは、JavaScript と Reactor の間の通信を確認できます。これは、クエリをデバッグするのに役立ちます。すべての Reactor 通信、成功/失敗、要求、および応答が一覧表示されます。：
Browser ボタンもあります。これにより、BlackBox 関数がデフォルトブラウザの新しいタブで簡単に開きます。これにより、デフォルトのブラウザの開発ツールを使用して、より高度なデバッグを実行できます。：
関数 BlackBoxDebugging ( "No" ) を使用して、いつでもデバッグ モードを無効にすることができます。