【デモアプリも作成してみました】Azure Cognitive Search を使ってサジェスター・オートコンプリート機能を試してみた！

はじめに

Azure が提供しているクラウド検索サービス【Azure Cognitive Search】の

  • サジェスター＝検索候補の提案
  • オートコンプリート＝補完機能検索候補

について設定方法と利用方法を解説していきます。
Azure Portal 上で作成できるデモアプリの作成についても解説しています。

本記事の概要

  • サジェスター・オートコンプリートについて簡単に解説
  • Azure Portal 上での設定方法
  • Suggeter ・ Autocomplete の実行方法の紹介 (REST API を使用)
  • デモアプリを作成してサジェスター機能を使用

サジェスター・オートコンプリートとは

hotel-app-suggestions-autocomplete (1).png

  • サジェスター(Suggester)とは
    検索候補に入力されている語句に対して一致する用語を表示します。
    上記画像では検索窓に入力された語句に対してインデックスから一致するドキュメントが生成されています。
  • オートコンプリート(autocomplete)とは
    用語全体のクエリの一部入力を補完する役割を担っています。
    オートコンプリートを使用すると可能性のある語句が予測されます。上記の画像のように"tw"を入力すると"in"が補完されます。

インデックスの作成と Suggester 機能の設定

インデックスの作成

インデックスの追加 または データ インポート ウィザードを使用してインデックスを作成する場合は、suggester を有効にするオプションがあります。

  • Cognitive Search のリソース画面から【データのインポート】を選択
    設定-データのインポート.png
  • 使用するデータを選択。
    ※今回はサンプル → hotels-sample を選択しています。
    データソースのインポート.png

データソースの選択.png

  • コグニティブスキルを追加

今回は省略します。
画面下の[スキップ先:インデックスをカスタマイズします]をクリック

コグニティブスキルを追加(今回は省略)).png

  • Suggester 名で任意の名前を入力。

対象インデックスのカスタマイズ-Sugger名の設定(任意の名前).png

  • Suggester 列にチェックボックスをオンにして有効化します。

指定したい範囲がある場合は、指定するフィールド名列の Suggerter 列にチェックをいれてください。
なお、 チェックボックスは、文字列フィールドでのみ使用できます。

Suggesterの設定(ここでチェックボックスを入れる).png

Suggesterの設定②.png

  • チェックが完了したら[次:インデクサーの作成]をクリック

※アナライザーの選択はトークン化とプレフィックス付けに影響します。 suggester を有効にする場合は、フィールド定義全体を考慮してください。

  • インデクサー名やスケジュールの設定をしています。

スケジュールなどを設定する場合はここで設定します。
問題が慣れれば【送信】をクリック

インデクサーの作成.png

ここまででインデクサーの作成と Suggester 機能の設定が完了です。

Suggester 利用方法

ここからはVSCodeで作業しています。
要求内容は以下の通りです。

[crayon-616b6833e1ff7382304805/]

応答結果は以下の通りです。
"San" に該当する 検索ワードが返ってきました。

[crayon-616b6833e2001250325513/]

2021-08-05_15h20_03.png

オートコンプリートの利用方法

先程の Suggester 利用と同じように行います。
suggester の箇所を autocomplete に変更します。

[crayon-616b6833e2007966839254/]

応答結果は以下の通りです。

[crayon-616b6833e200a039485227/]

2021-08-05_17h58_17.png

デモアプリの作成してサジェスター機能を使用

Azureポータル上で検索用のデモアプリケーションを作成できる機能があります。
HTMLファイルで生成されます。

作成手順

使用するインデックスを選択します。
ホーム画面.png

CORS有効化を選択します。
「デモアプリの作成」を選択します。
CORS有効化.png

検索結果で表示される項目を選択します。
「次へ」をクリック
個々の結果.01.png

サイドバーに表示されるフィルターを任意で選択します。
「次へ」をクリック
サイドバー01.png

検索ボックスのドロップダウンに候補として表示される項目を選択します。
「デモアプリの作成」をクリック
候補01.png

