社内の案件管理の為のAppを作っているのですが、その中で各案件毎に関連する写真を管理したいとの要望がありました。
そこで写真の表示に特化したレイアウトをWebビューアを使って実装してみたのでご紹介します。
##Befor
まずは最初に検討したポータルのパターン。
実際のAppでは左側に案件の詳細があり右側はスライドパネルで各セクションの内容を切り替えるようなレイアウトで作成しています。
スタッフが使用しているのは13インチのノートPCがメインのため表示領域に限りがあります。（1280x680〜）
今回のは幅640x高さ510くらいのスペースを想定して作ってみました。
その範囲にポータルで表示させようとするとこんな感じです。スクロールなしで見られるのは5枚くらいですかね。
最初はこれでも仕方ないと思っていましたが流石に余白が目立ちすぎますし、だからと言って写真の幅を広げると表示できるのは2〜3枚程度とより少なくなってしまいます。
これでは使いやすいとは言えないです。
##After
次に今回作成したWebビューアのパターン。
スペースを犠牲にすることなく16枚は完全に表示出来ています。ポータルと比較すると約3倍ですね。
レスポンシブにも対応したのでウインドウの幅を広げればさらに表示できる枚数は増やせます。
ちなみに表示されている画像をクリックするとカードウインドウで拡大表示することが出来ます。
##中身の紹介
###テーブル構成
テーブルは3つ使用してます。
- photo (オブジェクトの実体を保存するテーブル)
- utility (レイアウト用のテーブル)
- library (HTMLのソースを保管するテーブル)
リレーションはWebビューアのパターンで使用しているのが
utility::zg_id_photo = photo::_id
ポータルのパターンで使用しているのが
utility::photo_IDs = photo::_id
になっています。
###スクリプト
スクリプトは2つ。
１つ目はレイアウトのボタンがクリックされた時にHTMLを生成してWebビューアに表示させるものです。
HTMLのテンプレートを読み込み、photo_IDsに設定されている関連レコードから必要な情報を取り出してHTML内に書かれている定数をSubstituteして1件分ずつコードを生成します。これを関連レコード数ループして、最終的にWebビューアに設定しています。
２つ目はWebビューアに表示された写真をクリックした時に呼び出されるスクリプトです。
これは引数としてIDを受け取って「関連レコードへ移動」で対象の写真をカードウインドウで表示します。
###ポイント
- Webビューアにレンダリングしている写真は150x150のサムネイルをBase64エンコードしたものを使用しているので実際の写真ファイルが数MBであったとしても表示はそこまで遅くないと思います。
- CSSをカスタマイズすればもっと見栄えよく作れると思いますが今回はそこまで時間が回せませんでした。（笑）
- WebビューアからURLでFileMakerのスクリプトを呼ぶため拡張アクセス権「URLによるFileMakerスクリプトの実行を許可」を有効にしていないと動作しません。これに気付くのに半日掛かりました・・・
- Windows版の方ではWebビューアをアクティブにした状態でCtrl＋ホイールスクロールすると倍率が変更出来るためサムネイルの大きさが変えられます。Explorerと同じ様な感じで使えるので便利だと思います。
###最後に
今回紹介したサンプルファイルはこちらからダウンロード出来ます。
HTMLを使って組み込みするとなるとハードルが高い感じがしますが、まずはやりたいことをコーディングして動くことを確認してからFileMakerで置き換えていくとスムーズに実装できると思います。