2011年6月12日オフラインミーティング・レポート

レポーター（伊藤芳信 株式会社ジーネクスト）

　今回、FM-TOKYOのサイトリニューアル後最初のレポートをさせていただくことになりました、FileMakerProを使ったシステムの受託開発をやっております、伊藤と申します。FM-TOKYOは今年で参加して9年目になります。この会からは毎回本当に多くのことを学ばせていただいてるので、今回のような役割を頂けたのをすごく光栄に思っております。（でも公開が遅れてしまってすみません〜）

さて、今回のテーマは以下の２つでした。両方とも大変見応えのある、すばらしい発表でした。

「Webviewerを使ったUser Interface」スピーカー：野田　修さん（のだ歯科医院）
「MacでもWinでも Exifから画像リサイズやFTPまでFileMakerで自動化」スピーカー：高畑浩一さん（StudioBISON）

スライドショーには JavaScript が必要です。

まずは、

「Webviewerを使ったUser Interface」
スピーカー：野田　修さん（のだ歯科医院）

から。WebViewer を使ってFileMakerのインターフェースをリッチにさらに使い易くしましょうというお話です。
野田先生がいままで作成してきた実例を交えながら紹介していただきました。

最初は、先生が今開発している、歯科医院でのぺリオチャートをFileMakerで実現するソリューションの紹介。
ログイン画面からしてWebViewerで作成されており、ログイン用のIDとパスワードを入力する画面がアニメーションしながら出てきます。検査データを入れた結果も美しいグラフで表現されていて、そして極めつけは歯の断面図が表示されている画面をなぞると、そこにそのまま線が引かれるという機能の紹介。これらはすべてモダンブラウザならば必ず実装されている、今話題のHTML5の機能の一つCanvasを使って実現しています。これらの機能は、もちろんiPad上でもほぼ同じ動作になります（iPadもMacとほぼ同じ機能を持ったSafariを搭載しているからです）。しかもiPadでは画面を直接指でなぞるので、より直感的なUIになります。
（余談ですが、このペリオチャートのソリューションは今年のFileMaker DevCon2011で、最も人気のあるセッションの1つでも紹介されました。しかも、紹介していただいたJohn Sindelarさんによると、その後の問い合わせ数が断トツで1番だったそうです。すばらしい！）

ここで先生からTipsの紹介。FileMakerGoでWebViewerを表示したときに出るリロードマークは、レイアウトを表示した後で最後にオブジェクトの移動で該当のWebViewerに移動してあげると出なくなる、というTipsでした。

次に紹介していただいたのが、昨年のFileMaker選手権に応募したトランプゲーム スピードの改良版です（このページの下部にあるリンクから改良前のバージョンをダウンロード出来ます。素晴らしい作品なので是非ダウンロードしてみてください）。トランプを掴んで移動させるのはドラッグandドロップの動きになりますが、その際にトランプの絵柄がちゃんと半透明なって移動するという改良が施されたバージョンでした（ファイルメーカー標準の機能では、ただの枠線になってしまいます）。
これらももちろん、Canvasを使って実現しています。この事例の紹介の中で、ビデオ再生もQuickTimeで作成したものをWebViewerで表示するという例の紹介もありました。

次に紹介していただいたのが、地域歯科医師会での訪問診療を補佐するソリューション。
患者さんの住所を入力すると、YahooAPIを使って経度位度情報情報を取得。その付近の地図をGoogleMapで表示するのですが、そのGoogleMap上には付近の歯医者さんの場所がしっかりとマッピングされていました。実際の現場で、かなり役に立っていそうなソリューションだなと感じました。

次にファイルメーカー内部だけでWebViewerを使用する例として、美しいボタンを作ってみるデモを実演していただきました。
これもモダンブラウザならば必ず実装されているCSS3を使用した例でした。

data:text/html, から書き始めて

data:text/html,
<div>Hello</div>

だけだと、ただたんにHelloとWebViewerには表示されるだけですが、

CSS3を使って以下のように装飾すると

data:text/html,
<style>
div{
background-color:green;
width:200px;
text-align:center;
padding:35px 0;
font-family:Osaka;
line-height:30px;
-webkit-box-shadow:inset 0 50px 50px rgba(255,255,255,0),8px 8px
rgba(100,100,100,50);
-webkit-border-radius: 10px;
}
body{maedin:0px}
</style>

<div>Hello</div>

角丸で影付きのボタンになります。こんな感じです。

（注：-webkit-box-shadow　-webkit-border-radius　はIEでは無効です。SafariがWebViewerの描画エンジンになってるMac環境だけで有効です）

これらをカスタム関数でうまいこと置き換えてしまうと、ファイルメーカーのフィールド値で色や丸みを設定できることになり、先生は実際にそうしているとのこと。便利ですねー。

