Junpei Qawasaki

博報堂アイ・スタジオという会社でテクノロジーをベースに新規事業とかインタラクティブなものとかを色々とやっております

【IoT】LTE-M Buttonを触って概念を理解する (SMS/メール送信・Slack投稿・unity連携など)

f:id:jkawasaki:20181103113800j:plain
発表されてから予約日に即予約したSORACOMの「LTE-M Button」が届きました。

LTE-MもButtonも「よく分からんが、なんとなく理解したい」という人も一定層いるかなと思うので、基本的な所と触った所感を書いていきます。なるべく簡単に書くので概念で覚えて頂いてチャレンジャーが増えると嬉しいなと。

LTE-Mについて

まず、AmazonDashButtonとなにが違うの?って話ですが、概念で覚えるならばもうDashボタンのイメージでok。ボタン押したらAWSのLamdba※ってサービス上でプログラムが動きます。プログラムはカスタム出来るので好きに作る感じで、Dashはここのプログラムに欲しい製品を購入すると言う処理が書いてあって、Amazonでのお買い物が出来るって訳です。

大きく違うのは「回線」。
従来のDashボタンはWiFiのセッティングが必要で、つまりWiFi範囲外に出たら使えない。SORACOM LTE-M Buttonの大きな新規性はKDDILTE-M回線を使う所にあって気持ちとしては携帯と同じ気持ちで使えます。
LTE-M」はいわゆるLTE回線の「空いてる帯域」をやりくりして、上り/下りとも最大1Mbpsくらい(携帯の100分の1くらい)の通信が可能な通信キャリアならではのLPWAというもの。LPWAって言うとLoRaWANとかSigfoxとかが有名なところで、弊社でやってるというかメインのお仕事である「TREK TRACK」でもLoRa変調の仕組みを採用しております。
trektrack.jp

f:id:jkawasaki:20181104233730j:plain

Lambda … AWSAmazon)が提供するサーバーレスで処理が実行出来るサービス。Node.js (JavaScript)、PythonJava (Java 8 互換)、C# 、および Go で記述されたコードがサポートされてて何かと便利らしいけど、わたくし、あんま知らないです

■既存LPWAと比較したメリット・デメリット(個人的な所感)

メリットとしてはキャリアの回線を使うので携帯に近いイメージで使えます。とはいえ、厳密に同じではないらしいのでその辺りはKDDIさんのページをみて頂ければと。今の所、自分の生活圏で使う分には問題なさげです。
反面、デメリットとなるのはキャリア回線に依存するので圏外の場所で使おうとしてもどうにもならない所です。920MHz帯のLoRaたちはアンテナを自営する事で山の中とか電波の無い所でも使うことはできます。ただ、このアンテナ自営はコストと労力がかかる上に、通信を行うアンテナ(ゲートウェイ)は何かしらの回線に繋がってないといけないので一長一短ですね。
ゲートウェイは安いものでも1台100,000円近くしてしまうのと、工事したり電気通信事業の届出が必要だったりとかするので個人のモノづくりに向いていないのが現状で、920MHz帯はハード(電子工作)の知識が必要だったり、通信データ量がそもそも数byteでセンサー向けだったりと参入ハードルがあるのでまず触るのにもLTE-M良いし将来性もあると思います。

LTE-M Buttonで何が出来るのか

Buttonは1回押し、ダブルクリック、長押しの3つのアクションが使えます。それぞれの押し方をされたら何をするかはそのさきのプログラム次第。 ボタン(デバイス)単位でID管理されるので、どのボタンが押されたか、というのもLambda側で判定出来ます。

Training① 押したらSMS / メール送信をやってみる

今なら3980円というお手頃価格で手に入るボタン、とりあえず触ってみるというレベルであればプログラム書かないでも実行することが出来ます。まずは一番簡単なSMS送信orメール送信のやり方。

[前提]
SORACOMアカウントが必要です(LTE-M Button購入の時点で必要ですが)
AWSのアカウントが必要です

