ClarisFileMaker + Paged.js で簡易的にCSS組版と管理

# はじめに
## 対象読者
* [Claris FileMaker](https://www.claris.com/ja/filemaker/pro/) ユーザ
* FileMaker に興味がある人
* CSS 組版に興味がある人
  * not CSS 組み版ガチ勢
* 次の前置きを要参照

## 前置き
* 以下のイベントへの参加記事です
  * [Qiita Engineer Festa 2022](https://qiita.com/official-campaigns/engineer-festa/2022)
  * [Claris FileMaker で作った App を JavaScript で拡張したらどうなる？！](https://qiita.com/official-events/0005a02478acfc50dd13)
* Paged.js を本気で使い込むって主旨ではないので、CSS 組版ガチ勢向けの記事ではありません
* FileMaker を使って CSS 組版を簡易的にやってみたらどうなるかという、ライト層向けです
* 「Paged.js より Vivliostyle.js のほうがよくね？」という意見もあるのは承知の上ですが、環境構築不要で LiveServer を用意することなく CDN でより簡易的に使えるのが Paged.js なので、これを採用しました

## what is CSS 組版？
* 書籍用レイアウトを HTML + CSS ( + JavaScript ) で表現するもの

## 最終的に出来上がるモノ
* 以下のような感じに印刷できる

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37739/63da81a8-bec3-86e9-f9c7-52a555c63d06.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37739/78fd01d2-1aa0-b4bd-019b-c8dd019b65a3.png)

* 冊子制作にあたりページ単位でレコード管理もできる

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37739/f631f001-f647-204d-01e9-f0a87bc22bb0.png)


## 環境
* Windows 10 Pro
  * Windows のため WEB ビュアーは Microsoft Edge
* Claris FileMaker 19.4.x / 19.5.1
* [Paged.js](https://pagedjs.org/) latest

# 準備
## Paged.js
* 公式
    * https://pagedjs.org/
    * https://github.com/pagedjs/pagedjs
* 有志によるチートシート
    * https://www.pagedmedia.org/about-paged-media/pagedjs-cheatsheet/
* CDN のリンクを取得します

```html
https://unpkg.com/pagedjs/dist/paged.polyfill.js
```

## FileMaker
### fmp12 ファイル作成
* `kumihan.fmp12` を作成

### テーブル作成
* ひとまず `texts` という名前で一つ作成

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37739/674b4a23-83e5-d1aa-bd03-dd1d63ab9fd9.png)

### フィールド用意
* id - 数字
* input - テキスト
* css - テキスト
* g_for_webview - テキスト - グローバル

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37739/8545b15d-4bd3-d17a-b48d-51fdd40426af.png)

### レイアウト用意
* 作成したフィールドをペタペタと置いていく

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37739/b0e0413c-d62b-ece9-4776-c0e1c2f0141b.png)

* input と css のフィールドを切り替えるためにスライドコントロール

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37739/b6209187-2080-be41-d7c2-fbb311551fdf.png)

* WEB ビューアの中身は以下の通りにして、オプションも以下のようにしておく（使うかわからないけれど）

```sh:WEB ビューア
Let (
  [
    paged_js_path = $$paged_js_path;
    input = texts::input;
    css = texts::css;

    result = texts::g_for_webview;
    result = Substitute ( result ; "[[[paged_js_path]]]" ; paged_js_path );
    result = Substitute ( result ; "[[[input]]]" ; input );
    result = Substitute ( result ; "[[[css]]]" ; css )
  ];

  result
)
```

* `g_for_webview` フィールドの中身は以下のように

