vdsパックの導入・設置

 

vdsパック導入は３ステップで実現

vdsパックは、以下の３ステップで簡単に導入でき、ウェブアクセス支援機能を実現します。
ホームページを音声化するには、①ホームページへの実装と②vdsの管理画面での設定を行う必要があります。

  1. vdsスクリプトの読み込み（導入するホームページに実装）
  2. 読み上げボタンを配置する２つの方式からの選択と実装（導入するホームページに実装）
  3. vdsメニューバーと読み上げボタンの表示設定（vds管理画面での設定）

 

1.vdsスクリプトの読み込み

vdsスクリプトを利用するために、HTMLのhead内末尾に下記の行を追加します。
※jQueryを利用している場合は、vds関連のコールをする前にjQueryのライブラリが読み込まれるよう設定してください。現在既にjQueryを使っている場合は、jQueryロード後にvds関連のファイルをロードしてください。

コード

<script src="https://api.vdsapi.ne.jp/tools/engine/1.0/vds?key=お客様の認証キー"></script>

2.読み上げボタンを配置する２つの方式から選択と実装

次の２つの方式(2.1or2.2）の中から、１つを選び、自動読み上げボタンを配置するためのコードを追加してください。

2.1「読み上げ（ルビ振り）表示／非表示切り替えボタン」による方式

（１）特徴

「読み上げ（ルビ振り）表示／非表示切り替えボタン」をON/OFFすることによって、ホームページ閲覧者が「読み上げ（ルビ振り）ボタンを利用する・しないを選ぶことができます。

（２）コードの追加

ホームページ内で「読み上げ（ルビ振り）表示／非表示切り替えボタン」を配置したい場所に下記のコードを追加してください。

※1.vdsパック単体の場合

コード
<button onClick="vdsAutoButtons.interface.showButtons()">読み上げ</button>

※2.オプションでルビ振り機能を追加している場合

コード
<button onClick="vdsAutoButtons.interface.showButtons()">読み上げ/ルビ振り</button>

2.2最初から読み上げボタンをページ内に表示する方式

（１）特徴

ホームページにアクセスしたときに読み上げボタンが表示されます。
ホームページ閲覧者が「読み上げ（ルビ振り）ボタンを最初から利用できるようにする方式で、ホームページ閲覧者が「読み上げ（ルビ振り）ボタンを利用する・しないを選ぶことはできなくなります。

（２）コードの追加

head要素の末尾に下記javascriptコードを追加してください。

コード
jQuery(document).ready(function() {
    vdsAutoButtons.interface.showButtons();
});

3.vdsメニューバーと読み上げボタンの表示設定

（１）読み上げボタンの設定

①読み上げる範囲の設定

ホームページのコンテンツのタグを指定してください。

管理画面→ご登録URL管理→自動ボタン配置設定→コンテンツタグ
②読み上げボタンの設定

読み上げボタンを設置するヘッダータグを指定してください。

管理画面→ご登録URL管理→自動ボタン配置設定→ヘッダータグ
読み上げボタンの設定例
<div>
<h2>タイトル</h2>
<p>読み上げ対象文章1</p>
<p>読み上げ対象文章2</p>
<p>読み上げ対象文章3</p>
</div>

「ヘッダー及びコンテンツ指定タイプ」　を選択
ヘッダータグに .XXX　を指定
コンテンツタグに .YYY　を指定

※classなら.XXX、idなら#XXX、タグ名ならXXXと指定(jQueryの要素選択指定と同じ方式)。カンマ区切りによる複数指定可能。

① 読み上げ設定：class=”XXX”となっている要素の右に読み上げボタンを自動配置

②  読み上げボタンの設定：読み上げボタンを押した場合、YYY内に含まれる全要素を自動的に読み上げを自動的に実現します。

（２）vdsメニューバーの設定

vdsパックのご契約者様は、当ページ下部にも表示されているような読み上げ速度・音量・パンなどを設定するためのユーザーインタフェースを簡単に表示することができます。

管理画面→ご登録URL管理→ボタン配置→vdsメニューバーの表示

から設定を変更していただくことによって、自動的にメニューバーを表示するかどうかの設定を切り替えられます。

また、下記javascriptを実行することによって簡単に表示／非表示を切り替えることも可能です。

コード
//メニューバーを表示
vdsMenuBar.interface.showMenu()
//メニューバーを非表示
vdsMenuBar.interface.hideMenu()
//表示をトグル
vdsMenuBar.interface.toggleMenu()
サンプル