LTE-M Buttonの梱包を開けるとおもむろにデバイスと電池が入ってるだけで特に使い方は書いてないのですが、SORACOMのサイトに行くと丁寧に書いてあるのでいくつかWebで検索すればすぐに解決します。簡単に言うと4ステップ。

f:id:jkawasaki:20181104183325p:plain
①「AWS IoT 1 click」アプリを入手してデバイス登録
②SORACOM UserコンソールでLTE-M Buttonのデバイス登録をします。
③WSコンソールに「AWS IoT1-Click」からデバイスを登録
④Lambdaで新規関数を作成。
※SMSとメール送信はプログラム書かずに出来ます

■実行結果

ボタンを押して実行するとこのようにメールやSMSが飛んできます。今回は "たすけてボタン" と言う前提でたくさんの"たすけて"が送られてきます。

f:id:jkawasaki:20181103220811j:plain
実行結果

詳細はSORACOMさんの公式に書いてあるので、気になる方はぜひ。
サクッとやれます。
blog.soracom.jp


Training② Button押したらSlackにpost

次はSlack。これも情報としては既にWebに出ているので概要だけ。簡単に言うと3ステップ。

① Slack Webhook URLを発行する(所要時間3分)
まずは投稿したいSlackのワークスペースから「Webhook URL」を発行しましょう
② 次に処理を行うLambda関数を作ります(所要時間7分)
③ で、実行すればSlackに飛んできます(所要時間1分)

f:id:jkawasaki:20181104195617p:plainf:id:jkawasaki:20181104195532p:plain
関数作成

f:id:jkawasaki:20181104195524p:plain
Button押してSlackにpostされるの図

こちらも詳しいやり方は以下に載ってます。
SORACOM LTE-M Button powered by AWS をクリックしてSlackに通知する | Getting Started with SORACOM LTE-M Button | SORACOM Developers

LTE-Mボタンの企画アイデアを考える上で気にすべき事

用途が大変広そうなLTE-M Button、個人的にもまだアイデア出てきてないんですが触ってみてたら以下3点は気にしないといけないなと思いました。ここまで読んで「よく分からん」という方も以下3点は知っておいてください。

気にすべき① :押してから処理の実行まではラグがある
これ、省電力を実現する為にも必須らしいのですがButtonは押されてからセッション準備→投げるという動作をするので、そもそもLambdaの関数が実行されるまで10数秒のインターバルがあります。なので、どんなに電波が良くとも処理が軽くとも「押した瞬間何かが起きる」みたいな事にはならず、インタラクティブなものに使う場合、体験の設計が必要です。下のようにしばらく点滅して緑になったら処理完了という感じです。

youtu.be


気にすべき②:電波と実行回数上限
これは上でも触れたんですが、そもそも電波が無い所だと使えないのでご注意を。

気にすべき③:Lambda関数を挟むという事
Lambdaを挟む事で可能性は無限なのだけど、クライアント→サーバじゃなくてある意味、サーバ→クライアントになるです。なので例えばクライアント側に処理を投げたい時はそこの別スキルが必要になります。
と、いう事でunityと連携しようとしたら面倒だったというのを最後に記しておきます。

Training③ UnityとLambdaでなんかやる

今後、色々使っていきたいと考えるとまずは自分で扱いやすい環境での動作みたいなーと思っており、unityでどうにかならんかな、と思って試行錯誤してまずはunity→Lambdaに繋ぐところを作ってみた。
一応、AWSからSDKが出ているのだけどRoleを生成したりなんだりと前手順が複雑で結構な時間がかかった。。しかもunity だと悪名高いWWWの変更のタイミングをSDKがまたいでいてエラーの切り分けが大変。結果として繋ぐ事は出来たのだけど、ButtonClick→Lambda側で処理結果をUnity側で定期的に見るみたいな事をしないといけなくて、そこまでやっても何が出来る訳でも無いので今日はここまで。

f:id:jkawasaki:20181104204510p:plain
AWS SDKからLambda関数リスト表示したとこで中断。

