ネット音声再生アプリ
今回は、オーディオプレーヤー機能を使用して、ネットで無料公開されている英会話の再生アプリを試作します。英会話コンテンツを公開している BBC Learning English から、『 English at Work 』を題材にして、シリーズコンテンツの再生アプリを作ります。（あくまで個人利用です）
実際の画面を確認
作成したスクリーンは一つだけです。
アプリを立ち上げたとき、とりあえず初回のコンテンツが選択されています。本来ならば無選択にすべきかもしれませんが、そのあたりの指定の仕方が、まだよくわかっていません。
エピソード1を選択したところです。イメージ画像が変わっています。音声も再生されています。
スクリプト表示ボタンをクリックしたところです。InternetExplorer が起動して、PDF ファイルを開くか、保存するか尋ねています。ここで"ファイルを開く"を選択すると、PDF ファイルが開きます。
画面右側に PDF が開きました。今回、 PDF 再生アプリを予め "リーダー" にしていたので、このように動きましたが、これが AdobeReader ならば、また異なる動きをするかと思います。
以下に、作成時のポイントを記述します。
[ 目次 ]
事前準備
- データソースとして読み込むエクセル表を作成します。 「 ID 」「 音声データの保管場所 」「 スクリプト(英語書き起こし文書)の保管場所 」「 画像データの保管場所 」という表を作成し、テーブル変換しておきます。
ネットアドレスが長いので、すべて見えていませんが、実際にはアドレスがすべて入力されています。
テーブル変換の手順は、こちら（サンプルで気付いたポイント）に記しています。興味のある方はご覧ください。
ちなみに、今回はネット上のアドレスを使用しましたが、ローカル環境にコンテンツをダウンロードして、 C:\Users\Public 配下に保管すれば、そちらのパスをテーブルに指定しても参照可能なようです。
仕様確認
- ギャラリーに並んだタイトルから一つをクリックすると、その回の英会話を再生します。
- 再生中、オーディオプレーヤーには、その回のイメージ画像を表示します。
- スクリプト表示ボタンをクリックすると、ブラウザ起動を経由して、スクリプトの PDF を表示します。
アプリ画面内部にスクリプト用のフレーム部品を配置して、そこにスクリプトを表示したいと思っていました。ただ、その方法が実現可能かどうかわからなかったので、次善策として、アプリの外側で開くことにしました。
仕組みの解説
ここでは、貼り付けた部品の属性を ExpressView で確認します。部品を選んで右下の ExpressView ボタンをクリックすれば、画面右に開きます。
以下、画像をクリックすると拡大画面が表示されます。
- ギャラリー 事前準備したエクセル表をデータソースとして読み込み、ギャラリーに結びつけています。
- ギャラリー内の個別領域 ここでは、クリックされたときにすぐ音声が再生されるよう、一時停止/解除用ブーリアン変数の値を false にしています。
- オーディオプレーヤー ここで、ギャラリーで選択された回の音声ファイルを指定しています。
- ボタン ボタンをクリックすることで、ブラウザが起動します。今回は、読み込むファイルが PDF なので、ブラウザが PDF 再生アプリを呼び出す形で、スクリプトが表示されます。
Items 属性に、 EnglishAtWork と、テーブル名を入れている部分がそれです。
OnSelect のタイミングで、 UpdateContext({audioPaused:false}) と指定している部分がそれです。
Text は、 ThisItem!Title と指定して、タイトルを表示するようにしました。
Media 属性で、 Gallery1!Selected!AudioURL と指定している部分がそれです。
また、音声の一時停止/解除をコントロールしています。
DefaultPaused 属性で、 audioPaused とブーリアン変数名を指定しているのがそれです。
この変数が true なら一時停止、false なら再生します。
再生中に表示される画像は、 Image 属性で、 Gallery1!Selected!ImageURL と指定しています。その回に対応した画像になります。
OnSelect のタイミングで、 Launch(Gallery1!Selected!ScriptURL) と指定している部分がそれです。
これにより、ギャラリーで選択された回のスクリプトが表示されます。
Web ページでは、ボタンの上にマウスがきたときや、ボタンが押されたときの表示効果を設定しますが、その効果を指定する方法がわかりません。なので、ボタンを押した感触を感じない操作感になってしまっています。
感想
作成を終えた感想を少々。このアプリでやろうとしていること（ネット上で公開されている音声データを再生すること＋スクリプトを表示すること）は、率直に言って、Web ブラウザで既に実現可能なことです。
では、今回の試作品に意味があるのか？
ふと、そんなことを思いました。結論としては、「あるかもしれない」という感じです。
今回取り上げたコンテンツ（『 English at Work 』）は、既にネット上でも整理されているので、手間をかけてメトロアプリを作る意味が乏しいです。
しかし、もっとコンテンツが分散していて、ブラウザのお気に入りでグルーピングしておくのでは使い勝手が悪い、という時には、 自分好みの"目次・目録" を作成しておく意味がある、と思いました。
蓄積した音声・動画・画像データなどを、メトロアプリで束ねておく、というのも、こうした使い方の一種かと思います。
また、目的があってWeb ページを見ている時でさえ、寄り道の誘惑に負けてしまう場合がありますが、アプリにまとめると、寄り道を防ぐ効果もあるのでは、と感じました。
ブラウザやパワーポイント・アクセス・エクセルではなく、ProjectSiena でメトロアプリを作成する必要性とか利用価値・利用方法を、また別の機会に検討してみたい、と思っています。