---
title: "モバイルアプリ向けのテキスト読み上げ機能"
date: "2017-08-28"
categories: 
  - "mobile"
  - "mobile-development"
  - "mobiletogether"
  - "tools"
tags: 
  - "mobile-development"
  - "mobiletogether"
  - "software-tools"
description: Altova MobileTogetherが、クロスプラットフォームのモバイルアプリケーションにおいて、テキスト読み上げ機能を統合し、音声による情報提供を通じてユーザーエクスペリエンスを向上させる方法についてご紹介します。
---
Status: #blog

Tags:  #mobile-development #mobiletogether #software-tools

Categories: [mobile-development](/blog/ja/category/mobile-development.md) | [low-code+no-code](/blog/ja/category/low-codeno-code.md) 
# モバイルアプリ向けのテキスト読み上げ機能

Altova MobileTogetherは、テキスト読み上げ機能をサポートしています [クロスプラットフォーム対応のモバイルアプリケーション](https://www.altova.com/ja/mobiletogether), これにより、開発者は音声機能を組み込み、豊かで多様なマルチメディア体験をユーザーに提供できるようになります。

音声は、アプリ内のあらゆるテキストと完全に連携させることができます。例えば、Parcel Delivery MobileTogetherのようなアプリであれば、次回の配達先住所を音声で読み上げることで、特に運転手が交通渋滞に巻き込まれている場合に役立ちます。また、他の情報ブロックにあるメッセージボックス内のテキストも、モバイルデバイスを通じて音声で読み上げることができます。

モバイルアプリにおけるテキスト読み上げ機能の動作を検証するため、簡単なデモを作成しました。その後、その機能を「Parcel Delivery」アプリに追加しました。

![モバイルアプリ向けのテキスト読み上げ機能](/blog/images/shutterstock_1615112031.jpg)

<!--more-->

この非常にシンプルなテキスト読み上げデモアプリには、以下の4つの機能があります

- 入力フィールドは、ユーザーが任意のテキストを入力したり、あらかじめ用意されたデフォルトのテキストを読み上げたりするための機能です
- 「読み上げ」ボタンをクリックすると、入力されたテキストが音声で読み上げられます
- 「ミュート」ボタンは、現在発言中であれば、それを停止します
- 「終了」ボタンをクリックすると、音声メッセージが表示されるメッセージボックスが表示され、アプリケーションを終了するオプションが提供されます

以下は、Androidデバイス上で動作しているアプリの画面で、入力フィールドにテキストが表示されています

![モバイルアプリ向けのテキスト読み上げ機能の簡単なデモを、Androidデバイスで紹介します](/blog/images/new-android-shot-1-small.png)

アプリ内のテキストは、モバイルデバイスのコピー＆ペースト機能を含む、さまざまなソースから提供されることがあります。以下に示すスクリーンショットでは、iPhoneのユーザーが、Altovaのウェブサイトからコピーしたデフォルトのテキストを削除し、入力フィールドに貼り付けています

![モバイルアプリ向けのテキスト読み上げ機能の簡単なデモを、iPhoneで紹介します](/blog/images/replacement-iPhone-shot-small.png)

複数行に対応する入力フィールドのプロパティが選択されると、貼り付けられたテキストに合わせてボックスが自動的にサイズ調整されます。

入力フィールドに入力されたテキストは、アプリのデータ構造内の特定の要素に保存されます。 「読み上げ」ボタンに割り当てられた機能により、デバイスに内蔵されているテキスト読み上げエンジンが、保存されたテキストを読み上げます。

この「MobileTogether Actions」ダイアログで定義された単一の操作は、アプリがAndroid、iOS、またはWindows Phoneで動作している場合でも、Windows 10のコンピューターで動作している場合でも、さらには別のデバイス上のWebブラウザで動作している場合でも、常に機能します。

![モバイルアプリ向けのテキスト読み上げ機能](/blog/images/text-to-speech-action.png)

「テキスト読み上げ」機能を、「話す」ボタンの操作に直接割り当てましたが、これはアクショングループ内でも使用できます。ここでは、例として「終了」ボタンにアクショングループを使用しています。ユーザーが「終了」ボタンをクリックすると、メッセージボックスを表示すると同時に、メッセージを読み上げたいと考えています。これは、Androidスマートフォンで以下のように実現できます

![モバイルアプリ向けのテキスト読み上げ機能の簡単なデモ。終了メッセージ](/blog/images/exit-message-capture.png)

以下に、終了ボタンに設定されている機能を説明します

![モバイルアプリ向けのテキスト読み上げ機能：終了ボタンに対する操作を定義します](/blog/images/message-box-action-group.png)

「このアプリを本当に終了しますか？」というフレーズは、データ構造内に保存されており、テキスト読み上げ機能の強調表示アクションや、その下のメッセージボックスで使用されるXPath式で使用されています。

ユーザーが「OK」をクリックすると、アプリが終了する前に、ループ処理がテキスト読み上げの完了を待ちます。

### モバイルアプリ向けの荷物配送アプリに、テキスト読み上げ機能を搭載しました

Parcel Deliveryというサンプルアプリケーションは、もともとMobileTogetherで地理位置情報を扱う方法を示すために作成されました。このシミュレーションでは、ユーザーはニュージャージー州にある倉庫からニューヨーク市内の様々な場所へ荷物を配達する配送会社のドライバーとして活動します。

新しい配達先が割り当てられると、アプリは配達先住所と現在地からの距離を表示する「配達」画面を表示します。以下は、Androidスマートフォン用のMobileTogetherシミュレーターで表示される画面の例です

![モバイルシミュレーター上で表示される、荷物配送のサンプルアプリケーション](/blog/images/Delivery-Page-in-simulator.png)

運転中に、ドライバーが移動するにつれて、新しい目的地や距離情報を音声で読み上げられるようにしたいと考えています。

まず、設定画面に新しいユーザー設定項目を追加し、テキスト読み上げ機能を有効または無効にするためのスイッチコントロールを設けることができます。以下に、iPhoneで動作する、改訂版の設定画面の例を示します

![荷物配送に関するモバイルデモアプリの設定画面を、シミュレーターで表示しています](/blog/images/new-configuration.png)

デザイナーの「配送」ページを見ると、配送先、現在地、そして配送先までの距離は、すべてXPath式から取得されていることがわかります

![荷物配送モバイルデモアプリの配送画面。MobileTogether Designerで表示されたものです](/blog/images/Delivery-Page-in-Designer.png)

これらの表現は、テキスト読み上げ機能にも適用できます。まず、新しい目的地ごとに読み上げるためのアクショングループを作成しました。下図の青色で強調されている部分が、テキスト読み上げ機能の設定です。ここでは、`concat`関数を使用して、住所と開始地点からの距離を含む、より自然な表現になるように、いくつかの単語を追加しました

![荷物配送モバイルデモアプリ：次の配達先を音声で案内します](/blog/images/destination-action-group.png)

運転者が目的地に向かうにつれて、位置情報が定期的に更新され、目的地までの距離がリアルタイムで表示されます。新しい距離情報を音声で伝えるために、別の操作グループを作成しました

![モバイルアプリケーション向けのテキスト読み上げ機能に関する事例](/blog/images/new-distance-action-group.png)

このループは、上記のデモアプリの「終了」ボタンで定義されている機能と似ており、以前の音声合成処理が完了していない場合に、新しい音声合成処理が中断されるのを防ぎます。もし、以前の音声合成処理が完了する前に位置情報が更新されると、通常はこのような中断が発生する可能性があります。

当社のテキスト読み上げ機能は、アプリの実行中に呼び出す必要があります。まず、配送ページにおける「ページ読み込み時」の処理シーケンスに、「次の目的地を読み上げ」という機能を追加することができます

![荷物配送モバイルデモアプリにおける、最初の目的地設定アクショングループの配置](/blog/images/new-page-load-actions.png)

初回配送時には、配送ページが一度読み込まれます。2回目以降の配送については、既存の「次の目的地へ進む」アクショングループに、新しいアクショングループを追加することができます

![荷物配送モバイルデモアプリ：次なる目的地へのアクショングループの配置](/blog/images/insert-first-vocalization.png)

 

残された作業は、デリバリーページのOnPageRefreshアクションに、Vocalize New Distanceアクショングループを追加することです

![荷物配送モバイルデモアプリ：配送画面の操作を更新しました](/blog/images/new-page-refresh-actions.png)

現在、このアプリはMobileTogetherシミュレーター上でも、また実際のモバイルデバイス上でも動作しますが、運転者は音声による状況報告を受け取ることができ、運転中に視線を道路からそらす必要がありません！

モバイルアプリ向けのテキスト読み上げ機能を試してみたい場合は、[無料で利用できるMobileTogether Designerをダウンロード](https://www.altova.com/ja/download/mobiletogether.html)してみてください。このソフトウェアには、ヘルプ機能、チュートリアル、そしてParcel Deliveryなどの多くのサンプルアプリが付属しています。

この投稿で説明されているソリューションは、以下のURLからダウンロードできます：[https://github.com/altova/MobileTogether-TTS](https://github.com/altova/MobileTogether-TTS)

MobileTogether Designerで、いずれかの.mtdファイルを開き、そのファイルがどのように構築されているかを確認してください。その後、MobileTogetherシミュレーターでそのファイルを実行してください。

お使いのデバイスに対応したアプリストアにアクセスし、[MobileTogetherモバイルアプリをダウンロードしてください。](https://www.altova.com/ja/download/mobiletogether.html) その後、MobileTogetherデモサーバーに接続して、さらに多くのデモアプリを試すことができます。MobileTogetherモバイルアプリをインストールすると、MobileTogetherデザイナーをサーバーとして使用して、ご自身のデバイスでモバイルアプリ向けのテキスト読み上げ機能も試すことができます。