Custom Font

[maeda-m]

---

これは v1.0 における 機能の実装コンセプト であり、この内容を基にユーザからのフィードバックを得てよりよい仕様を議論し、
導き出すことが目的。コメント欄での議論により、内容は適宜更新される。また、技術的な制約など、実際の機能が必ずしもコンセプト通りになるとは限らない。

---

機能

概要

• Editor 上で使用するカスタムフォントを設定する
  • 端末にインストールされているフォントのフォント名と代替フォントを指定して登録する
  • カスタムフォントの設定は、レイアウトファイルに記録される。つまり、レイアウト単位での設定が必要
• Generator 上でカスタムフォントの物理ファイルパスを指定する

機能概要

カスタムフォント登録の流れ

1. カスタムフォントに登録したいフォントを端末にインストールする
   • 内部ライブラリの制約により、利用できるフォントは TrueTypeFont(.ttf) に限る
2. レポート設定にあるカスタムフォント設定にフォント名(PostScript名)などを入力して登録する
   • PostScript名は MacOSであれば FontBook で、WindowsOSであれば フォントインストーラー SAKURA などで確認する
   • フォント名(PostScript名)の例 正: IPAPGothic, HanaMinA、誤: IPA Pゴシック, 花園明朝A
   • ポイント: 端末にインストールされているフォントリストは取得できないので、フォント名を入力する必要がある。入力されたフォントが端末にインストールされているかどうかのチェックは行う
3. ツールバーやプロパティのフォント選択UIに登録したカスタムフォントが選択肢として追加される

登録したカスタムフォントの選択

• 端末にインストールされているフォントを選択した場合は、そのフォントがテキストやテキストブロックに適用され、高さや幅が正しく表示される
• 端末にインストールされていないフォントを選択した場合は、代替フォントが適用され、テキストの高さや幅が正しく表示されない。また、フォントがインストールされていない旨の警告メッセージが表示される

警告メッセージが表示された時の流れ

1. 登録されたフォントが端末にインストールされていない場合は警告メッセージが表示される
   • カスタムフォントが設定されたレイアウトを開く時や端末にインストールされていないフォントを選択した時に表示される
2. レイアウトで使われているカスタムフォントを確認する
   • 警告メッセージをクリックするとレポート設定にあるカスタムフォント設定が表示される
   • カスタムフォント設定で端末にインストールされていないフォントを確認する
3. 端末に必要なフォントをインストールする
4. レポート設定にあるカスタムフォント設定を再度表示してフォントがインストールされたことを確認する

正しくカスタムフォントをレンダリングするための Generator への設定方法

1. カスタムフォントとして登録したIDとそのフォントの物理ファイルパスを予め指定する:

Thinreports.configure do |config|
  config.custom_fonts = {
    custom_font1: '/path/to/font1.ttf',
    custom_font2: '/path/to/font2.ttf'
  }
end

1. 指定したフォントがある場合は、そのフォントが適用される
2. 指定したフォントがない場合は、代替フォントが適用され、その旨を知らせる警告メッセージが出力される

メインスキーマ

{
  "version": "0.0.0",
  "title": "Report Title",
  "report": {
    :
  },
  "state": {
    "layout-guide": [
      :
    ],
    "custom-font": {
      "custom_font1": { "name": "FontName1", "build-in-font": "IPAPGothic" }
    }
  },
  "objects": [
    :
  ]
}

[hidakatsuya]

フォント設定画面でフォントを登録する際、フォントリストから選択するのではなく、 フォント名（PostScript 名）を入力する必要がある ことをポイントとして追記しました。

[shugo]

@hidakatsuya

こちらのIssueですが、どういったステータスでしょうか？

thinreports/thinreports-basic-editor#68 と Custom font thinreports/thinreports-generator#91 を参考にmasterにrebaseして一部エラーが出た箇所を修正したところ、サンプルのテンプレートをエディタで開いてカスタムフォント名が表示されることと、PDFを生成できることは確認できました。

• https://github.com/shugo/thinreports-generator/tree/custom-font-2
• https://github.com/shugo/thinreports-editor/tree/custom-font-2
• https://github.com/shugo/thinreports-examples/tree/custom-font-2

[hidakatsuya]

@shugo @maeda-m
仕様も未確定で未実装というステータスです。

thinreports/thinreports-editor#68 と Custom font thinreports/thinreports-generator#91 を参考にmasterにrebaseして一部エラーが出た箇所を修正したところ、サンプルのテンプレートをエディタで開いてカスタムフォント名が表示されることと、PDFを生成できることは確認できました。

検証いただきありがとうございます。それら PR はカスタムフォントの仕様策定に向けて一つの別解として提案・実装したものですが、その後の議論ができていない状況です。

個人的には、改めてこの issue に近い仕様+αで考えているところではあります。thinreports/thinreports-basic-editor#68 も候補の一つではありますが、PostScript名を調べなければならない点が機能としては accept しづらいという気持ちです。