Lambda連携はこちらの記事を参考にさせていただきました。
blog.be-style.jpn.com



■最後に

もっと先になると思われてたLTE-Mがすぐに触れる環境が整備されて大変ありがたいですね。プラットフォームが整備されるほどその技術の進化は早いんじゃないかなと思います。とはいえ、スマホLTE)を日常で使うのが当たり前の世の中で、LPWAならではの体験っていうものを直感的に伝えるにはどうすれば良いかは日常的に探さないといかんな、と思った次第です。


では。

【Python×Unity】パーソナルウェザーステーション「netatmo」からAPI経由でデータを取得する

f:id:jkawasaki:20181007110055j:plain
屋外&屋内の気象観測が出来る「netatmo」というセンサーを入手しまして。
写真左から屋内モジュール、屋外モジュール、風速計、雨量計です。数万円で精密な環境センサが手に入る時代。
とはいえ、製品自体は数年前に発売されたものなのだけど、農業とかアウトドア関連のものだと使い勝手良いと思っていて。
例えば「幕張メッセの今の二酸化炭素量」とか「港区のビル屋上の風速」みたいなのって、フツーはピンポイントで分からないのだけど、コレ置くだけで把握出来ます。なので、任意の地点の雨量を計測して、雨量が一定量超えたらXXする、みたいな事も出来るし、高機密性の家とかだと二酸化炭素濃度が上がりやすかったりとかするので、一定のCO2濃度超えたら換気するみたいなスマートホーム的な物にも使えそう。

パーソナルウェザーステーションといえど、精度は高いので台風とかそういう時にもピンポイント雨量がわかるだけでも中々便利でありまして、日本の各自治体で1台ずつ導入して頂いてなんか作らせてほしい。

それはさておき、コレをとりあえず触って行きます。「こんな段取りでセンサーの特徴理解していくよ」って話なので、馴染みが無い人にはくそつまらない記事だと思います。のでご了承くださいませ。

○netatmoについて

屋内センサ(親)はWiFiクラウドに繋がってて気温、湿度、騒音、二酸化炭素量なんかが収集されます。
別売りの屋外・風速・雨量モジュール(子)は電池駆動。屋内と無線で繋がってて風速とか雨量とか気圧とか取れます。
風速や雨量のデータを集めたい場合、通常だと専用のモジュールとシールド買ってArduinoやラズパイと繋げるという以下みたいな選択になりますが↓↓
ウェザーメーター(風向・風速・雨量) - Weather Meters/SEN-08942 - ネット販売
ざっくり考えても以下3点の理由で効率悪い。

・個々のモジュール制作にコストがかかる
・収集されるデータが生データなので成型するのが大変
・苦労して完成したとして、果たしてそのデータにどれだけ信頼おけるのか

風速についても超音波モジュールの組み合わせで安価出来る、みたいな記事もあるのだけど、実務で使うには信頼性が怪しい。
そんな訳で、辿り着いたのがnetatmoです。公式のアプリもあってちょっと設定するだけで以下のような管理画面でグラフ見れる、すごい。
f:id:jkawasaki:20181008180645p:plain

で、肝心のデータの正確さはどうなんだって話なんですが、家の外に置いてたらちょうど良く台風来まして。そのデータがこちら。
f:id:jkawasaki:20181008181023p:plain
大型台風で道路の木とか倒れてしまう時で相当な風速だったのだけど、壊れることもなく取得に成功。気圧も良い感じのカーブを描いてた。
ただ、風速がkm表記なんすよね。日本の場合はm/s表記がスタンダードなので、変換をかませないといけなくて、変換してみるとこの値が正しいのかどうなのかはまだちょっと微妙。

とはいえ、センサーとしての信頼度は高く使い勝手が良いのは分かったのでAPIから色々取得出来るようになりましょう。と。

○netatmo APIをターミナルから触ってみる


