教材開発してみた

教材開発のあれこれ

Alexa スキル開発してみた

スマートスピーカである、Alexa（アレクサ）を使って、クイズを作ってみました。

作成したサンプルは、アマゾンのページから、

https://www.amazon.co.jp/

スキル　歴史人物クイズ

スキル　中学理科クイズ

↑と検索に入れて下さい。

３択クイズ、人物名を音声で答えるクイズの二つのパターンを作ってみました。

　音声でコンピュータを操作することを、VUI（Voice User Interface:音声ユーザーインターフェース ）と言うようです。これには、テキストの読み上げだけでなく、音声認識の技術も必要です。

　 歴史上の人物の名前やできごとの名称など、テキストの読み上げは、ほぼ正確です。しかし、東大寺→「ひがしだいじ」、赤血球→「あかけっきゅう」と読み上げてしまいます。リトマス紙は何色ですか→「りとますしはなんしょくですか」のように、何色→「なにいろ」「なんしょく」と、読み方が変わるのを文脈から判断するのは、人間でも難しいことですね。

　Alexaは音声認識が優れているようで、「坂上田村麻呂（さかのうえののたむらまろ）」という長い名前でも聞き取りが良くできていました。

　これからは、VUIを使った教育用の教材開発がおもしろくなりそうです。

iBooksでテキスト読み上げ（音声合成）させてみた

Web Speech Synthesis API（音声合成API）を使って、iBooksにテキスト読み上げをさせてみました。

iOSの場合、ユーザーアクションがないと再生開始できません。よって、ページを開いて自動で読み上げることはできません。ボタンを作成し、onclick等でプログラムを作動させます。

読み上げのアクセントは、ちょっと変な所ががありますが、漢字も正しく読んでくれます。「英語」にして英文を読み上げさせると、かなりきれいな発音です。

var rate_value = 9;
var pitch_value = 9;
var volume_value = 9;
var text_value="こんにちは、私は、アイブックです。";

 

function playSpeech_func(){
var synthes = new SpeechSynthesisUtterance();
synthes.voiceURI = 'native';
synthes.volume=(volume_value/10);// 音量 min 0 ~ max 1
synthes.rate = (rate_value /10);// 速度 min 0 ~ max 10
synthes.pitch= (pitch_value/10);// 音程 min 0 ~ max 2
synthes.text = text_value; // 話す内容
synthes.lang = $('#langID').val();// en-US or ja-UP
//synthes.onend = function(e) {}; // 終了時の処理　←今回は使いません
speechSynthesis.speak(synthes); // 発話実行
};

作成したサンプルはこちら（iBooksで利用して下さい）

ソースファイルはこちら（iBooks Author用のデータです）

iBooksで enchant.jsを使う

iBooksで enchant.jsを使った例を紹介します。

enchant.js はWebページ用のゲーム作成のために開発されたツールです。

Webページとして作動を確認したら、jQueryの場合と同様に、全てのファイルをフォルダに入れます。そのフォルダにInfo.plist、Default.png を入れます。

このフォルダに拡張子「.wdgt」を付けます。

enchant.jsでは、

<meta name="viewport" content="width=device-width,user-scalable=no">

とすると、そのデバイスに合った大きさで表示されます。詳しくは、ソースファイルを参照願います。

作成したサンプルはこちら（iBooksで利用して下さい）

ソースファイルはこちら（iBooks Author用のデータです）

iBooksで jQueryを使う

iBooksの「HTML5ウィジェット」で、jQueryを使ってみました。

 ○作成方法

１　jQueryを利用してJavaScriptで動くページを作成する。

　注意：ファイル名は全て、英数を用いること、日本語ファイル名不可

２　それらのファイルと、Info.plist、Default.png を全てフォルダに入れる

３　「名前を変更」で、フォルダに拡張子「.wdgt」を付ける。

４　wdgtをつけたファイルをiBooks Author で「HTML5ウィジェット」として利用する。

　ページのデザインによっては、縦スクロールをcssで記載する必要があります。

　まずは、サンプルを見てください。 

作成したサンプルはこちら（iBooksで利用して下さい）  

ソースファイルはこちら（iBooks Author用のデータです）

localStorageデータはブック別になります

　localstorageのデータは、同じブック内であれば、どのページのJavaScriptからでも、読み込み書き込みが可能です。でも、別ブックのデータにはアクセスできません。これを利用して、「ことブック」では、最後のページで学習集計を行っています。集計ページのJavaScriptは同じものを使ってます。

localStorageは利用可能です

　「localStorageは利用不可」と以前に書きましたが、利用できます。

 iPadの場合には、支障なく利用できます。

 

Macの場合、ローカルフォルダにあるHTMLファイルをSafariで表示させると、localStorageが使えません。エラーが出て止まります。

回避方法は、

Safariの「開発」→「ローカルファイルの制限を無効にする」にチェックします。

そうすると、localStorageを利用できます。

しかし、iBooksに貼り付けたHTMLのテキストボックスに、なぜか入力できない。エラーが出て止まってしまいます。

でも、まあ、localStorageは使うことができます。

 

縦スクロール（HTML5 ウィジェット）

HTML5ウィジェットの中で、通常のWebページのように「縦スクロール」をさせたいときには、cssで「overflow-y: scroll」を設定します。

例：

<head>

<style>

  .yscroll{

    height: 600px;

    overflow-y: scroll;

  }

</style>

</head>

<body>

<div class="yscroll">

  <!-- ・・・ここが縦スクロールされます・・・ -->

 </div>

</body>

 

MacとiPadのiBooksでは表示が異なります。MacのiBooksではスクロールバーが右側に表示されます。iPadのiBooksではスクロールバーが表示されません。よって、このウィジェットが、通常のWebページと同様に「縦にスクロールできる」ことを利用者に伝える必要があります。