Appドキュメント

スマートボタンをご利用ください。

<button class="uloco-smartbutton"
        data-uloco-content-selector="セレクター">
    スマートボタン
</button>

data-uloco-content-selector属性に再生対象要素のセレクターを指定することで、Webページの読み込み時に自動でセットアップします。

1. オブジェクトの生成

uloco.createContentメソッドで再生対象オブジェクトを生成します。

const content = uloco.createContent(target, options)

第一引数は再生対象のセレクターまたはDOMノード、第二引数は再生対象のオプションです。

オプションについては別途説明いたします。

2. オブジェクトの設定

uloco.setContentメソッドで再生対象オブジェクトを設定します。

uloco.setContent(content)

※ JavaScriptで設定した場合、再生、停止、再生等のイベントの呼び出しが必要です。

スマートボタンをご利用ください。

スマートボタンがクリックされると、再生状態に応じて再生・停止・再開などの適切な処理を実行します。

uloco.switchメソッドを任意のタイミングで呼び出します。

uloco.switch()

uloco.switchメソッドは再生状態に応じて再生・停止・再開などの適切な処理を実行します。

この設定方法の実装は検討中であり、現在は使用できません。

簡単機能設定タグ

<input type="hidden" data-uloco-settings-{プロパティ}="値">

属性に設定項目を付与します。

{プロパティ}は設定項目のプロパティ名です。

例えばナレーションスピードを1.2倍にする場合は次のようになります。

<input class="uloco-smartsettings" type="hidden"
       data-uloco-settings-narrator-browser-speed="1.2">

また、複数設定がある場合は、同じタグに属性を追加します。

<input class="uloco-smartsettings" type="hidden"
       data-uloco-settings-{プロパティ名1}="値1"
       data-uloco-settings-{プロパティ名2}="値2"
       data-uloco-settings-{プロパティ名3}="値3">

uloco.settingsオブジェクトのプロパティを変更します。

uloco.settings.{プロパティ} = 値;

{プロパティ}は設定項目のプロパティ名です。

例えばナレーションスピードを1.2倍にする場合は次のようになります。

uloco.settings.narrator.browser.speed = 1.2;

※ uloco.init()より前に記述します。

■ 全ノード

uloco.settings.content.node.propertiesオブジェクトに値を設定します。

uloco.settings.content.node.properties["プロパティ名"] = 値;

例えば、全てのノードの開始遅延を500msに設定する場合、次のようになります。

uloco.settings.content.node.properties["before-delay"] = 500;

■ セレクター別

uloco.settings.content.node.elementsオブジェクトにノードのセレクターとプロパティを追加します。

uloco.settings.content.node.elements["セレクター"] = {
    "プロパティ名": 値,
};

例えば、クラス属性にplay-itemがあるノードのマーカー、スクロール、ナレーションを一括で有効にする場合、次のようになります。

uloco.settings.content.node.elements[".play-item"] = {
    "all": true,
};

また、複数設定がある場合は、プロパティを追加します。

uloco.settings.content.node.elements[".play-item"] = {
    "all": true,
    "before-delay": 500,
    "scroll-mode": "required"
};

再生対象オブジェクトの生成時の第二引数に設定値を与えることで、uloco.settings.content.node.propertiesオブジェクトの設定を上書きできます。

const options = {
    node: {
        "additions": {},
        "exclusions": [],
        "properties": {
            "scroll": false,
            "scroll-delay": 1000,
        },
    }
};
const content = uloco.createContent(target, options);
uloco.setContent(content);

■ 設定の追加

options.node.additionsに設定します。

設定方法は共通レベルのuloco.settings.content.node.elementsと同じです。

■ 設定の除外

options.node.exclusionsに設定します。

const options = {
    node: {
        "exclusions": [ "table", ".ex-item", "#ex-item" ],
    }
};

options.node.exclusionsの各値はセレクターです。

■ ノード共通設定

options.node.propertiesに設定します。

設定方法は共通レベルのuloco.settings.content.node.propertiesと同じです。

HTML要素（タグ）に特定の属性を付与します。

<div data-uloco-node-{プロパティ}="値">Hello World!</div>

{プロパティ}は設定項目のプロパティ名です。

例えば、スクロールを有効にする場合は次のようになります。

<div data-uloco-node-scroll="1">Hello World!</div>

また、複数設定がある場合は、属性を追加します。

<div data-uloco-node-scroll="1"
     data-uloco-node-scroll-mode="required"
     data-uloco-node-scroll-delay="500">
    Hello World!
</div>

uloco.pause()

uloco.resume()

再生対象オブジェクトとプレイヤーオブジェクトのjumpメソッドを使用します。

// contentはuloco.createContentによって生成されるオブジェクトです。
let target = document.querySelectorAll('ジャンプ対象のセレクター')
content.position(target);
uloco.jump(content);

■ 共通

uloco.settings.content.ending.delay = 遅延時間;
uloco.settings.content.ending.text = "ナレーションテキスト";
uloco.settings.content.ending.file = "ナレーションデータ";
uloco.settings.content.ending.handler = 関数;
                

■ 再生対象別

再生対象オブジェクトの生成時の第二引数に設定値を追加します。

const options = {
    ending: {
        delay: 遅延時間,
        text: "ナレーションテキスト",
        file: "ナレーションデータ",
        handler: 関数
    }
}
const content = uloco.createContent(target, options);
uloco.setContent(content);

uloco.recordConvert({ key: コンバージョン名 });

コンバージョン名には任意の文字列を与えられます。

再生対象オブジェクトの生成時の第二引数に設定を与えます。

uloco.addEvent("unsupported", function() {
    // 非対応環境時の処理
    alert("このブラウザは自動再生に対応していません。");
});