TypeSquare JavaScript API v2 リファレンス

※本APIの利用規約はTypeSquareの利用規約に準じます。

1. URLタグオプション

概要

URLタグオプションは配信利用タグのtypesquare.js にパラメータを追加することで、ロード時の動作を変更できるオプションです。

フェードイン

機能

Webフォントが適用される前に、サイト内のテキストがブラウザのデフォルトフォントで表示されていると、適用時に画面がちらついて見えてしまうことがあります。このちらつきを抑えるためのフェードイン機能がご利用いただけます。

サンプル

※サンプルコードに利用しているプラン専用タグの配信ID (typesquare.jsの引数)は、お客様の配信ID (typesquare.jsの引数)で置き換えてください。

フェードインなし: 引数指定なし

<script type="text/javascript" src="//typesquare.com/accessor/script/typesquare.js?q76O1i4KMzo%3D" charset="utf-8"></script>

フェードインあり: 利用タグ：引数に「fadein=10」（1000ミリ秒でフェードイン）を指定

<script type="text/javascript" src="//typesquare.com/accessor/script/typesquare.js?q76O1i4KMzo%3D&fadein=10" charset="utf-8"></script>

ロード時動作指定

機能

画面ロード時ではなく任意のタイミングでフォントをロードする場合、このオプションを利用して初期のフォントロードを止めて下さい。 非同期に動作するアプリケーションなどで、初期ページロード時にフォントを読み込む必要がない場合などにご利用いただくと便利です。

※ リロード機能を利用することで、任意のタイミングでフォントの配信をおこなうことができます。

※ 本機能を利用するには、プラン専用タグの「/accessor/script」を「/accessor/apiscript」に変更して下さい。

サンプル

※サンプルコードに利用しているプラン専用タグの配信ID (typesquare.jsの引数)は、お客様の配信ID (typesquare.jsの引数)で置き換えてください。

<!DOCTYPE html>
  <html>
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <script type="text/javascript" src="//typesquare.com/accessor/apiscript/typesquare.js?0Jyi6TwLGMA%3D&loadstart=0" charset="utf-8"></script>
  <style type="text/css" rel="stylesheet">
  #nonload_text {
      font-family: 'Kaimin Tsuki Bold';
  }
  </style>
  </head>
  <body>
      <span id="nonload_text">最初はフォントがロードされません。</span>
      <button type="button" onclick="Ts.reload();">フォントをロード</button>
  </body>
  </html>

2. TypeSquare JavaScript API

概要

TypeSquare JavaScript APIはフォント配信の拡張機能です。Webフォントの適用が完了したイベントを取得して、JavaScript等で引き続き処理を記述できます。任意のタイミングでWebフォントを取得したり、Webフォントの適用をセレクタ単位で指定することが可能です。
拡張機能を利用するには、プラン専用タグの「/accessor/script」を「/accessor/apiscript」に変更して下さい。

ダウンロードコールバック

メソッド
Ts.onComplete(callback)
機能
Webフォントの適用が完了したイベントを取得して、JavaScript等で引き続き処理を記述できます。コンプリートイベント時に呼び出すコールバック関数を登録します。
引数
callback (必須) : コールバック関数
戻り値(XML)
res_result : 処理結果ステータス(OK／NG)
api_key : APIキー
備考
callback(res)
    res.code : 0:正常, -1:ロードエラー, 1:変換対象なし
    res.font[n].name : フォント名
    res.font[n].status : ステータス: true/false

サンプル

※サンプルコードの引数部分は、お客様のプラン専用タグで置き換えてください。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="//typesquare.com/accessor/apiscript/typesquare.js?0Jyi6TwLGMA%3D" charset="utf-8"></script>
<style type="text/css" rel="stylesheet">
body {
    font-family: 'Maru Folk Heavy';
}
#callback {
    color: blue;
    visibility: hidden;
}
</style>
<script type="text/javascript">
callback = function(res) {
    var css = document.getElementById('callback');

    if (res.type == 'css') {
        css.textContent = res.data;
    }
    if (res.code == 0) {
        css.style.visibility = 'visible';
    }
}
Ts.onComplete(callback);
</script>
</head>
<body>
    <p>コールバックなし</p>
    <p id="callback">コールバックあり</p>
</body>
</html>

Webフォントのダウンロードが完了したらコールバックします。リロードして下さい。

ダウンロードコールバック(適用前)

メソッド
Ts.onPreComplete(callback)
機能
1書体毎にWebフォント取得前の通知のイベントを取得して、JavaScript等で引き続き処理を記述できます。コンプリートイベント時に呼び出すコールバック関数を登録します。
引数
callback (必須) : コールバック関数
戻り値(XML)
res_result : 処理結果ステータス(OK／NG)
api_key : APIキー
備考
callback(res)
    res.code : 0:正常, -1:ロードエラー, 1:変換対象なし
    res.font[0].name : フォント名
    res.font[0].status : ステータス: true/false

