Power Apps でGoogle検索みたいな予測入力機能を実装して、マスコミ用語を提案させる

ユーザビリティを考えると、Googleって本当に参考になります。

検索を行おうとすると、自分で全てのキーワードを入力するわけではなく途中まで書けばGoogle が補完・提案してくれるかと思います。

そんなGoogle 予測変換機能をPower Apps で作ってみようと思います。

完成品プレビュー

この記事で作成したアプリはこんな感じに動作します。

ご興味がある方はぜひご覧ください！

辞書を用意する

なんと言っても辞書が必要です。

ただ、Google みたいに素晴らしい辞書がないので、ネットから漁れるものを使ってみようと思います。

自然言語処理のライブラリを持ってきてもできると思います。

今回はなんとなくフリーで落ちていますし面白そうなマスコミ表記辞典を使ってみようと思います。

参考
マスコミ表記辞典外部サイト

以下のようにダウンロードできます。

Excelで開いてみると以下のような感じです。

２列にします。

見出しとして、yomi、responseを追加してテーブルとして書式設定します。

MEMO

responseをフィルタリングして、空白になっているレコードは行ごと削除しておきます。

辞書ライブラリ用のSharePoint サイトを作成

SharePoint サイトに作成したExcelファイルをアップロードします。

読み込むと以下のようにSharePoint 画面上に表示されます。

リスト名を付けて作成します。

私の環境では１０分ほど処理に時間がかかりました。

登録後、以下のようにyomiとした列はTitleとして登録されているのがわかります。

Power Apps からSharePoint を連携する

アプリを白紙のタブレットレイアウトで新規作成して、データソースでSharePoint を指定します。

先ほど作成したリストをデータソースとして登録します。

MEMO

SharePoint リストの作成後まもなくだとPower Apps からSharePoint リストが見えないことがありますので、URLを貼り付けて検索します。

作成画面概要

以下のように作成します。実は作成するコントロールは少ないので作りやすいと思います。

以下の通り５つのコントロールしかないです。

ただちょっと関数は長めかもしれません。

これからひとつひとつ見ていきます。

アプリの作成方法

検索用のテキストボックス

MEMO

後で定義するものも含めて記述していきますので、最初エラーになるものもあります。ご注意ください。

コード

Default = ChoicedTerm

データ一覧用のテーブル

テーブルを挿入します。

コード

Items = Filter(mascomdict, StartsWith(response, SearchTextBox.Text))

ID、Title（よみ）、response（変換候補）を表示しておきます。
StartsWith関数により検索用のテキストボックスに入力された検索後の前方一致でフィルターをかけることが出来ます。

予測変換リスト表示用のギャラリー

ギャラリーを挿入します。

コード

Items = If(!IsBlank(Trim(SearchTextBox.Text)), Filter(mascomdict, StartsWith(Title, SearchTextBox.Text)))

StartsWithで前方一致フィルターを行います。
またIsBlank 関数でブランクでないときだけ処理を行うようにしています。

コード

OnSelect = Select(TitleTextLabel);Reset(SearchTextBox)

レコードを選択した際にはTitleTextBoxに記述されるOnSelectの関数を参照するように設定しています。
また、SearchTextBoxを一度リセットして、選択されたテキストを検索用のテキストボックスに代入する準備を行っています。

コード

Visible = LiveCount > ChoicedCount

文字数を比較して、入力された文字数（LiveCount）とギャラリーで選択した候補の文字数を比較して数が多いときだけ変換候補のギャラリーが表示されるようにしています。

ギャラリー内テキストラベル（変換候補）

テキストラベルをギャラリーに追加します。

コード

Text = ThisItem.response

変換候補が表示されるようにします。文字のスタイルはボールドにしています。

コード

OnSelect = 
Set(ChoicedTerm, ThisItem.response); 
Set(ChoicedCount, Len(Trim(ChoicedTerm)));
Set(LiveCount, ChoicedCount); 
Reset(SearchTextBox)

レコードが選択された際にはこちらのラベルのOnSelectが継承されるようになっています。
グローバル変数ChoicedTerm の値が選択した変換候補になり、検索用のテキストボックス（Default = ChoicedTerm）に代入されます。
また、変換候補を表示するギャラリーの表示・非表示を制御するために文字数のカウントを行っています。最後にテキストボックスをリセットします。