概要
「Electroharmonix」という、日本人に読めないことで有名なフォントがあります。
今回はこちらのフォントの解読スキルを習得すべく、Chrome拡張機能を作成しました。この拡張機能を使用すると、すべてのウェブサイトがElectroharmonixフォントで表示され、スパルタ的に読み方を練習できます。さらに、ワンクリックでカスタムフォント表示と通常表示を切り替え可能です。なお、Electroharmonixは英数字しか対応していないため日本語には雰囲気が似ている「バナナスリップ plus」フォントを使用しました。
画像出典: 日本人にだけ読めないフォント「Electroharmonix」｜いいフォント
実装内容
ファイル構成
├── fonts
│ ├── electroharmonix.ttf
│ ├── YDWbananaslipplus.otf
├── manifest.json
├── popup.html
├── popup.js
├── background.js
├── content-script.js
└── styles.css
fonts
- electroharmonix.ttf: 英数字用のカスタムフォント。
- YDWbananaslipplus.otf: 日本語用のカスタムフォント。
- 説明: 必要なフォントファイルを格納するディレクトリです。
manifest.json
{
"manifest_version": 3,
"name": "読みにくいフォント",
"version": "1.0.0",
"permissions": ["storage", "scripting"],
"host_permissions": ["<all_urls>"],
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["content-script.js"],
"css": ["styles.css"]
}
],
"action": {
"default_popup": "popup.html"
},
"background": {
"service_worker": "background.js"
},
"web_accessible_resources": [
{
"resources": ["fonts/electroharmonix.ttf", "fonts/YDWbananaslipplus.otf"],
"matches": ["<all_urls>"]
}
]
}
- 説明: 拡張機能の設定ファイル。必要な権限やスクリプト、スタイルシートの指定を行います。
popup.html
html
<!DOCTYPE html>
<html lang="jp">
<head>
<meta charset="UTF-8">
<title>フォント切り替え</title>
</head>
<body style="width: max-content;">
<label>
<input type="checkbox" id="enableCustomFont">
カスタムフォントを使用
</label>
<script src="popup.js"></script>
</body>
</html>
- 説明: ユーザーインターフェイス用のHTML。フォントの有効化・無効化を切り替えるチェックボックスを提供します。
popup.js
const enableCustomFontEl = document.getElementById("enableCustomFont");
// 初期状態を取得
chrome.storage.sync.get(["fontEnabled"], (result) => {
enableCustomFontEl.checked = !!result.fontEnabled;
});
// スイッチの変更を監視
enableCustomFontEl.addEventListener("change", () => {
const isEnabled = enableCustomFontEl.checked;
chrome.storage.sync.set({ fontEnabled: isEnabled });
// すべてのタブにメッセージを送信
chrome.tabs.query({ url: "<all_urls>" }, (tabs) => {
tabs.forEach((tab) => {
chrome.tabs.sendMessage(tab.id, {
action: isEnabled ? "enableFont" : "disableFont",
});
});
});
});
- 説明: ユーザーのフォント設定状態を保存し、現在開いているタブに反映します。
background.js
chrome.runtime.onInstalled.addListener(() => {
chrome.storage.sync.set({ fontEnabled: false });
});
- 説明: 拡張機能の初回インストール時に、フォント設定をデフォルトで無効にします。
content-script.js
// フォント適用
function enableCustomFont() {
document.documentElement.classList.add("custom-font-enabled");
}
// フォント解除
function disableCustomFont() {
document.documentElement.classList.remove("custom-font-enabled");
}
// ストレージから設定を取得
chrome.storage.sync.get(["fontEnabled"], (result) => {
if (result.fontEnabled) {
enableCustomFont();
}
});
// 切り替え検知
chrome.runtime.onMessage.addListener((message) => {
if (message.action === "enableFont") {
enableCustomFont();
} else if (message.action === "disableFont") {
disableCustomFont();
}
});
- 説明: ページ上のフォントスタイルを変更するスクリプト。ストレージやメッセージを通じて切り替えを監視します。
styles.css
@font-face {
font-family: 'electroharmonix';
src: url(chrome-extension://__MSG_@@extension_id__/fonts/electroharmonix.ttf);
}
@font-face {
font-family: 'YDWbananaslipplus';
src: url(chrome-extension://__MSG_@@extension_id__/fonts/YDWbananaslipplus.otf);
}
.custom-font-enabled * {
font-family: 'electroharmonix', 'YDWbananaslipplus', sans-serif !important;
}
- 説明: カスタムフォントをページ全体に適用するスタイルシート。
実際に適用してみた
拡張機能の設定画面
フォント適用後のウェブページ
Electroharmonixで検索してみました。
まあ読みにくいですね（笑）URLのhttpsが、カナナア5にしか見えません。しかし、この読みにくさこそがフォント習得への近道です！
まとめ
興味がある方は、この拡張機能を利用して、ぜひElectroharmonixの解読にチャレンジしてみてください。また、PCにダウンロードしているお気に入りのフォントがあれば、それを使用してカスタマイズするのも面白いかと思います。ある日突然解読クイズを挑まれてもいいように、たくさん練習しましょう！
最後まで読んでいただきありがとうございます！