もしよろしければ、thinreports/thinreports-basic-editor#68 について感想やご意見などコメントいただけると嬉しいです。

[shugo]

@hidakatsuya お返事ありがとうございます。

@shugo @maeda-m
仕様も未確定で未実装というステータスです。

エディタだけでなく、tlfファイルのフォーマットについても変更の可能性がありますでしょうか？

検証いただきありがとうございます。それら PR はカスタムフォントの仕様策定に向けて一つの別解として提案・実装したものですが、その後の議論ができていない状況です。

個人的には、改めてこの issue に近い仕様+αで考えているところではあります。thinreports/thinreports-editor#68 も候補の一つではありますが、PostScript名を調べなければならない点が機能としては accept しづらいという気持ちです。

なるほど、そういった懸念点があるのですね。

もしよろしければ、thinreports/thinreports-editor#68 について感想やご意見などコメントいただけると嬉しいです。

実はサンプルのテンプレートは開けたものの、新しいフォントの登録をエディタ上でどうやるかわからなかったのですが、GUIでのフォント登録機能については未実装でしょうか。

ただ、個人的にはtlfファイルのフォーマットを含めてgenerator側の方針が定まっていれば最悪TLFファイルを手で修正するという対応も可能と考えていますので、ご検討いただけましたら幸いです。

[hidakatsuya]

@shugo

エディタだけでなく、tlfファイルのフォーマットについても変更の可能性がありますでしょうか？

仕様が確定していない以上、「変更の可能性はある」というのが回答になってしまいます。

GUIでのフォント登録機能については未実装でしょうか。

実装済みです。thinreports/thinreports-basic-editor#68 の機能は、同 pull request の description に貼ってある GIF 動画で説明しています。

Basic action
http://recordit.co/PeOoMKPu99
Font validation
http://recordit.co/aNcTVLbuAj
Custom fonts are stored for each tab
http://recordit.co/vni18k3LMj
Custom fonts only actually used are recorded in *.tlf and restored
http://recordit.co/YBr9GRgfC2

フォント登録機能については Basic action の GIF 動画で説明していますが、ローカル環境で利用可能なフォントの PostScript 名 をフォント選択コンボボックスで入力することで利用可能になるという仕様です。tlf ファイルにはテンプレートの中で使われているカスタムフォントのみ登録されます。そのため、現時点では明示的な削除機能は実装していません。

なお、残タスクと懸念点としては次の通りです。

• 代替フォントの登録機能
  • tlf のポータビリティを考慮し、ビルトインフォントから代替フォントの設定を可能にする
  • 現状では generator で pdf を生成するとき、カスタムフォントに対するフォントが存在しない場合はエラーになるが、代替フォントが設定されている場合は、そのフォントで描画しつつ warn する
  • 代替フォントの設定を必須にするかは要検討。ユースケース的には意図しないフォントで描画されてしまうよりもエラーになるほうが良いかもしれない
• PostScript 名を信頼しても問題ないのか
  • 同じフォントでも PostScript 名が環境によって異なるといったことが起こった場合に問題になりえる
• PostScript 名を知らなければ設定できない

[hidakatsuya]

@maeda-m
以前、thinreports/thinreports-basic-editor#68 thinreports/thinreports-generator#91 のカスタムフォントを使っていると話していたけど可能な範囲で感想を聞かせて欲しいです。

私は、この issue とも thinreports/thinreports-basic-editor#68 とも異なる仕様案を持ってるので、それについては別途この issue で提案しますが、これらの仕様案についての意見も聞いてみたい。

[maeda-m]

@hidakatsuya

可能な範囲で感想を聞かせて欲しいです。
これらの仕様案についての意見も聞いてみたい。

1年以上前に custom-font ブランチを某製品で使用しました。
PostScript 名など幾つか注意する（丁寧に確認する）点はありましたが、
カスタムフォントを使用したPDF生成を実現できました。ありがとうございました。

感想としては、私が使用するには必要十分でしたが、カスタムフォントの登録方法は、別のアプローチの方が好まれるかもしれません。
例えば、カスタムフォントの登録をレイアウト単位ではなく、Editorの環境設定として保持する等です。

また、OS によっては PostScript 名が異なる場合があったので（フォントによるかもしれない）、
Editor 上のカスタムフォント登録は厳密に検査せずに単純なフォント名指定として扱い、
Generator の register_font で指定するフォント名と一致すれば良い等の考えにしたほうがいいかもしれません。

これは、私が Editor 上のテキスト位置はあくまでも目安で、最終的な調整は生成されたPDFを確認しながらすれば良いと考えているためです。

[shugo]

エディタだけでなく、tlfファイルのフォーマットについても変更の可能性がありますでしょうか？

仕様が確定していない以上、「変更の可能性はある」というのが回答になってしまいます。

了解です。正式リリース前に使用する際はそのあたりのリスクを考慮して判断したいと思います。

