■ JavaScriptでフォント名一覧を取得する3つの方法
先月・今月と新しいメンバーが加わったサイボウズ・ラボですが、いま社内でfont-familyが密かなブームです。 ということで、ブラウザで使用できるフォント名一覧をJavaScriptで取得する方法について調べてみました。
■ 1. IE の Dialog Helper Object を利用してフォント名一覧を取得する
IE の Dialog Helper Object を利用して フォント名の一覧を取得する方法がよく知られています。
まず、HTMLの中に以下のOBJECTタグを定義して、
<OBJECT id="dlgHelper" CLASSID="clsid:3050f819-98b5-11cf-bb82-00aa00bdce0b" width="0px" height="0px"> </OBJECT>
JavaScriptから以下のコードを実行すると、現在の環境で利用できるフォント名の一覧を取得することができます。
function getAllFontsByDialogHelper() {
var fontslist = '';
try {
for (var i = 1; i < dlgHelper.fonts.count; i++) {
fontslist += dlgHelper.fonts(i) + '\n';
}
}
catch(e) {
fontslist = 'sorry, could not get fonts list.';
}
return fontslist;
}
非常にシンプルですが、動作するブラウザが Internet Explorer に激しく限定されてしまうのが難点です。
▼サンプル実行
参考リンク
動作デモ
- Examples of Dialog Helper Object (Internet Explorer) - M.Kamadaさん
- フォントブラウザ(激しくIE限定) - ma.laさん
■ 2. Flash の TextField.getFontList() を JavaScript から呼び出す
Flash には TextField.getFontList() というそのものズバリなメソッドがありますので、 TextField.getFontList() を実行する SWFファイルを作って、 フォント名一覧を取得する方法を考えてみます。
この方法は IE に限らず Flash Player のインストールされているブラウザで動作することが期待できますので、幅広いプラットフォームで実行可能な方法です。
奥さん情報によると、 これは英語圏では既に試されている方がいらっしゃるようでした。
▼汎用的なサンプル（3/14 16:00追記）
参考リンク
動作デモ
■ 3. LiveConnect を使って Javaアプレットの getAllFonts() を呼び出す
IE も使ってないし、Flash Player もインストールされていないブラウザで、フォント名一覧を取得したい場合はどうすればいいの？ ということで、LiveConnect を使う方法を実験してみました。
試してみたJavaScriptのコードは以下の通りです。
function getAllFontsByLiveConnect() {
var fontslist = '';
try {
var fonts = java.awt.GraphicsEnvironment.getLocalGraphicsEnvironment().getAllFonts();
for (var i = 0; i < fonts.length; i++) {
fontslist += fonts[i].getFontName() + '\n';
}
}
catch(e) {
fontslist = 'sorry, could not get fonts list.';
}
return fontslist;
}
LiveConnect は Javaアプレットの動作が有効になっている Netscape3以降, Firefox, Opera のブラウザで動作します。
Javaアプレットには、インスタンスを生成できない abstract メソッドとして java.awt.GraphicsEnvironment.getLocalGraphicsEnvironment().getAllFonts() がありますので、 これを呼び出すとjava.awt.Fontオブジェクトが配列で返ります。 これらのオブジェクトに対して Font.getFontName() を呼べばフォント名を取得できます。
▼サンプル実行
※Javaアプレットが1回起動するので、若干重たいです。
意外と知られていない LiveConnect ですが、 最初は Netspcape Navigator 3.0 の JavaScript 1.1 の頃からデフォルトで使えるようになっている機能で、 JavaScriptからJavaアプレットのオブジェクトを操作できるので(その逆も)、 使い方によっては面白いこともできそうです。 私もつい最近金床さんにLiveConnectの最新の活用事例を教えてもらいました。なんとjava.net.Socketクラスも利用できるそうです。これは便利！？