Web ビューアで星レート表示（10分でスキルアップ）

FileMaker の自習室

28 Nov 202212:35

Summary

TLDRこのビデオでは、約10分の短い時間でClaris FileMakerの役立つ機能や作り方を紹介します。特に、Web ビューアで星レート表示を実装し、FileMaker Web ビューア間の双方向データ受け渡しが可能であることを実演します。HTMLコード、CSSスタイル、JavaScriptのイベントハンドラーを用いた星の表示と操作方法を解説し、FileMakerとWeb ビューア間の連携を示します。また、Windowsのリスト表示における問題を回避するテクニックや、注意点についても触れています。

Takeaways

😀 DB Powersの野田さんが約10分間の動画でClaris FileMakerの機能や作り方を紹介します。
🌟 今回のテーマはWebビューアで星レート表示が可能にする部品の作成です。
🔄 FileMaker Web ビューア間で双方向のデータ受け渡しが可能であることを説明します。
📝 Web ビューア内にHTMLコードを記述する際、`[data; text/html,]`から始まり、メタ要素を使用して文字化けや表示サイズの問題を防ぎます。
🎨 CSSスタイルで`margin: 0`と`display: flex`を使用して要素を横並びにし、余白を消去します。
📐 Overflow:hiddenを使用して、要素がWebViewerの領域を超えた場合にスクロールバーが表示されないようにします。
🔧 JavaScriptのquerySelectorAllメソッドとforEachを使用して、div要素にクリックイベントハンドラーを割り当てます。
💬 クリックされたdivのIDを取得し、そのIDに基づいて星の色を変える処理を実装します。
📑 FileMaker Perform スクリプトを使って、Web ビューアから受け取ったレートをFileMaker側のフィールドに渡します。
🛠 Windowsのリスト表示での問題を解決するために、レコード番号とレートをJSONでFileMakerに渡し、特定のレコードのみ更新します。
⚠️ 注意点として、星の大きさはフォントサイズによって変わり、必要に応じて調整が必要であることを示します。

Q & A

この動画の主な目的は何ですか？
-この動画の主な目的は、Claris FileMakerの機能と作り方を紹介し、Web ビューアで星レート表示を作成する方法を説明することです。
Web ビューア内でHTMLコードを記述する際の最初のメタ要素は何を指定するべきですか？
-最初のメタ要素は、Windowsでの文字化けを防ぐためにキャラクターセットを指定します。
CSSの[*margin 0]は何を意味していますか？
-[*margin 0]は、すべての要素が持つデフォルトのmargin幅をキャンセルすることを意味しています。
Body要素にdisplay flexを適用することの利点は何ですか？
-Body要素にdisplay flexを適用することで、Body内のDiv要素を縦ではなく横並びに表示することができます。
Overflow:hiddenを使用する目的は何ですか？
-Overflow:hiddenを使用する目的は、ボディ内の要素がWebViewerの領域を超えてはみ出た場合にスクロールバーが表示されないようにすることです。
JavaScriptのquerySelectorAllメソッドは何に使われますか？
-querySelectorAllメソッドは、全てのdiv要素に対する参照を取得するために使われます。
forEachメソッドが何をするものですか？
-forEachメソッドは、各要素に対して何をしたいかをロジックを書くことができる関数を引数に取るもので、要素ごとに繰り返し処理を行うことができます。
クリックイベントハンドラーを割り当てる際にthis.idは何を返しますか？
-this.idは、イベントが起こっている要素、つまりクリックされたdivそれ自体に割り振られているIDを返します。
FileMaker Perform スクリプトを使って何をすることができますか？
-FileMaker Perform スクリプトを使って、事前に定義してあるFM レートスクリプトを呼び出し、引数にレートを渡すことができます。
Windowsのリスト表示で問題が発生する原因は何ですか？
-Windowsのリスト表示で問題が発生する原因は、1つの星レート表示をクリックした際に、関係のない他のレコードのWeb ビューアにも影響を及ぼしてしまうことです。
レコード番号をWeb ビューア内に埋め込む理由は何ですか？
-レコード番号をWeb ビューア内に埋め込む理由は、クリックイベントが特定のレコードのみに影響を与えるようにし、他のレコードに影響を及ぼさないようにすることです。
星の大きさはどのように調整されますか？
-星の大きさは、CSSで指定されたフォントサイズによって変わります。必要に応じてフォントサイズを調整して星の大きさを変更することができます。
このWeb ビューア部品を利用する際の注意点はありますか？
-注意点としては、星の大きさの調整や、リンクするフィールドの指定が必要です。また、使用するCSSやJavaScriptのポイントも理解することが重要です。