応用すると、いろんな形のボタンを簡単に作れます。ということで、矢印ボタンの作り方を実際に作りながら説明していただきました。
ボーダーの色は上下左右の4辺ででそれぞれ変えられます。これを応用します。ボーダーの幅は50pxで、大きさは0px0pxとすると50pxの四角形が出来るのですが、これはボーダー要素だけで構成されている四角形です。4辺はそれぞれ四角形の中心に向かった三角形になります。この4つの三角形のうち、色は一辺だけ残して後は透明にします。すると見た目上は一つの三角形だけが残ることになり、三角形のボタンが出来上がります。その横に、四角形を作ってくっつけると全体として矢印の形のボタンが出来上がります。会場からは、おおーという感嘆の声と笑い声が先生の一つ一つの操作のたびに上がりました。

さらに次は、WebViewer内部との通信をFileMakerだけでやってしまうというデモ。WebViewerに嵌ったら誰もがやりたくなるのがこれですよね。

上記の方法等でボタンは生成出来ますが、どのボタンが押されたかをFileMaker側で取得する方法の紹介です。
1つ目の方法としてWebViewer内でJavascriptを記述する際、onclickイベントに

<div onclick="location.href='data:text/html, hello'">

と記述すると、WebViewer内のソースがhelloになるので、そのソースが変更されたかどうかをオンタイマースクリプトで監視し、変更を察知したら、GetLayoutObjectAttribute関数でソースを取得します。helloの部分をボタン毎に変えればどのボタンが押されたのかFileMaker側でちゃんと取得出来ることになります。
２つ目つの方法として、1つ目のようにonclickイベントでソース自体を書き換えるのではなく、windowOpen,RecordLoad,LayoutEnterなどのタイミングでtemp.html等の名前をつけたファイルをテンポラリフォルダにファイルをエクスポートします。テンポラリフォルダを同様にオンタイマースクリプトで監視し、何かファイルが存在したらそのファイルをインポートして内部に書き込まれた情報をFileMaker側で取得します。この方法を応用して、WebViewer内にあるスライダーで指定した値をFileMakerのフィールドに読み込ませるというデモをしていただきました。1つ目の方法では、WebViewer内のソースが変わってしまうのでスライダーを動かした瞬間にそのスライダーがなくなってしまうのですが、この2つ目の方法ならば情報はファイルとして書き出されるので、そのようなことは起きないのです。そのまたその逆も可能で、FileMaker側で指定した値がスライダーに渡されるという動作もデモしていただきました。これはもう、すごいの一言でした。この動作の概略図を先生のご好意で公開しても良いということでいただきました。以下が概略図です。