サンプル

※サンプルコードの引数部分は、お客様のプラン専用タグで置き換えてください。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="//typesquare.com/accessor/apiscript/typesquare.js?0Jyi6TwLGMA%3D" charset="utf-8"></script>
<style type="text/css" rel="stylesheet">
body {
  font-family: 'Maru Folk Heavy';
}
#callback {
  color: blue;
  visibility: hidden;
}
</style>
<script type="text/javascript">
callback = function(res) {
  var css = document.getElementById('callback');

  if (res.type == 'css') {
    css.textContent = res.data;
  }
  if (res.code == 0) {
    alert('フォントの適用前です');
    css.style.visibility = 'visible';
  }
}
Ts.onPreComplete(callback);
Ts.setLoadStart(0);
</script>
</head>
<body>
  <p>コールバックなし</p>
  <p id="callback">コールバックあり(適用前)</p>
  <button onclick="Ts.reload();">フォントをロード</button>
</body>
</html>

Webフォントのダウンロードが完了したら適用前にコールバックします。サンプルをリロードしてお試し下さい。

ダウンロードコールバック(適用後)

メソッド
Ts.onPostComplete(callback)
機能
1書体毎にWebフォント適用後の通知のイベントを取得して、JavaScript等で引き続き処理を記述できます。コンプリートイベント時に呼び出すコールバック関数を登録します。
引数
callback (必須) : コールバック関数
戻り値(XML)
res_result : 処理結果ステータス(OK／NG)
api_key : APIキー
備考
callback(res)
    res.code : 0:正常, -1:ロードエラー, 1:変換対象なし
    res.font[0].name : フォント名
    res.font[0].status : ステータス: true/false

サンプル

※サンプルコードの引数部分は、お客様のプラン専用タグで置き換えてください。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="//typesquare.com/accessor/apiscript/typesquare.js?0Jyi6TwLGMA%3D" charset="utf-8"></script>
<style type="text/css" rel="stylesheet">
body {
  font-family: 'Maru Folk Heavy';
}
#callback {
  color: blue;
  visibility: hidden;
}
</style>
<script type="text/javascript">
callback = function(res) {
  var css = document.getElementById('callback');

  if (res.type == 'css') {
    css.textContent = res.data;
  }
  if (res.code == 0) {
    css.style.visibility = 'visible';
alert('フォントの適用後です');
  }
}
Ts.onPostComplete(callback);
Ts.setLoadStart(0);
</script>
</head>
<body>
  <p>コールバックなし</p>
  <p id="callback">コールバックあり(適用後)</p>
  <button onclick="Ts.reload();">フォントをロード</button>
</body>
</html>

Webフォントのダウンロードが完了したら適用後にコールバックします。サンプルをリロードしてお試し下さい。

ダイナミックリクエストCSS

メソッド
Ts.dynamicCss(callback, text, font, name, key, hint)
機能
指定した文字列に対するWebフォントをCSSで返します。
引数
callback (必須) : コールバック関数
text (必須) : 指定文字列
font (必須) : フォント名
name (必須) : 任意の書体名
key (必須) : 識別キー
hint (必須) : ヒント有無の設定 (0:設定なし、1:ヒント付与、2:ヒント強制除去)
備考
callback(res)
    res.code : 0:正常, -1:ロードエラー, 1:変換対象なし
    res.type : 'css'
    res.font : フォント名
    res.name : 任意の書体名
    res.text : 指定文字列
    res.key : 識別キー
    res.data : CSSデータ
CSSデータ :
    @font-face {
        font-family: '任意の書体名';
        src: url(data:font/woff;base64,d09GRgA...);
        }

サンプル

※サンプルコードの引数部分は、お客様のプラン専用タグで置き換えてください。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="//typesquare.com/accessor/apiscript/typesquare.js?0Jyi6TwLGMA%3D" charset="utf-8"></script>
<style type="text/css" rel="stylesheet" id="dynamic_css"></style>
<script type="text/javascript">
callback = function(res) {
    var css = document.getElementById('dynamic_css');

    if (res.type == 'css') {
        css.textContent = res.data;
    }
}
dynamicRequest = function() {
    var el = document.getElementById('dynamic_text');

    el.style.fontFamily = 'dynamic_font';
    Ts.dynamicCss(callback, el.value, 'Folk Heavy', 'dynamic_font', '', '');
}
</script>
</head>
<body>
    <input id="dynamic_text" type="text" style="width: 100px;">
    <button type="button" onclick="dynamicRequest();">適用</button>
