IKEPの制作ブログ

学生エンジニアIKEPの制作ブログです。作品の技術話や制作での経験談などを書いています。

Unity&Blenderによるキャラクターアニメーション 〜モデリングからアニメーション、表情つけ、物理判定まで〜

Unityでゲームとかを作るとなると必ずと言ってもいいほど、必要なのはキャラクター。そのキャラクターのアニメーションはゲームの面白さや完成度を左右すると言っても過言ではないと思います。しかし、Unityのアニメーション関連を説明している書籍やサイトはあまりないように思います。アニメーションよりプログラムなどの動作関連に重視しすぎな感じが.....

そこで今回は、私が今までいろいろキャラクターアニメーション関連でいじってきた小ネタたちをまとめて載せておきたいと思います。興味があるとこだけ見ていただいたら良いかと思います......

 

Blenderによるキャラクターモデリング

僕はモデリングよりはUnityとかでのプログラミングの方が専門ですが、Unityで自作キャラクターを動かして見たいと思って、作りました。

こちらの方の記事を参考にして作りました。

非常にわかりやすいので、作り方はここでは割愛。

制作中の様子だけ↓

 UnityにこのBlenderデータをそのまま取り込み、アニメーションをつける(アニメーションの付け方は↓で)。せっかくなんでARでやって見ました。

 

アニメーション制作方法

モデルが用意できたらアニメーションをつけます。

まず、モデルのボーンをUnityで適用させる

UnityにインポートしたモデルのInspectorの画面からRigを選択=>Configure...を選択

f:id:IKEP:20180615123009p:plain

自動的にボーンが適用されます↓

f:id:IKEP:20180615123024p:plain

 

もし、適用できていないところがあれば赤く表示されるのでその部分は修正します。

f:id:IKEP:20180615123502p:plain

 

適用されない主な原因としては、「モデルがT字ポーズになっていない」、「ボーンの階層構造がおかしい」、「必須のボーンが存在しない」などがあげられると思います。

T字ポーズはUnity画面の右下のRotationをいじってT字にしてあげれば解決すると思います。階層構造だとモデリングソフトでボーンの階層構造をUnityが認識する構造にしてあげる必要があります(こちらの記事など参考にすれば良いかと....。動作確認はしてません)。必須ボーンはUnity画面右の図で実線の丸になっているものがそうです。破線は任意なので設定してもしなくても良いです。

 

そして、アニメーションをつけます。

 Animator Controllerを作成してAnimation Clipを配置

この辺のことはググれば出てくるので割愛

f:id:IKEP:20180615140002p:plain

 

Animation Clipを自分で作るならAnimationウィンドウでこんな感じに編集↓

f:id:IKEP:20180615140634p:plain

 

 

表情つけ

キャラクターの表情をつけていきます。基本的にはAnimationClipの作成と同じで、AnimationClipで体とかを動かすのではなく、顔のBlendShapesの値をAnimtionClipでいじるという感じになります。

自作モデルの場合はモデリングソフトで前準備をしておきます。

Blenderの場合はシェイプキーを設定しておきます。

f:id:IKEP:20180615144431p:plain

f:id:IKEP:20180615144510p:plain

シェイプキーを設定したモデルをUnityにインポートするとBlendShapesが表示されます。

f:id:IKEP:20180615144750p:plain

AnimationClipでこの値を変化させると表情の完成です。

瞬きと笑顔をつけてみました。瞬きをつけるだけで、無表情の時よりリアルさがグッと増します(^_^)

 

 

物理判定

物理判定といっても、キャラクターの服や髪、体などのキャラクターの部品同士の物理判定です。

まず、最初にこれらを考慮しなかった時がこちら↓

 髪が硬いままだったり、髪やスカートが体に食い込んでしまってます.....。

これを改善していきます。

まず、体の各部位にColliderを設定

f:id:IKEP:20180615152155p:plain

そして、スカートにClothを設定。これだけでスカートがなびく感じが出ます。

スカートとの接触するもの部位のcolliderを教えてあげます。

f:id:IKEP:20180615152509p:plain

 

同じく、髪の毛も設定していきます。

f:id:IKEP:20180615152824p:plain

髪のなびく感じにもClouthを使いました。髪の毛の動く範囲も決めます。

ClouthのEditConstraintsを選択

