2020/07/04 Power Platform Day Summer '20 Track2-1

1. Power Platform Day Summer ‘20
Track2-1
MRアプリを Power Apps で爆速開発
～Low Code で 仮想世界へGo！～

2. MRアプリを Power Apps で爆速開発
～Low Code で 仮想世界へGo！～
Power Platform Day Summer ’20 Track2-1
#JPPUGSummer20 #JPPUG #PowerPlatform
山田 晃央（Yamada Teruchika）
株式会社アイシーソフト [www.icsoft.jp]
シニアテクニカルマネージャー
@yamad365
https://qiita.com/yamad365

3. おしながき
1. 自己紹介
2. MR 機能を試すための準備
3. MR in Power Apps 4機能 概要
4. Measure in MR（MRで測定）
わかりにくい説を払拭したい件
5. まとめ

4. 今日のゴール
Power Apps の MR機能で遊べるようになる
Power Apps の MR機能について、
使いどころを“ある程度”イメージ可能になる

5. 自己紹介
“Yamad365” で 検索いただくと いろいろ情報が出てくるハズ・・・

6. 自己紹介
山田 晃央
（やまだ てるちか）
#愛知 #名古屋弁 #三河弁
#M365 #O365 #MSクラウド
#PowerPlatformスキー
#PowerAppダイスキー
株式会社アイシーソフト
シニアテクニカルマネジャー
http://www.icsoft.jp/
yamad365
https://qiita.com/yamad365

7. 通称「RESCUE SQUAD／火消魂 のヒト」です
勉強会でこんな服装を見かけたら、おおむね当方です。

8. 所属企業が
こんなコトやってます
弊社ソリューションのCMにお付き合い願いますm(_ _)m

9. 顔認証 出退勤システム Taskal Time-Card
タイムカード をｶﾞﾁｬﾝ…。
ICカード でﾋﾟｯ…。
もう、やめませんか？
顔認証勤怠打刻システム
https://ttc.cloud

10. 名古屋・中部地区
関連コミュニティ勉強会
お近くの方は是非ご登録くださいませ～

11. https://paandflow.connpass.com
https://jpsps-ngy.connpass.com
名古屋・中部地区のコミュニティあり〼
ハッシュタグ #JPPUG758
ハッシュタグ #JPSPSNGY

12. 前置きは
ここまで
だ！！

13. Mixed Reality 機能の公開発表
Microsoft Business Applications Summit 2020 で プレビュー提供が公開されました！

14. MBAS 2020 でプレビュー公開が発表！

15. おことわり
2020年6月末 時点の情報となります
上記の時点で提供されている
Mixed Reality 機能はプレビューです
今後のVerUpで、
機能の変更など可能性があります

16. MR機能を試すための準備
イベント開催現在、プレビュー機能なので事前準備が必要です。

17. 公式情報
 Add mixed reality components to your canvas app (Preview)
https://docs.microsoft.com/en-us/powerapps/maker/canvas-apps/mixed-reality-overview
 Mixed Reality コンポーネントをキャンバス アプリに追加する
(プレビュー)
https://docs.microsoft.com/ja-jp/powerapps/maker/canvas-apps/mixed-reality-overview
プレビュー機能の使い方に加えて、
各コントロールの公式情報へのリンクもあります。
お試しになる方は、一読することをおススメします。
※2020年5月には無かった日本語ページも提供されてました！

18. MR機能を試すための準備
アプリ作成画面 →「ファイル」→「設定」
→ [詳細設定] → [Mixed Reality 機能] をオン

19. 挿入メニューにMR機能が追加される！
 プレビュー機能 オフ状態
 プレビュー機能 オン状態

20. 追加されるコントロールは４種類
 「メディア」にも１つ追加されます。

21. MR系コントロールの名称と概要
英語表記 日本語表記 概要
View in 3D 3D で表示
3D画像（.glb）をアプリ上へ表示する。
※イメージコントロールの3D版みたいなモノ
View in MR MR で表示 指定した3D画像（.glb）を MR で表示する。
View shape in MR MR で図形を表示 指定したサイズの四角形を MR で表示する。
Measure in MR MR で測定 MR上で測定（幅ｘ奥行きｘ高さ）する。

