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 に激しく限定されてしまうのが難点です。

▼サンプル実行

getAllFontsByDialogHelper()

※IE限定

参考リンク

• Dialog Helper Object - Provides access the color dialog box, as well as the block format and fonts collections.

動作デモ

• 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追記）

• Kazuho@Cybozu Labs: JavaScript から Flash の便利な機能を使う方法

参考リンク

• maratz.com >> archive >> Detect visitor’s fonts with Flash

動作デモ

• http://sunouchi.31tools.com/getfont/

---

■ 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() を呼べばフォント名を取得できます。

▼サンプル実行

getAllFontsByLiveConnect()

※IEでは動作しません

※Javaアプレットが1回起動するので、若干重たいです。

意外と知られていない LiveConnect ですが、 最初は Netspcape Navigator 3.0 の JavaScript 1.1 の頃からデフォルトで使えるようになっている機能で、 JavaScriptからJavaアプレットのオブジェクトを操作できるので(その逆も)、 使い方によっては面白いこともできそうです。 私もつい最近金床さんにLiveConnectの最新の活用事例を教えてもらいました。なんとjava.net.Socketクラスも利用できるそうです。これは便利！？

参考リンク

• GraphicsEnvironment (Java 2 プラットフォーム SE v1.4.0)
• How Java to Javascript Communication Works in Java Plug-in
• Client-Side JavaScript Guide - Chapter 15 LiveConnect Overview
• The LiveConnect/Plug-in Developer's Guide (Netscape)

Comments

[投稿： ぱんかれ(pumpCurry)]

3年前の記事にいまごろレスかよ！と思われてしまうかもしれませんが、
時代が下って状況が変化して今の状況はどうなの？っていうのも重要かもとおもってレスします。ただまあ当時とまた環境が異なるのでなんともなんですが、テスト結果をフィードバック。

何故今かというと：
頒布しているＣＤにフォントチェック機能をいれようとして、「webで2の仕組みでfont一覧をとり、コールバックをして物理インストールをチェック」をそのまま移植してみたのですが、それが使えません、助けて！ということで、サイトめぐりしてたんですな...

1はIE7/8で良好な結果(9はまだ試していない)でどのフォントも出てきます。

2は変な話なんですがwebにアップされていればローカルのフォントが列挙可能です。なのに、ローカル(デスクトップ上)に置いたhtmlからswfを呼びださせても、2010年になった今、セキュリティが厳しすぎてjs連携ができないのでその辺がしょぼーんになります。

3は、ローカルでも動くのはgoodなのですが2つ問題があって、
operaがまもなくサポート打ち切り？らしく、chromeではそもそも動作しない、など、マルチブラウザに難がありました。
また、javaのSDKに依存する問題でtruetypeは認識するのですが、opentyepeフォントがリストに現れず、またjava.awt.Fontオブジェクト等でなんとか指定してもまともなオブジェクトが帰ってこない？みたいです（要追加検証）。

この部分をappletにして、呼ぶ方法が下記に詳しいです：
http://d.hatena.ne.jp/miya2000/20100316/p0

appletだと、IE7～、Fx3.0/3.5系、GC、O、Safariでも動くみたいなんですが、やっぱりtruetypeしか帰ってこない（linux等win以外でも同様）。

フォント名がわかっていれば（もし自分がパブリッシャーなら）
spanの中に、「cssで適当な文字列にfontを指定したもの」をいれて、幅が標準フォントと違っていたならインストールされている可能性がかなり高い
というやり方で対処できるんです。

でもでも、「一覧がほしい！」に対して、マルチブラウザを考えたとき、web上では2が最善かもしれないんですが、クロスプラットフォームとかローカル・webどこでもを考えるとどれもうまくいかないみたいです。

こまったなあｗ

ぱんかれでした