※基本的な部分は以下記事を参考にしてもらう前提で割愛※
NetatmoウェザーステーションAPIをさくっと呼び出す

netatmoの管理画面でアプリ登録をするとIDとsecret keyとか発行されるので、それを使います。
疎通確認するくらいなら以下のコマンドを打てばok。

curl -X POST https://api.netatmo.com/oauth2/token -d "grant_type=password&client_id=[自分のID]&client_secret=[自分のシークレットキー]&username=[メアド]&password=[パスワード]"

f:id:jkawasaki:20181008213934p:plain
こんな感じのaccess_tokenが返ってくるので、それが返って来るなら、少なくとも使える状態にはあるはず。
とはいえ、これでは何もデータが見れないので、まずはAPIから各種データを取得したい。
が、ちょっとSDKは個人的に好きな言語のが無かったのです。なのでまずはPythonで取得する事から始める。

Pythonでデータを取得する


今回はlnetatmoというライブラリを拝借。
github.comどうでもいいけどサムネの画像の主張がすごい。
2日くらい色んな手法を探したのですが、Netatmoを掘り下げて行くとネットの海を2周遊くらいして、最終的にこいつに行き着きます。一応、他にも2つくらいはやり方あります。

ex.py

#!/usr/bin/python3
# encoding=utf-8
import lnetatmo
#tokenを取得
authorization = lnetatmo.ClientAuth(
                clientId = "自分のID",
                clientSecret = "自分のシークレットキー",
                username = "メアド",
                password = "パスワード",
                scope = "read_station"
)
#天気情報の取得
weather_station = lnetatmo.WeatherStationData(authorization)
#天気情報の表示
print(weather_station.lastData())

で、こいつを実行すると、こうです。
f:id:jkawasaki:20181008183026p:plain

無事に各種、センサー値が返って来ました。
さて、これで色々出来るようになったのだけど、今回の目的としてはUnityでこのデータを触りたいという思いがあるので、UnityからPython経由で取得する方法を探ります(2018.10.8現在未完成)

○Unityでデータを取得する


今回参考にさせて頂いたのは以下のブログです。
【Unity】「IronPython」で Python から Unity API を呼び出す方法 - コガネブログ
Unity上でPythonを使う①【アセット組み込み編】 - kitao's blog
Unity上でPythonを使う②【外部ファイル読み込み編】 - kitao's blog

Python連携するにはIronPythonが良いらしいのだけど、ライブラリ自体が汎用的で複雑なので調べ方を間違えると把握するのむずい。
やりたかったのは後者のブログの内容なのだけど、これの通りだと残念ながら動作しなかったです。
前者の方がコードもシンプルだったので割と楽に動いた。
■exsample.cs

using IronPython.Hosting;
using UnityEngine;

public class Example : MonoBehaviour
{
    public TextAsset m_textAsset;

    private void Awake()
    {
        var text = m_textAsset.text;
        var engine = Python.CreateEngine();
        engine.Runtime.LoadAssembly(typeof(GameObject).Assembly);
        var scope = engine.CreateScope();
        var source = engine.CreateScriptSourceFromString(text);
        source.Execute(scope);
    }
}

で、Assetsの下に配置したPythonのコード(.txt)側でログ出力をしてるのだけど上記csコードが動かしてくれます。
f:id:jkawasaki:20181008183957p:plain

こんな感じに。
Pythonの中に書いたDebug.Logが出力されただけ。
て、よく考えたらこれ「UnityでPythonコード実行」じゃなくて「PythonでUnityのAPIが叩ける」なので、そもそも違う。

netatmoデータ持ってくるにはlnetatmoのライブラリを経由する必要があるので、このままでは叩けない。
そんで、ここまで来て一旦時間切れということもあるので本調査は終了。

本当は、UnityからnodeとPythonを自由に使えるようになったら色んなこういうAPI解放してる外部製品を触り放題だから、そういう所を目指してるのですが、まだいくつか触っていかないと見えんすね。

では。

GoPro HERO7 BlackのLiveStreamingを試す

