導入
Webサイトのデザインで、こだわりのフォントを使いたいと思った時、「Webフォント」は今や欠かせない技術ですよね。しかし、Webフォントを実際に導入しようとすると、
OTFやTTF形式のフォントをWOFF2やWOFFといった複数形式に変換するのが面倒…- 変換用のWebサービスに、ライセンス的にアップロードして良いか不安…
- 毎回同じ作業の繰り返しで、もっと「時間効率」を上げたい…
と感じたことはありませんか？
この記事では、Web制作のディレクター経験もある私自身のメモを元に、これらの悩みを一気に解決する「フォントをアップロードするだけで、必要なWebフォント一式を自動で生成してくれる」社内ツールの開発事例をご紹介します。
なぜ「自動変換ツール」が必要なのか？
Webフォントは、ブラウザの種類（Chrome, Firefox, Safariなど）やバージョンの違いを吸収するために、複数の形式を用意するのが一般的です。
- WOFF2: 現在の主要ブラウザで最も推奨される形式。圧縮率が高い。
- WOFF: WOFF2に非対応の、少し古いブラウザ向け。
- EOT / SVG: Internet Explorerなど、さらに古いブラウザへの対応が必要な場合に。
デザイナーさんから受け取ったOTFやTTF形式のフォントを、これらの形式に一つずつ変換し、サーバーにアップロードするのは単純ですが、非常に手間のかかる作業です。
この「誰でもできるけど面倒な作業」こそ、プログラムで自動化する価値があります。
システムの心臓部：サーバーサイドでのフォント変換
このツールの中心となるのが、Linuxサーバー上でコマンドとして実行できるフォント変換ツールです。これらをPHPから呼び出すことで、自動化を実現します。
使用する主なツール:
- FontForge: オープンソースの万能フォント編集ツール。
OTF→TTF変換など、多くの処理を担います。 - 各種コンバーター:
ttf2woffなど、特定の形式に変換するための専用ツール群。
これらのツールをサーバーにインストールしておき、PHPのexec()という関数を使って、「このファイル（TTF）を、この形式（WOFF）に変換して」と命令を送るイメージです。
PHPコードの処理フロー
実際のPHPコード（フレームワークにはCakePHPを使用）は、以下の流れで処理を進めます。
- フォントファイルのアップロード:ユーザーがブラウザからOTFまたはTTFファイルをアップロードします。
- ファイル形式の統一:もしOTFファイルがアップロードされたら、FontForgeを使って、まずは基本となるTTF形式に変換します。
- Webフォントへの一括変換:TTFファイルを元に、WOFF2, WOFF, EOT, SVGといった全ての形式のファイルをコマンドで一気に生成します。PHP
// TTFからWOFF2への変換コマンドを実行する例 exec('woff2_compress ' . $ttf_file_path); - ZIP圧縮とダウンロード:生成された全てのWebフォントファイルを一つのZIPファイルにまとめ、ユーザーがダウンロードできるようにします。一時ファイルはサーバーから自動で削除します。
このツールの価値と応用
このツールを一度作っておけば、Webサイト制作におけるフォント周りの作業が劇的に効率化されます。
- 時間効率の向上: 手作業での変換やアップロードの手間がなくなり、デザイナーもエンジニアも本来の作業に集中できます。
- 品質の安定化: 人の手作業による変換ミスや、ファイル形式の漏れがなくなります。
- セキュリティ: ライセンス的に外部のWebサービスにアップロードできないフォントも、セキュアな社内環境で扱えます。
まさに、エンジニアの知識を活かして「人の役に立つ」、そして「機能的でコストパフォーマンスの高い」ツールと言えるでしょう。
まとめ
今回は、PHPとLinuxコマンドを組み合わせて、面倒なWebフォント作成作業を自動化するツールの開発事例をご紹介しました。
Web制作の現場には、このように「技術で解決できる単純作業」がまだまだたくさん眠っています。
この記事が、あなたの業務を効率化するための「ヒント」になれば幸いです。ぜひ、身の回りの非効率を自動化する楽しさを体験してみてください。
コメント