NOV 27 G-21 中級ソリューションのユーザビリティが大幅に向上するデータをグラフィカルに表示させるテクニック ! 株式会社ジェネコム佐合紀和自己紹介佐合紀和（さごうのりかず） FileMaker9∼13 認定デベロッパ ! 株式会社ジェネコム創業：1995年本社：東京都新宿区九州支社：福岡県福岡市従業員：12名 FileMaker Business Alliance Platinum Apple Consultants Network FileMaker Excellence Award for FBA Business Partners of the Year in North Asia このセッションの話は・・・ FileMaker Proのデータをグラフィカルに表示するには? SVGを使いますこうやったら比較的簡単に使いこなせますよデータをグラフィカルに表示するには •グラフを使う →ある程度決まってる •画像の上にフィールドを置く →文字/数字だけ •条件付き書式 →色だけ •画像を隠したり表示したりする →自由度が高いが（Ver13の新機能）複雑な表現になるとメンテナンス性が悪い今回はもう少し進んだ表現を考えます Demo これらはSVGという技術を使っています SVGの基礎 •Scalable Vector Graphicsの略です •XML(テキスト)でベクター画像を描画します •最近のブラウザは殆ど対応しています （もちろん、iPadも） Demo <svg width="640" height="480" xmlns="http://www.w3.org/2000/svg">  <g> <title>レイヤ 1</title> ! <ellipse ry="64" rx="56" id="svg_1" cy="98" cx="118" stroke-width="5" stroke="#000000" ﬁll="#FF0000"/> ! <rect id="svg_2" height="114" width="124" y="135" x="145" stroke-linecap="null" stroke-linejoin="null" stroke-width="5" stroke="#000000" ﬁll="#0000ﬀ"/> ! <line id="svg_4" y2="322" x2="195" y1="204" x1="68" stroke-linecap="null" stroke-linejoin="null" stroke-width="5" stroke="#000000" ﬁll="none"/> </g> </svg> SVG形式で保存できるソフト •Adobe Illustrator •SVG-edit by Google •OmniGraﬄe •iDraw etc.. SVG-edit SVG-edit では、具体的な例で使い方を説明します座席表座席表座席表作り方 •座席表の絵を描きます •独自のタグを仕込みます •Webビューアで表示させます地区ごとの売上状況をグラフに Demo 0,0 100 75 50 25 0 Q1 Q2 Q3 Q4 0,0 画像を貼りこむ方法画像を貼りこむ方法 •base64変換 •改行を削除 Demo SVGの情報源 svg要素の基本的な使い方まとめ http://www.h2.dion.ne.jp/ defghi/svgMemo/svgMemo.htm まとめ •SVGは思ったより簡単 •ソフトを使ってベースを作ってから調整すると楽サンプル •FileMaker Proでは表現出来ない動的な図が書ける