GoPro HERO7 Blackを買いました。
f:id:jkawasaki:20180930184707j:plain

特にカメラ好きな訳でも無く、これまでGoPro自体はそこまで触ってなかったのだけど、HERO7で追加された機能は開発で応用したり企画でも使えるなーと思っての導入。新機能の中で琴線に触れた2点が「HyperSmooth」と「LiveStreaming」。で、今回はLiveStreamingを試してみたという話。

大前提としてGoProは購入してもマニュアルついてる訳では無くて、接続とかはアプリに従ってれば良い感じに出来るという思想です。とはいえ、個人的にもストリーミングの設定でハマったので、上手くいかない場合はこちらにあるマニュアルを見ると色々書いてあるので、ハマった人はぜひ。

さて、お仕事で使う前提で考えてるので、まずはGoProの映像がどうやってネットワークに出て行くかを知らないといけません。
結論から言うとスマホのAppで連携して外部に出ていきます。
接続を進めて行くと分かるんですが、BluetoothWiFiの共有で上手い感じにネットに出ていきます。Facebookの連携もスマホからやります。
ざっくり言うと以下のような感じですね。

f:id:jkawasaki:20180930180844p:plain

ここでポイントなのが

スマホ側から接続したいAPを指定出来る
・パーソナルホットスポットスマホの回線を使う事も可能

と、言う事です。
前者は高速なWiFiがある環境の時には使えるけど、GoProでLive配信したい時って屋外の環境が多いと思うので、その場合は後者を使う感じになります。
ちなみに、最初やろうとした時は何回やっても「カメラとの接続が切れました」って出て上手くいかずカメラの初期化&アプリ再設定したら治りました。おそらくなんだけど最初にBluetooth接続→WiFi接続をやるときにカメラの名前があったりとか、GoProアカウントとFacebookアカウントの連携が上手く言ってなかったので、同様の状況な人はやり直すとすんなり行くかと思います。

f:id:jkawasaki:20180930181709p:plainf:id:jkawasaki:20180930181706p:plainf:id:jkawasaki:20180930181722p:plainf:id:jkawasaki:20180930181717p:plainf:id:jkawasaki:20180930181714p:plain

だいたいこんな感じで、スマホの回線を使ってる場合はテザリングみたいな表示になります。この辺りのWiFiでカメラと接続、回線はキャリア回線を使うってシーンが例えばSONYのCameraRemoteAPIだと手動でIP指定したりとか、既存のWiFiが使えないとかの制約があるのに対してGoProはその辺りストレスなく使えるのでホスピタリティが高いなぁと思った次第です。

ちなみにFBアカウントは同じスマホ内に入れたFBアプリのアカウントに紐付くので、専用の配信アカウントとかでやりたい場合はFB側で入り直して連携すればそれに紐づきます。ライブストリーミングの設定自体が上手くいかん、と言う方は詳細な設定方法のURLが製品マニュアルに載ってるのですが、そこから直リンク叩くと404になったので、一応、こちらからライブストリーミングの設定方法に飛べます。ただ、英語しかないのと、あんまり詳しいことは書いてないです。

さて、Live配信の方ですが、HERO7自体がストリーミング出来ると言うのがウリで贅沢はいえないのですがクオリティは720p(または480p)になります。そしてネットワーク環境によるけど、ラグはそこそこあるので「超高解像度でリアルタイム配信」とか言ってしまうとそれは嘘になるのでご注意を。超クオリティのLive配信をしたい場合にはGoProじゃなくて、既存の高解像度配信の仕組みを使うのが良いです。

とはいえ、良いのがこのLive配信でも「Hyper Smooth」は生きるところ。ジンバルとか用意しなくともブレの無い画像でストリーミング配信が出来ます。逆に言うと定点カメラだとそんなに意味ないって感じすね。HERO7では夜景でのラプス撮影とかの機能も追加されてますが、それはストーミングでは使えません。あくまで目に見えてるのと同じような風景になる感じです。また配信範囲の設定はストリーミング前の設定画面で出来ますが、最初は「自分のみ」にしておいて配信が出来てからFacebook側で公開範囲を変えるのが良いかなと思います。でも事前に告知したい時とかは「公開」でやっておいて一時停止にするのが良いのかも。

