Webサイトでよく見かける「画像が左右に切り替わるカルーセル」を、FileMakerでもやりたい…と思ったことはないでしょうか。製品カタログや施工事例、ポートフォリオなど、複数の画像をコンパクトに見せたい場面は多いですが、「どう作ればいいのか分からない」「レイアウトがごちゃごちゃする」といった悩みもよく聞きます。
そこでこの記事では、FileMakerの「スライドコントロール」を使って、簡易的な画像カルーセルを実装する方法を、専門用語をできるだけ避けて分かりやすく紹介します。レイアウト編集が少しできる方であれば、特別なプラグインなしで再現できる内容です。
画像カルーセルをFileMakerで作るときの考え方
FileMakerには、Webのような本格的なスライダー機能はありませんが、「スライドコントロール」を使うことで、かなり近い表現ができます。
- 1枚目のスライドに「1枚目の画像」を表示
- 2枚目のスライドに「2枚目の画像」を表示
- …というように、スライドごとに画像を配置
- ユーザーは、左右の矢印やドットをクリックして画像を切り替える
このように「1つのレイアウト内で画像が切り替わる」見え方にすることで、カルーセルらしく見せることができます。
事前準備：画像を格納するフィールドやテーブルを用意する
まずは、画像をどこに保存するかを決めます。シンプルな構成にしたい場合は、次のようなテーブルとフィールドがおすすめです。
- テーブル例：写真
- 主なフィールド：
id（番号）タイトル（任意）画像（コンテナフィールド：画像を格納する）順番（表示順を管理したい場合）
1つのレコードに1枚の画像を入れる方法でも、1つのレコードに複数のコンテナフィールドを用意する方法でも実現はできますが、汎用性を考えると「1レコード1画像」にしておくと後から管理しやすくなります。
基本のレイアウトにスライドコントロールを配置する
次に、画像カルーセルを表示したいレイアウトを開き、スライドコントロールを配置します。
- レイアウトモードに切り替える
- ツールバーから「スライドコントロール」を選択
- カルーセルを表示したい位置にドラッグして配置
- ダイアログで「パネルの数」を指定する（例：3枚なら3）
- 必要に応じて「インジケータ（ページドット）」や「ナビゲーションボタン」の表示をオンにする
これで、白紙のパネルが複数できた状態になります。あとは、各パネルにどのように画像を表示させるかを決めていきます。
最も簡単な方法：各スライドに別々のコンテナフィールドを置く
FileMakerにあまり慣れていない場合、まずは「1レコードの中に複数の画像フィールドを持たせる」シンプルな方法が分かりやすいです。
- 例：フィールド
画像1（コンテナ）画像2（コンテナ）画像3（コンテナ）
この場合、パネルごとに次のようにフィールドを配置します。
- 1枚目のパネルに「画像1」フィールドを配置
- 2枚目のパネルに「画像2」フィールドを配置
- 3枚目のパネルに「画像3」フィールドを配置
これだけで、ユーザーは1レコードの中で3枚の画像をスライドして見られるようになります。表示サイズを揃えるために、コンテナフィールドのサイズをきっちり合わせる、配置を中央にするなどの調整をすると見栄えが良くなります。
もう一歩進んだ方法：関連レコードを使って柔軟なカルーセルにする
画像の枚数がレコードごとに異なる場合や、あとから枚数を増やしたい場合には、「親テーブル」と「写真テーブル」をリレーションでつなぐ方法が便利です。
たとえば、次のような構成です。
- 親テーブル：商品
商品ID商品名など
- 子テーブル：商品写真
商品ID_fk（商品IDとリレーションする）画像（コンテナ）順番など
このとき、スライドコントロールの中に「ポータル」を置くと、ごく簡易的に連続した画像一覧を作ることはできますが、「1枚ずつ切り替わるカルーセル」にしたい場合は工夫が必要です。よく使われるパターンの一つが、グローバルフィールドやスクリプトを組み合わせて、「今どの写真を表示するか」を切り替える方法です。
スクリプトを使ってスライドを操作する
スライドコントロールには、ボタンを押したときにパネルを切り替えるスクリプトを割り当てることができます。たとえば、次のようなステップを考えます。
- ボタン「次へ」：現在のパネル番号を1つ増やす
- ボタン「前へ」：現在のパネル番号を1つ減らす
FileMakerには「スライドコントロールの何枚目か」を直接指定するスクリプトステップはないため、レイアウト上に「現在のページ」を表すグローバルフィールドを用意しておき、それをもとに表示する内容を切り替える方法がよく使われます。多少のスクリプト知識は必要ですが、慣れればそれほど難しくありません。
見た目をカルーセルっぽく整えるポイント
機能として画像が切り替わるようになったら、見た目も整えていきます。以下のポイントを意識すると、よりカルーセルらしい印象になります。
- 画像の比率をそろえる：できるだけ同じ縦横比の画像を用意すると、切り替え時の違和感が少なくなります。
- スライドコントロールの枠線を薄くするか非表示にする：カルーセルっぽくスッキリ見せることができます。
- 背景色を調整：画像の背景色とスライドの背景色を揃えると、なじみやすくなります。
- 画像の拡大表示ボタンを付ける：別ウィンドウやカードウィンドウで拡大表示できるようにしておくと、使い勝手が上がります。
FileMakerでの画像カルーセルは「やりすぎない」ことも大切
Webサイトのような派手なアニメーションや自動スライドをFileMakerで再現しようとすると、スクリプトが複雑になったり、パフォーマンスが落ちたりすることがあります。業務システムでは「きれいさ」よりも「見やすさ・使いやすさ」が重要です。
まずは、左右ボタンやドットで「ユーザーが自分のタイミングで切り替える」シンプルなカルーセルから始めてみてください。それだけでも、複数の画像がすっきりとまとまり、レイアウトの印象は大きく変わります。
スライドコントロールは、画像の切り替えだけでなく、コメント欄や補足情報の表示などにも応用できる便利なパーツです。小さな工夫から取り入れていくことで、FileMakerの画面づくりが一段と楽しく、見やすくなるはずです。