```html:g_for_webview
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="[[[paged_js_path]]]"></script>
<style>
[[[css]]]
</style>
</head>
<body>
<script>
window.PagedConfig = {
  before: () => {
    return new Promise(resolve, reject) {
      setTimeout(() => { resolve() }, 1000);
    }
  },
  after: (flow) => { console.log("after", flow) },
};
</script>
<div id="result">[[[input]]]</div>
</body>
</html>
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37739/214ba25e-5ee2-9ea7-4317-a83d9c660c9c.png)

### スクリプト用意
* 以下の二つ
    * open
    * set_global_var.paged_js_path
* 先ほど取得しておいた Paged.js を CDN として読み込むリンクを格納しておく

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37739/e634d20c-aca6-ce11-4715-38b1604a4f8b.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37739/19605dfb-f898-f9cb-f6db-d3ba3b1770b7.png)

### スクリプトトリガ用意
* レイアウトに対して設定

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37739/52c704ed-7c34-538f-d0d4-f4c46afe3853.png)

## 表示するためのテキストを用意
* 青空文庫さんから 鴨長明『方丈記』などいかがでしょうか
  * https://www.aozora.gr.jp/cards/000196/files/975_15935.html

## 準備完了！
* はい、ここまで来たら準備完了です

# 横書き表示
## input フィールドへ入力

```html:input
<h1>方丈記</h1>
<h2>鴨長明</h2>
<p>行く川のながれは絶えずして、しかも本の水にあらず。よどみに浮ぶうたかたは、かつ消えかつ結びて久しくとゞまることなし。……（後略）……</p>
```

## css フィールドへ入力
* 公式ドキュメントに margin 設定の css が載っているのでひとまずこちらを機械的に適用してみる
  * https://pagedjs.org/documentation/4-how-paged.js-works/

```css:css
.pagedjs_page {
  margin-top: 10mm;
  margin-right: 20mm;
  margin-bottom: 25mm;
  margin-left: 15mm;
}

.pagedjs_page .pagedjs_margin-bottom-left::after {
  content: string(title);
}

.pagedjs_page .pagedjs_margin-bottom-center::after {
  content: var(--pagedjs-string-title);
  text-transform: uppercase;
}
```

## 横書きの表示確認
* ここまでくると、以下の画像のようになっているはずです

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37739/02c2fe95-6156-3d15-bb88-cbc2f8cf4aab.png)

* スクロールしてみると……
* お、イイ感じじゃないですか？

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37739/5fa8e772-2812-8828-aeb6-439c92039b84.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37739/1773218a-9899-bfdb-bccb-838f27c301fc.png)

## Google Fonts から BIZ UDPGothic を適用
* せっかくなので、もっと読みやすくするために Google Fonts から BIZ UDPGothic を適用してみましょう
* CDN として読み込むための情報を取得
  * https://fonts.google.com/specimen/BIZ+UDPGothic?query=biz+udp

```html
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=BIZ+UDPGothic&display=swap" rel="stylesheet">
```

* もうめんどうになってきたので `g_for_webview` の中に直接書いてしまいましょう…… `</head>` の手前あたりに
* さらに `css` フィールドの冒頭へ追記

```css:css
html {
  font-family: 'BIZ UDPGothic', sans-serif;
}
```

* しかし何か逆に読みづらいな……？　行間が詰まりすぎているのだな

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37739/e91bb708-2514-5eec-15a6-f12bfcd2d312.png)

* 以下を `css` へ適用

```css:css
html {
  font-family: 'BIZ UDPGothic', sans-serif;
  line-height: 200%;
}
``` 

* これくらいで良い感じではなかろうか🤔

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37739/a0b5b67c-d086-9e39-8b97-d0da8ac95a1f.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37739/ab841ac6-261d-6e16-2e12-4756dc51dd77.png)

## 横書きで印刷の検証
* WEB ビューアを右クリックするとこういうメニューが出てきますので、ここで `印刷` を選ぶことによって WEB ビューアの中身だけを印刷することができてしまいます。便利ねー

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37739/ca79a654-ba9c-12e1-3330-1f68c8d53682.png)

* オプションのところに `ヘッダーとフッター` チェックがついていると、今のところ邪魔なので消しておきましょうか

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37739/57a1c17b-8cfb-6aca-25c1-52dcce1b0411.png)

* しかし……あれ？

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37739/4aa12c8b-cdb2-2475-bbbb-c4e65a4b7fe2.png)

* なぜか偶数ページが空白になるのである🤔🤔🤔

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37739/248b310a-5413-453e-6e47-93b2b7e753af.png)

* こういう場合は十中八九 margin 系の CSS のせいなので、`css` フィールドから `html` の定義以外を全て削除（つまり公式ドキュメントから引っ張ってきた css を削除）
* すると、WEB ビューアの見た目的には左寄りになったように見えてしまうけれど、印刷プレビューでは正しく改ページされるようになった。ということで、これでヨシ

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37739/a589821a-9f92-cb50-1e32-6722a8032d36.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37739/a2203b64-9778-ee0c-965a-fd0acfc881f5.png)

## 横書き出力完了！
* これでめでたく、横書きでの出力は完了できるようになりました🎉
* ここまでは順調ですが、鬼門は次からですね……


# 縦書き表示
## css フィールドへ入力
* Paged.js は縦書き言語圏を想定していないので、さてどうなるか
* `css` フィールドに以下のように入力します

```css:css
html {
  font-family: 'BIZ UDPGothic', sans-serif;
  line-height: 200%;
  text-orientation: upright;
  writing-mode: vertical-rl;
}
```

* お？　一見良さそうに見えますが……

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37739/40ee9a33-a474-0fab-88a5-208c25f0a93d.png)


* 見事に崩れましたね、はい
* 分かりますでしょうか、これ、上の段落のほうでは左端あたりがきれてしまっていたり……下の段落のほうでは、そもそもこれ以上下スクロールできなくなっていたり……

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37739/0f2a2dcc-e179-d289-d5e0-271148948d66.png)

## 改ページ処理を入れてみる
* `css` に以下の class を作ってみます

```css:css
.page-break {
  break-before: page;
}
```

* 改行したいところを、いったん `</p>` で切って、あらたに `<p class="page-break">` を入れてみると……
  * なお改ページ処理は `<span class="page-break">` でも可

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37739/4ed97418-6455-ee67-44e1-db19ec9c1f7b.png)

* お！　左にスクロールできるようにもなって、正しく改ページできている！　良い感じ！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37739/c5cba558-58c5-6b1d-08f5-4e2f30819327.png)

* 印刷プレビューで見てみると、ちょっと 1 ページ目が左端に寄りすぎていますね
* そして、合計 2 ページって……しっかり改ページ処理を入れていかないと、印刷用に認識されないのですね🤔

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37739/72d53b30-caa5-b8a9-f232-6cd82f13e748.png)

* これを解消するには、印刷サイズを `90` に縮小すると良い感じにおさまるようになります。とりあえず運用でカバーみたいな感じ……

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37739/9847cc76-6088-d10c-3ed0-361d73541952.png)

* さらに `css` に調整を入れる。明示的に `A4` サイズを指定し、 `p` タグ内の height を長めに

```css:css
@page {
  size: A4;
}

