de:code2018

実録！HoloLens×AI×IoTアプリが開発できるまでの挫折と成功

株式会社ネクストスケープ酒井 辰也

AC16

本情報の内容 (添付文書、リンク先などを含む) は、de:code 2018 開催日 (2018年5月22~23日) 時点のものであり、予告なく変更される場合があります

自己紹介

酒井 辰也 (@saka_it)株式会社ネクストスケープ

クラウドインテグレーション事業本部コンサルティング&テクノロジー部

• 元々、業務系システム開発をやってました

• 2015/07～ネクストスケープ入社• Web系システムをメインにやっていました

• 2017/05～ xRアプリ開発をやってます• HoloLensとARアプリ開発をやっています

• Azure もくもく会@新宿 開催しています• 次回は6月12日（火）19:00～

会社紹介

Microsoft Azureを使ったシステム開発に自信あります

動画・音楽配信のソリューションよくやってます

ECサイト、DAM、デジタルマーケティングも多いです

会社紹介

リアルサイトビューアー HoloLens巡視ソリューション

アジェンダ

• HoloLens アプリ始めました• プロジェクションマッピングアプリ

• Microsoft Mixed Reality パートナーへの道• ホログラフィック・マンションビューア

•理想のアプリ開発を目指して• 汎用マンションビューアと巡視ソリューション

• 1年（＋α）を振り返って• HoloLens×AI×IoT モダンワークプレイスアプリ

•まとめ

ここから本編・・の前に

HoloLens アプリ始めましたプロジェクションマッピングアプリ

Microsoft HoloLens とは

• Microsoft が販売している MR デバイス• 現実と仮想を混合して表示することができます

•自己完結型なので単体で動作• 別の PC が不要です

• バッテリー搭載でコードレスで動作します

•高度な空間認識能力• 現実空間へホログラフィックを固定させることができます

• 移動してもホログラフィックは同じ位置にあり続けます

• 複数人で体験を共有することも可能です

そもそもの始まり

• 2017年1月 HoloLens が会社にやってくる• 社内にUnity経験者はほぼ無し

• 2017年2月 Unity 研修

• 2017年3月 最初のアプリを作る

• 2017年4月 最初の案件が動き出す

• 2017年5月 de:code 2017 で発表

このとき私はSitecoreをやってました

（Web CMS ツール）

最初のアプリケーション

•西新宿の高層ビルでプロジェクションマッピングを行うアプリを試作

•意外と屋外でも使えることがわかる

最初のアプリケーション

最初のアプリケーション

•西新宿の高層ビルでプロジェクションマッピングを行うアプリを試作

•意外と屋外でも使えることがわかる

•この時の位置合わせ→手動で頑張る• キーボードで位置合わせをする

• 位置合わせ後は固定される

HoloLens アプリ開発を始める

• 2017年5月 HoloLens アプリ開発担当を拝命• de:code 直前に HoloLens アプリの引継ぎを依頼される

• なお、初回リリースまでの期間は3週間弱

• この時点でUnity経験0

• 3D CGも学生の時にちょっとやっただけ

•さらにde:code（2017）中に Microsoft 本社行が決定• MRPP の研修のため

• 出発までは1か月

• この時点でパスポートもなし

苦しんで覚える HoloLens アプリ開発

•エントリポイントはどこ？• スクリプトのどこから動作が始まるのかよくわからない

• 基本は MonoBehaviour の Awake,Start,Update から始まる

• Unity Editor 上では動くのにビルドに失敗する• Unity 上では .Net3.5 だけど、ビルドするときは UWP だから

• どれ使うのが正解かわからない IF ディレクティブ

• Holo Academy とネット上にある実装例が全く違う• Academy は Toolkit をあまり使わない実装

• 一般的な方法は Toolkit を使う

Unity わからんWeb アプリと似ているようでだいぶ違う

xRエンジニアへ

•今思う Unity の注意点• Unity の C# は C# であって C# でない• Scene や Hierarchy の構成は慎重に• UWP 独特の部分にも注意

•それでも、3週間でも作れるようになる Unity すごい

