はじめまして、パーソルプロセス＆テクノロジー（以下、パーソルP＆T）エンタープライズソリューション部の上島です。

この記事では、「Scaniverse」と「PowerApps」を使い３Dモデルを表示させた会議室の予約アプリを作成したので紹介させてください。

開発の工程もできる限り詳細に書いたので、下記に当てはまる方は是非ご覧頂ければ嬉しいです。

• プログラミングの経験はないけどアプリを作ってみたい！という方

• プロダクトの開発の流れをざっくり知りたい方

• PowerAppsを活用したアプリ開発に興味がある方

• Scaniverseが気になっている方

自己紹介

１．Scaniverseってなに？

Scaniverseはスマホで簡単に3Dモデルを生成できるiOS専用アプリです。

iOSのアプリダウンロード先はこちら

対応するiPhoneやiPadでアプリを使って撮影すると、サクッと３Dモデルを構築することができます。百聞は一見に如かず！僕が週末に撮り溜めたコレクションを紹介します。

① 千葉県館山市へキャンプしに行きました。mont-bellのテントはとても小さいので30Lリュックでも余裕で一泊できます。

② コメダ珈琲の味噌カツサンドをたべました。ボリュームがあっておいしかったです。

③ 忘年会でブリしゃぶを食べました。おいしかったです。

いかがですか？

・場所を選ばず
・手軽に
・無料で
・特別な機材無しに
・高精度に
・3Dモデルを作成できる
というのがScaniverseの良いところです。
写真や動画だけでなはない記録の残し方が増えると、少し街へ出かけるにも楽しみが増えてワクワクします。

「この楽しさを身近な人と共有したい。何ならもっと良い楽しみ方や、精度の高い3Dモデルの撮影方法を教えて欲しい。」そんな一心で、 (半ば無理矢理)活用アイデアを考えてみて記事にしてみよう、と思った次第です。

２．3Dモデルのユースケース

3Dモデルの利点は実際には触れられなくても、立体的に形や質感、オブジェクトの配置を理解できることです。

私たちパーソルP&Tでは、コロナ禍が少し落ち着いた現在でも引き続きテレワークを推進しています。
感染症対策に加え、通勤時間が短縮できて時間を有用に使える利点がある一方、オフィスにいない時間が増えた今、私は下記のような課題を感じています。同じようにテレワークされている皆様にも共感いただけるのではないでしょうか。

•  自社の会議室を長らく使っていない

• 自社の会議室のレイアウトを知らない・忘れてしまった

• ある日突然上司に「5人くらいで使える、ホワイトボード・モニター付きの会議室を予約しておいて」なんて言われるとすごく困る

上記のような課題を解決したい場合、皆さんはこう考える筈です。

ということで、以下の図のようなアプリを作成していきます。

アプリの作成は私も業務で使用しているPowerAppsを使用します。まずは、Power PlatformとPowerAppsの紹介をさせてください。

３．Power Platform/PowerAppsとは

Power PlatformとPowerAppsは、マイクロソフトが提供する業務アプリケーション開発プラットフォームです。

Power Platformは、PowerApps、Power BI、Power Automate（旧称:Microsoft Flow）の3つの主要なサービスから構成されています。これらのサービスを組み合わせて使用することで、業務プロセスの自動化やデータ分析、業務アプリケーションの作成などを行うことができます。

中でもPowerAppsは、業務アプリケーションを簡単に作成できるツールです。プログラマーでなくてもドラッグアンドドロップで画面や機能を構築し、データの入出力やデータベースとの連携も簡単に行えます。また、スマートフォンやタブレットといったモバイルデバイスでも動作するため、フィールドでの作業や営業活動などで利用することができます。

PowerAppsを利用することで、現場の課題に即したカスタマイズされた業務アプリケーションを短期間で作成することができ、業務プロセスの効率化や生産性の向上につながります。ノーコード/ローコードでアプリケーションを作成できる為、素早くソリューションのイメージを形にできます。

４．いざ、会議室予約アプリの作成

アプリの作成は次のようにおこないました。
　 ①     Scaniverseを使って会議室をスキャンする
　 ②     SharePoint Listに撮影した3Dモデルを格納
　 ③     PowerAppsで会議室予約アプリを作成

①　Scaniverseを使って会議室をスキャンする

