前回の記事「Delphi / C++Builder を使って『ずんだもん』におしゃべりさせるのだ！」では、『ずんだもん』の音声データを作成する VOICEVOX を利用して、 Windows VCL アプリケーションから『ずんだもん』の声を再生させるデモをご紹介しました。
今回は、この仕組みを応用し iPad や Android タブレット端末で動く来客受付システムの入力画面を Delphi マルチデバイスアプリケーションで作成してみます。初めてマルチデバイスアプリケーションを作成される方にも読んでいただけるよう構成してみましたのでぜひ最後までご覧ください。

近年、飲食店やオフィスでは訪問時の受付をタブレット端末で行い、無人化されているケースが増えてきました。
従来の「対面型」の受付には安心感や温かみがありますが、受付業務を簡略化しつつ、対面型にはない利便性を加えた運用が求められる場面も増えています。

完成イメージ図はこんな感じです

UX 的には少し物足りないものがありますが、初めてのモバイルアプリケーション開発としてできる限りシンプルにしてみました。
iPad がお手元にない場合でも、iPhone や Android 端末、あるいは Windows でもご利用いただけます。

※ 本記事における「ずんだもん」という表記は、特に断りのない限り音声（音源）の利用を指すものとします。なお、実際にアプリケーションへ組み込み、運用する際には、必ず公式サイトの利用規約をご確認ください。

モバイルアプリケーション開発：知っておきたいこと

『Delphi は使ったことあるけどモバイルアプリケーション開発は初めて』あるいは『モバイルアプリケーションはおろかDelphi さえ使ったことないんだけど・・』という方のために、簡単な「知っておきたいこと」リストをまとめてみました。さらに詳しく知りたい方は、文末の「参考」のリンクをご覧ください。

知っておきたいことリスト：

• RAD Studio 13 Florence 時点では iOS、 Android モバイルアプリケーション開発に使用できる開発言語は Delphi のみであり、C++Builder には対応していません。
• マルチデバイスアプリケーションの作成には FireMonkey(FMX) を使用します。FMX はマルチプラットフォーム対応のフレームワークです。
• iOS をターゲットプラットフォームとする場合は、Apple Developer Program への登録と、Xcode および  PAServerがインストールされた Mac が必要です。
• モバイルアプリケーション各種の開発を行うには、RAD Studio インストール時に「ターゲットプラットフォーム」として開発するデバイスを選択する必要があります。
• Android をターゲットプラットフォームとする場合には Eclipse Temurin OpenJDK と Android SDK – NDK も併せてインストールします。

記事の都合上、モバイルアプリケーション開発の準備や基礎知識の全てをご紹介しきれませんが、その他、モバイルアプリケーション開発についての準備は こちらの記事 にまとめられています。
もし、準備が大変そうであれば、ターゲットプラットフォームを Windows に設定し、「まずは動くこと」を目標にします。
その後時間をかけて iOS / Android デバイスで動作させるための調査を行っても大丈夫です。 

来客受付モバイルアプリケーションを作成する

システム概要

今回の例では、iPad にインストールして使用する来客受付システムを作成します。iPad 以外のデバイスを使う場合は、ご利用になるデバイスに読み替えてください。

今回実現する機能は以下のとおりです:
(1) 訪問者は、「氏名」を入力し、同行者がいればその「人数」を入力します。
(2) 入力を終えたら「受付」ボタンをタップします。
(3) 受付の内容より発話用の文章を作成：
－ 同行者がいない場合は「<代表者様氏名> 様の受付を行いました。担当者が参りますのでそのままお待ちください。」と『ずんだもん』の音声で発話します。
－ 同行者がいる場合は「<代表者様氏名> 様他<人数>様の受付を行いました。担当者が参りますのでそのままお待ちください。」と『ずんだもん』の音声で発話します。
(4) 「担当者が参りますのでそのままお待ち下さい」ラベルを表示します。

補足：『ずんだもん』音声データ作成について

『ずんだもん』の音声データ作成には、『ずんだもん』をはじめとした様々なキャラクターでテキスト読み上げを行える VOICEVOX を使用します。
VOICEVOX はデスクトップアプリケーションとして音声データを作成できるほか、REST API サーバ機能を備えており、外部アプリケーションからの音声生成リクエストを受け付けることができます。
VOICEVOX の導入手順や基本的な解説は 前回記事 でも触れていますので、必要に応じてご覧ください。