22. MR in Power Apps 4機能 概要
4機能、すべてガッとザックリ説明します。

23. View in 3D ＆ View in MR
View in 3D
View in MR
View in 3D ＝ 3D画像(.glb)をアプリ上で表示する。
View in MR ＝ 3D画像(.glb)をMRで表示する。

24. View in 3D／3D で表示
 3D画像を Apps のアプリ上で表示するコントロール
 拡張子 .glb ファイルのみ対応(調査した限りで)
 単純に3D画像を指定してもダメです。
説明が面倒 時間の都合で詳細は Qiita 参照で！
https://qiita.com/yamad365/items/61a327bbd52c133e9233
https://qiita.com/yamad365/items/b4ca0d8a7877de183efe
https://qiita.com/yamad365/items/2621b4f122b0bfa286a4
 公式はこちら
https://docs.microsoft.com/en-us/powerapps/maker/canvas-apps/mixed-reality-component-view-3d

25. View in MR／MR で表示
 3D画像を Apps 経由で MR 表示する
 拡張子 .glb ファイルのみ対応(調査した限りで)
 基本的には「View in 3D」で表示できる3D画像を、
Apps 経由で スマホの MR へ表示させる
 ARCore 対応デバイスが必須！(PCブラウザーで動かない)
 公式はこちら
https://docs.microsoft.com/en-us/powerapps/maker/canvas-apps/mixed-reality-component-view-mr

26. 3D画像を表示させる（ODfB利用の場合）
.glb
ファイル.glb
ファイル.glb
ファイル.glb
ファイル
.glb ファイル
を
テーブルに記載
Apps からは、
ODfB コネクター
で
該当テーブルを指定
列名 説明
Name
3Dイメージの名称。
識別以外では利用しない。
3DModel [image]
.glb ファイル名を含むパス。
ExcelファイルからのURL形式
の相対パスであること。
階層構造
重要！

27. 朗報！SharePoint Online の添付ファイルに対応
タイトル ・・・ 添付ファイル
あああ ・・・ aaa.glb
いいい ・・・ bbb.glb
ううう ・・・ ccc.glb
Apps から、
SharePoint コネクター
で
3D表示が可能に！
添付ファイルに
.glb ファイルを
格納すると・・・
CDS 添付ファイルと同様に、SPOでも添付ファイルから3D表示可能に！！
残念ながら、
DocumentLibrary
は、
現状未対応

28. View shape in MR
View shape in MR
指定したサイズの四角形を MR で表示する。

29. View shape in MR／MR で図形を表示
 立方体を Apps 経由で MR 表示する
（以上！それだけの機能！）
 ARCore 対応デバイスが必須！(PCブラウザーで動かない)
 公式はこちら
https://docs.microsoft.com/en-us/powerapps/maker/canvas-apps/mixed-reality-component-view-mr

30. Measure in MR
Measure in MR
MR上で測定（幅ｘ奥行きｘ高さ）する。

31. Measure in MR／MR で測定
 幅、奥行き、高さをMR上で測定できる機能
 測定した値は、コントロール経由で、
Power Apps アプリ上で取得が可能
※取得は可能。Apps から与えるコトは不可…
 ARCore 対応デバイスが必須！(PCブラウザーで動かない)
 公式はこちら
https://docs.microsoft.com/en-us/powerapps/maker/canvas-apps/mixed-reality-component-measure-distance

32. ARCore is 何？
 ARCore overview（概要）
https://developers.google.com/ar/discover
 ARCore is Google’s platform for building augmented reality experiences.
Using different APIs, ARCore enables your phone to sense its environment,
understand the world and interact with information. Some of the APIs are
available across Android and iOS to enable shared AR experiences.
 ARCoreは、拡張現実体験を構築するためのGoogleのプラットフォームです。
