HTMLレポートページの作成 - 東京都知事選挙投票結果

FMEの文字列処理用のトランスフォーマーは充実しており、「e-Stat 統計表情報ウェブページの自動作成 (FME Server)」でも紹介したように、従来から、工夫次第でHTML文書を作成することが可能でしたが、FME 2016.1 ではHTMLに関していくつかの機能が追加され、図表を中心とする定型のHTMLレポートページが簡単に作成できるようになりました。

次の Safe Software ブログ記事も参照してください。
FME 2016.1 New Functionality: HTML and HTML Transformers

ここでは、2016年7月31日に投開票が行われた東京都知事選挙の投票結果について、開票区別の投票率を示す棒グラフと開票区別の投票結果一覧表を含むHTMLレポートページを作成するワークスペース例を掲げます。

【ソースデータ】
東京都選挙管理委員会事務局ウェブサイトにおいて公開されている東京都知事選挙投票結果Excelファイル
東京都選挙管理委員会事務局 > 都知事選挙（平成28年7月31日執行）投開票結果
投票結果: h28tochiji_touhyo.xls [Sheet1]

【変換内容】
開票区別の投票率（男女平均）を示す棒グラフ、および、開票区別の有権者数（男、女、計）、投票者数（男、女、計）、投票率（男、女、平均）の一覧表をウェブブラウザで閲覧できるHTML文書に変換する。

FME 2016.1.1.0 build 16609

FME ワークスペース例

[XLSXR] (Excel) リーダー: Excelスプレッドシートから投票結果を読み込む。
AttributeRenamer: 属性名（列名）を分かり易い名称に変更する。
AttributeTrimmer: 開票区名の先頭にある余分な全角空白を削除する。
Tester: 集計行（開票区名が「***計」、「***支庁」であるもの）を除く。
StringFormatter x 2: 投票者数、投票率の数値書式調整
HTMLReportGenerator: HTML図表作成
HTMLlayouter: HTMLページのレイアウト調整
[HTML] ライター: HTMLファイル出力

Excelリーダーをワークスペースに追加する際のパラメーター設定によって、列名が記述されている行番号を指定し、それらを属性名とすることができますが、その行に同一の列名があった場合、2番目以降の列名には連番 (00, 01, 02...) が自動的に付加されます。この例では、6行目を列名としたので、2番目以降の「男」は、「男00」、「男01」、「男02」となります。ただし、3番目の「男01」（棄権者数）は使用しないので、フィーチャータイププロパティ設定画面の User Attributes (ユーザー属性) タブで非表示に設定したため、上の図には現れていません。「女」等についても同様です。

Excelに数値として記録されている値には整数と小数点数の区別はなく、Excel画面上に表示される小数点以下の桁数は、セルの書式として設定されています。FME はセルの書式のいかんに関わらず、Excelの数値データを全て小数点数として読み込むので、HTML文書を作成する前に StringFormatter によって数値の書式を整えました（有権者数、投票者数は小数部なしの整数、投票率は小数点以下2桁の小数点数）。

以上の前処理の後、FME 2016.1 で導入された HTMLReportGenerator, HTMLLayouter, [HTML] ライターによって、次のようなHTML文書=ウェブページに変換しました（実際のページはこちら > HTMLReportGenerator DEMO）。

HTMLReportGenerator では、入力データを次の要素を含むHTML文書に変換することができます。

Chart (Bar, Line, Pie)	チャート (棒グラフ, 折れ線グラフ, 円グラフ)
Header	ヘッダー（H*要素文字列)
List	リスト
Image	画像
Map	マップ (注)
Separator	セパレーター (hr要素)
Table	表
Custom HTML (FME 2017.0 以降)	任意のHTML要素を含むHTML文書のパーツ

注: マップ要素は、Esri Leaflet, Google, または Mapbox Leaflet のAPIを利用して地物を表示するためのスクリプトをHTML文書に組み込むものです。利用にあたっては各APIの利用規約等にしたがってください。

HTML文書に組み込む要素の種類、数、順序は任意です。この例では、ヘッダーx3, セパレーター, チャート (棒グラフ), ヘッダー, 表の順で使用しました。

HTMLReportGenerator パラメーター設定画面

HTMLLayouter では、HTMLReportGenerator によって作成したひとつ以上のHTML文書を1ページのHTML文書に統合し、それらのレイアウトを整えることができます。この例では HTMLReportGenerator でひとつの文書しか作成していませんが、 Layout Type パラメーターを Vertical (垂直) とすることにより、左右のマージンなどが整えられます。

HTMLLayouter パラメーター設定画面

[HTML] ライターは、HTMLReportGenerator, HTMLLayouter で作成されたHTML文書（html_content属性に格納された文字列）をそのままファイルに出力します。

[HTML] ライターの代わりに FeatureWriter トランスフォーマーによってファイル出力すれば、引き続き FTPCaller トランスフォーマー等によってウェブサーバーにアップロードするところまでをひとつのワークスペースで自動化することもできます。

HTMLReportGenerator, HTMLLayouter は、特に、静的ではあるが、しばしばデータの更新があるようなウェブページついて、データ更新に伴うHTML文書の更新を正確かつ迅速に行うために活用できそうです。

なお、現時点 (FME 2016.1.1) の HTMLReportGenerator はまだ機能が限られており、思い通りのウェブページを作成するのが難しいケースもあります。例えば:

• 表の各欄の右揃え、センタリング等の設定をサポートしておらず、全て左揃えになる。
• 図の凡例文字列中のスペースや非ASCII文字の前で改行され、縦書きのように表示される。
• 入力文字列中の <, > 等の特殊文字が自動的に実体参照に置き換えられるため、任意のHTML要素（例えば他のページへのリンクなど）を埋め込むことができない (FME 2017.0 では "Custom HTML" によって、任意のHTML要素を含むHTML文書のパーツを組み込むことができるようになりました)。

これらについてはすでに多数のユーザーから改良、機能強化の要望があがっているので、今後のアップグレードで改良されていくことと思われます。