•偉大なる先人の方々の情報が役に立ちました• 日本は HoloLens アプリ開発最先端！

•サンプルやソースを追ったほうが早いことも• Unity 本体は一部コードが公開されています• Mixed Reality Toolkit（MRTK）も公式サンプルが豊富です

Microsoft Mixed Reality パートナーへの道ホログラフィック・マンションビューア

リアルサイトビューアー

HoloLens 越しに建物の完成イメージを

原寸大で表示

マンションビューアとは？

ホログラフィック外観ビューアー

マンションの外観模型をホログラム表示、

日照シミュレーション搭載

マンションビューアとは？

構成

•アプリの説明

HoloLens HoloLensHoloLens HoloLens

ネットワーク経由で操作を共有

PC/Tablet

熱との闘い

•晴天の屋外でHoloLens を使用中

•次々と Holo が動かなくなる•起動するとすぐ落ちる

•そもそも起動しない

•日陰にしばらく置くと復活

•曇りの日や日陰では起きない

熱暴走してる・・・

熱との闘い

• Holo クーラー１（冷えピタ）• 放熱能力を高める作戦

• 夏の直射日光に効果はなかった

• Holo クーラー２（クーラーボックス）• 予め冷やすことで温度上昇を抑える

• 急速冷却で復活までも早く

• 充電ができない

• トラッキングが飛ぶ

HoloLens は暑さに弱い※HoloLens は屋外の使用を想定していません

展示会に出してみよう

•展示会でもトラブル発生

•現地じゃないので MR 感がない• 会場では建物出すだけなので VR 的になる

• 模型を作ってみた

展示会に出してみよう

展示会に出してみよう

展示会に出してみよう

•展示会でもトラブル発生

•現地じゃないので MR 感がない• 会場では建物出すだけなので VR 的になる

• 模型を作ってみた

•ネットワーク混雑• 特に Tech 系のイベントでは無線 LAN が混む

• ネットワークを使わないという手もあり

• ネットワークが必要であれば• 5GHzを使う（HoloLens は2.4G、5G両対応）

• 完全にダメな時のバックアップ手段も用意する

展示シナリオは大切被せないと伝わらないことは多い

Microsoft Mixed Reality パートナー認定へ

• 2017年09月国内初認定

理想のアプリ開発を目指して汎用マンションビューアと巡視ソリューション

マンションビューアの汎用化へ

•他物件や他社様へ展開できるプラットフォームを開発• 建物オブジェクトを入れ替え可能に

• フロアや部屋数は当然異なる

• 機能も追加削除ができるようにする

•基本機能は踏襲

が

•実装上の問題から作り直しに・・・

初期バージョンの課題

①スクリプト間の連携がわかりずらい• 機能拡張を続けたため構成が複雑化

• 積み上げ式に拡張したため連携が見えずらい

•作った人しかわからない！• 途中で引き継いでるので、作った人も二人いる

②ロジックスクリプトがシーン内に分散している• 修正箇所が追いずらい

• 状態も分散している

•機能変更時の影響範囲がわからない！

UI管理スクリプト

ONボタン

ON/OFFトグルボタン

OFFボタン

UI管理スクリプト

状態共有マネージャー

オブジェクト状態管理スクリプトAndroidメニュー

HoloLensメニュー

表示オブジェクト

連携端末

初期バージョンの構成

UI管理スクリプト

ONボタン

ON/OFFトグルボタン

OFFボタン

UI管理スクリプト

状態共有マネージャー

オブジェクト状態管理スクリプトAndroidメニュー

HoloLensメニュー

表示オブジェクト

初期バージョンの課題①

連携端末

UI管理スクリプト

ONボタン

ON/OFFトグルボタン

OFFボタン

UI管理スクリプト

状態共有マネージャー

オブジェクト状態管理スクリプトAndroidメニュー

HoloLensメニュー

表示オブジェクト

連携端末

初期バージョンの課題①

UI管理スクリプト

ONボタン

ON/OFFトグルボタン

OFFボタン

UI管理スクリプト