さまざまなAPIを使用して、ARCoreを使用することで、お使いの携帯電話
が環境を感知し、世界を理解し、情報と対話できるようになります。一部
のAPIはAndroidとiOSで利用可能で、AR体験を共有できるようになってい
ます。
 ARCore supported devices（対応機種）
https://developers.google.com/ar/discover/supported-devices

33. MR in Power Apps ～Power Apps で仮想現実～
https://www.slideshare.net/TeruchikaYamada/mr-in-power-apps-power-apps
こちらのスライドでも、
全４種類ざっくりと説明しています。

34. ココからは、
おそらくイチバン
″わかりづらい″であろう
「MRで測定」
を解説していきます！

35. MR系コントロールの名称と概要
英語表記 日本語表記 概要
View in 3D 3D で表示
3D画像（.glb）をアプリ上へ表示する。
※イメージコントロールの3D版みたいなモノ
View in MR MR で表示 指定した3D画像（.glb）を MR で表示する。
View shape in MR MR で図形を表示 指定したサイズの四角形を MR で表示する。
Measure in MR MR で測定 MR上で測定（幅ｘ奥行きｘ高さ）する。
こいつ！

36. Measure in MR（MRで測定）深掘り
あるいは、 Measure in MR わかりにくい説を払拭したい件。

37. とつぜん
ですが

38. みなさん、ご存じでした？
2020年5月20日から東海道線・山陽・九州新幹線で
「特大荷物は要予約」になったコトを・・・
3辺 合計が 160 ～ 250㎝ の場合
特別な予約が必要になりました。
■JRおでかけネット より
https://www.jr-odekake.net/railroad/service/baggage/

39. キャリーバッグの
サイズなんて
覚えてないつーの。

40. ワシが
おるじゃろ？

41. 計測するアプリ、
作ればえーがや
(名古屋弁

42. 「MR で測定」を利用して計測（iOS デモ）
実際に作ってみた🛠
動作環境：iPhone Xs 13.5.1
デモは YouTube でご確認ください。
https://youtu.be/RwXCT6cpga4

43. どれぐらい
正確に測定できるのか
気になる・・・

44. 幅と奥行き
① ＭＲで測定
②奥行き 約22～23㎝
③幅 約33～34㎝
34cm
36cm
23cm
24cm

45. 高さ
① ＭＲで測定 ②高さ 約53～55㎝
51cm

46. 近しい値ですね。
ただ、測定の仕方に依存。
状況によって、かなり誤差でるハズ
→ とはいえ「使えないレベル」では無い印象

47. 近似値とは言え、
過信は禁物だと思います。
メジャー(物理)で測定でも誤差でますよね？
つまり、アプリも工夫が必要。

48. Measure in MR（MRで測定）
主要プロパティ
2020年6月末時点

49. Measure in MR（MRで測定）主要プロパティ
測定単位 概要
Centimeters
MR測定したい単位
Feet
Inches
Meters
測定の種類 概要
Area 平面を測定（幅ｘ奥行き）
AreaAndVolume 幅ｘ奥行きｘ高さ を測定
Distance 距離を測定
Volume 幅ｘ奥行きｘ高さ を測定
'Microsoft.MeasureInMR.MeasurementType'
'Microsoft.MeasureInMR.Units'
ボタン押下で、
カメラが起動して
MRが可能になる
※スマホのみ

50. Area
AreaAndVolume
Distance
Volume

51. 「AreaAndVolume」
と
「 Volume」
一緒なんじゃね？

52. 調べた限り「同じ」(;^ω^)
まだプレビューですから…
今後のVerUpに期待で。

53. お待ちかねの
撮影した写真
の取得方法。

54. Measure in MR（MRで測定）主要プロパティ
.Photos
→ MR で撮影した画像を取得可能
MR画面上で、
″カメラアイコン″
タップで
Photos に画像が蓄積
Gallery で
Photos 指定
ThisItem.ImageURI

55. お待ちかねの
測定結果の値
の取得方法。

56. Measure in MR（MRで測定）主要プロパティ
.MeasurementsDetailed
.Measurements
→ MR 測定結果が
テーブルで格納されてる
つまり、ココから測定値を入手する！！

57. ちょっと、
よくわからんですよね

58. 解析＆学習用 Apps アプリ 作ってみた

59.  アプリのダウンロードはこちら
https://github.com/Yamad365/PowerApps/tree/master/MeasureInMRSample
 アプリのインポート方法はこちら
https://qiita.com/yamad365/items/44c7e80c25ada2d37fb1

60. 解析＆学習用アプリ 動作イメージ DEMO
※提供したアプリと画面が若干異なる場合があります。
デモは YouTube でご確認ください。
https://youtu.be/lgohr9GPLOg

61. 解析＆学習用アプリ 概要その1（左側）
1 2
3
4
5
① Dropdown1
Items
[
'Microsoft.MeasureInMR.MeasurementType'.Area
,'Microsoft.MeasureInMR.MeasurementType'.AreaAndVolume
,'Microsoft.MeasureInMR.MeasurementType'.Distance
,'Microsoft.MeasureInMR.MeasurementType'.Volume
]
② MRで測定（プレビュー）
測定単位(Unit)
Centimeters
（‘Microsoft.MeasureInMR.Units’.MSR_Centimeters）
OnChange
UpdateContext(
{wkJson:JSON(MeasureInMR.MeasurementsDetailed,
JSONFormat.IndentFour)});
UpdateContext(
{wkJson2:JSON(MeasureInMR.Measurements,
JSONFormat.IndentFour)});
③ データテーブル
Items MeasureInMR.MeasurementsDetailed
④ データテーブル
Items ③データテーブル.Selected.Segments（↑で選ばれたヤツの詳細)
⑤ データテーブル
Items MeasureInMR.Measurements