p {
  height: 150%;
}
```

* 結果……そこそこイイ感じ？

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37739/216a5db7-99db-924c-ef85-a4546abb3b3e.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37739/56cfaf1f-efae-581c-2251-3d4d0db54b37.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37739/7803b453-2faa-21b1-9f32-13ad3e4c03c5.png)

## Google Fonts から BIZ UDGothic を適用
* 色んなことが気になってきますね。縦書きだとやはり、下端が揃っていないと気持ち悪い……
* なのでプロポーショナルでないフォントに変更します
* 単に `'BIZ UDPGothic'` から一文字 P を削って `'BIZ UDGothic'` にすればヨシ

```css:css
html {
  font-family: 'BIZ UDGothic', sans-serif;
  line-height: 200%;
  text-orientation: upright;
  writing-mode: vertical-rl;
}
```

* これによって揃ってきた

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37739/9fea3ccd-c889-8b5c-2421-1393f5078598.png)

* しかしこれ……改行処理入れていくのツライね？
* 単一のテキストフィールドで運用するには限界があるのでは

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37739/7f9b5c61-fcc3-7bf4-f062-7a047aed2927.png)

* ……ということで、次にページ管理をおこなうためのテーブルを作ります


# テーブル拡張による管理機能の向上
## pages テーブル作成と books テーブルへの改名
* 1 ページ = 1 レコードとなるような `pages` テーブルを作成
* ついでに先ほどのテーブル名を `books` へ改名しておく

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37739/6da5f5d5-fbb4-41fa-566d-e1843198b806.png)

## pages テーブルへフィールド作成
* id - 数字
* book_id - 数字
* page - 数字
* head - テキスト
  * `h1` タグなどが挿入される場合に使用
* text - テキスト
* c_word_count - 計算 - 数字
  * 改行する目安をはかるために
* c_output - 計算 - テキスト
  * `page-break` class を付与した `p` タグで挟んで返すために
    * ただし 1 ページ目は `page-break` しない
  * `head` テキストが存在する場合はあわあせて出力

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37739/64bad774-6d44-5a7e-4700-fdac1e5f3d78.png)

```:c_word_count
WordCount ( text )
```

```html:c_output
If (
  not IsEmpty ( head );
    head & ¶
) & 