撮影した画像とか、ハード仕様の詳細なんかは以下、「強火で進め」さんがまとめられておりますので割愛。
d.hatena.ne.jp
d.hatena.ne.jp

そんなこんなでスマホとGoProがあれば細々とした作り込みが不要で、手ブレ少ないLiveStreamが出来ると言うのは強力だと思っていて、今後、色々と活用が広がる気がしてます。
ただ、個人的には企画で使う際に「現場での設定のめんどさ」みたいなのは加味した方が良いかなと思いました。手放しで誰でも出来るものでは無いので、初期設定はしておいて、あとは使う度「こう使ってね」と言うマニュアルを簡単に作ればイベントなどでの実運用にも耐えれるな、と。あと、気になるバッテリーは配信せずに1時間くらいいじってたらバッテリー半分くらいまで減ったのと、自動で配信が切れる時間が15分だか30分だかであるので「配信前まで充電」して「15分配信したらバッテリー交換」みたいな使い方をある程度決めれば良いかなと思いました。長尺で回しっぱなし配信したい、みたいな時は有線で繋ぎながらで出来るけど、スマホ側かGoPro側がスリープに入ると切れるので、その辺りはそういう使い方したい場合に検証した方が良いかなと思いました。

今回はLiveStreamをするまでの流れの把握と、その実態を知るのがメインだったのでこの辺で。
次はGoPro APIを叩いてみるみたいなことをやってみたいなと思います。

【機械学習&IoT】星空と記念撮影する自動撮影ブースを作りました

f:id:jkawasaki:20180727115801j:plain

2018年3月のSXSWにも出展した自動撮影ソリューション『capture』をバージョンアップ。
captureは元々、特定物体検出のライブラリ「YOLO」をiPhone上で動かして、条件がそろったら自動撮影してくれるアプリで、ニセコでスキーの自動撮影を実験的にやってました。それについては以下のリリースをご覧くださいませ。

www.i-studio.co.jp

今回は"特別な瞬間を自動で撮影"というコンセプトはそのままに、アウトドア環境で星空と一緒に撮影出来るカメラを作るという企画で、撮影のためのグランピングブースから制作し、ブース内のLED照明とセンサと高感度カメラ(SONY α7)を同時制御してます。

f:id:jkawasaki:20180727115617p:plain

captureはいわゆるiOSアプリなので、星空を撮影するにはいくつかハードルがあります。ノイズ、シャッタースピードISO感度、絞りなど。※ちなみにカメラには詳しくないです

まず最初はiOS側でAV Foundationで設定をいじってどこまで撮影出来るか確認。→ノイズ多い。
確かに星は映るけど、ノイズ多すぎて駄目。

根本の原因であるノイズなのでハード的な限界はある為、考えたのがSONY CameraRemote API
簡単に言うとSONYのカメラ製品をプログラムから制御出来るヤツ。最終的にブースではiPhoneとカメラを設置にしなきゃなので大きさを考慮して"QX100"と言うものを中古で購入して試してみたところ、ノイズは大幅に低減。

f:id:jkawasaki:20180727121044p:plain

しかしながらこのQX100はやりたいことに大して大きな問題ありまして、リファレンス上は"Shutter Speed"と"ISO SpeedRate"のAPIでSet出来ると書いてあるけど実際にはエラーが返るという。

Camera RemoteのらSDK自体はもうあまり更新されてないのだけど、機体のファームウェアバージョンとかSDK最新じゃないと不具合起きるとのことで403 ForbiddenのままでQXは役割を終えました。

画質の最大化やバッテリー容量の観点からQXだと心許ないので、「α7」に変更