今回も VOICEVOX の REST API サーバ機能を活用します（図は構成イメージです）。
まだ VOICEVOX を入手されていない方は、あらかじめ Windows PC にインストールしておきます。

「Delphi マルチデバイスアプリケーション」プロジェクトの作成

モバイルアプリケーションを作成するには、Delphi IDE より「新規作成 > マルチデバイスアプリケーション > 空のアプリケーション」を選択します。

フォームデザイン例

新規プロジェクトを作成すると表示される Unit1 のデザインを図のような構成にします。
この内、氏名、人数入力用 TEdit、 受付の TButton、さらに TMediaPlayer、TRestClient、 TRestRequest、 TRestResponse は必要なコンポーネントです。それ以外のレイアウトや配色についてはお好みで変更することが可能です。

コード例

次に、「受付」ボタンクリック時の処理と VOICEVOX を使用して『ずんだもん』の音声データを取得する処理を実装します。 
コード中、VOICEVOX が起動している PC の IP アドレスを指定する箇所があります(キーワード[FIXME]で検索)。ここにはループバックアドレス (127.0.0.1/localhost) ではなく、VOICEVOX が起動されているコンピュータのローカル IP アドレス (192.168.x.x) を記述します。

// 受付ボタンクリック時処理
procedure TForm1.ButtonUketsukeClick(Sender: TObject);
var
  LText : string;   // ずんだもんが読み上げる文章
  LWavFile: string; // VOICEVOXが作成した音声データファイル名
begin
  // 受付完了ラベルリセット
  LabelInfo.Visible := False;
  // 文字列の作成
  LText := EditVisitorName.Text + 'さま';
  if EditNumber.Text <> '0'  then
    LText := LText + 'ほか' + EditNumber.Text + 'めいさま'; // 複数で訪問の場合
  LText := LText + 'の受付を行いました。担当者がまいりますのでそのままおまちください' ;

  // 音声ファイル名を決定
  // モバイルデバイスでは一時ファイル用のフォルダを使用
  LWavFile := TPath.Combine(TPath.GetTempPath, 'Zunda.wav');

  // 音声再生中であれば停止する
  if MediaPlayer1.State <> TMediaState.Stopped then
  begin
    MediaPlayer1.Stop;
  end;

  // 音声データをクリア
  if FileExists(LWavFile) then
  begin
    DeleteFile(LWavFile);
  end;

  // 音声ファイル作成
  GoZunda(LText, LWavFile);

  // TMediaPlayerで再生
  MediaPlayer1.FileName := LWavFile;
  MediaPlayer1.Play;

  // 受付完了ラベル表示
  LabelInfo.Visible := True;

end;

// テキストを元に音声データ作成
procedure TForm1.FormCreate(Sender: TObject);
begin
  // 受付完了ラベルリセット
  LabelInfo.Visible := False;
end;

procedure TForm1.GoZunda(const AText: string; const AOutputWavFile: string);
var
  LJsonObj : TJSONObject; // JsonObject
  LWavData : TBytes;      // 音声データ
  LFileStream : TFileStream;  // TFileStream

begin
  // 初期化(デザイナで設定済みであれば省略可能)
  RestClient1.BaseURL := 'http://192.168.255.255:50021';  // FIXME: VOICEVOXが起動しているPCのIPに変更
  RestRequest1.Method := rmPOST;
  RESTRequest1.Client := RESTClient1;
  RESTRequest1.Response := RESTResponse1;

  // 1. audio_query 呼び出し
  with RestRequest1 do
  begin
    Resource := 'audio_query';
    Params.Clear;
    AddParameter('text', AText, pkQUERY); // 発話内容の文字列
    AddParameter('speaker', '1', pkQUERY);// SpeakerId 1はずんだもん
    Body.ClearBody;
    Execute;
  end;

  // RestResponse1.StatusCode のエラー判定
  if RESTResponse1.StatusCode <> 200 then
    raise Exception.Create('Error RESTResponse1.StatusCode = ' + RESTResponse1.StatusCode.ToString);

  // 2. synthesis 呼び出しと JSON のパース
  LJsonObj := TJSONObject.ParseJSONValue(RestResponse1.Content) as TJSONObject;

  try
    with RestRequest1 do
    begin
      Resource := 'synthesis';
      Params.Clear;
      Body.ClearBody;
      AddParameter('speaker', '1', pkGETorPOST);
      AddBody(LJsonObj.ToJSON, ctAPPLICATION_JSON);
      Execute;
    end;

    // RestResponse1.StatusCode のエラー判定
    if RESTResponse1.StatusCode <> 200 then
      raise Exception.Create('Error RESTResponse1.StatusCode = ' + RESTResponse1.StatusCode.ToString);

    // Wavファイルを保存
    LWavData := RestResponse1.RawBytes;
    LFileStream := TFileStream.Create(AOutputWavFile, fmCreate);
    try
      if Length(LWavData) > 0 then
        LFileStream.WriteBuffer(LWavData[0], Length(LWavData));
    finally
      LFileStream.Free;
    end;

  finally
    LJsonObj.Free;
  end;