</body>
</html>

何か文字列を入力して「適用」をクリックしてください。

ダイナミックリクエストJSON

メソッド
Ts.dynamicJson(callback, text, font, name, key, hint)
機能
指定した文字列に対するWebフォントをJSON形式で返します。
引数
callback (必須) : コールバック関数
text (必須) : 指定文字列
font (必須) : フォント名
name (必須) : 任意の書体名
key (必須) : 識別キー
hint (必須) : ヒント有無の設定(デフォルト:0、強制付与:1、強制除去:2)
備考
callback(res)
    res.code : 0:正常, -1:ロードエラー, 1:変換対象なし
    res.type : 'json'
    res.font : フォント名
    res.name : 任意の書体名＋ランダム文字列
    res.text : 指定文字列
    res.key : 識別キー
    res.data : JSONデータ
JSONデータ :
    {
        "fontFamily":"任意の書体名＋ランダム文字列",
        "format":"woff",
        "src":"d09GRgABAAAAAC4kABEAAAAAQ..."
        }

サンプル

※サンプルコードの引数部分は、お客様のプラン専用タグで置き換えてください。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="//typesquare.com/accessor/apiscript/typesquare.js?0Jyi6TwLGMA%3D" charset="utf-8"></script>
<script type="text/javascript">
callback = function(res) {
    if (res.type == 'json') {
        var json = document.createElement('div');
        json.textContent = res.data;
        document.body.appendChild(json);
    }
}
dynamicRequest = function() {
    var el = document.getElementById('dynamic_text');

    el.style.fontFamily = 'dynamic_font';
    Ts.dynamicJson(callback, el.value, 'Folk Heavy', 'dynamic_font', '', '');
}
</script>
</head>
<body>
    <input id="dynamic_text" type="text" style="width: 100px;">
    <button type="button" onclick="dynamicRequest();">適用</button>
</body>
</html>

何か文字列を入力して「適用」をクリックしてください。

フォント適用範囲指定

メソッド
Ts.setSelector(selector)
機能
文字を抽出するセレクタを指定します。
引数
selector (必須) : セレクタ
備考
検索優先順位は id > name > jQuery（ロード時） > querySelectorAll > original となります。

サンプル

※サンプルコードの引数部分は、お客様のプラン専用タグで置き換えてください。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="//typesquare.com/accessor/apiscript/typesquare.js?0Jyi6TwLGMA%3D" charset="utf-8"></script>
<script type="text/javascript">
Ts.setSelector('#setselector');
</script>
<style type="text/css" rel="stylesheet">
#nonselector {
    font-family: 'Kaimin Sora Regular';
}
#setselector {
    font-family: 'Kaimin Sora Heavy';
    color: blue;
}
</style>
</head>
<body>
    <p id="nonselector">セレクタ指定なし</p>
    <p id="setselector">セレクタ指定あり</p>
</body>
</html>

ロード時動作指定

メソッド
Ts.setLoadStart(use)
機能
ロード時のフォント配信の有無を切り替えます。
引数
use (必須) : ロード時のフォント配信の有無(配信なし:0、配信あり:1)
備考
なし

サンプル

※サンプルコードの引数部分は、お客様のプラン専用タグで置き換えてください。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="//typesquare.com/accessor/apiscript/typesquare.js?0Jyi6TwLGMA%3D" charset="utf-8"></script>
<script type="text/javascript">
Ts.setLoadStart(0);
</script>
<style type="text/css" rel="stylesheet">
#nonload_text {
    font-family: 'Kaimin Tsuki Bold';
}
</style>
</head>
<body>
    <span id="nonload_text">最初はフォントがロードされません。</span>
    <button type="button" onclick="Ts.reload();">フォントをロード</button>
</body>
</html>

リロード

メソッド
Ts.reload()
機能
フォントの配信を実行する。
引数
なし
備考
プラン専用タグに指定したフェードなどのオプション動作を継承します。

サンプル

※サンプルコードの引数部分は、お客様のプラン専用タグで置き換えてください。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="//typesquare.com/accessor/apiscript/typesquare.js?0Jyi6TwLGMA%3D" charset="utf-8"></script>
<script type="text/javascript">
changeText = function() {
    document.getElementById('reload_text').innerHTML = 'それはシンプルなテキストですか？';
}
</script>
<style type="text/css" rel="stylesheet">
#reload_text {
    font-family: 'Kaimin Tsuki Heavy';
}
</style>
</head>
<body>
    <span id="reload_text">これはサンプルのテキストです。</span>
    <button type="button" onclick="changeText();">テキスト変更</button>
    <button type="button" onclick="Ts.reload();">リロード</button>
</body>
</html>