If (
  Exact ( page ; 1 );
    "<p>" & text & "</p>";
    "<p class=\"page-break\">" & text & "</p>"
) & ¶
```

## リレーション作成
* `book_id` をキーにして双方向へ移動できるように

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37739/5a0bea62-f5bd-3b50-39c1-013f2b9f79f7.png)

* `books` から `pages` に対しては `page` の値に基づく昇順ソートを指定

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37739/67433d9e-652c-61a2-9bbc-ec4b272ef2e4.png)


## books テーブルのフィールド変更
* テキストフィールドだった `input` を `c_input` 計算フィールドへ変更

```:c_input
List (
  books⇔pages◎book_id::c_output
)
```

## pages テーブル用レイアウト
* ひとまずサッサッと置いておく

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37739/74c8680e-5e9a-5290-1974-cf04ea8755b4.png)

## pages テーブルへレコード作成
### 1 ページ目
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37739/c1eaf95f-740f-0410-66f6-c14369f2c919.png)

### 2 ページ目
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37739/b47a3e9e-8803-d5ff-9233-7fcd7ba664a0.png)

### 3 ページ目
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37739/a4e828d7-433c-6d58-07ac-89f5bc35bc63.png)

## 表示確認
* だいたい 1 ページあたりを 400 文字以内におさめていくと、この設定であれば良い感じになる

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37739/750dbff3-3b82-0259-4b19-4150a8acd827.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37739/2bfe10ce-2591-de4d-2a88-0d72af20c89f.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37739/a0bc859f-9a75-b8cb-1242-9329aaa9623b.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37739/86a39d3f-8cad-aa53-be1c-a8c4b7740c2a.png)


# さらに一歩先へ
## 段落で字下げ
* まずは `p` タグについて `css` で `text-indent` を定義しましょう

```css:css
p {
  height: 150%;
  text-indent: 1em;
}
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37739/2f420c56-f0bb-170e-1e93-fc8270e5cb5c.png)

* 任意のところで段落下げたいというニーズもありますね。今、ページ単位で `p` タグを割り当てるようにしているので、ページ単位の制御は `div` タグにするというのが手っ取り早いでしょうか。以下で出力される `p` タグを `div` にする……しかしそうすると、必ず手で `p` タグを入れなくてはならなくなってメンドクサイ……🤔

```:c_output
If (
  not IsEmpty ( head );
    head & ¶
) & 

If (
  Exact ( page ; 1 );
    "<p>" & text & "</p>";
    "<p class=\"page-break\">" & text & "</p>"
) & ¶
```

* そこで FileMaker の改行タグを `br` `span` タグに置き換えてしまいましょう。`css` に `line-break` という class も追加

```css:css
.line-break {
  display: inline-block;
  text-indent: 1em;
}
```

```c_output
Let ( 
  [
    head = head;
    text = text;
    text = Substitute ( text ; ¶ ; "<br><span class=\"line-break\">" )
  ];


  If (
    not IsEmpty ( head );
      head & ¶
  ) & 

  If (
    Exact ( page ; 1 );
      "<p>" & text & "</p>";
      "<p class=\"page-break\">" & text & "</p>"
  ) & ¶
)
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37739/023efb4d-e791-10e0-0786-839456788d71.png)

* 上記のようにテキストフィールド内で改行した箇所で、以下のように字下げされるようになった。これでヨシ

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37739/c70336e4-55fb-ba18-506d-07a1d42edae4.png)

## ルビつけたい
* まあ日本語ですからね、つけたいですよね……ただ Paged.js はネイティヴに対応されてはいないのですよね……
* とりあえずつけるだけなら html ストレートで `ruby` タグを使うやり方で対応は可能

```html
<ruby>玉<rt>たま</rt></ruby>しきの都の中に
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37739/443cd3fe-00f5-c2b1-eac9-51cdea89573d.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37739/ac15f547-71ff-321e-269f-1038194f2864.png)