end;

 

※ Android 向け追記事項: Android デバイスでは http 通信がデフォルトで許可されていません。これを変更するには、プロジェクトフォルダにある AndroidManifest.template.xml に対し以下のとおり android:usesCleartextTraffic="true" を加えます。

<?xml version="1.0" encoding="utf-8"?>
<!-- BEGIN_INCLUDE(manifest) -->
※ 中略
<%queries-child-elements%>
    </queries>
    <application
        android:debuggable="%debuggable%"
※ 中略
        android:usesCleartextTraffic="true"
>

来客受付モバイルアプリケーションを実行

ここまででモバイルデバイス用にフォームを用意し、コードを書き終えることができたので、実際に動かしてみたいと思います。ターゲットプラットフォームは下記の通り、実行するデバイスを指定しているか確認します。
iPad を使用する場合、iPad は Mac に接続しているでしょうか？ または PAServer は起動しているでしょうか?

『ずんだもん』の音声を作成するためには引き続き VOICEVOX が必要ですが、ここで注意点があります。
それは、これまで使用した VOICEVOX デスクトップアプリケーションの起動方法では REST API の外部接続に対応していない点です。これを解決するには 一度 VOICEVOX を終了し、以下のコマンドラインで VOICEVOX を起動します。

"C:Users<ユーザ名>AppDataLocalProgramsVOICEVOXvv-enginerun.exe" --host <IPアドレス>

または

"C:Program FilesVOICEVOXvv-enginerun.exe" --host <IPアドレス>
※ VOICEVOX インストール時のオプションによって切り替えます。

 

すると、次のようにVOICEVOXがコンソール上で起動されます。

それでは、 iPad にマルチデバイスアプリケーションを配置し起動してみましょう。『ずんだもん』は入力内容を元にした文章を読み上げたでしょうか？

えっ？もしかしてこれで終わり？

iPad を使った無人受付システムとして、訪問者様のお名前と同行者人数を『ずんだもん』が復唱する、ここまではできました。
でも、今のままでは単に iPad に入力された内容を復唱するだけであり、その後の動作も必要となります。

無人受付の役割としては以下のような機能も実装したいところです：

• 訪問者と人数の履歴を記録
• 社内の利用者(来客対応者)に通知

これらの機能は今回作成したモバイルアプリケーションに追加することも可能です。
しかしながら、無人受付システムとしてさらに機能を拡張させたい場合には、 iPad は本来の目的である画面インターフェースとしての役割にとどめ、残りはアプリケーションサーバを導入し、実装するほうがモダンな設計思想と言えます。

次回はこれらの解決策として RAD Server をアプリケーションサーバとして利用し、より本格的な無人受付システムにする方法をご紹介したいと思います。

まとめ

今回は、Delphi を用いたマルチデバイスアプリケーションの一例として、来客受付システムを作成し、『ずんだもん』に音声ガイダンスを担当してもらいました。
今回のサンプルは、来客受付システムとしては最小構成の実装に留まっていますが、実運用を想定した際の拡張性や応用の可能性について、十分に感じていただけたのではないでしょうか。

Delphi の VCL アプリケーション開発を経験されている方であれば、Windows デスクトップアプリケーションを作成する感覚で、モバイルアプリケーション開発にも無理なく取り組めることを実感していただけたと思います。また、今回初めて Delphi に触れた方にとっても、敷居が高いと感じがちなマルチデバイス／モバイルアプリケーション開発が、Delphi を用いることで、より現実的で身近な選択肢として感じられたのであれば幸いです。

参考

• VOICEVOX
• 東北ずん子・ずんだもんプロジェクト
• VOICEVOX(GitHub)
• FireMonkey
• FireMonkey クイック スタート ガイド
• マルチデバイス アプリケーション：インデックス
• RAD サーバー（EMS）