名前の文字化けは許さない。Cocoonの神機能を全テーマへ解放する『Hybrid Font Edition』開発記

「自分の名前が、画像の中で消えている……。」

WordPressの人気テーマ「Cocoon」に搭載されている、あの便利なアイキャッチ自動生成機能。 多くのブロガーに愛されるこの機能を、SWELLやArkheといった他テーマでも自由に使いたい。 そんな純粋な「遊び心」から、私の開発は始まりました。

しかし、そこで直面したのは、デザイン重視のフォントが生む「文字欠け」という冷酷な現実でした。 「爲」や「國」といった旧字体や難読漢字が含まれるお名前の方は、自分のアイデンティティが「□」や空白に置き換わる絶望を味わったことがあるはずです。

「名前の文字化けは、絶対に許さない。」

この強い想いを胸に、私はCocoonのロジックをベースにしつつ、現代のWeb環境に合わせてゼロから再構築・拡張し『Universal OGP Generator – Hybrid Font Edition』を書き上げました。

タイトルにはデザインを、著者名には正確性を。 二つの異なるフォントを同時に操る「ハイブリッド・フォント・エンジン」を搭載し、さらにWebP最適化や高精度アバター描画まで盛り込んだ、こだわりの開発秘話をここに綴ります。

「この記事のアイキャッチもこのプラグインで作っています。」

目次

開発の動機:Cocoonの「あの便利さ」を、すべてのテーマへ

きっかけは「他テーマでもあのアイキャッチが欲しい!」という、わいひら氏への多大なるリスペクトからでした。しかし、既存のプラグインでは自分の理想に届かない。「無いなら作る」というバイブコーディングの精神で、移植・拡張プロジェクトが動き出しました。

直面した「アイデンティティ」の危機:文字欠けの絶望

収録文字数(グリフ)によっては旧字体が出力できなくなってしまう

開発中、最大の壁となったのが「フォントの限界」です。おしゃれなデザインフォントを使えば使うほど、私の名前「爲國(ためくに)」の漢字が消えてしまうのです。

収録文字数(グリフ)」特に手書き風やデザインフォントは、JIS第1水準漢字までしか対応していないことが多く、難しい漢字や旧字体が抜けてしまうことがよくあります。

名前は自分自身の象徴。ここを妥協することは、開発者として、一人の人間としてできませんでした。

解決策:世界初(?)の「ハイブリッド・フォント・エンジン」

そこで編み出したのが、「ハイブリッド・フォント・エンジン」です。

  • タイトル: デザイン重視の外部フォントを適用。
  • 著者名: JIS第4水準まで網羅した「Noto Sans JP」を強制適用。

この二系統の描画ロジックを一つの画像内で共存させることで、デザインの美しさと、名前の正確性を100%両立させることに成功しました。

2026年仕様へのアップデート:妥協なき機能拡張

単なる移植では終わりません。今のWeb環境に最適な機能を盛り込みました。

  • 最新のWebP最適化: 生成画像を自動でWebPへ変換・圧縮。SEOとサーバー容量に貢献します。
  • 高精度円形アバター: 1px単位のアンチエイリアス処理を施した、滑らかなアイコン描画。
  • リフレッシュ・セーフティ: Cocoonテーマを検知すると自動停止し、機能の競合を防ぐ優しさ設計です。

結び:GitHubで公開中。あなたの名前を、誇らしく。

本プラグインはGitHubにて、オープンソース(GPL-2.0)で公開しています。 名前にこだわりを持つすべての人へ。あなたのアイデンティティを、もう「□」で終わらせないでください。

▼ 公式ページ(github.io)

https://marisachi426.github.io/universal-ogp-generator/

▼ GitHubリポジトリ

https://github.com/marisachi426/universal-ogp-generator

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

アドテクとWeb制作に没頭する、4st Fi ビーノ乗りのメディア運営者。
「AdXがあるならAdSenseは不要」という潔いビルド構成で、MFA(低品質広告サイト)化を防ぎつつ、高単価な収益構造を構築中。2,000メセタの仇は、このサイトの成長で取り返します。

コメント

コメントする

目次