レンズはSEL28F20はフルサイズの28mm(カメラ詳しくないのであんまり分からない)。
カメラ決まったのでこれをiPhoneと一緒に設置出来るための筐体を制作。コストと運用しやすさを加味してシンプル&化粧板設計。
f:id:jkawasaki:20180727111711p:plain
f:id:jkawasaki:20180727111722p:plain

そして星が映っても人の顔がちゃんと映らないと意味が無く、大自然の中にカメラだけ置いてもそれが良い写真になるかは体験者に依存してしまうので、グランピングブースを制作して、LED照明をカメラと連動させる事に。
最終的なブース全体像と、スマホカメラとの差分はこんな感じです。
f:id:jkawasaki:20180727121744j:plain

LEDは撮影前、撮影中、待機中で、それぞれ個別に光量が変化。照明制御はRaspberryPiとiPhoneをBLE連携、LEDはI2C制御基盤を4枚。iPhone側と信号をラリーする形で自動撮影を進めております。

そんな感じで多分、星空と記念撮影に特化したブースは他であんまり無い物になったかと思います。
このブースは「ほしのしずくスタジオ」と言う名前で2018年7月28日より岩手県の雫石プリンスホテルに常設されますので、ぜひ!

★ Staff List
Art Director: Yosuke Sasagaki
iOS Engineer: Yuta Hirakawa, Takafumi Oyama
Device Engineer: Yasuyuki Ogino
3D WebViewer: Hiroshi Koi
Front and Backend Engineer: Kota Toda
Technical Director(Web):Yoshimasa Yokoyama
Product Design:Takumi Maezawa , Yosuke Sasagaki
Designer: Yosuke Sasagaki
PR : Miki Senoo , Takafumi Kato
Producer and Technical Director : Junpei Qawasaki

■ニュース記事は以下です
news.ibc.co.jp
news.biglobe.ne.jp

【Unity】vj-kitで音楽とオブジェクトを連動させてビジュアライザを作る

音楽と連動するオブジェクトを作りたいな、と思いました。
で、調べたらvj-kitなるものがあるじゃないですか。

GitHub
https://github.com/unity3d-jp/fuze-vj-kit/

使い方は説明しすぎないざっくりしたREAD MEもついてるのでそちらと、他にも紹介しているページあるのでそれをご覧下さい。

■参考
fuZe VJKitの使い方 | Design Ambience Blog

で、前回のエントリで書いた地球と宇宙のサンプルにそのまま音を反映させていきます。
f:id:jkawasaki:20140301052418p:plain


①音を鳴らす準備
vj-kitのサンプルのHierarchyに[AudioPlayer]と[VJManager_HighMidLow]ってのがあるのでその2つをコピって自分のHierarchyにぶち込みます。
f:id:jkawasaki:20140301171744p:plain

②音を選択する
AudioPlayerを選択してAudioSourceに音を入れます。
今回はyoutubeにも上げたいのでたかがブログで権利が云々言われたくないのでYoutube Audio Libraryからフリーの音を広いました。

SphereとPlaneにコンポーネントを追加する
[VJMaterial Propety Modifer2]のコンポーネントを追加します。Modiferは音に合わせて常に変化するコンポーネント。ビジュアライザならこれがおすすめです。
地球の方はHighの音に合わせて色が変わるように[VJMaterial Propety Modifer2]のHighを、Planeの円はBassに合わせて大きさが変わるように調整。
f:id:jkawasaki:20140301172347p:plain

これだけやって実行すると音に合わせて大きさと色が変わるようになります。
デフォルト設定でも「それなり」な感じになりますが、結構反応しちゃうので今回はMid全切り(いわゆるドンシャリ)に設定を変えたりしてます。

実行した結果はこんな感じ。

vj-kitとても使い易いのですがデメリットは親切がゆえにファイルが重過ぎる事ですね。
4月に原宿で展示がある予定なのでそこまでにちゃんと派手なのを作っていきたいな、と思います。

【Unity】SkyBox(背景)を簡単に360度回転させる方法

