FileMakerでメディア管理 – サムネイル画像のタイルビューを作った

FileMakerで作るメディア管理システム。サムネイル画像をタイル状に配置するビューを作ります。

サムネイルをタイル表示する

FileMakerではレコードのタイル表示ということができないので、一般的な画像管理アプリのようなビューを作れません。ナンチャッテでは作れますがこれまでは諦めていました。

Aperture tile view
この画面はApertureですが、こんな感じのタイルビューを誰もが欲します。

FileMaker Pro 19 のアドオン、写真ギャラリー

FileMaker Pro 19 から、アドオンでいろいろ機能を追加することができるようになったそうです。

そうした新機能紹介の中で一際目を引くのが写真ギャラリー。

FileMaker のアドオン使ってみた – 写真ギャラリー編 <前編>

↑こういうページが用意されていました。

この機能が使えるv19ですが、OSの最低条件に満たない私はインストールすることもできませんでした。そこで「どうせこんなのナンチャッテ表示だし、使用するための手続きも面倒そうだ。きっと酸っぱいんだろうな。あー酸っぱい。あー酸っぱい」と負け惜しみます。

v19にしなくてもできるもん

そしてそのうちだんだんと「Webビューアでナンチャッテ表示」を作ってみたくなってきました。

v19を手に入れたらjavascript対応によって立派なものが作れるそうです。でも考えてみたらjavascriptの知識ぜんぜんないし、立派なものなど作れるわけがないと正しく認識しはじめます。

そんなわけで、最新じゃない機能を使って身の丈のナンチャッテタイル表示をやってみます。javascriptなんかなくてもいいもん。v19じゃなくてもできるもん。

では行きます。

概要

作ってみたら出来たので、それをベースに話を進めます。試作の完成品はこんな感じです。

・サムネイルが並んでいて、ウインドウサイズの変更にまあまあ追従します。
・アイコンクリックで大きなプレビューが表示されます。
・プレビュー画面で、レコードを前後に移動できます。
・仕組みがシンプルです。

・アイコンサイズを変更できません。
・プレビュー画像も拡大縮小できません。知恵と工夫でカスタムしていけば実現しそうですが、ここではそこまで踏み込みません。

まずはざっと概要を書いていきます。その後、どういった仕組みで実現するのかという話を書いてみます。さらにその後、具体的に説明していきます。

方法: Webビューアにサムネイルを表示させて並べる

Webビューアを利用してタイルビューを実現します。

WebビューアにはHTMLを表示させます。
HTMLはフィールドで計算させて作成します。
計算させるためにいくつかのフィールドを用意します。
動作をさせるためにひとつのスクリプトを用意します。

追加する専用テーブル

必要ありません。

必要なレイアウト

  • タイルビューを行うレイアウト
  • プレビューのレイアウト(お好みで)

必要フィールド

基礎的なフィールド

  • ID(ユニークな識別子。テキスト)
  • メインのイメージ(オブジェクト)
  • サムネイルイメージ(オブジェクト)

HTMLテンプレートのフィールド

  • 全体のHTMLひな形(テキスト, グローバル)
  • パーツのHTMLひな形(テキスト, グローバル)

個別のHTMLを作成するためのフィールド

  • テキスト化したサムネイル(計算)
  • レコードごとのパーツHTML(計算)
  • スクリプト引数を渡すための命令URL(計算)

アーカイブ用のデータフィールド

  • IDの束(集計)
  • レコードごとのパーツHTMLの束(集計)

Webビューアに出力するHTMLのフィールド

  • 最終形のHTML(計算)

必要スクリプト

  • ビューアからプレビューを開くスクリプト

 


ざっくり概要でした。次は作り方について、どんなことをやってるのかということをだらだら述べて、その後に具体的な詳細を記します。

→ 次のお話 その2 若干の技術的解説