状態共有マネージャー

オブジェクト状態管理スクリプトAndroidメニュー

HoloLensメニュー

表示オブジェクト

連携端末

初期バージョンの課題②

状態を4か所で管理している

MV(R)Pの採用

• Model－View－（Reactive） Presenter パターン• 下記の3つに分離する設計パターン

• Model：状態やロジックを保持する

• View：入出力を制御する

• Presenter：ModelとViewを結ぶ

• ModelとViewには依存関係を持たず、Presenterがそれぞれへの依存関係を保持する

• UniRx（ReactiveExtension）を使用することが前提

• M-P間、P-V間のメッセージをRxで流す

•つまり、UnityにおけるMVCやMVVMの実装

UI制御スクリプト

(View)

ONボタン

ON/OFFトグルボタン

OFFボタン

UI制御スクリプト

(View)

マネージャー(Model)

共通プレゼンター(Presenter)

Androidメニュー

HoloLensメニュー

連携端末

MV(R)Pを採用した構成

HoloLensプレゼンター(Presenter)

Androidプレゼンター(Presenter)

マネージャーオブジェクト

状態同期スクリプト

UI制御スクリプト

(View)

ONボタン

ON/OFFトグルボタン

OFFボタン

UI制御スクリプト

(View)

マネージャー(Model)

共通プレゼンター(Presenter)

Androidメニュー

HoloLensメニュー

連携端末

MV(R)Pを採用した構成

HoloLensプレゼンター(Presenter)

Androidプレゼンター(Presenter)

マネージャーオブジェクト

状態同期スクリプト

UI制御スクリプト

(View)

ONボタン

ON/OFFトグルボタン

OFFボタン

UI制御スクリプト

(View)

マネージャー(Model)

共通プレゼンター(Presenter)

Androidメニュー

HoloLensメニュー

連携端末

MV(R)Pを採用した構成

HoloLensプレゼンター(Presenter)

Androidプレゼンター(Presenter)

マネージャーオブジェクト

状態同期スクリプト

UI制御スクリプト

(View)

ONボタン

ON/OFFトグルボタン

OFFボタン

UI制御スクリプト

(View)

マネージャー(Model)

共通プレゼンター(Presenter)

Androidメニュー

HoloLensメニュー

連携端末

MV(R)Pを採用した構成

HoloLensプレゼンター(Presenter)

Androidプレゼンター(Presenter)

マネージャーオブジェクト

状態同期スクリプト

状態管理は1か所だけ

状態とUIは分離する基本的な考え方は Unity にも適用できます

巡視ソリューション

• HoloLens 上で IoT の計測情報を現実世界に合成

室内無線ゲートウェイRaspberry Pi Azure

HoloLens

システム管理者 インターネット

巡視ソリューション

巡視ソリューション 構成

HoloLens×スクラムアプリ開発

•お客様も巻き込んでスクラム方式での開発を採用• 実験的なプロジェクトだったこともあり、スクラムがマッチした

• スプリントレビューの段階でお客様に体験していただく

• 開発前• オフィスを想定• オフィス環境情報を表示

• 最終形• 発電所や工場を想定• センサー情報（温度計）を表示

28.3℃SC-101 22.4℃

SC-105

23.5℃SC-105

Room: W-204Average ℃: 20.4℃Sensor Status：

〇 〇 △ 〇

00:00 24:00

28.3℃SC-101 22.4℃

SC-105

23.5℃SC-105

Room: W-204Average ℃: 20.4℃

00:00 24:00

開発内容は柔軟にお客様も何ができるかはよくわかってません

展示会に出してみよう v2

•アプリをコンテンツ東京に出展

展示会に出してみよう v2

•現地を見た人からこんな意見が

HoloLens感がない•ブースが壁だけだったので MR 感が薄かった

• 造作の都合で小道具も CG で作ってた

•イメージ重視で HoloLens があまり目立たなかった

やっぱり現実部分は大切MR は現実＋仮想の混合です

1年（＋α）を振り返ってHoloLens×AI×IoT モダンワークプレイスアプリ

