イマーシブ リーダー用の HTML コンテンツを準備する方法

  • [アーティクル]

この記事では、Immersive Reader で使用できるように HTML を構造化してコンテンツを取得する方法について説明します。

HTML コンテンツを準備する

イマーシブ リーダーでレンダリングしたいコンテンツをコンテナー要素内に配置します。 コンテナー要素に一意の id があることを確認してください。 Immersive Reader がどのように基本的な HTML 要素のサポートを提供しているかの詳細については、「SDK リファレンス」を参照してください。

<div id='immersive-reader-content'>
    <b>Bold</b>
    <i>Italic</i>
    <u>Underline</u>
    <strike>Strikethrough</strike>
    <code>Code</code>
    <sup>Superscript</sup>
    <sub>Subscript</sub>
    <ul><li>Unordered lists</li></ul>
    <ol><li>Ordered lists</li></ol>
</div>

JavaScript で HTML コンテンツを取得する

JavaScript コードで HTML コンテンツを取得するには、コンテナー要素の id を使用します。

const htmlContent = document.getElementById('immersive-reader-content').innerHTML;

イマーシブ リーダーを起動して HTML コンテンツを表示する

ImmersiveReader.launchAsync を呼び出すときに、チャンクの mimeType プロパティを text/html に設定すると、HTML のレンダリングが有効になります。

const data = {
    chunks: [{
        content: htmlContent,
        mimeType: 'text/html'
    }]
};

ImmersiveReader.launchAsync(YOUR_TOKEN, YOUR_SUBDOMAIN, data, YOUR_OPTIONS);

次のステップ

Immersive Reader SDK リファレンスを確認する