まずは、会議室を撮影してみます。

１）アプリ内の設定で、スキャンする対象のサイズを選択
今回は部屋なので『Large Object/Area』を選択しました。

２）スキャンを開始
スキャンできていないところが縞模様で可視化されますので、それが消えるように部屋全体をスキャンしていきます。

３）3Dモデルをレンダリングする
モデルを生成するモードはメッシュ（３Dモデルの表面のこと）の細かさが異なる３つの設定（2つのLiDARとフォトグラメトリ）から選択できます。
今回は『Area』を選択しました。

※撮影中は少し不審な動きになるので、人目をはばかられることをお勧めします。

次は、撮影したモデルを掲載するアプリを作成していきます。

②　SharePoint Listに撮影した3Dモデルを格納

まず、PowerAppsで使用するデータソースを準備していきます。
PowerAppsではSharePoint List、Excel OnlineやDataverse、SQL Serverなど幅広いデータソースと接続が可能です。（データの保存先のことだと思ってください。どの列に何のデータを保存するかを設定し、一行ごとにデータを格納するイメージです。エクセルを想像いただくと良いかと思います。）

今回は、なるべく手短に作成でき、コストもかからないSharePoint Listを使用しました。

１）SharePoint OnlineにListを作成する
今回は、列の設定を以下のように設定しました。(そのほか、表示されていませんが、添付ファイル列が存在します。)

デフォルトから追加したのは『アドレス』列のみです。
パーソルP &TではOutlookのカレンダーで会議室の予約状況を管理している為、「ユーザまたはグループ」の列を追加しました。

２）データを格納する
作成したListのアイテムに、アプリに表示したい内容を挿れていきます。
一部屋分のアイテムに「部屋名」、「サムネイル画像」、「申請先アドレス」と肝心の3Dモデルを登録しました。
尚、3DモデルはScaniverseでglb形式に変換しています。

これを会議室の数だけ登録できれば、いよいよ画面の作成です。

③　アプリを作成する

１）PowerAppsのキャンバスアプリを新規作成し、先ほど作成したListと接続した『ギャラリー』を追加する

２）『3Dオブジェクト』を追加する

３）『ギャラリー』で選択した会議室のレイアウトをみたいので、3DオブジェクトのSourceに以下を設定する

*３Dデータの添付ファイルは配列で格納されているので、Last関数かFirst　関数で一意にする（一つだけ抽出する）よう記載する必要があることに注意してください。

４）会議予約する為に必要な事項を入力するフォームを用意し、OnSelect（フォームが送信された時の動作を設定する場所）にTeamsの会議依頼ページを立ち上げるURLスキーム（選択内容を反映するための記載）を設定したボタンを取り付ける。

URLスキームの中で『ギャラリー』で選択したアイテムの列とフォームを参照しています。関数を開くと参照している箇所を色で表示してくれるので凄く見やすいです。

※PowerAppsはOutlookとのコネクタもあり、会議室の予約状況等をアプリに表示することも可能ですが、紙面の都合上今回は割愛します。

これにて、利用者が部屋のレイアウトを実際に見て、具体的な会議の様子を想像しながら会議室を予約できるようになりました。

５．おわりに

いかがでしたか？
ScaniverseとPowerAppsを活用し、プログラミングせずに3Dモデルを使ったアプリを作成できました。

先の説明のとおり、PowerAppsで開発したアプリケーションはスマートフォンやタブレットといったモバイルデバイスでも動作するため、Scaniverseで生成した3Dモデルを即座にアプリへ掲載し、コミュニティに共有するツールを実装できます。

また、PowerAppsはMR(Mixed Reality)のパーツも用意されている為、カメラでとらえた現実の風景に３Dモデルを投影するなどの拡張性も兼ね備えているので、フィールドワークが中心の教育現場や工業分野での活躍が期待できます。

PowerPlatform についてもっと知りたい方には、私の同期の西村さんが執筆した、以下の記事もおすすめです。

この記事を読んでくださった皆さんとも、アイデアを交流し、共にかたちに出来る日が来れば嬉しいです。ここまで読んでいただき、ありがとうございました。

弊社のTechコミュニティにご登録頂いた方には、今後もこのようなエンジニアブログの情報や、イベント開催情報をいち早くお届けいたします。

SNSをフォローする感覚でお気軽にご参加ください。