デモアプリの準備完了の画面が出ました。
「ダウンロード」をクリック
ダウンロード画面01.png

ダウンロードしたファイルを開きます。
ダウンロードファイルを開く.png

以下のようにデモアプリが表示されました。
設定したサジェスト機能等も使えていますね。
お疲れ様でした。

デモアプリ画面.png

最後に

サジェスター機能とオートコンプリート機能を数ステップで試すことができました。
デモアプリについてもサジェスター機能が搭載されたものが数クリックで作成することができました。

検索エンジンを作成してからすぐに、アプリケーション上でどんな風に検索できるのか試すことができるのは便利だと思いました。

参考資料

by azure-recipe-user

Azure Static Web AppsのサイトにGitHub認証でアクセス制限をかける方法

はじめに

GitHub認証でアクセス制限をかけてみました。

開発環境

  • GitHub
  • Windows10
  • Azure

サンプルサイト

bandicam 2021-05-11 13-45-06-347.jpg

bandicam 2021-05-11 13-45-10-828.jpg

[crayon-616b6833e3f2c891131381/]
[crayon-616b6833e3f3a806374309/]

やり方

staticwebapp.config.jsonをルートフォルダに追加

bandicam 2021-05-11 13-55-08-615.jpg

[crayon-616b6833e3f44620634134/]

これでadminページにはアクセスできなくなります。
bandicam 2021-05-11 14-02-53-219.jpg

ユーザーをロールに追加

AzureのStaticAppにアクセスしてロール管理→招待からリンクを作成
bandicam 2021-05-11 14-10-35-383.jpg

招待リンクにアクセスして同意
image.png

ログイン/ログアウト リンクを追加

[crayon-616b6833e3f4a523974757/]

ロールを付与したアカウントでログインするとadminページにアクセスすることができるようになります。
image.png

image.png

ロールが付与されていないアカウントで認証を行ってもアクセスすることはできません。
image.png

追記

[crayon-616b6833e3f56036878137/]

設定ファイルを上のようにすると全ページにフィルターをかけることができます。
この場合ログインリンクへのアクセスは直urlで行うことになります。

by azure-recipe-user

DocFX のはじめかた

環境

Windows 10 Enterprise

やり方

Releases 揃 dotnet/docfx

https://github.com

ダウンロード
image.png

解凍して適切なフォルダに移動(僕はProgramFilesにしました)
image.png

コントロールパネルを開く
image.png

システムとセキュリティ
image.png

システム
image.png

システムの詳細設定
image.png

環境変数
image.png

Path > ダブルクリック
image.png

新規 > docfxのパスを入力 > OK
image.png

コマンドラインを起動
image.png

コマンドを実行

[crayon-616b6833e4e79064516820/]

image.png

[crayon-616b6833e4e85475135162/]

image.png

localhost:8080 にアクセス
image.png

完了！

by azure-recipe-user

HoloLens2 QRコード読み取りのやり方

開発環境

  • HoloLens2
  • Windows 10 pc
  • Unity 2019.4.1f1
  • MRTK ver2.5.3

やり方

[crayon-616b6833e5778387664629/]

※ QRCodeWatcher.Addedに追加できるデリゲートの型は void(object,QRCodeAddedEventArgs)のみ。

上のスクリプトをプロジェクトに追加し、適当なオブジェクトに追加。
textプロパティを設定してビルド、実機で実行。

by azure-recipe-user

【MRTK】 HoloLens2 Azure 音声認識サービス チュートリアル やりました

HoloLens2 Azure 音声認識サービス チュートリアル をやりました。

開発環境

  • HoloLens2
  • Windows 10 pc
  • Unity 2019.4.1f1
  • MRTK ver2.5.3

出来たもの

音声認識 & 文字起こし

音声コマンド

音声認識 & 翻訳

自然言語理解

Unityの音声認識は内部でWindowsの音声認識を使用するのでOSで設定された言語で認識します。(Macでは動作しません)

なので今回は日本語でこの部分を行いました。

やり方

1. LUISアプリの作成時のカルチャーを"Japanese"にする。

image.png