f:id:IKEP:20180615153138p:plain

頭皮の部分(赤い点)を選択してMaxDistanceを0にします(これをしないと髪の毛が落ちていくw)。それ以外のところはMaxDistanceを任意の値にします。

 

これで物理判定は完了です。

 さっきと比べると、かなりリアルさが出たと思います。(ARで動画を撮りたかったですが、iPhoneで動かすと重たくて動きがカクカクしたので、Unity上で動かしてます)

 

 

感想

ヒマな時にこれらを小ネタとしてやっていましたが、これら全部を組み合わせてゲームとかを作るのは大変だなと思いました。しかし、頑張って組み込めば(アニメーションの点では)ゲームのクオリティは上がると思います。

今制作中のゲームにも頑張って組み込むか.....

ただ、モデリングはもうやりたくないかな 笑

 

おまけ

最近、いろいろ勉強したのを使って任天堂スイッチ「ゼルダの伝説 ブレス オブ ザ ワイルド」のワープシーンを作ってみました。(アニメーションだけでなく、パーティクルの勉強もいるが...)

GoogleHomeアプリ改良編 ~Cloud Functionsを組み込む~

 

以前の記事でGoogleHomeを使った機材貸出返却システムを作成したことを書きました。(まだ、見てない方はこちらからどうぞ)

今回はこれの改良を行ったときのことについて書きます。

 

改良点

今までのシステムはGoogleHomeに「〜貸出!」という感じに話しかけると、Action on Google=>Dialogflow=>GoogleAppsScript(GAS)=>IFTTT(Webhooks)=>LINE通知という流れの処理でした。GASにデータを書き込んで、その処理結果をLINEに送って通知する形です。しかし、本来はGASからの結果をGoogleHomeに喋らせたかったのですが、GASからのJSONでのリターンはリダイレクトされるのでDialogflowでは受け取れないためにLINE通知という方法を仕方なく行っていました。(詳しくはこちら)

 

そこで今回はDialogflowとGASの間にサーバーをかまして、この問題を解決しました。私はGoogle Cloud Functionsを使いました。ネットでググるAWSを使っているのが多いみたいなんで参考になれば幸いです( ̄∇ ̄) 

 

Google Cloud Functionsとは

Google Cloud FunctionsはGoogleが提供するGoogle Cloud Platformの1つであり、JavaScriptで書かれた関数を実行するサービスです。関数はイベントによって発火されます。そのイベントの中にHTTPトリガーがあるため、HTTPリクエストがあった時に指定の処理を行うことができます。

今回はこの「指定の処理」が「DialogflowからのデータをGASに送り、GASからの処理結果をDialogflowにリターンする」というものです。

 

 

Google Cloud Functions導入

では、Google Cloud Functionsを触っていきます。

プロジェクトを作成したら、↓が表示されるのでAPIを有効にします。

f:id:IKEP:20180612150842p:plain

 

次に関数を作成します。

f:id:IKEP:20180612150905p:plain

関数の設定は↓のような感じ。今回はDialogflowからのリクエストを受け取るので、トリガーはHTTPトリガーにする。ここに表示されるURLがトリガーになります。

f:id:IKEP:20180612150927p:plain

 

そして、コードはこんな感じ↓(右から左に流すだけです(^_^;))

index.js

 

package.json

 

あとは、dialogflowのwebhook先を先ほどのcloud FunctionsのURLに書き換えれば完成!

 

 

完成

完成形がこちら↓

 

すでに貸出中の物品ならエラーと言ったり、貸出完了なら返却期限を言ったりと、処理に応じた結果をGoogleHomeから喋らせれました!! (^o^)/

 

 

苦労したこと

DialogflowとGASの間にCloud FunctionsをかますことでGASからのJSONリターンのリダイレクトを防ぐようにしましたが、プログラムを書いてる時に気づいたことが.....

それは「Cloud FunctionsからGASヘのデータ送信をPOSTにすると、リダイレクトされる」ということです。これに気づくのにだいぶ時間を使いました。そのため、Cloud FunctionsからGASへはGET送信にして、GAS側もPOST受け付けからGET受け付けに変更しました。

 

これで理想のシステムが完成しました!

あとは喋っている人の認識かな.....

 

 

追記(2018/6/14)

誰が喋っているかの認識もできました!

