HoloLensプレゼン支援アプリ「Holoプレゼンター」の制作から展示まで その1 ~HoloLensハッカソン編~
ようやく一段落したので、ブログにかけますε-(´∀`; )
今年の2月にHoloLensハッカソンに参加し、その後いろいろあったことを書きます。
今回はハッカソンの時のことだけ書きます。「いろいろあったこと」については次の記事で書きます。
HoloLensって何??
まずHoloLensを知らない人のために、HoloLensが何か簡単に説明します。一言で言えばHoloLensはMicrosoftが開発した自己完結型ホログラフィックスコンピュータです。VRのHMDのように目の前にディスプレイのついたデバイスなのですが、このデバイス単体がコンピュータそのものでWindowsで動いています。また、VRではなくMR(Mixed Reality)であるため、現実の世界にバーチャルな物体があるように見え、現実物体とバーチャル物体を同時に見ることができます。よって歩き回りながら利用できます!さらに、現実の空間を3Dスキャンできるので、手のジェスチャーでバーチャルオブジェクトを操作したりもできます。
こちらの動画を見ていただけるとそのすごさがわかると思います(^o^)
もっと知りたい方はMicrosoftのページをご覧ください。
HoloLensハッカソン1日目
「HoloLensすげー!」、「開発してみたい!!」と思っている矢先にHoloLensハッカソンが開催されるということを耳にしました。しかも学生は参加無料!ハッカソンは初めてというか、IT系の勉強会も行ったことなかったですが、思い切って参加することにしました。
そして当日、めちゃくちゃ緊張しながら会場へ
まずはアイデア出し。テーブルごとに思い思いのアイデアを出し合い付箋に書いていく方式でした。
その後、出たアイデアの中からそれぞれが作りたいものを選んでそれがチームに!(すごく斬新!)
チームに分かれてアイデア出し
私は「プレゼンテーションの支援を行うHoloLensアプリ」を作るチームに参加しました。先ほどのアイデア出しではまだ漠然としたものだったので、プレゼン支援をコンセプトにさらにアイデアを膨らませました。
ハッカソンの中でこのアイデア出しが最も時間をかけてやったと思います。他のチームは1日目の終わり頃にはアイデア出しが終わり開発を始めたくらいだったと思いますが、私のチームは1日目を全てアイデア出し、設計に費やしたぐらいだったと思います。
このアイデア出しの時に思ったことなどをいくつか。
1. とりあえず何でも言って見る
私も含め全員が、思ったことは何でも言っていました。実現可能性を抜きにした理想も多く話していました。また、しょーもない小さなことでもとりあえず言うことで、そこから別の人がアイデアを膨らませたりということがあり、非常にアイデアだしが楽しいものでした。人のアイデアの否定はありませんでした。このように人のアイデアの否定をせず、どんなことでも言い合えるチーム作りというのが、アイデア出しでは非常に大切だなと感じました。これがその後の制作で、わからないことがあれば妥協せずに助けあって実装できることにつながるからです。
2. どういう人を対象にどういう状況で使うものかを考える
これは審査員である日本マイクロソフト株式会社 HoloLensテクニカルエバンジェリストの高橋忍さんからのアドバイスですが、どういう人を対象にどういう状況で使ってもらうのかを詳細に考えることで、その状況でどう言った問題点があるのか、その問題をHoloLensでどうやったら解決できるのかと言ったことが見えてくるというものです。
これは特に、もの作りをする企業のエンジニアにとって必要だと思いました。
これを考えることで誰に対して、作ったコンテンツを売るべきなのか、そのコンテンツを使えば顧客にとってどういう利点があるのかを明確に説明できるようになります。
逆に顧客が決まっている状況で開発をするなら、どういう状況で使うのかを詳細に聞くことで、顧客が認識していない新たな問題点や解決策をエンジニア目線から提案できるのではないでしょうか?
そこで私たちは「プレゼンが苦手な人を対象に、うまいプレゼンができているように見せかける」アプリを作ることにしました。すると、「HoloLensのカメラで聴衆の写真を撮りFaceAPIで表情値をHoloLensに表示する」というアイデアがありましたが、プレゼンが苦手な人だとこれは余計に焦ることになるという考えに。一方、プレゼンが苦手な人は、プレゼンのスライドだけでなく喋る内容も表示されていたら助かるだろうと、メモの表示機能をつけることに。
また、プレゼンのテクニックの1つに「聴衆をエリアごとに何分割かして、そのエリアを順番に定期的に見ながら喋ると、聴衆は自分を見られていると勘違いする」といったものがあります。これにより説得力のあるプレゼンになります。しかし、プレゼンが苦手な人はこういうことは当然できないので、これをHoloLensで自然にできるようにしようと...。HoloLens上で視線誘導のオブジェクトを自動で動かすことで、プレゼンターはそれを見続けながら、喋るだけで勝手にこのテクニックをできるようになります。
設計方法の話し合い
アイデア出しでプレゼンが苦手な人の問題点をどう解決するかということは決まりました。ではどういったUIで設計し実装するのかを話し合いました。
ここでも高橋さんよりアドバイスをいただきました。「Microsoftでも模型を利用したMRデモの作成などアナログな作業を行うことも非常に大切」と。こうして完成イメージを共有することで、のちに大きな差が出ることがなくなるということだそうです。
私はチーム開発をあまりしたことがなく1人で完成イメージを持っているということが良くありました。しかし、チーム開発だと完成イメージの共有は確かに必要だと納得させられました。
また、私は1人で何かを作る時、設計はあまりしっかりとはしていませんでした。しかしチーム開発では設計こそが命だと思いました。なぜなら、しっかりと設計を行うことは役割分担にも役立ち実装イメージもつきます。後に機能追加をする時にも設計をチームで共有できていれば誰でも機能追加が簡単にできるからです。
そこで設計をいろいろ考えて書き起こしたのがこちら↓
中央にスライドを表示し、原稿やメモを右下に、プレゼン開始からの経過時間とスライドごとの喋る目安の時間を左下に表示するといったUIです。右にいろいろ書かれているのはUnityでの実装の構造案です。スライドごとにスライドの画像、その時に喋るメモ、喋る目安時間を持っていることが示してあります。また、スライド画像、メモ、目安時間のうち中央に表示するものを切り替える案も出ていました。
ここまでのアイデア出し、設計で1日目は終わってしまいました。
2日目、いざ開発!!
1日目にしっかりと設計をしたので開発は非常にスムーズにできたのではないかと思います。
テスト中の様子です(笑)
最終的に実装した内容としてはスライドの表示、メモ(原稿)の表示、プレゼン開始からの経過時間表示、スライドごとの目安時間の残り時間表示、視線誘導、です。
成果発表
成果発表はプレゼン形式でしたので実際に作ったアプリで発表しました( ̄▽ ̄)
「PCばかり見ずに、前を見てプレゼンできるようにしました」ということを伝えるために↓のスライドを移すも.....
「あなたに言いたい」というツッコミが(笑)
発表を続け.....
「おお、スライドが動いた!」という声も....
しかし、PCとHoloLensの連携機能は実装できなかったので.....
「えーっとですね、シェアリングの機能が実装できなかったのでモーションに関しては今回ちゃんとモニターと連動できてません。なので後ろで操作してもらってました」
「ただ、HoloLens上では時間が表示されてるので、
あと1分3秒喋ることができるのはわかってます!」
との返し、チームメンバーが頼もしすぎる(泣)
「あと1分3秒喋れるの知ってます、HoloLens上に表示されているので」#HoloHack #HoloLens #HoloLensJP #スタカフェ pic.twitter.com/0xNJ9lccMT
— ジン@エンカツ | ホロカツ (@diberidarshi) 2018年2月4日
そして、デモ映像を見せる!!
HoloLens上ではスライド、メモ、スライドごとの目安時間が切り替えられています。
また、PCとの連携機能もできましたが、発表用には間に合いませんでした。
*成果発表前のテスト時の動画なのでスライドやメモの内容は異なっています。
そして、他のチームも発表を終え審査結果発表へ〜
審査結果発表、まさかの.....
審査基準は「面白く、HoloLensならではの独創性があるもの」でした。
まずはハッカソン会場を提供いただいたスタートアップカフェ賞をいただきました(≧∀≦)
理由は「スタカフェさんのイベントで実際に使って見たい」といったようなことだったと思います。(間違ってたらすみません!!)
スタカフェ賞の景品については次の記事で.....
そして、他のチームの受賞を見つつ、純粋に結果発表を見ていました。そして、Microsoft賞の発表がくるとなんと......
まさかのダブル受賞*(^o^)/*
理由は「HoloLensならではであり、拡張性がある」とのこと。
そして、Tシャツと非売品のマグカップをいただきました!
そして、参加者、関係者全員で写真を撮ってハッカソン終了〜
参加しての感想
HoloLensの開発、ハッカソンは共に初めてでしたがここでは書ききれないほど非常に多くのことを学んだハッカソンでした。技術的なこと以外にも、チーム開発で有効なアイデアだしや設計の方法、その時に気をつけるべきこと、制作物を他人にどう伝えるべきかなど、ハッソンでしたことすべてが有意義なものでした。
また、今回作ったものは実は非常にシンプルなプログラムでできています。しかし、2つの賞をいただくことができました。人に評価されるかはアイデア次第でどうにでもなるんだなと実感しました。
「プレゼン」は誰もすることだろうと思うのでこのアプリをビジネスレベルで使えるようにしたらすごそうだな....。実際私も、学校でのプレゼンに使いたいです!!! (笑)
余談
先日のde:code2018で登壇されたMicrosoftの社員である、ちょまどさんのツイート
キーノート登壇が緊張し過ぎて胃が痛い!!
— ちょまど@プログラマ兼マンガ家 (@chomado) 2018年5月19日
もう HoloLens 被ってカンペを常に視界に表示させる感じにしたい pic.twitter.com/XXuABlLh69
Holoプレゼンター使ってもらいてぇぇぇ! 笑
(まだ開発が続くとは.....ボソッ)
DialogflowとIFTTT, GASを使ってGoogleHome開発をやってみた
世間のスマートスピーカーブームに乗せられてGoogle Home miniを購入しました。ヨドバシで見ると半額の3000円くらいで安く売ってるし、なんか開発できたら面白そうだからまあ買うかと…。そこで最初に作ったGoogleHomeアプリのことを書きます。
前回、GAS(Google Apps Script)でwebアプリケーションを作ったという記事を書きました(前回の記事を読んでいない方のために簡単に言うと、大学サークルの機材貸出返却システムをGASを使ってwebアプリとして作った。詳しくはこちら)。今回はそれを拡張し、GoogleHomeを使って「~~~貸出!」とか言うだけで機材の貸出返却手続きをできるようにしたものです。
処理の流れとしては、GoogleHome(Google Assistant)で操作 -> Dialogflowでデータ取得 -> 以前作ったGAS&GoogleスプレッドシートにGETリクエスト -> GASで処理後、IFTTTに処理結果通知文をPOST送信 -> IFTTT内でwebhooksをトリガーにLINEへ通知、という感じです。
GETリクエスト、POST送信はJSON形式で行っています。
本当は、GASからの処理結果通知文をDialogflowに返してその文章をGoogle Homeに喋らせたかったのですが、調べて見るとGASのdoGetのの戻り値(今回は処理結果通知文のJSONデータ)はGAS側でリダイレクトされる模様。リダイレクトされた先でJSONが取得されるそうです。つまり、GASからの返答を直接dialogflowで取得できないらしい(泣)….(コチラの方の記事を参考にさせていただきました)。
GASとdialogflowの間にAWSとかGoogle Cloud functionsなどのサーバーを挟んで右から左に流すようにすればできるみたいです(詳しくはコチラ)。自分はGoogle Cloud functionsでやってみようとしたが、サーバー系を触るのはは初めてなので案の定、エラー出まくりで断念…(泣)。(勉強するか~…..)
そこでGASからIFTTTにPOST送信して、webhookをトリガーにLINEに通知することにしました。
Dialogflow
Dialogflowの使い方は多くの方が書いていらっしゃるので簡単に
サークルの機材はナンバリングされているので(カメラ番号1番のならC1、レンズ番号1番ならL1など)機材の種別、番号と手続き者の学籍番号、貸出か返却か、のEntitiesを作成(機材の種別=>class、番号=>no、自分の学籍番号=>stNo、貸出か返却か=>key1、key2。Endは終了コマンド)。
Entitiesの具体的な中身はこんな感じ↓
で、貸出の時のIntentsはこんな感じ↓
Training phrasesの候補の作り方と先ほどのEntitiesとの組み合わせで簡単にそこそこAIっぽく作れます♪
Action and parametersのREQUREDにチェックを入れておくと、音声コマンドの中に後でGETリクエストするときに必ず必要なものがない時に聞いてきてくれるようにできます。聞き返す文章はAction and parametersのPROMPTSに書いておきます
あとはGETリクエストを送るためにFulfillmentのEnable web hook call for this intentにチェックを入れておきます。
そして、左のタブからFulfillmentを選択し、GETリクエストを送る先のURLを書けば完成!
GAS
先ほどのDialogflowのからのwebhookをdoPost(e)で受け取っています。Dialogflowで送ったデータはJSON形式でパラメータeの中に格納されています。
コードはコチラ
JSONから必要なデータを取り出し、そのデータを貸出返却手続きをしている関数に渡すだけです。この関数からの通知メッセージ文をIFTTTのURLのパラメータとして
var url = "IFTTTのURL?"+"value1="+str+"&value2="+class+no+"&value3="+key;
UrlFetchApp.fetch(url);
するだけです。IFTTTのURLについてはもう少し先↓
IFTTT
GASからのリクエストをWebhooksをトリガーにして通知メッセージをLINEに送信します。
アプレットはこんな感じ↓
Value1には通知メッセージ、Value2には機材番号、Value3は貸出か返却かが自動的に格納されています。
完成
これで完成です。実際に動かしてみると.....
GoogleHomeでサークル(カメラサークル)の機材貸出返却管理システムを作ったった 笑
— IKEP (@CreativeIKEP) 2018年3月12日
GoogleHome→Actions on Google→Dialogflow→GoogleAppsScriptという流れ#GoogleHome https://t.co/bhU7ncT8Nm
さらに進化した pic.twitter.com/KDGJ1eOrHx
— IKEP (@CreativeIKEP) 2018年3月12日
Dialogflowの使い方で少し困ることがありましたが、非常に簡単にできました♪
Dialogflowでスマートスピーカーの簡易AI、GASでサーバー、スプレッドシートでデータベースとしてそれぞれ使えるので便利ですね
次はサーバーをちゃんと立ててがっつりしたもの作ろかな〜......
web知識0大学生がGASを使い、3日でサーバーレス機材管理システムを作る
僕がサークルのためのwebアプリを作成した時の話を書きます。
私が大学で所属しているサークルは、写真系のサークルです。そのサークルでは一眼レフカメラなどの機材貸出を自由にできるのですが、貸出の手続きがめんどくさかったり、誰が何を借りているのかの管理が雑だったりという状況でした(笑)。
当時はプログラミングを勉強しだして数ヶ月が経ったころで、何か人のためになるものを作ってみたいと思っているところでした。そこで機材貸出手続きの煩雑さをなくし、かつ管理も簡単に行えるシステムを作ろうと思い立ちました。
まず考えたのは、当時Swiftを勉強中だったのでiPhoneアプリとして作ろうと考えましたが、サークルにはAndroidユーザーもいたので却下!(Xamarinなどで作ってもいいが当時は知らなかった...)
次にwebアプリ。これならインターネットに繋がりさえすればみんなが使えるからいいのでは?しかし、サーバーやデータベースの知識はないし、そもそもサーバーなどを使うとなると自分が卒業したときに(文系の学生もいるため)後輩がシステムの保守に苦労するのではと...。
そこで調べた結果、Google Apps Script(以下、GAS)を使おうと決めました。サーバーはGoogleのものだから管理もいらないし、簡易データベースのようなものとしてGoogleスプレットシートも使える!web公開できるので誰もが使える!何より自分が卒業してから機材が増えても、後輩はスプレッドシートに追加機材の名前を書くだけでいい!
じゃあ、GASで作ってみるぞっと...
シート1枚目にはこんな感じで↓
シート2枚目にはこんな感じ↓
シート3枚目はこんな感じ↓
これだけでプログラムからデータを書き込めば、簡易データベースみたいに使えるからラクチン♪
そして、プログラムを書く
開いたら、あとはプログラムをカタカタと書くだけ...
こんな感じ↓
htmlと.gs(google scriptの略?)ファイルで構成されてます。
.gsは基本的にはJavaScriptです。それにGoogleのサービス(スプレッドシートへの書き込みやGmail送信など)を使えるようにしたもの、みたいな感じです。
まだまだ未熟な時期でしたので汚いコードですね...笑
それでもプログラムを見たいもの好きな方はこちらへどうぞ↓
追記
リファクタリングを行い、コードの大幅な修正を行いました。
基本的には貸出、返却ボタンを押すとJavaScriptを実行して入力データを取得。そのデータを.gsファイルの関数でスプレッドシートと比較しながらエラーチェック。エラーがあるならどういうエラーかをString文で返し、問題なしなら貸出返却の記録をスプレッドシートに書き込み完了メッセージをStringで返す。そのString文をhtmlファイル内のJavaScriptでalertするという流れです。(詳しくはコードを見てください)
プログラムができたら、webアプリとして導入
「公開」→「ウェブアプリケーションとして導入」
「自分(~~~@gmail.com)」と「全員(匿名ユーザーを含む)」を選択。これでURLさえ知っていれば誰でもwebアプリにアクセスできるようになります。
更新を押すとURLが現れます。これがwebアプリのURLになります。以後、プログラムを更新しても同じURLです。
ここで、僕がつまずいたことを二点。
1. 上記で行ったURLは「https://script.google.com/~~~~/exec」になっていると思います。しかし、「最新のコード」いうリンクをクリックして開くのは「https://script.google.com/~~~~/dev」。何が違うのかというと、プログラムを変更するとdevにはすぐに適用されるが、execは上の写真でプロジェクトバージョンを変更して更新ボタンを押さないと適用されない。devは開発中の確認用、execは正式公開用ということだろう。
2. gs内でdoGet()関数を書かないとhtmlに記述したのが表示されない。
function doGet() {
return HtmlService.createTemplateFromFile(htmlファイル名).evaluate().setTitle(webアプリ名(ブラウザのタブに表示される));
}
これを書いておかないと、URLにアクセスしても(Getリクエストしても)htmlファイルが返ってこないので表示されない。(当たり前と言えば当たり前だが...(^^;;)
では、URLにアクセスして試すと.....
ちゃんとスプレッドシートの状態に応じて、返ってくるメッセージが変わっています👏
貸出受付メッセージが出たものは貸出記録がスプレッドシートに書き込まれています(^^)
ここまで実装して色々と大変だったことを...
1. JavaScriptファイルを保存できないのでhtmlファイル内の<script>タグに直書きしなければならない.....
2. JavaScriptからgoogle.script.run.(.gs内の関数名)で.gsの関数を呼び出せるが、非同期であること。
3. gsからの結果をJavaScriptの呼び出し元で受け取ること
特に2,3が大変でした。
2については最初、google.script.run.(.gs内の関数名)で.gsの関数を呼び出していました。しかし、非同期なので3ができない.....。調べて見るとどうやらgoogle.script.run.withSuccessHandler(xxx).(.gs内の関数名)で解決できる模様(xxxは.gs内の関数実行した後に実行する関数)。で、html内で
function xxx(str){
alert(str);
}
ように書くと.gsのreturn結果がstrに格納されていて無事アラート画面が出ました😆
+α、返却期限を過ぎていたら返却催促のメールを行うようにして見ました。
シート1枚目の貸出状況を確認して、貸出中の人の返却期限を今日の日付と比較。期限を過ぎていたらその人の学籍番号をもとにシート2枚目からメールアドレスを取得。あとは、メール送信という流れです。(詳しくはコードを見てください。.gsのcheck関数です。)
あとはトリガーを設定
時計見たいなマークをクリック
こんな感じに設定↓
これだけで自動的に毎日9時ごろにcheck関数を実行してくれるのですごいラク♪
無事メールが届きました😁
QRコード読み取りでデータ入力もできるようにしましたが、これはネットの先人のものをいただいてきました 笑
————————————————————
これで貸出返却手続きが1分足らずでできるようになりました!さらに誰が何をいつまで借りていてるのかもスプレッドシートを見るだけで一目瞭然です。返却記録も残せるし、返却催促も勝手にやってくれるので、すごい楽になりました^_^
今回GASを使って思ったことは、
GAS便利すぎーー!!!
サーバー•データベースレスでwebアプリが作れるし、doGet(e)でパラメータeに応じたGetリクエスト処理もできるので自作APIも作れちゃう!!(これについては別記事で)
web関係知識、JavaScript経験ともに0な私でも2、3日で作れましたので、非常におススメです( ^ω^ )
駆け出しの大学生がVRコンテストに出場した時のお話
半年ほど前にVRのコンテストに出場した時のことを書きます。
私は当時、大学の授業を通じてプログラミングに興味を持ち、独学でプログラミングを勉強していました。
そのころの実力はエンジニアとして勉強しだして半年なため、まだまだ未熟でした(今もですが...)。具体的には、やっと自分のiPhoneアプリが作れるようになったくらいでした。
そんな時、国際学生対抗バーチャルリアリティコンテスト2017(IVRC2017)の募集をしているのを耳にしました。VRに興味はありましたが、果たして自分にできるのかという不安がありました。しかし、過去に同じようなことがあってやらずに後悔したので、今回はやってみようと参加することにしました。
企画書制作
企画書を提出してそれにより選考が行われるので企画会議を行った結果、『体験者がかぐや姫になり、竹の中から生まれる時の体験をできるVRコンテンツ』を作成することに決定。
理由は、
1.日本人なら誰でも知っており、桃太郎と同じように出生ストーリーに疑問を持ったことがある。
2.翁に自分の竹を切られる瞬間に作品としてのインパクトがある
といったようなことだったと思います。
すると、無事選考を通過しコンテスト参加決定🎉
作品制作
私はHMD内の映像制作(Unityでの制作)を担当することになりました(以下動画参照)。
ここで疑問が....
「翁は光ってる竹に気付いた結果かぐや姫を見つけたけど、そもそもなんで竹が光ったんだ??」
結果、「かぐや姫は光らないと放ったらかしにされて生きていけないから!」と勝手に考え、「だったら体験者に光ってもらおう!」と(笑)
そこで体験者が体を左右に揺らすことで自分が光りだすインタラクションを作ることにしました。HMDにLEDを取り付け、さらにHMD内の映像でも視界周辺を黄色に変化させることに。
また、翁に自分の竹を切られた時の体験のインパクトを高めるため、風圧の表現に空気砲を、真っ暗な竹の中から明るい外の世界を変化をHMD内の映像で表現することに。
完成形がこんな感じ↓
かなり手作り感が出ていますが( ̄▽ ̄;)...
体験者の視点(HMD内の映像)はこんな感じ↓
*PC上でプログラムを実行したものをキャプチャした動画です
「かなりいい感じじゃね!?」っと思っていました。
会場へ行くまでは......
コンテスト当日
コンテスト当日、会場について真っ先に思ったことは、
「レベルが違う.....」
でした。他の参加チームとの作品完成度の違いを思い知りました。
作品のアイディアだけを考えると私のチームもいい勝負だったと思います。しかし、
そのアイディアをどう表現するのか、どういうシステム,機構を用いて作成するか、VRの弱点や利点をどのように隠し、どのように利用するのか、
全てにおいて大きな壁を思い知りました......
当然といえば当然です。プログラミングを勉強して半年の『駆け出し者』が、専門で研究している学生と対等であるわけがありません。
しかし、ショックに思うよりかは楽しみの方が大きかったです。新しい知識を得られただけでなく、自分が学生のうちにどこまで成長できるのか、といったことがなんとなく実感することができたからです。
続きを読む