GUIでのフォント登録機能については未実装でしょうか。

実装済みです。thinreports/thinreports-editor#68 の機能は、同 pull request の description に貼ってある GIF 動画で説明しています。

すみません、見落としていました。

• PostScript 名を信頼しても問題ないのか

  • 同じフォントでも PostScript 名が環境によって異なるといったことが起こった場合に問題になりえる

• PostScript 名を知らなければ設定できない

@maeda-m さんが言われるように、特定の製品・サービスなどの開発であれば最終的なレイアウトの調整はPDFレベルで行うことが多いため、実用上あまり問題ないように思います。

ただ、OSSでの利用など色々なプラットフォームで利用されるような使い方の場合は、Webフォントのように環境に依存せずにフォントを指定できる方が望ましい気はします。
ただ、そういった用途でのカスタムフォントのニーズは低かったり、その場合もテンプレート作成者以外の人がエディタでテンプレートを編集する必要性はあまりない（例えばフォントが同梱されていてgenerator側で正しくフォントが指定されていれば十分）といったことはあるかもしれません。

[hidakatsuya]

お二人とも貴重な意見をありがとうございます。

私が Editor 上のテキスト位置はあくまでも目安で、最終的な調整は生成されたPDFを確認しながらすれば良いと考えているためです。

確かに、多くの場合は上記のユースケースが該当しそうですね。私自身のこれまでのユースケースを考えても、上記で十分満足できることに気づきました。

カスタムフォントのファーストステップとしては、次の仕様で考えてみたいと思います。

• (Editor) 任意のフォント名 (カスタムフォント名) を設定できる
• (Generator) カスタムフォント名に対するフォントを設定できる

一方で、Editor 上で出力結果を確認できることが Thinreports の強みの一つだと考えているので、最終的にフォントを再現できることを見据えた仕様にしておきたいと思います。

@maeda-m

例えば、カスタムフォントの登録をレイアウト単位ではなく、Editorの環境設定として保持する等です。

具体的に、カスタムフォントの登録方法としてどんなものをイメージしてます？

[maeda-m]

@hidakatsuya

一方で、Editor 上で出力結果を確認できることが Thinreports の強みの一つだと考えているので、最終的にフォントを再現できることを見据えた仕様にしておきたいと思います。

ですよね。テキスト位置と罫線とかの位置合わせが稀にあるので、フォントを再現できたら嬉しいと思います。

具体的に、カスタムフォントの登録方法としてどんなものをイメージしてます？

コメントを書いている途中で気づいたのですが、

例えば、カスタムフォントの登録をレイアウト単位ではなく、Editorの環境設定として保持する等です。

はズレた意見で、当時、私が抱えていた困りごとを解決する手段ではなさそうです。ですので忘れてください。

---

以下、書いていたコメント。

機能概要 > カスタムフォント登録の流れ にあるレポート設定の図の様なものが、
Editor の環境設定にあるのをイメージしています。

これは、某製品開発の事情でレイアウト単位のカスタムフォント登録だと煩雑な場合があったためです。
少し曖昧な表現になりますが、複数人でのわりかし大量の帳票レイアウトを一斉に作成する環境において、フォント指定ミスの有無を確認・修正する場合です。

この時、困ったことはレイアウト内の静的／動的テキストのフォントが確認しにくいことでした。
※ ドキュメントエクスポート機能はありますが、そもそもフォント情報は出力していないので活用していませんでした。

以上。

[hidakatsuya]

v1.0.0 で、basic report 及び section report 出力形式両方でカスタムフォントのサポートを目指す。まずは仕様を決める。

[hidakatsuya]

@maeda-m と同期的に話して次のような方針で検討することにしました。

• section editor / basic editor の両方でカスタムフォントに対応することを目指す
• v1.0.0 では最小限の機能の実装とする
  • Editor で新たにカスタムフォントキーを設定できる
  • Generator でそのキーのフォントを登録できる
  • Editor のテキストはそのフォントで描画はされないため、実際にPDFを生成して最終的な結果を確認する必要がある
• ただし、basic editor は テキストの高さをフォントサイズによる計算に変更する thinreports-basic-editor#139 の仕様変更を伴う

[hidakatsuya]

ちなみに、v1.0.0 の次のカスタムフォントの最終的な仕様は次のようなものを想定している。

---

• Editor をコマンドラインで起動できるようにし、設定ファイル(json)のパスを指定できるようにする
  • ホームディレクトリ配下に設定があればそれを参照しても良いかもしれない: e.g. $HOME/.config/.thinreports.json
• 設定でフォントを設定できる

{
  "font": {
    "Foo": "relative-path/to/foo-font.ttf",
    "Bar": "/absolute/path/to/bar-font.ttf"
  }
}

• 設定されているフォントは Editor で選択でき、Editor 上でも描画される
• Generator でフォントを登録する際にもこの設定ファイルをロードできる

Thinreports.config.load_file '.thinreports.json'