62. 解析＆学習用アプリ 概要その2（右側）
⑥ ギャラリー（横方向）
Items MeasureInMR.Photos
内容
イメージコントロール
Image ThisItem.ImageURI
⑦ ボタン
OnChange 前ページ「② MRで測定（プレビュー）」と同じ処理
⑧ ラベル
Text wkJson変数（″MeasurementsDetailed″ の JSON）
⑨ ラベル
Text wkJson変数（″Measurements″ の JSON）
6
7
8
9

63. ようするに、だ。
ラベルに説明書いときました。

64. きっと、、、
まだ、
よくわからんですよね

65. 実際に測ってみた
Distance（距離）

66. Distance（距離）
1
2
3
MeasurementsDetailed
へ
測定した順番で値が蓄積
・Unit → 測定単位
・PathLength → 測定値(長さ)
・Height → 高さ(※)
※Distanceの場合は高さは常に 0

67. Distance（距離）
1
2
3
Segments は
MeasurementsDetailed配下。
X、Y、Z 座標、および「長さ」
親・子 関係で″詳細″のイメージ

68. Distance（距離）
1
2
3
Measurements
・Unit → 測定単位
・PathLength → 測定値(長さ)
※″高さ″が無いテーブル

69. MeasurementsDetailed JSONだとわかりやすい？
[
{
"Height": 0,
"PathLength": 20,
"Segments": [
{
"DirectionX": -0.9696092009544373,
"DirectionY": 0,
"DirectionZ": -0.2446591556072235,
"Length": 20
}
],
"Unit": "centimeters"
},
～Pathlength 15 中略～,
{
"Height": 0,
"PathLength": 13,
"Segments": [
{
"DirectionX": -0.9749236106872559,
"DirectionY": 4.7240979483831325e-7,
"DirectionZ": 0.2225394994020462,
"Length": 13
}
],
"Unit": "centimeters"
}
]MeasurementsDetailed の行が、
測定した値ぶん繰り返しになってる

70. 実際に測ってみた
AreaAndVolume
（幅ｘ奥行きｘ高さ）
※ 2020年7月時点で Distance 以外は同じデータ構造のため、残りはまとめて説明します。

