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-610647e0bd68d531635896/]
[crayon-610647e0bd696309636525/]

やり方

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

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

[crayon-610647e0bd699012957358/]

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

ユーザーをロールに追加

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

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

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

[crayon-610647e0bd69d041556370/]

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

image.png

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

追記

[crayon-610647e0bd6a1033920510/]

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


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-610647e0be10a818974038/]

image.png

[crayon-610647e0be111810203472/]

image.png

localhost:8080 にアクセス
image.png

完了!


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

開発環境

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

やり方

[crayon-610647e0be986158005705/]

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

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


【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-610647e0bf1a7198143428/]

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


【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上で動作させるため、ビルド時と動作が異なることがある。


【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-610647e0bfa13706570849/]
[crayon-610647e0bfa1a596281097/]

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

デメリット

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

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

やり方

[crayon-610647e0bfa1d147090868/]

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

デメリット

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

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

やり方

NonNativeKeyboardを使用する。

デメリット

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

ログイン方法を変更する

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

デメリット

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

結論

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


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

ソースコード

[crayon-610647e0c0273734300748/]

説明

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


【MRTK】NonNativeKeyboard の使い方

環境

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

NonNativeKeyboard を使う上での注意点

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

ソースコード

[crayon-610647e0c0a72287652616/]

使い方

  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


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

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


【MRTK】HoloLens2 空間オーディオのチュートリアルのやり方 その4

全部で4記事です。
【MRTK】HoloLens2 空間オーディオのチュートリアルのやり方 その1
【MRTK】HoloLens2 空間オーディオのチュートリアルのやり方 その2
【MRTK】HoloLens2 空間オーディオのチュートリアルのやり方 その3
【MRTK】HoloLens2 空間オーディオのチュートリアルのやり方 その4

前回
【MRTK】HoloLens2 空間オーディオのチュートリアルのやり方 その3

サウンドにリバーブ効果を追加

AudioMixerウィンドウを開く
Groups > Master の上で右クリック Add child group を選択
image.png

追加したグループの Addをクリック > SFX Reverb を選択
image.png
image.png
Inspector から SFX Reverb の設定を変更
DryLevel を最小
Room を 最大
image.png
Quad に RoomEffectSendLevelコンポーネントを追加
Hierarchy > Quad > AddComponent("RoomEffectSendLevel")
image.png
RoomEffectsendLevelプロパティを 約-30Dbに変更
image.png

Project からSpatializeOnOff を開いてコメントアウトを解除
image.png

Hierarchy > Quad を選択して Inspector > SpatializeOnOff を開く
RoomEffectGroup 、 MasterGroupプロパティに AudioMixer をセット
image.png

動作確認

File > Build Settings > Build
適切なフォルダを選択してビルド
image.png

音にリバーブ効果が追加されているか確認しましょう。
お疲れさまでした。