スクリプトタグ解説
パラメータについて
スクリプトの動作はパラメータによって決定されます。パラメータは内部デフォルト値、スクリプトタグのデータ属性、スクリプトタグのsrc属性のクエリパラメータ、それに読み込み先ページURLのクエリパラメータを順に結合して決定されます。もし同じパラメータが二か所に存在する場合、後に結合されるほうが優先されます。
スクリプトタグのdata属性
パラメータ名 | 値(デフォルト値) | 分類 | 説明 |
---|---|---|---|
src | URL | 必須 | スクリプトのURLです。 |
data-rt-user | ランダムな文字列 | 必須 | ユーザーを識別するIDです。 |
data-rt-manual | 真偽値(false) | オプション | trueにした場合、ページの読み込み時にWebフォントが適用されません。Webフォントを適用する場合は、javascriptでRT.start、RT.observeを実行してください。 |
data-rt-emulation | 真偽値(false) | オプション | trueにした場合、外字機能が有効になります。 |
data-rt-layout | 真偽値(false) | オプション | このオプションをtrueにすると、Webフォントでfont-feature-settingsを利用できます。 Webフォントを縦書きに適用する場合もtureにしてください。 |
data-rt-input | 真偽値(false) | オプション | trueの場合、ユーザーがtextareaとinputに入力した文字に自動的にWebフォントがあたるようになります。 |
data-rt-nofliker | 真偽値(false) | オプション | 上記がtrueの場合に、フォントがちらついてしまうのを軽減します。(chromeのみ有効) |
data-rt-cache | 真偽値(false) | オプション | 長文の固定ページを想定したキャッシュ機能です。表示時にブラウザにキャッシュを保存することで、次回以降同一ページを開く時にページ表示速度の向上が期待できます。 JavaScriptによりページが動的に変わるなど本オプションに適合しないページもございますので、本オプション有効化時にはフォントの適用の検証を行っていただき、本オプションを有効にするとフォントが表示されない場合は本オプションを無効化してご利用ください。 本オプションをご利用になる場合は、スクリプトタグはbody部に記述してください。 |
スクリプトタグのデータ属性で設定した場合の例
<script
src = "//font.realtype.jp/api/script/v4"
data-rt-user= "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
data-rt-layout = "true"
></script>
スクリプトタグのsrcのクエリパラメータで設定した場合の例(data-は不要です)
<script src="//font.realtype.jp/api/script/v4?rt-user=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx&rt-layout=true"></script>
APIについて
スクリプトの動作を直接的に操作したい場合は、下記のAPIを使用して下さい。
現在のスクリプトのバージョンを文字列で取得します。
console.log(RT.version()); // "1.1.0"
現在のスクリプトのサポートメールアドレスを文字列で取得します。
console.log(window.RT.support()); // "support@realtype.co.jp"
パラメーターをオブジェクトで取得します。
{
codeTimeout : 60000,
dynamic : false,
emulation : "true",
eventIntervalTime : 250,
flikerTime : 50,
glyfTimeout : 60000,
host : "//example.com/",
input : "true",
layout : false,
listTimeout : 1000,
manual : false,
metaTimeout : 60000,
nofliker : false,
user : "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
}
使用できるフォントファミリの一覧をオブジェクトで取得します。
{
'A+RT-xxx YYYYYYYYYY' : "5ad49a07682e15099eb2fc37f0d33594c180271796e5cc55229a1238785b4e3f",
'A+RT-zzz AAAAAAAAAA' : "51c06fdd8e8466ddcbd0898ddfad7e1915918d24d3cce5f5b2164eb146d0108f"
}
パラメータのrt-manualをtrueにする必要があります。
手動で処理を開始します。DOM変更イベント及びテキスト監視が開始されます。catchFuncはエラー(タイムアウト等)により発火します。finalFuncはすべてのフォントが正常に読み込まれた後、もしくはエラー処理の後に発火します。
RT.start(
function(e){
console.log("エラー発生");
},
function(){
console.log("処理が終了した");
}
);
パラメータのrt-manualをtrueにする必要があります。
DOM変更イベント及びテキスト監視を開始します。
RT.observe();
パラメータのrt-manualをtrueにする必要があります。
DOM変更イベント及びテキスト監視を終了します。
RT.release();