FileMakerで作るメディア管理システム。サムネイル画像をタイル状に配置するビューを作ります。
このページ内の見出し
サムネイルをタイル表示する
FileMakerではレコードのタイル表示ということができないので、一般的な画像管理アプリのようなビューを作れません。ナンチャッテでは作れますがこれまでは諦めていました。
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（計算）
必要スクリプト
- ビューアからプレビューを開くスクリプト
このやり方の根本的な弱点
webビューアでタイル表示をさせることには、根本的で最大の弱点があります。
それは、表示アイテムが増えると絶望的に動作が遅くなることです。だってね、テキスト化した画像を含めた一つのHTMLですからね。アイテムが100個程度ならまだしも、数千、数万の表示などさせようものならとんでもない分量になってしまい耐えられません。
ここに書き残した方法は稚拙で雑です。v19からはjavascriptも使えるようになったし、実はこっそりと改良を続けていました。そこそこイケてきたので記事を更新しようとも思っていましたが、しかし、多数のアイテムを上手く表示させる方法が思いつかず、頓挫中です。少なくとも2、3千アイテムくらい処理できなければメディア管理として使い物になりません。
何となく考えている解決アイデアは、表示アイテム数に応じてHTMLを複数作る仕組みを作り、無限スクロールとセットで表示できないかということですが、未熟すぎて実現に至っていません。
… という弱点があるという前提でご覧頂ければと、ここは後に追記した部分です。
ざっくり概要でした。次は作り方について、どんなことをやってるのかということをだらだら述べて、その後に具体的な詳細を記します。
→ 次のお話 その2 若干の技術的解説