ちょっと下記のようなScene背景を自動で動かさなくてはならない事がありました。
f:id:jkawasaki:20140301052418p:plain

Webでちょいちょい情報転がっているだろうと思って調べてみましたが、思ったよりも情報量少なくてしかもほとんどが海外のQA情報交換レベルだったので困った。
で、時間も無かったのでUnity Technologys Japanに技術問い合わせしたらUnityエバンジェリストの高橋さんが1日くらいでサンプル作成して返信くれた。優しぃ。

GitHub
https://github.com/keijiro/GalaxyBox

で、せっかくサンプルまで頂いたので
今回はこれを元に実際に回転させるやり方を説明します。

Scene上で背景を表示させるには「SkyBox」を使います。
最終的に回転させるのには標準Assets使わないのですが基本として覚えて貰った方が話が早いです。Standard Assetsにskyboxesというのがあるのでこれを使います。

Assetsに見当たらなかったら右クリック[import package]でインポートしてください。
f:id:jkawasaki:20140301035314p:plain

で、まずは空を出すのですがこれは簡単で、[Edit]➡[RenderSetting]を選択してInspectorのskyboxの設定を変えるだけです。
f:id:jkawasaki:20140301040649p:plainf:id:jkawasaki:20140301040700p:plain
さっきのSkyboxesをインポートしておけば選択画面で標準搭載のSunny1が選べるのでまずはそれを選択します。
※Skybox適用前
f:id:jkawasaki:20140301040729p:plain
※適用後
f:id:jkawasaki:20140301040756p:plain
背景が表示されました。これだけでも充分いきふん(雰囲気)でます。これがskyboxの力です。

で、回転させるとなると少し手順が変わります。

①必要なファイルをプロジェクトに格納
上記GitHubのコードから下記3点をAssetsに入れます。
・GalaxyBox.shader
・GalaxyBoxUpdater.cs
・RandomRotation.cs
shaderはshaderフォルダに、他2つはScriptに格納するとわかり易いです。

②背景imageの準備
背景にしたい画像をAssetsに放り込んでダブルクリックするとimageSettingが開かれます。
ここでは2048*2048の画像を使っています。まずは図のようにsettingを変更してみてください。
f:id:jkawasaki:20140301051940p:plain
変更すると画像アイコンがボックス型に変わります。
各種設定は色々意味があるのですが、今回に関してはこれがわかり易かっただけなので適宜変えてもらえればと。

②Materialにシェーダーを追加する
新規にマテリアルを作成して、そこに②の画像を適用します。そして①で追加した回転出来るシェーダに変えてあげます。[Shadet]->[Custom]からGalaxyBoxを選択してください。
f:id:jkawasaki:20140301043643p:plain
ちなみに今回紹介する方法、現状ではcubemap形式じゃないと背景は適用出来ないです。
skyboxである以上、boxのそれぞれの面にテクスチャ指定とかもやり方あると思いますが。

コンポーネントの追加
で、最後に適用したいオブジェクトにコンポーネントを追加してあげます。
今回は真ん中の玉(sphere)に2つのスクリプトを適用します。Updater.csの方にはまたマテリアル適用してあげないといけないのでご注意ください。

で動かすとこんな感じになります。
わかり易くplaneとsphereにはテクスチャを貼ってます。

画面全体が動く感じになるのでダイナミックさが増して良い感じ。
宇宙以外のリアルな使い道はいまの所思い浮かばないのですが。
いまはスクリプト上、ランダムで360度に動いていますが、ちょっと変えてあげればスピードも回転方向も自分でカスタム出来るかと。

こんな感じで簡単に回転出来ました。Unity Japanサポートのお陰ですが。
必要な方は是非お試しください。<告知>
UniteJapan2014にて「フィジカルコンピューティング分野におけるUnityの可能性」というタイトルで講演させてもらうことになりました。
http://japan.unity3d.com/unite/unite2014/schedule

なんでこれが必要だったかも含めたかも話す予定です。ぜひご覧ください。