Dialogflowから送られるJSONデータ内のuserIdで識別しています。GoogleHomeのVoiceMatchに登録されてる声はuserIdが変わらないので、これで喋ってる人を識別できます。

 

(僕のGoogleHomeは、僕の声しか登録してないので他人の声は合成音声ソフトで代行しています。)

HoloLensプレゼン支援アプリ「Holoプレゼンター」の制作から展示まで その2 ~ブラッシュアップ&展示&パネルディスカッション編~

 

今回は前回の続きです。前回の記事を読んでない方はこちらからどうぞ 

 

前回の記事で2月のHoloLensハッカソンに参加してプレゼン支援アプリ「Holoプレゼンター」を作成し、Microsoft賞とスタートアップカフェ賞を受賞したことを書きました。 Microsoft賞はTシャツとマグカップをいただいたのですがスタートアップカフェ賞の商品は後日にということでした。そして約1ヶ月後の3月初旬ごろに連絡があり、「チャリウッド2018の企画としてスタートアップカフェで展示しませんか?」ということでした!!    

 

 

チャリウッドとは??

チャリウッドは毎年恒例となっている、毎日放送などの大阪・茶屋町拠点の各企業・施設・大学が主催をしている「学び」と「体験」のお祭りです。  

チャリウッド2018     

f:id:IKEP:20180528132427j:image

 

 

オフラインミーティング

話し合った結果、実装することになった内容は…..

1.HoloLensとPCでのスライド送り連携

今まで、スライド送りはHoloLnes上だけでスライドが切り替わっており聴衆が見ているスクリーン上のスライドは切り替わっていませんでした。実際「Holoプレゼンター」をプレゼンで使うなら、HoloLens上のスライドと聴衆に見せているスライド(=PC上の画面)が同期していないといけないため、HoloLensとPCのスライド同期を実装することに。そのため、PC側アプリも作成。  

 

2.ポインタの実装

みなさん、プレゼン中にスクリーンに映している資料をレーザーポインタなどで指し示すことがあると思います。しかし、それをするとHoloプレゼンターの「聴衆の方を向きながらプレゼンできるようにする」というコンセプトが失われてしまいます。そこで前を向いたままでもポインタで資料を指し示せるように、ポインタを実装しました。このポインタもHoloLensとPCで連携されています。  

 

3.聴衆からのフィードバックを得る

 HoloLensの優位性として現実の空間に情報を付け足すことが挙げられます。それを利用したのがHoloプレゼンターですが、この優位性をもっと活かすために聴衆からのフィードバックをリアルタイムで得られたらいいんじゃないかということになりました。Webアプリを作成し、聴衆者はプレゼンターに対して「いいね」や「コメント」を送れるようにしました。聴衆者は発表を聞いていて、その発表に対していい考えだと思ったら「いいね」を、疑問などができたら質問など「コメント」をプレゼンターに送り、リアルタイムにプレゼンターにそれが届くというものです。これにより、プレゼンターは会場のリアルな声が可視化されて聞けますし、質問などもその場で解説ができます。

 

4. 客層分析

HoloLensのにはカメラも仕込まれているため、会場の情報を画像から取得することもできます。これを利用すると会場の分析ができます。そこで聴衆がどんな年齢層が多く、男女比はどれくらいなのかといった情報を、HoloLensにより分析、提示することにしました(ただし、今回は展示という形のため、カメラはHoloLensのカメラではなくwebカメラを使用)。これにより、プレゼンが苦手な人だけでなく、上手い人が使ってもより戦略的なプレゼンができるようになります。

取得した画像から年齢層、性別比の分析にはMicrosoft Azureサービスの1つ、Face APIを使用しました。

 

この4つを簡単に図式化するとこんな感じです↓

f:id:IKEP:20180528182710j:plain

1が赤、2が青、3が黄色、4が緑で示してある部分になります。

 

開発

私は3のwebアプリ制作をメインで担当したので、ここだけ少し解説。

webアプリ制作には、経験があり簡単に実装できることからGoogle Apps Scriptを使用しました。HTMLと.gsのファイルで構成されており、web公開すると誰でもアクセスできるので簡単なwebアプリを作るにはGASで事足ります。.gsのコードでGoogleスプレッドシートの読み書きをしています。GASの詳しいことは過去の記事で説明してますのでご参考までに。