71. AreaAndVolume（幅ｘ奥行きｘ高さ）
1
MeasurementsDetailed
へ
測定した値が蓄積
※ Distance と異なる！！
・Unit → 測定単位
・PathLength → 底面の辺 合計(！)
・Height → 高さ

72. AreaAndVolume（幅ｘ奥行きｘ高さ）
1
Segments は
MeasurementsDetailed配下。
X、Y、Z 座標、および「長さ」
底面の辺、各々の値になる！！

73. AreaAndVolume（幅ｘ奥行きｘ高さ）
1
23
Measurements
・Unit → 測定単位
・PathLength → 測定値(長さ)
※″高さ″が無いテーブル

74. MeasurementsDetailed JSONだとわかりやすい？
[
{
"Height": 21.976840496063232,
"PathLength": 47,
"Segments": [
{
"DirectionX": -0.9831382036209106,
"DirectionY": -3.2888246437323687e-7,
"DirectionZ": 0.18286406993865967,
"Length": 19
},
{
"DirectionX": 0.6831514239311218,
"DirectionY": 0,
"DirectionZ": -0.7302767634391785,
"Length": 17
},
{
"DirectionX": 0.5975250601768494,
"DirectionY": 5.457778229356336e-7,
"DirectionZ": 0.8018502593040466,
"Length": 11
}
],
"Unit": "centimeters"
}
]
構造は「Distance」と同じ。
測定値の格納場所が異なる。

75. テーブル構造のデータ ｎ番目を取得する方法
テーブルだけでなく、配列でも一緒の方法で取得可能ですヨ。

76. テーブル構造のデータｎ番目を取得する方法
 FirstN、Last 関数 を利用
wkAry
例：上記の配列から3番目が欲しい場合
Last(FirstN(wkAry,3)).Value
順番 １ ２ ３ ４
内容 あ か さ た
【#PowerApps Tip‘s】配列のｎ番目を取得する
https://qiita.com/yamad365/items/11e9cece46df161138a0
※「Power Apps ｎ番目」で検索してくださいw

77. 2) 範囲の最後（＝Last）が取得したい″ｎ番目″
Last(FirstN(wkAry,3)).Value
1) FirstN(対象, 取得したいｎ番目)) で範囲を限定
Last(FirstN(wkAry,3)).Value
順番 １ ２ ３ ４
内容 あ か さ た
順番 １ ２ ３
内容 あ か さ

78. 【#PowerApps Tip‘s】配列のｎ番目を取得する
https://qiita.com/yamad365/items/11e9cece46df161138a0
※「Power Apps ｎ番目」で検索してくださいw
MeasurementsDetailed
Measurements
から「ｎ番目」を取得
これで、値を利用可能

79. まとめ

80. https://www.microsoft.com/ja-jp/p/holoLens-2/91pnzzznzwcp/?activetab=pivot%3aoverviewtab
例えば、Hololens 2

81. 確かに『高機能』
ただし、お値段もする。
開発するのも知識が必要。

82. 手元のスマホで、
チョッとした測定したい。
『MR ＋ Apps』
で、十分なのでは？

83. JSONとか。
テーブルのｎ番目とか。
わからんちん・・・。

84. Power Apps は 市民開発者。
Automate へ JSON を渡す。
Automate は プロに任せる。
選択肢ありませんか？

85. まず「作る」「試す」。
話はソレからだ。

86. 貴方のアイディアと、
ほんの小さなアプリで、
業務改善される！(かもしれない）

87. 皆さんへのお願い
“参加した”コトで満足しちゃダメですよ。

88. コミュニティ勉強会へ参加した後は・・・
1. 今日学んだコトを実際に試してみましょう！
2. 分からないコトがあったら、
JPPUGフォーラムで質問しましょう！
3. Twitter や Blog、何でもOKです。
自分から情報発信をしてみましょう！
4. LTからで結構です。
コミュニティ勉強会で登壇してみましょう！

89. 問題なのは・・・
「知って」
「わかって」
「やらないコト」

90. 素晴らしい
Power Platform Life を！

91. See you next
Japan Power Platform User Group