もっと複雑なことをしたければ、FusionReactorプラグインを使いましょう。さらにもっとやりたかったら、同じくFusionReactorのBlackBox Custom Controlを使いましょうとのこと。まあ、そりゃあそうですね(^^;
最後にFusionReactorプラグインの使用例として、アコーディオンメニューインターフェースとファイルメーカーの連動のデモをしていただきました。

まとめ
・Google Yahoo 楽天などのAPI使える。
・Canvasの描画機能。サウンドやビデオ再生。ドラッグandドロップ。
・Javascript CSSを利用するといいことがたくさんあります。
・テンポラリフォルダを利用して
　→外部JavascriptやCSSファイルの利用。
　→画像などのリソースもエクスポートしてしまえば、パス指定が容易。
　→自分自身へのリダイレクトが出来る。

注意
初代iPadではテンポラリフォルダへのエクスポートで異常終了が多発するそうです。
・Win/IE9の環境でもちと不安定。
・クエリ文字列の扱いに注意

以上です。全体的に、ここはDevCon会場かと思うような内容でした。野田先生ありがとうございました。

さて、休憩を挟んで次の発表は、

「MacでもWinでも Exifから画像リサイズやFTPまでFileMakerで自動化」
スピーカー：高畑浩一さん（StudioBISON）

です。この発表も、野田先生の発表に負けず劣らずの素晴らしいものでした。

高畑さんがなぜこのようなソリューションを開発したかというと、ITコンサルタントである高畑さんのお客様に頼まれた案件がきっかけだったそうです。
このやっかいな要件を満たせそうだという確信は、MacOS X 10.3あたりからコマンドラインに実装されたsipsコマンドのおかげだったそうです。

さて、FileMakerでの画像の扱いはいろいろ考える所があります。大きな考え所としては、参照先のパスを保存するか、実体として取り込むかという2択問題があります。今は、NASをWindowsとMac混在環境でも同じように参照できるので、参照先のパスを保存するほうが都合良さそうと高畑さんは判断。リサイズしてFTPアップロードもしたいという要望でもあったので、それも実装したとのこと。

◎使用したプラグイン
ExifPlugin2
http://jensteich.de/filemaker-plugins/exif-plugin/

Exif情報を取り出すプラグインで、Mac版Windows版両方があり、非常に簡単に扱えるとのこと。
このプラグインを使うと画像から多くの情報を取り出せますが、今回の用件では作成日時のみの取得でよかったそうです。計算式は
Exif_Get( 画像データが入っているオブジェクトフィールド名 ； “DateTime” )
という形で求めることになり、実際にはフィールド設定か変数の定義スクリプトステップ中に記述します。このへんは、プラグインを一度でも使用したことのある方ならば大丈夫だと思います。
情報を取得するには、オブジェクトフィールドに実体として画像が格納されてなければなければならないため、今回は最終的には参照情報としの画像をオブジェクトフィールに持つ都合上、一旦オブジェクトフィールドに取り込んで作成日時を取得した上で、オリジナルをフィールド内容のエクスポートで書き出し、その書き出し先を参照するという手順となりました。

ここから先は、その後の手順にそってそれぞれのコマンドやアプリについて説明してくださいました。

◎書き出した後の画像のリサイズについて

Macでのリサイズはsipsコマンドを使用。
http://www.bison.jp/nucleus/index.php?itemid=314

縦横で指定。アスペクト比も変えられる。
アスペクト比を保持しながら変形する方法。
回転する指定。角度も指定できる。
反転も指定できる。
切り出しと余白の指定もできる。
これらの中で必要な要素を複数のファイルに一気に指定するスクリプトステップを、Loop文で作成したとのこと。

WindowsではIrfanViewアプリを使用。
http://www.irfanview.com/
これは、非常に有名なWindows用フリーウエアのマルチメディアビューアーです。
sipsと同じようなことがGUIアプリとして実行できます。
DOSプロンプトからも実行可能です。

◎リサイズ後のFTPアップロードについて

MacではUpload_to_FTPというAutomater Actionを使用。
http://editkid.com/upload_to_ftp/

実際やってみると、ファイルが4つでアップロードが止まったりしてしまい、原因を調査したそうです。その結果、このAutomater Actionを指定してるフォルダ（フォルダアクションが指定されたフォルダ）に直接書き出すとダメなのがわかったので、一旦書き出し用フォルダに書き出してから、該当のフォルダにコピーすることで解決したとのこと。

WindowsでのFTPアップロードはFFFTPアプリを使用。
http://www2.biglobe.ne.jp/~sota/ffftp.html
これも、非常に有名なWindows用フリーウエアのFTP管理アプリです。
GUIアプリですが、これもDOSプロンプトからも利用可能です。しかし、ミラーリングアップロードしか仕様上できないので、ローカルで削除したファイルはリモートでも消えてしまいます。それがまずい場合は、削除したくないファイル名を*.jpg等でアプリ側で指定できるとのこと。

上記、書き出した後の画像のリサイズ及びその後のFTPアップロードの実際の実行には、MacではAppleScritpを実行スクリプトステップでshellスクリプトを使用し、WindowsではEventを送信スクリプトステップでDOSコマンドを使用することで、FileMakerから操作することになります。その際に発生する、ややこしいダブルコーテーションやシングルコーテーションの扱いは、Enclose関数、ChangePathFmt関数、という自作したカスタム関数と、FieldSubstitute関数という既存のカスタム関数を組み合わせることで記述をなるべく単純化したそうです。

そしてなんと、これら一連のスクリプトステップやカスタム関数をまとめたFileMakerファイル及び、当日の発表用資料を、高畑さんのご好意によりダウンロードにて配布していただけることになりました。リンクはこちらです。Enclose関数、ChangePathFmt関数、FieldSubstitute関数の組み合わせによるコマンド文の作成方法が大変すばらしいので、是非ダウンロードの上確認してみてください。

高畑さんの今回の発表のまとめとして、CUI最高！ということが挙げられました。私も聞いていて納得でした。FileMakerProというGUIでなんでも解決しがちになるアプリケーションにおいても、結局はCUIの力を借りることでその可能性が何倍にも広がることを再確認した次第でした。

最後におまけ　Typinator（タイピネーター）の紹介
http://www.ergonis.com/products/typinator/
http://www.youtube.com/watch?v=W4LFACGvTPM

関数名等の入力自動補完をIME的にしてくれるユーティリティで、いろいろな開発環境用のプラグインがありFileMaker用のもあるそうです。これをMacにインストールすると、FileMakerで計算式等を作成している時に、先頭の数文字を入れただけで該当する関数の候補を表示してくれて、後はそこから選択するだけでよくなるので非常に便利になるとのこと。実際にデモをしていただき、これは確かに開発効率が相当上がりそうだなと思いました。

以上