管理画面マニュアルに戻る

伝えるウェブ用ウィジェット（ページ内埋め込み版）概要

こちらでは、伝えるウェブの以下の機能について説明します。

  • サイト内埋込み型の伝えるウェブ変換JavaScript
  • 「やさしい日本語」ボタン
  • 「ひらがなをつける」ボタン

既存の「伝えるウェブ用ウィジェット」との違い

既存の 伝えるウェブ用ウィジェット別ウィンドウで開きます では、「やさしい日本語」「ひらがなをつける」変換を行う場合は「http://tsutaeru.cloud」へ遷移し変換を行っていますが、
「伝えるウェブ用ウィジェット（ページ内埋め込み版）」では、ウィジェットを埋め込んだサイト内で動的に文章の変換を行います。

これにより、既存のウィジェットでは対応できなかったページ内の非同期読み込み箇所の変換が可能となります。
「やさしい日本語」「ひらがなをつける」変換を行った場合はブラウザの cookie に記憶されページ遷移を行っても変換は維持されます。

既存の「伝えるウェブ用ウィジェット」と異なり単独では「音声読み上げ」については対応していませんので「音声読み上げ」を利用する場合は併用することになります。
（後述の「記述例」を参照してください）

「ページ内埋め込み版」が適しているケース

  • サイト内に動的読み込みがある場合
  • サイト内で完結させたい場合（ http://tsutaeru.cloud に遷移させたくない場合 ）

※動的読み込みが無いサイトであれば、既存のウィジェット別ウィンドウで開きます をお使いいただくことを推奨します。

適用手順

タグ

HTML の <head> タグ内に以下のタグを記述します。

<script src="https://tsutaeru.cloud/assets/snippet/js/tsutaeru_mo.js"></script> 
<script> 
  __tsutaeruMO.init({
    access_token: '【シークレットキー】',
    exclusion_class: 'class_name',
    toolbar: {
      buttons: ['easy','ruby'],
      message: true,
      fixed: true
    }
  });
</script>

タグ解説

__tsutaeruMO.init() 設定

__tsutaeruMO.init() では以下の設定を行う事ができます。

埋め込みタグの記述を変更する事で設定や表示を制御する事ができます。

パラメータ名 値 説明
access_token 文字列（必須） 「やさしい日本語」管理画面で確認できる「シークレット・キー」を指定します
api 文字列 変換APIのURLを変更する場合はそのURLを指定します
exclusion_class 文字列（カンマ区切りで複数指定可能） 指定したクラス名を持つ要素には伝えるウェブの変換は適用されません
toolbar.buttons 配列 ヘッダーに指定したボタンを表示します（easy:「やさしい日本語」ボタン,ruby:「ひらがなをつける」ボタン）
toolbar.message true もしくは false 「やさしい日本語」変換時に変換されている旨のメッセージを表示させます
toolbar.fixed true もしくは false 「やさしい日本語」「ひらがなをつける」ボタンをヘッダーに固定表示（画面スクロールに追従）するかどうか指定します

管理画面について補足

※非同期読み込み版の場合、上記のタグを埋め込んで制御する仕様上、管理画面の設定項目から反映できない項目がございます。
下記をご確認ください。やさしい日本語の「設定」との対照表となります。

項目名 反映の可否 機能について補足
ルビ ○ カタカナにルビを振る
絵文字 ○ 絵文字を利用する
分割 ○ 短文に分割する
文末 ○ 「です・ます」調にそろえる
分かち書き ○ 日本語を分かち書きする
括弧 ○ 変換したときの括弧の選択
難語の補完 ○ 最初の出現箇所のみ補完する
非表示class(es) × 変換後のページで、非表示にする要素のクラス名を指定
非表示id(s) × 変換後のページで非表示にする要素のidを指定
除外クラス × 変換後のページでやさしい日本語に変換しないブロックの要素のクラス名を指定
カスタムCSS × スタイルの個別設定が可能
バーの設定 × 変換後の画面に表示されるバーの色指定
テキスト × 変換後の画面に表示されるバーの文言指定
ルビの表示・非表示 × 変換後の画面に表示される「ルビON/OFF」ボタンのラベル指定

その他機能

class="noTTER"

__tsutaeruMO.init() 設定で exclusion_class を指定する事で任意のHTML要素の変換の除外設定が可能ですが、
HTML要素に noTTER というクラス名を指定することでも除外する事が可能です。

任意のボタンによる実行

前述のタグによる「やさしい日本語」や「ひらがなをつける」ボタンではなく以下のJavaScript関数によって
HTML内に設置された任意のボタンや、JavaScript内から変換を実行することが可能です。

// 「やさしい日本語」変換を実行
__tsutaeruMO.start();
// 「ひらがなをつける」変換を実行
__tsutaeruMO.start({mode:'ruby'});
// 「やさしい日本語」「ひらがなをつける」変換を消す
__tsutaeruMO.reset();

※上記関数で変換を実行した場合はツールバーのボタンテキストやメッセージの表示は連動しません。

記述例

ボタン等は使わずに変換機能のみ実行する場合

 <script src="https://tsutaeru.cloud/assets/snippet/js/tsutaeru_mo.js"> </script>
 <script>
  __tsutaeruMO.init({
    access_token: '【シークレットキー】'
  });
  __tsutaeruMO.start();
 </script>

伝えるウェブの音声読み上げ機能と併用する場合

<script src="https://tsutaeru.cloud/assets/snippet/js/tsutaeru.js?api_key=【APIキー文字列】"></script>
  <script src="https://tsutaeru.cloud/assets/snippet/js/tsutaeru_mo.js"></script>
  <script>
    __tsutaeruMO.init({
      access_token: '【シークレットキー】',
      toolbar: {
        buttons: ['easy','ruby'],
        message: true,
        fixed: true
      }
    });
  </script> 
<!-- 再生ボタンの表示 -->
  <script>_tsutaeru.speech.button()</script>

伝えるウェブの音声読み上げについては、こちらを確認してください。別ウィンドウで開きます