HoloLens×AI×IoT アプリへ

モダンワークプレイスアプリ

• HoloLens×AI×IoT のモダンワーク支援アプリ• コピー機などのオフィスIoT機器の状態を HoloLens 上で表示

• 機器のトラブルを AI との自然な対話で解決

• 現実を拡張した、これからのオフィスを体感

• HoloLensやIoT機器とのデータ交換にAzure IoTHub を使用

• AI エンジンとしてNTTコミュニケーションズ様の COTOHA を採用

HoloLens×AI×IoT アプリへ

現実部分も作りこんでいます

1年でここまでできた長くて短い道のりでした

新聞掲載やTV放送

日本経済新聞 2017年5月23日

Youtube 日本マイクロソフト株式会社 公式チャンネル

「Microsoft Mixed Reality Partners in Japan」よりテレビ朝日様「スーパーJチャンネル」 （2017年07月15日）で放送

メンバーも増えました

まとめ

• HoloLens アプリ開発のつらいところ• Unity わかるようでわからん

• C# であって C# でないスクリプト

• コーディングだけでも CG の知識は必須

• C# のアルゴリズムやクラス設計など考え方を流用できるところも

• 事件は現場で発生する• UI/UX から熱暴走まで、思いもよらぬことが発生します

• 現地チェックできるだけのスケジュールの余裕は必須

• 何ができるかはまだまだ未知数• お客様も何ができるかよく分かっていないことが多い

• 今後の HoloLens の拡張も見据えて考える

まとめ

• HoloLens アプリ開発のたのしいところ• Unity 楽しい

• 3D をぐりぐりして開発しているとデキるエンジニア感が増します

• Hot なコミュニティ• 日本のコミュニティの盛り上がりは世界トップクラス！

• 何ができるかは私たちが作る• やりたいことはどんどん提案していけることが多いです

• 分からないからこそ、新しいものを作っていける土壌があります

• 感動を身近で• HoloLens を被せてアプリを見せると隣で感動してもらえます

• まだ初めての人も多い！とにかく色んな人に被せましょう

de:code ブース出展情報

• de:code EXPO エリアに出展してます• スポンサーブース（EXPO Area 1）

• G03 株式会社ネクストスケープ

• HoloLens や Azure のソリューション動画を用意しております

• スタッフもおりますので、お気軽にご相談ください

• HoloLens ブース（EXPO Area 2）• 06 株式会社ネクストスケープ

AI×IoT で実現するモダンワークプレイス

• 本セッションで説明した HoloLens×AI×IoT アプリを体験できます

• 整理券配布方式ですので満員の際にはご容赦ください

ネクストスケープが主催するIT技術交流会NSStudy を開催します

• #NSStudy13 “HoloLens meets AI”• 開催日：6月13日（水） 19:00～

• 場所：POINT EDGE ShibuyaBASE（渋谷）

• 内容：HoloLens×AI×IoT アプリの仕組みについて、より詳しく紹介させていただきます詳細・エントリーはお手元のNSStudyご案内のQRコードまたは、connpass の「NSStudy」グループをご覧ください

ホロレンジャー募集

•ネクストスケープではxR エンジニア/プロデューサーを募集しています• 国内初の Microsoft Mixed Reality パートナー認定

• Microsoft MVP 3名在籍

• 充実のワーク環境• デュアルモニタ、フリードリンク、書籍購入補助制度など

• 海外・国内のカンファレンス参加も

•私たちと一緒にMixed Reality で新しい世界に飛び出しませんか？

•ご興味がある方は「ネクストスケープ」で検索

ありがとうございました！

お客様のビジョンに共感し、感動を実現します

© 2018 株式会社ネクストスケープ All rights reserved.

本コンテンツの著作権、および本コンテンツ中に出てくる商標権、団体名、ロゴ、製品、サービスなどはそれぞれ、各権利保有者に帰属します。

本情報の内容 (添付文書、リンク先などを含む) は、de:code 2018 開催日 (2018年5月22~23日) 時点のものであり、予告なく変更される場合があります