FileMakerエンジニア
テレワーク（リモートワーク）が急速に普及したのは2020年以降、コロナ禍の影響で私たちの意識も大きく変化しました。
実際の対面ではなく、画面越しでも細かい情報のやり取りができるのは私たちが共通の言語を持っているおかげです。
定義にもよりますが、世界には7000を超える言語があり、400種類に及ぶ文字があるそうで、情報を伝えることの難しさ、奥深さが垣間見えます。
Briller FileMaker Laboratory（BFL）で調べたことが多くの人に伝わるのも、人類が築き上げた言語の力があってこそなので、普段何気なく使っている言葉や文字に対して思いを馳せてみるのもいいかもしれません。
目次
テーマ
今回のテーマは「既定フォントとフォールバックの調査」です！
前回、OS毎に違うショートカットキーの調査をさせていただきましたが、OSが違えばショートカットキーだけでなく、利用するフォントも違うことがあります。
またFileMaker（ファイルメーカー）にはスタンダードに利用するPro、iPhone・iPadで利用するGo、Webブラウザで利用するWebDirectといったものがありますが、それぞれ同じレイアウトでも、設定しているフォントの見栄えが違っていることもあります。
綿密に作り上げたにも関わらず、環境によってデザインが変わってしまうのはやきもきしてしまいますよね。
FileMaker（ファイルメーカー）のフォントがどういった仕組みで設定・変更されているかがわかれば、確認する手間やデザインの差異を減らすことができます。
なので今回はFileMaker（ファイルメーカー）の既定のフォントやWebDirectにおけるフォントフォールバックについての調査してみたいと思いますのでよろしくお願いします。
既定フォントについて
調査の前にまずはフォントの説明を掻い摘んでさせていただきます。
パソコンで文字が表示されるのはフォントデータのおかげです。
基本的にフォントデータは文字を表示する端末に標準でインストールされていますが、全てが同じフォントデータではありません。
中でも既定フォント（システムフォント、標準フォント）という、デフォルトで使用するフォントが各OS毎に用意されており、それ自体もバージョンや環境によって違うことがあります。
【2024年12月現在の日本語（和文）フォント】
・Windows：游ゴシック UI
・mac OS：ヒラギノ角ゴシック（Hiragino Sans）
ではFileMaker（ファイルメーカー）は上記の既定フォントに沿って設定されているかと言えばそうではありません。
フォントデータ自体は同じ端末にインストールされているものを利用しておりますが、既定フォントに関しましてはまた別で定義していますので、そちらは後述の調査方法にて説明させていただきます。
フォントフォールバックについて
上記の既定フォントに加え、もう1つ調査する内容がフォントフォールバックになります。
あまり聞きなれない単語と思われますが、簡単に言えば指定するフォントが利用できない際の代替として利用するフォントを選択する仕組みのことです。
WEBページやHTMLメールではCSSにfont-familyというプロパティが存在しております。
このfont-familyに設定したフォントリストから、利用しているブラウザで利用可能なフォントデータを割り当てることができます。
そしてWebDirectはWebブラウザ環境となるため、このfont-familyによる設定が適用されております。
しかしそれがどのように設定されているかまではClaris FileMaker WebDirect ガイドには詳しく書かれておりませんので、調査してどのようになっているか確認してみたいと思います。
環境
調査するにあたっての環境を紹介します。
今回は言語も関係しますのでロケールとWebDirectに関連する情報も掲載しております。
ソフトウェア：FileMaker Pro 21.1.1.41
OS：Windows 11 Pro（24H2）
表示言語：日本語
サーバーソフトウェア：FileMaker Server 21.1.3.305
ブラウザ：Google Chrome 137.0.7151.56
調査方法
既定フォントの確認
FileMaker（ファイルメーカー）14からデフォルトのフォントは全てテーマ（より正確にはスタイル）で設定されるようになっているため、既定フォントはそれによって変わります（テーマで設定されてない、または利用できないフォントの場合、Windowsは”MS Pゴシック”、Macは”ヒラギノ角ゴ ProN”になります）
したがってデフォルトでインストールされているテーマのフォントを既定フォントとし、確認してまとめていきます。
ちなみにテーマはFileMaker（ファイルメーカー）がインストールされているドライブのProgram Files\FileMaker\FileMaker Pro\Themesフォルダに入っており、各テーマのja（日本語）.cssファイルからフォントの確認ができます。
フォントフォールバックの確認
フォントフォールバックを調査するためにはWebDirectで確認する必要があるため、下図のようなレイアウトを作成し、ホストにアップロードします。
このレイアウトはテーマをアペックスブルー（デフォルトテーマ）で用意し、テキストオブジェクトとして一般的なWindowsのシステムフォント等をフォント毎に指定して作成しております。
またテキストオブジェクトの範囲をわかりやすくするため、テキストオブジェクトの背景色を白色にし、ボディの背景色を濃い灰色にしております。
これらをWebDirectからデベロッパツールを利用することで、テキストオブジェクトに対し、フォントがどのように割り当てられているかを調査します。
調査結果
各テーマの既定フォント
| テーマ | フォント |
| エンライトンド エンライトンド印刷 ルミナス ソフィスティケーティッド バイブラント クール ウォーム | MS Pゴシック |
| アペックスブルー トランキル エンライトンドタッチ ルミナスタッチ ソフィスティケーティッドタッチ トランキルタッチ バイブラントタッチ ユニバーサルタッチ | ヒラギノ角ゴ ProN W3 |
| ミニマリスト ミニマリストタッチ | 無し（MS Pゴシック/ヒラギノ角ゴ ProN） |
各フォントのフォールバック
| 設定したフォント | font-family | 実際のフォント |
| デフォルトフォント（無操作）※FileMaker上ではMS Pゴシックとなっている | “ヒラギノ角ゴ ProN W3”, “HiraKakuProN-W3”, Arial（テーマのfont-family） | Arial（欧文）,Noto Sans JP（和文） |
| MS ゴシック | “MS-Gothic”, “MS Gothic”, Arial | MS ゴシック |
| MS Pゴシック | “HelveticaNeue”, Arial | Arial（欧文）,Noto Sans JP（和文） |
| MS 明朝 | “MS-Mincho”, “MS Mincho”, Arial | MS 明朝 |
| MS P明朝 | “MS-PMincho”, “MS PMincho”, Arial | MS P明朝 |
| メイリオ | “Meiryo”, Arial | メイリオ |
| Meiryo UI | “MeiryoUI”, “Meiryo UI”, Arial; | Meiryo UI |
| 游ゴシック | “YuGothic-Regular”,”Yu Gothic”,Arial | 游ゴシック |
| 游明朝 | “YuMincho-Regular”, “Yu Mincho”, Arial | 游明朝 |
| Yu Gothic UI | “YuGothicUI-Regular”, “Yu Gothic UI”, Arial | Yu Gothic UI |
| Arial | “ArialMT”, “Arial”, Arial | Arial（欧文）,Noto Sans JP（和文） |
まとめ
【既定フォントについて】
プリインストールされているテーマでは”MS Pゴシック”か”ヒラギノ角ゴ ProN W3″の2つのフォントしかありませんでした。
“MS Pゴシック”はWindows、”ヒラギノ角ゴ ProN W3″はMacで利用しているため、OSをまたいで開発を行うと、自動的に代替フォントが設定されてしまう可能性があるため、注意が必要です。
【フォントフォールバックについて】
まずフォント表示の全体的な流れは、以下のようになっております。
テキスト内のフォント設定 > オブジェクトのフォント設定 > テーマ（スタイル）のフォント設定 > WebDirectの固定値（Arial） > ブラウザのシステムフォント（Noto Sans JP）
このように左からフォントを設定し、フォントデータが存在している順に割り当てられます。
１．テキスト内、オブジェクトのフォント設定
この2つは設定されておりませんが、FileMaker上では”MS Pゴシック”と表示されます。
２．テーマ（スタイル）のフォント設定
最初に適用されるフォントですが、Windowsでは”ヒラギノ角ゴ ProN W3″はプリインストールされてないため利用できません。
３．WebDirectの固定値（Arial）
“Arail”は欧文フォントのため日本語文字が利用できず、英数字のみに適用されます。
４．ブラウザのシステムフォント（Noto Sans JP）
最終的にはGoogle Chromeのシステムフォントである”Noto Sans JP”が日本語文字に適用されます。
したがってWindowsでアペックスブルーテーマを使用し、フォント設定を行わずにWebDirectで表示すると、”Arial”と”Noto Sans JP”のフォントとなります。
ここで1点気を付けたいのが、オブジェクトに”MS Pゴシック”を設定した場合です。
他のフォントは問題なく表示されていましたが、”MS Pゴシック”だけはなぜか”HelveticaNeue”になっていました。
“HelveticaNeue”も”Arial”と同様に欧文フォントのため、インストールされていても日本語文字は”Noto Sans JP”となります。
テーマで設定されている”MS Pゴシック”は問題なく反映されていたのですが、この辺はバグなのかもしれません。
WebDirectは最終的にブラウザのシステムフォントに行きつく仕組みとなっているため、FileMakerで指定したフォントが必ずしもユーザーに対し、表示されるものではないということがよくわかりました。
Webからフォントデータを取得するWebフォントがWebDirectで利用できるようになれば大分使いやすくなると思いますが、そちらは今後のFileMakerの発展に期待したいと思います。
以上が【BFL vol.7】FileMakerの既定フォントとフォールバックを調べてみたの検証となります。
ここまで読んでくださって誠にありがとうございました。また次回のBFLもお楽しみに！
また、株式会社ブリエでは、FileMakerを活用したシステム開発や運用支援を行っています。
FileMaker Pro,Go,WebDirect開発のご相談もお気軽にお問い合わせください。
株式会社ブリエFileMakerエンジニア。ローコード開発を筆頭にプロコードからフロントエンドまで、多種多様な開発経験を活かしたフットワークの軽さが自慢のオールラウンダー。より便利に、より使いやすいUI/UXデザインをモットーに、新しい分野にも積極的に挑戦することで、あらゆるニーズに柔軟に対応できるよう、日々勉強を続けております。