2. 学習データを日本語にする。

image.png

3. LunarcomIntentRecognizer.ProcessResults を書き換える。

[crayon-616b6833e602b439682552/]

これで日本語で進めることができます。

by azure-recipe-user

【MRTK】PC Holographic Remoting をやりました

HoloLens 2 PC Holographic Remoting のチュートリアル をやりました。

開発環境

  • HoloLens2
  • Windows 10 pc
  • Unity 2019.4.1f1

やり方

HoloLens 2 PC Holographic Remoting のチュートリアルの通りにやればできました。
引っかかる部分も特になかったです。

完成

3DモデルをPCで描画してHoloLens2に送っています。
PCで描画するので重いモデルでも描画することができます。
他にはビルドせずにUIやモデルをHoloLensで確かめられるのが便利ですね。

Holographic Remoting と 実機ビルドの違い

カメラとマイクはHoloLensではなくPCのものを使う。
PC上で動作させるため、ビルド時と動作が異なることがある。

by azure-recipe-user

【MRTK】MRTKInputFieldが使いづらい 解決案

はじめに

開発中のHoloLens2アプリのログイン周りの入力がやりづらかったので解決策を探りました。

環境

  • HoloLens2
  • Windows 10 pc
  • Unity 2019.4.1f1

仕様

アプリの仕様
E-mailとパスワードを半角英数字で入力してログインする仕様です。
HoloLens2標準キーボード+MRTK標準InputFieldを使用していました。

MRTK標準InputFieldの仕様
InputField ContentType は指定した形式以外の入力が確定したときにブロックします。
ContentType Email を指定したときも全角文字を入力することができてEnterを押したときに消えます。

問題点

Email、パスワードの半角英数字が入力しづらい状態です。
理由は下の問題があるためです。

  • 全角入力から始まる。
  • 全角の文字を入力すると二重に表示される。
  • 全角の文字を入力すると1文字ずつしか表示されないことがある。
  • HoloLens2を慣れていないユーザーから見ると半角文字と全角文字の区別が難しい。

対処法

対処法として以下の方法を考えました。

  • 入力文字を無理やり半角に変える。
  • 全角文字が入力されたときにユーザーに知らせる。
  • 半角英数字しか入力できないキーボードを使用する。
  • ログイン方法を変更する。

入力文字を無理やり半角に変える

やり方

[crayon-616b6833e695d559742741/]
[crayon-616b6833e6965152000089/]

上のコードをプロジェクトに追加して Validation を MRTKInputField にアタッチする。

デメリット

入力中の文字が二重に表示される、一文字しか表示されないなどの問題は解決できない。
全角のaなどの入力はひらがなに変換されてしまう。

全角文字が入力されたときにユーザーに知らせる

やり方

[crayon-616b6833e696a750176652/]

上のスクリプトをプロジェクトに追加して適当なオブジェクトにアタッチする。
Inspectorから表示先のテキストを ValidationMessage.Textプロパティに設定。
バリデーション対象の MRTKInputField の OnValueChanged に ValidationMessage.CheckTextを追加。

デメリット

扱いづらさを軽減することはできるが、解決はできない。

半角英数字しか入力できないキーボードを使用する

やり方

NonNativeKeyboardを使用する。

デメリット

変換機能を使用することができない。
キーボードを表示する場所等の調整が大変。

ログイン方法を変更する

PINやQRコード等を使用し、文字入力を使用せずにログインできるようにする。

デメリット

HoloLens2単体でのログインが困難。
バックエンドにも変更が必要。
セキュリティ面に注意する必要がある。

結論

現在開発中のアプリでは NonNativeKeyboardを使用したログインと PIN認証を選択できるようにすることにしました。
理由はHoloLens2単体でのログインとストレスのないログインを両方サポートしたかったからです。
まだログイン周りの入力方法は検討を続ける予定です。
他の方法ご存じの方いらっしゃいましたらご教授いただけると幸いです。

by azure-recipe-user

【C#】文字列の全角文字を半角文字に変換

ソースコード

[crayon-616b6833e726c026296695/]