* ちょっと書き方が煩雑なのでもう少し簡単に書けるようにしたい気もする（良いアイディア募集中）
  * 横書きであれば以下記事のような書き方も可能であったけれど、縦書きだと `position: absolute;` がうまくハマってくれない
    * [CSSでデザイン調整可能なルビ](https://qiita.com/myzkyy/items/5f735808b45ba8dbf588)

## ページ番号を挿入したい
* バグでページ番号が正しくカウントできないっていう issue が……🤔
  * [page-counter does not work in Paged.js](https://github.com/Mogztter/asciidoctor-web-pdf/issues/258)
* この時点でいやダメじゃんって感じになるかもしれないけれど、グッと堪えて……
* 横書きならページ番号出力できるのだけれど、縦書きだと表示されないという罠に遭遇中。たとえば `css` の `@page` の定義中に以下を追加しておくと、正しくページ番号が表示される

```css:css
@page {
  size: A4;

  @bottom-center {
    content: counter(page);
  }
}
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37739/584b0f90-fce2-635c-da17-aa5ea1e04549.png)

* しかし縦書きだと表示されない……

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37739/41ddaa37-2b2c-b76f-230c-cad2e0d55df4.png)

* bottom ではなくて top にするとどうなるか？　と思って試してみると、表示されるように
  * しかし `@top-center` とかに指定しても効いてくれないのだなあ。今後の課題……
  * 本気でやるならページめくりにあわせて左右に寄せ直ししていかないといけないですし（中央寄せという逃げ方もなくはない）

```css:css
@page {
  size: A4;

  @top {
    content: counter(page);
  }
}
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37739/5a876164-5ce1-aa8e-da9e-97413527de7b.png)



## 以上！
* ひとまずこれで、最低限の FileMaker を用いた CSS 組版プレビューシステムができたかなと思います！


# おまけ
## books ⇔ pages の行き来
### books
* books 側には pages テーブルを一覧できるようにポータルを設置してあげるのがよいでしょう

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37739/67a58256-dd17-ff84-5d3c-add2a735a306.png)

* ポータル内のページ番号を押すと pages テーブルの関連レコードが開かれるように

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37739/2912a654-de31-f6ec-c4a7-1c05795c8336.png)

### pages
* pages 側には books レイアウトへ移動するためのボタンを置いておきます

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37739/a492397a-1e4c-d09f-d529-eae3116c6533.png)

### 他の手法について
* たとえば books から pages を開く時に新しいウインドウでカード的に開かせるというのも一つの手でしょう。そのあたりはお好みで

# おわりに
## 想定されうる反論
### いや、この程度のことは組版とは呼べなくね？
* ガチ実装までしている時間はなかったので、よかったらプルリクエスト送ってください！

### 何か後半、 JS あんまり関係なくね？
* Paged.js を使うという時点で JS の上に成り立っているのです！


## GitHub 公開リポジトリ 
* https://github.com/hi-noguchi/FileMaker-PagedJS
  * `.fmp12` ファイルのダウンロードや DDR ( Database Design Report ) の確認ができるようになっています。issue や Pull-req も歓迎

## 感想
* たぶん FileMaker + JS + WEB ビューア というと、鉄板なのがチャートやグラフ系のヴィジュアライズなので、それ以外の路線で面白いネタなんかないかなーと思って逆張りしてみた感じですが、いかがでしたでしょう？
* Paged.js は日本語縦書きと相性悪いっていう参考記事もあったので、真っ向勝負するとなると苦労しそうですが、こんな感じで FileMaker と組み合わせることによって、割とそれなりにイケる感じのつくりにできてしまうのでは？　と思いましたり。FileMaker の汎用性スゲーなって話ですよ
* 電子書籍出版……まで考えなくても、まあ社内ドキュメントくらいなら余裕でいけるんじゃないでしょうか
* 横書きなら FileMaker のレイアウト機能オンリーで WEB ビューア使わずに組版できる気もするけれど、縦書きはさすがにキツイだろうから WEB ビューア使った方がまだ良いと思います

## 参考記事
* [note - NIKKEIスタッフ - CSSで新聞をつくる](https://note.com/nikkei_staff/n/n7aa0a07045e8)
* [アンテナハウス - CSS によるページ組版入門 [PDF]](https://www.antenna.co.jp/AHFV5/CSSInfo/CSS-Page-Tutorial.pdf)