コードの内容は聴衆がwebアプリから入力をしたらHTMLから.gsの関数が呼ばれ、スプレッドシートに書き込み。HoloLensから要求がきたら、前回のリクエストからの差分の分だけを返却しています(HoloLensからの要求は定期的に行う)。

詳しいコードを見たい方はこちらからどうぞ↓

 Holoプレゼンター聴衆者WEBアプリ

 

スプレッドシートの内容はこんな感じ↓

f:id:IKEP:20180528185825p:plain

 

 

 完成

まず、聴衆者が使うwebアプリはこんな感じ↓

f:id:IKEP:20180528191807p:plain

 

 

そして、プレゼンター目線であるHoloLensはこんな感じ!!↓

f:id:IKEP:20180528191315p:plain

今回のブラッシュアップで増えたのはスライド下の聴衆者からのコメント表示と、聴衆者からのいいね数表示、左の客層分析結果です。

コメントは5件まで表示し、古いものは下へ流れていき表示されなくなります。

いいね数は大きい👍が1つで10いいね、小さい👍が1つで1いいねになります。

客層分析結果は左が年齢層、右が性別比になっています。

 

実際に聴衆者目線でHoloプレゼンター利用しているのを見るとこんな感じ↓

スライド送りとポインタが同期しているのがわかります。トリプルタップが難しく反応しにくいため、クリッカーを使うべきだと思います。

 

展示

プレゼン支援アプリなので、開発メンバーがHoloLensをつけて軽くHoloLensのジェスチャの仕方をプレゼン。その後、お客さんに体験してもらって「種明かし」のような感じで展示しました(笑)

 

パネルディスカッション

展示の後はHoloLens Meetupでパネルディスカッションをしました。

僕も含め、HoloLens開発が初めての人もいたためどうやって勉強したか、何が苦労したかなどをお話ししました。(緊張して記憶曖昧です.....)

f:id:IKEP:20180528201425j:plain

f:id:IKEP:20180528201430j:plain

 

感想

「HoloLensちょっと触って見たいな」という軽い気持ちでHoloLensハッカソンに参加したのに、ハッカソンが終わってからも開発し、展示までしてしまったことに非常に驚きつつも貴重な経験ができました(人生何が起こるかわかりませんね...)。ある漫画に「思い立ったが吉日、その日以降は全て凶日」という言葉が出てくるのですが、まさにその通りだと思いました。

ハッカソン時に実装したスタイド・原稿・時間表示に加え、ポインタの実装とスライドの同期ができたため、最低限は実際のプレゼンで使えるレベルになったと思います。コメントは聴衆者からのフィードバックだけでなく、味方からの指示も送れるなとも思いました。

 

次もし機会があれば、個人的にはパワポデータ(.pptx)をPCアプリに入れると自動でスライドを画像化し、HoloLensに飛ばすようにしてみたいです( ̄∇ ̄)

 

 

余談

HoloLens Meetupで他の方の発表中に、PCとプロジェクタの接続が切れて聴衆が発表内容がわからないということがありました。しかし、発表者の方はPCを見て説明しているため、気づかず発表を続けけていました。この時、思ったのが

Holoプレゼンター使ったら接続不良に一発で気づけるのに〜!」。

PowerPointもHoloLensもMicrosoft製なのでMicrosoft公式のHoloプレゼンター販売されないかな....笑

 

 

追記 

チームメンバーの方がHoloプレゼンターのわかりやすい動画をあげていたので、拝借...

 

HoloLensプレゼン支援アプリ「Holoプレゼンター」の制作から展示まで その1 ~HoloLensハッカソン編~