説明

半角英数字は文字コードの差を使用して変換、キーボードの日本語記号はDictionaryで変換しています。

by azure-recipe-user

【MRTK】NonNativeKeyboard の使い方

環境

  • HoloLens2
  • Windows 10 pc
  • Unity 2019.4.1f1
  • Mixed Reality Toolkit ver2.5.3

NonNativeKeyboard を使う上での注意点

日本語入力はできません。
InputFieldを使用すると標準のキーボードと二重に表示されてしまうのでInputFieldっぽいものを自作する必要があります。

ソースコード

[crayon-616b6833e7af5401051222/]

使い方

  1. Hierarchy に NonNativekeyboard を追加する。
    (project > Mixed Reality Toolkit Foundation > SDK > Experimental > NonNativeKeyboard > prefabs)
  2. NonNativeKeyboard に "NonNativeKeyboard" タグをつける。
  3. NonNativeKeyboard子要素の InputField の Interactable をオフにする。
    (Hierarchy > NonNativeKeyboard > keyboard_Background > search > InputField)
  4. InputField の Disabled Color を 255,255,255,255 に設定
  5. Hierarchy に UI > image を追加する。
  6. Source Image を InputFieldBackground に設定
  7. Imageの子要素として UI >Text-TextMeshPro を追加する。
  8. Image に上のスクリプト(NanNativeInputField)をアタッチ。
  9. Inspector から Text 及び NoNnativeKeyboard プロパティを設定。

説明

ポインターで操作できるように IPointerDownHandler インターフェイスを実装しています。

各種イベント
keyboard.OnClosed 閉じるボタンを押したときに呼び出される。
keyboard.OnTextSubmitted Enterey を押したときに呼び出される。
keyboard.OnTextUpdated テキストが更新されたときに呼び出される。

公式ドキュメント : NonNativeKeybaord

by azure-recipe-user

Azure Spatial Anchors クイックスタート をやった

Azure Sptial Anchors クイックスタートをやりました。
※ 描画がうまくいきませんでした。
対処法ご存知の方いらっしゃればご共有いただけると助かります。

開発環境

  • HoloLens2
  • Windows 10 pc
  • Unity 2019.4.1f1

クイックスタート

Azureポータルにアクセス
image.png
リソースの作成をクリック
Spatial Anchors で検索 > クリック
image.png
作成
image.png
各項目を埋めて作成をクリック
image.png
作成が完了すると下の画面になるのでリソースに移動をクリック
image.png
アカウントドメインとアカウントIDをコピーしてメモ
https___qiita-image-store.s3.ap-northeast-1.amazonaws.com_0_1264045_74076e26-2b03-9eb0-fed9-ef2f2a16d006.png
アクセスキーに移動し主キーをコピーしてメモ
image.png
azure-spatial-anchors-sampleを開いてver2.8.1をダウンロード
image.png

ダウンロードが完了したら解凍して Unity Hubを起動
リストに追加をクリック azure-spatial-anchors-samples-2.8.1 > Unity を選択
image.png

azure-spatial-anchors-samples-2.8.1 を起動
File > BuildSettings を開く
image.png
Universal Windows Platform を選択
TargetDevice を HoloLens に変更
SwitchPlatform をクリック
完了したら BuildSettings を閉じる
image.png
Project > Assets > Resources > spatialAnchorConfig
Inspector から先ほどメモした AzureSpatialAnchors アカウント情報を入力
image.png

動作確認

File > BuildSettings を開いて
Buildをクリック > 適切なフォルダーを選択してビルド
image.png

Configure Azure Spatial Anchors Session
Start Azure Spatial Anchors Session
Tap a surface to add the Local Anchor.
Save Local Anchor to cloud
Saving local Anchor to cloud...
Stop Azure Spatial Anchors Session
Create Azure Spatial Anchors Session for query
Start Azure Spatial Anchors Session for query
Look for Anchor
Looking for Anchor...
Delete Anchor
Stop Azure Spatial Anchors Session for query
Restart demo

上の順番にデモが進んでいきます。

by azure-recipe-user