ご利用方法

JavaScript API

スマートライセンス・プランご利用のお客様へ、Webフォントをもっと有効に活用していただくため、APIを公開いたします。

概要・目的

ご提供していたスマートライセンスはWebページ表示直後の表示している文字に対してWebフォントを適用しており、非同期で表示させた文字に関してはWebフォントを適用することができませんでした。

そこで、お客様にWebフォントの活用範囲を広げる為に、以下のようなことが実現できるAPIを公開します。

  • 好きなタイミング(非同期)でWebフォントを適用できる。
  • HTMLの解析を行わず、Webフォントの適用する箇所を直接指定することでスピードアップする。
  • フォントデータがダウンロードされたことを判定してから画面にテキストを表示する。

是非、ご活用ください。

JavaScript APIを応用したサンプル

スマートライセンスにてチラつき無し対応Demo

コンプリートイベントが発行されるまで待って文字を表示することによって切り替わりを見せないようにしています。

使用API:コンプリートイベント付加、フォント指定

FONTPLUS.attachCompleteEvent(callback);
FONTPLUS.setFonts([fontfamily, ...])

入力した文字列でフォント一覧作成Demo

テキストフォームに好きな文字列を入力し送信をクリックしてください。
入力した文字列にてリロードを行わずにフォント一覧を生成しています。

※フォントは固定にしています。
※テキストは30文字までとしています。

使用API:非同期ロード

FONTPLUS.load([fontdata, ...], callback, tagid)

これで効率アップ※ポップ広告例Demo

Webページのポップなどは金額、割引など変更するたびに画像で作成していましたが、Webフォントを使えば何度も画像を作成する必要はありません。

※データベースを想定して上部のテキストボックスより文字列を変更することができます。

コンプリートイベント付加、フォント指定

FONTPLUS.attachCompleteEvent(callback);
FONTPLUS.setFonts([fontfamily, ...])

スマートフォンの場合はコチラhttp://support.fontplus.jp/fontplus_ex/ よりアクセスください。

スマートフォンこそWebフォントDemo

スマートフォンの場合、端末ごとにフォントが異なり、意図するイメージを伝えることができませんでした。

Webフォントを使用することでスマートフォンでも同じフォントを表示することができ、意図するイメージを伝えることができます。

※テキストボックスに入力した文字を複数のWebフォントで表示を行います。

コンプリートイベント付加、フォント指定

FONTPLUS.attachCompleteEvent(callback);
FONTPLUS.setFonts([fontfamily, ...])

JavaScript API一覧

機能ごとに簡単ではございますが、サンプルページを用意しています。

※詳しくはサンプルページよりソースをご覧ください。

リロードDemo/リロード (true)Demo

Webフォントを適用した箇所を再度適用します。
※例:更新ボタンでWebフォントを再度適用します。

FONTPLUS.reload(init)

機能文字抽出、サブセット作成の再実行
引数init
備考

引数に入れる値について

  • true 初期化
  • false 非初期化(default)

コンプリートイベントハンドラーDemo

Webフォントの適用が完了したイベントを取得して、JavaScript等で引き続き処理を記述できます。

FONTPLUS.attachCompleteEvent(callback)

機能コンプリートイベント時に呼出すコールバック関数を登録する
引数callback コールバック関数
備考
  • callback(res)
  • res.code
    • 0 正常
    • 1以上 ロード不可フォント数

セレクタ指定Demo

Webフォントの適用をセレクタ単位で指定することができます。

※例:twitterのテキスト内のみ

FONTPLUS.targetSelector(selector)

機能文字を抽出するセレクタの指定。
引数selector セレクタ
備考

検索順

tagid > tagname > jQuery(load時) > querySelectorAll > original

非同期モード設定Demo

FONTPLUS.async()

機能スクリプト実行をロード時に行わない
備考start()で再開する

非同期モード解除Demo

FONTPLUS.start()

機能文字抽出、サブセット作成の実行
備考reload(true)と同等

非同期ロード(指定ロード)Demo

FONTPLUS.load([fontdata, ...], callback, tagid)

機能指定の文字列を指定のフォントでサブセット作成
引数
  • fontdata {'fontname':フォントファミリ名, 'nickname':別名, 'text':文字列}
  • callback コールバック関数
  • tagid @font-faceが記述されたstyleタグID. 未指定時は0番目の別名
備考IEはstyleタグ最大32個(?)の制限あり

FONTPLUS処理中チェックDemo

FONTPLUS.isloading()

機能FONTPLUS処理中チェック
引数なし
戻値true/false
備考

フォント指定Demo

FONTPLUS.setFonts([fontfamily, ...])

機能使用するフォントを指定する
引数fontfamilyフォントファミリ名
備考

フォントを指定することで処理時間の短縮が可能

更にスクリプト指定時にnolist=1を追加するとスクリプトサイズの縮小化

http://webfont.fontplus.jp/accessor/script/fontplus.js?jV3JLd2EFRU%3D&nolist=1

API使用時のPV消化について

APIを使用していない場合

PV(Page View):ページへのアクセス数です。再読み込みでもPV数は消費します。
複数のフォントを使っていても1回のページ表示で1PVを消費します。

APIを使用している場合

フォントデータを配信した時点でカウントを行います。
非同期にてフォントデータを取得しても1PVを消費します。

注意事項

一定時間ごとにAPIを実行してフォントデータをダウンロードするWebページを公開すると、閲覧者がそのWebページを表示している間PVが消費され続けます。複数人がそのWebページを開いていると、その人数の倍数でPV数が大量に消費されて、ご契約いただいているPV数が短時間で消費され、気づかないうちになくなってしまう恐れがあります。

例えば、TwitterのタイムラインをWebページ表示するWebアプリで利用することを想定します。
3秒ごとにタイムラインを更新するタイミングでフォントプラスのAPIをコールし、Webフォントを取得する処理を行います。
すると、一人がそのWebページにアクセスし、1時間開いたままですと3,600秒÷3秒=1,200PV消費されます。
このWebページを1000人が1時間開いたままになると1200PV×1000人=1,200,000PVとなり、スマートライセンスの120万PVライセンスが1時間で消費されることになります。
このような利用では予め多くのスマートライセンスをご購入いただくか、エンタープライズをご検討ください。