ようやく一段落したので、ブログにかけますε-(´∀`; )

今年の2月にHoloLensハッカソンに参加し、その後いろいろあったことを書きます。

今回はハッカソンの時のことだけ書きます。「いろいろあったこと」については次の記事で書きます。

 

HoloLensって何??

まずHoloLensを知らない人のために、HoloLensが何か簡単に説明します。一言で言えばHoloLensはMicrosoftが開発した自己完結型ホログラフィックスコンピュータです。VRHMDのように目の前にディスプレイのついたデバイスなのですが、このデバイス単体がコンピュータそのものでWindowsで動いています。また、VRではなくMR(Mixed Reality)であるため、現実の世界にバーチャルな物体があるように見え、現実物体とバーチャル物体を同時に見ることができます。よって歩き回りながら利用できます!さらに、現実の空間を3Dスキャンできるので、手のジェスチャーでバーチャルオブジェクトを操作したりもできます。

こちらの動画を見ていただけるとそのすごさがわかると思います(^o^)

 

もっと知りたい方はMicrosoftのページをご覧ください。

 

 

HoloLensハッカソン1日目

「HoloLensすげー!」、「開発してみたい!!」と思っている矢先にHoloLensハッカソンが開催されるということを耳にしました。しかも学生は参加無料!ハッカソンは初めてというか、IT系の勉強会も行ったことなかったですが、思い切って参加することにしました。

HoloLensハッカソン

そして当日、めちゃくちゃ緊張しながら会場へ

f:id:IKEP:20180525163203j:plain

 

まずはアイデア出し。テーブルごとに思い思いのアイデアを出し合い付箋に書いていく方式でした。

その後、出たアイデアの中からそれぞれが作りたいものを選んでそれがチームに!(すごく斬新!)

 

チームに分かれてアイデア出し

私は「プレゼンテーションの支援を行うHoloLensアプリ」を作るチームに参加しました。先ほどのアイデア出しではまだ漠然としたものだったので、プレゼン支援をコンセプトにさらにアイデアを膨らませました。

f:id:IKEP:20180525164833p:plain

ハッカソンの中でこのアイデア出しが最も時間をかけてやったと思います。他のチームは1日目の終わり頃にはアイデア出しが終わり開発を始めたくらいだったと思いますが、私のチームは1日目を全てアイデア出し、設計に費やしたぐらいだったと思います。

 

このアイデア出しの時に思ったことなどをいくつか。

1. とりあえず何でも言って見る

私も含め全員が、思ったことは何でも言っていました。実現可能性を抜きにした理想も多く話していました。また、しょーもない小さなことでもとりあえず言うことで、そこから別の人がアイデアを膨らませたりということがあり、非常にアイデアだしが楽しいものでした。人のアイデアの否定はありませんでした。このように人のアイデアの否定をせず、どんなことでも言い合えるチーム作りというのが、アイデア出しでは非常に大切だなと感じました。これがその後の制作で、わからないことがあれば妥協せずに助けあって実装できることにつながるからです。

 

2. どういう人を対象にどういう状況で使うものかを考える

これは審査員である日本マイクロソフト株式会社 HoloLensテクニカルエバンジェリストの高橋忍さんからのアドバイスですが、どういう人を対象にどういう状況で使ってもらうのかを詳細に考えることで、その状況でどう言った問題点があるのか、その問題をHoloLensでどうやったら解決できるのかと言ったことが見えてくるというものです。

これは特に、もの作りをする企業のエンジニアにとって必要だと思いました。

これを考えることで誰に対して、作ったコンテンツを売るべきなのか、そのコンテンツを使えば顧客にとってどういう利点があるのかを明確に説明できるようになります。

逆に顧客が決まっている状況で開発をするなら、どういう状況で使うのかを詳細に聞くことで、顧客が認識していない新たな問題点や解決策をエンジニア目線から提案できるのではないでしょうか?

そこで私たちは「プレゼンが苦手な人を対象に、うまいプレゼンができているように見せかける」アプリを作ることにしました。すると、「HoloLensのカメラで聴衆の写真を撮りFaceAPIで表情値をHoloLensに表示する」というアイデアがありましたが、プレゼンが苦手な人だとこれは余計に焦ることになるという考えに。一方、プレゼンが苦手な人は、プレゼンのスライドだけでなく喋る内容も表示されていたら助かるだろうと、メモの表示機能をつけることに。

また、プレゼンのテクニックの1つに「聴衆をエリアごとに何分割かして、そのエリアを順番に定期的に見ながら喋ると、聴衆は自分を見られていると勘違いする」といったものがあります。これにより説得力のあるプレゼンになります。しかし、プレゼンが苦手な人はこういうことは当然できないので、これをHoloLensで自然にできるようにしようと...。HoloLens上で視線誘導のオブジェクトを自動で動かすことで、プレゼンターはそれを見続けながら、喋るだけで勝手にこのテクニックをできるようになります。

 

設計方法の話し合い

イデア出しでプレゼンが苦手な人の問題点をどう解決するかということは決まりました。ではどういったUIで設計し実装するのかを話し合いました。

ここでも高橋さんよりアドバイスをいただきました。「Microsoftでも模型を利用したMRデモの作成などアナログな作業を行うことも非常に大切」と。こうして完成イメージを共有することで、のちに大きな差が出ることがなくなるということだそうです。

f:id:IKEP:20180525174108j:plain

 

私はチーム開発をあまりしたことがなく1人で完成イメージを持っているということが良くありました。しかし、チーム開発だと完成イメージの共有は確かに必要だと納得させられました。

また、私は1人で何かを作る時、設計はあまりしっかりとはしていませんでした。しかしチーム開発では設計こそが命だと思いました。なぜなら、しっかりと設計を行うことは役割分担にも役立ち実装イメージもつきます。後に機能追加をする時にも設計をチームで共有できていれば誰でも機能追加が簡単にできるからです。

そこで設計をいろいろ考えて書き起こしたのがこちら↓

f:id:IKEP:20180525175458j:plain

中央にスライドを表示し、原稿やメモを右下に、プレゼン開始からの経過時間とスライドごとの喋る目安の時間を左下に表示するといったUIです。右にいろいろ書かれているのはUnityでの実装の構造案です。スライドごとにスライドの画像、その時に喋るメモ、喋る目安時間を持っていることが示してあります。また、スライド画像、メモ、目安時間のうち中央に表示するものを切り替える案も出ていました。

 

ここまでのアイデア出し、設計で1日目は終わってしまいました。

 

 

2日目、いざ開発!!

1日目にしっかりと設計をしたので開発は非常にスムーズにできたのではないかと思います。

f:id:IKEP:20180525181008j:plain

テスト中の様子です(笑)

 

最終的に実装した内容としてはスライドの表示、メモ(原稿)の表示、プレゼン開始からの経過時間表示、スライドごとの目安時間の残り時間表示、視線誘導、です。

 

 

成果発表

成果発表はプレゼン形式でしたので実際に作ったアプリで発表しました( ̄▽ ̄)

f:id:IKEP:20180525182202j:plain

 

「PCばかり見ずに、前を見てプレゼンできるようにしました」ということを伝えるために↓のスライドを移すも.....

f:id:IKEP:20180525182623j:plain

 「あなたに言いたい」というツッコミが(笑)

発表を続け.....

 

f:id:IKEP:20180525183314j:plain

 

f:id:IKEP:20180525183346j:plain

「おお、スライドが動いた!」という声も....

しかし、PCとHoloLensの連携機能は実装できなかったので.....

「えーっとですね、シェアリングの機能が実装できなかったのでモーションに関しては今回ちゃんとモニターと連動できてません。なので後ろで操作してもらってました」
「ただ、HoloLens上では時間が表示されてるので、
あと1分3秒喋ることができるのはわかってます!」

との返し、チームメンバーが頼もしすぎる(泣)

 

そして、デモ映像を見せる!!

HoloLens上ではスライド、メモ、スライドごとの目安時間が切り替えられています。

また、PCとの連携機能もできましたが、発表用には間に合いませんでした。

*成果発表前のテスト時の動画なのでスライドやメモの内容は異なっています。

 

そして、他のチームも発表を終え審査結果発表へ〜

 

審査結果発表、まさかの.....

審査基準は「面白く、HoloLensならではの独創性があるもの」でした。

まずはハッカソン会場を提供いただいたスタートアップカフェ賞をいただきました(≧∀≦)

理由は「スタカフェさんのイベントで実際に使って見たい」といったようなことだったと思います。(間違ってたらすみません!!)

f:id:IKEP:20180525185314j:plain

スタカフェ賞の景品については次の記事で.....

 

そして、他のチームの受賞を見つつ、純粋に結果発表を見ていました。そして、Microsoft賞の発表がくるとなんと......

f:id:IKEP:20180525185746j:plain

まさかのダブル受賞*(^o^)/*

理由は「HoloLensならではであり、拡張性がある」とのこと。

そして、Tシャツと非売品のマグカップをいただきました!

f:id:IKEP:20180525190117j:plain

 

そして、参加者、関係者全員で写真を撮ってハッカソン終了〜

f:id:IKEP:20180525190323j:plain

 

参加しての感想

HoloLensの開発、ハッカソンは共に初めてでしたがここでは書ききれないほど非常に多くのことを学んだハッカソンでした。技術的なこと以外にも、チーム開発で有効なアイデアだしや設計の方法、その時に気をつけるべきこと、制作物を他人にどう伝えるべきかなど、ハッソンでしたことすべてが有意義なものでした。

また、今回作ったものは実は非常にシンプルなプログラムでできています。しかし、2つの賞をいただくことができました。人に評価されるかはアイデア次第でどうにでもなるんだなと実感しました。

「プレゼン」は誰もすることだろうと思うのでこのアプリをビジネスレベルで使えるようにしたらすごそうだな....。実際私も、学校でのプレゼンに使いたいです!!! (笑)

 

余談

先日のde:code2018で登壇されたMicrosoftの社員である、ちょまどさんのツイート

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へ通知、という感じです。

 

f:id:IKEP:20180519202815p:plain

 

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は終了コマンド)。

 

f:id:IKEP:20180519202901p:plain

 

Entitiesの具体的な中身はこんな感じ↓

 

f:id:IKEP:20180519202931p:plain

 

で、貸出の時のIntentsはこんな感じ↓

 

f:id:IKEP:20180519203009p:plain

f:id:IKEP:20180519203044p:plain

 

Training phrasesの候補の作り方と先ほどのEntitiesとの組み合わせで簡単にそこそこAIっぽく作れます♪

 

Action and parametersのREQUREDにチェックを入れておくと、音声コマンドの中に後でGETリクエストするときに必ず必要なものがない時に聞いてきてくれるようにできます。聞き返す文章はAction and parametersのPROMPTSに書いておきます

 

f:id:IKEP:20180519203126p:plain

 

あとはGETリクエストを送るためにFulfillmentのEnable web hook call for this intentにチェックを入れておきます。

 

そして、左のタブからFulfillmentを選択し、GETリクエストを送る先のURLを書けば完成!

 

f:id:IKEP:20180519203223p:plain

 

 

 

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に送信します。

アプレットはこんな感じ↓

f:id:IKEP:20180520141316p:plain

f:id:IKEP:20180520141336p:plain

Value1には通知メッセージ、Value2には機材番号、Value3は貸出か返却かが自動的に格納されています。

 

 

完成

これで完成です。実際に動かしてみると.....

 

 



Dialogflowの使い方で少し困ることがありましたが、非常に簡単にできました♪

Dialogflowでスマートスピーカーの簡易AI、GASでサーバー、スプレッドシートでデータベースとしてそれぞれ使えるので便利ですね

 

次はサーバーをちゃんと立ててがっつりしたもの作ろかな〜......

web知識0大学生がGASを使い、3日でサーバーレス機材管理システムを作る

僕がサークルのためのwebアプリを作成した時の話を書きます。

私が大学で所属しているサークルは、写真系のサークルです。そのサークルでは一眼レフカメラなどの機材貸出を自由にできるのですが、貸出の手続きがめんどくさかったり、誰が何を借りているのかの管理が雑だったりという状況でした(笑)。

 

当時はプログラミングを勉強しだして数ヶ月が経ったころで、何か人のためになるものを作ってみたいと思っているところでした。そこで機材貸出手続きの煩雑さをなくし、かつ管理も簡単に行えるシステムを作ろうと思い立ちました。

 

まず考えたのは、当時Swiftを勉強中だったのでiPhoneアプリとして作ろうと考えましたが、サークルにはAndroidユーザーもいたので却下!(Xamarinなどで作ってもいいが当時は知らなかった...)

次にwebアプリ。これならインターネットに繋がりさえすればみんなが使えるからいいのでは?しかし、サーバーやデータベースの知識はないし、そもそもサーバーなどを使うとなると自分が卒業したときに(文系の学生もいるため)後輩がシステムの保守に苦労するのではと...。

 

そこで調べた結果、Google Apps Script(以下、GAS)を使おうと決めました。サーバーはGoogleのものだから管理もいらないし、簡易データベースのようなものとしてGoogleスプレットシートも使える!web公開できるので誰もが使える!何より自分が卒業してから機材が増えても、後輩はスプレッドシートに追加機材の名前を書くだけでいい!

 

じゃあ、GASで作ってみるぞっと...

Googleドライブから新規にスプレッドシートを作成。

シート1枚目にはこんな感じで↓

f:id:IKEP:20180516200025p:plain

 

シート2枚目にはこんな感じ↓

f:id:IKEP:20180516200101p:plain

 

シート3枚目はこんな感じ↓

f:id:IKEP:20180516200133p:plain

 

これだけでプログラムからデータを書き込めば、簡易データベースみたいに使えるからラクチン♪

 

そして、プログラムを書く

スプレッドシートの「ツール」→「スクリプトエディタ」を開く

f:id:IKEP:20180516200439p:plain

 

開いたら、あとはプログラムをカタカタと書くだけ...

こんな感じ↓

f:id:IKEP:20180516200801p:plain

 htmlと.gs(google scriptの略?)ファイルで構成されてます。

.gsは基本的にはJavaScriptです。それにGoogleのサービス(スプレッドシートへの書き込みやGmail送信など)を使えるようにしたもの、みたいな感じです。

まだまだ未熟な時期でしたので汚いコードですね...笑

それでもプログラムを見たいもの好きな方はこちらへどうぞ↓

コードを見たい方はこちら(github)

 

追記 

リファクタリングを行い、コードの大幅な修正を行いました。

コードを見たい方はこちら(github)

 

基本的には貸出、返却ボタンを押すとJavaScriptを実行して入力データを取得。そのデータを.gsファイルの関数でスプレッドシートと比較しながらエラーチェック。エラーがあるならどういうエラーかをString文で返し、問題なしなら貸出返却の記録をスプレッドシートに書き込み完了メッセージをStringで返す。そのString文をhtmlファイル内のJavaScriptでalertするという流れです。(詳しくはコードを見てください)

 

プログラムができたら、webアプリとして導入

「公開」→「ウェブアプリケーションとして導入」

f:id:IKEP:20180516232300p:plain

「自分(~~~@gmail.com)」と「全員(匿名ユーザーを含む)」を選択。これでURLさえ知っていれば誰でもwebアプリにアクセスできるようになります。

f:id:IKEP:20180516232549p:plain

更新を押すと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にアクセスして試すと.....

f:id:IKEP:20180516214521j:imagef:id:IKEP:20180516214536j:image

f:id:IKEP:20180516234955j:plain

ちゃんとスプレッドシートの状態に応じて、返ってくるメッセージが変わっています👏

f:id:IKEP:20180516215149j:image

貸出受付メッセージが出たものは貸出記録がスプレッドシートに書き込まれています(^^)

 

 

ここまで実装して色々と大変だったことを...

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関数です。)

 

あとはトリガーを設定

時計見たいなマークをクリック

f:id:IKEP:20180516205725p:plain

こんな感じに設定↓

f:id:IKEP:20180516205846p:plain

これだけで自動的に毎日9時ごろにcheck関数を実行してくれるのですごいラク

 

 

f:id:IKEP:20180516205300p:plain

 

無事メールが届きました😁

 

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内の映像で表現することに。

 

完成形がこんな感じ↓

f:id:IKEP:20180422190123j:plain

かなり手作り感が出ていますが( ̄▽ ̄;)...

 

体験者の視点(HMD内の映像)はこんな感じ↓

*PC上でプログラムを実行したものをキャプチャした動画です

 

 

「かなりいい感じじゃね!?」っと思っていました。

会場へ行くまでは......

 

 コンテスト当日

コンテスト当日、会場について真っ先に思ったことは、

「レベルが違う.....」

でした。他の参加チームとの作品完成度の違いを思い知りました。

作品のアイディアだけを考えると私のチームもいい勝負だったと思います。しかし、

そのアイディアをどう表現するのか、どういうシステム,機構を用いて作成するか、VRの弱点や利点をどのように隠し、どのように利用するのか、

全てにおいて大きな壁を思い知りました......

当然といえば当然です。プログラミングを勉強して半年の『駆け出し者』が、専門で研究している学生と対等であるわけがありません。

 

しかし、ショックに思うよりかは楽しみの方が大きかったです。新しい知識を得られただけでなく、自分が学生のうちにどこまで成長できるのか、といったことがなんとなく実感することができたからです。

 

続きを読む