FirebaseをHoloLensの2Dアプリで動かすメモです。
きっかけ
HoloLensでFirebaseが使いたくなり、UWP+Unityの場合、標準のUnityライブラリだとAndroid/Swiftに特化しているようなゴツいライブラリぽいので追いかけていたところ、以下の良い記事を見つけました。
Firebase C# library – Step Up Labs – Medium
同じように悩んでおられる方で、なんと自分でライブラリ作っちゃった模様。すごい。
step-up-labs/firebase-database-dotnet: C# library for Firebase Realtime Database.
これを使ってみます。
プロジェクト作成
空白のアプリを作ります。
FirebaseDatabase.net インストール
パッケージマネージャーでインストールします。
Install-Package FirebaseDatabase.net
コマンドを打ちます。
無事インストールされました。
使ってみる
ブログラムを設定していきます。
表示 MainPage.mxml
表示側はシンプルな作り。データが取得されると内容が表示されます。
<Page x:Class="AppFirebaseUseLibrary.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:AppFirebaseUseLibrary" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"> <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> <Button Content="DataAdd" HorizontalAlignment="Left" Margin="334,346,0,0" VerticalAlignment="Top" Height="81" Width="262" Click="Click_Add" FontSize="36"/> <TextBlock x:Name="myTextBox" HorizontalAlignment="Left" Margin="114,97,0,0" Text="TextBlock" TextWrapping="Wrap" VerticalAlignment="Top" Width="713" Height="223" FontSize="36"/> <TextBlock HorizontalAlignment="Left" Margin="25,18,0,0" Text="Firebase Test" TextWrapping="Wrap" VerticalAlignment="Top" Width="515" Height="80" FontSize="36"/> </Grid> </Page>
動作ソース MainPage.mxml.cs
動作ソースです。
new FirebaseClientのところに自分のFirebaseのURLを指定します。今回はRealtime Databaseでテストモードの状態で使うのでトークンは使わずURLだけです。
- 起動時にデータを送る PostAsync
- クリックするとデータを送る PostAsync
- リアルタイムにデータを取得するRealtime Stream API
- ひとつだけ取得するOnceAsync
- MyDataで今回送るデータを設定
というのを行っています。
using System; using System.Collections.Generic; using System.IO; using System.Linq; using System.Runtime.InteropServices.WindowsRuntime; using Windows.Foundation; using Windows.Foundation.Collections; using Windows.UI.Xaml; using Windows.UI.Xaml.Controls; using Windows.UI.Xaml.Controls.Primitives; using Windows.UI.Xaml.Data; using Windows.UI.Xaml.Input; using Windows.UI.Xaml.Media; using Windows.UI.Xaml.Navigation; // Debug using System.Diagnostics; // Firebase using Firebase.Database.Streaming; using Firebase.Database; using Firebase.Database.Query; // Task using System.Threading.Tasks; using System.Threading; // 空白ページの項目テンプレートについては、https://go.microsoft.com/fwlink/?LinkId=402352&clcid=0x411 を参照してください namespace AppFirebaseUseLibrary { /// <summary> /// それ自体で使用できる空白ページまたはフレーム内に移動できる空白ページ。 /// </summary> public sealed partial class MainPage : Page { FirebaseClient firebase; public MainPage() { this.InitializeComponent(); firebase = new FirebaseClient("https:// .firebaseio.com/"); // 起動時にデータを送る // そうしないとデータがないのでデータ取得時にエラーになる MyData v = new MyData(); v.value = new Random().NextDouble(); Task.Run(async () => { var dino = await firebase .Child("mydata") .PostAsync(v); }); // Realtime Stream API var observable = firebase .Child("mydata") .AsObservable<MyData>() .Subscribe(d => RefreshText(d)); // ひとつだけ取得 // OnceAsync Task.Run(async () => { var results = await firebase .Child("mydata") .OnceAsync<MyData>(); var resultObjects = results.Select(obj => obj.Object); Debug.WriteLine("取得完了:" + resultObjects.First().value); }); } // ボタンを押した時にデータを加える private void Click_Add(object sender, RoutedEventArgs e) { MyData v = new MyData(); v.value = new Random().NextDouble(); Task.Run(async () => { var dino = await firebase .Child("mydata") .PostAsync(v); }); } private async void RefreshText(FirebaseEvent<MyData> v) { Debug.WriteLine("RefreshText:" + v.Object.value.ToString()); // そのまま書き込むとUIでエラーになるのでDispatcher.RunAsyncでちゃんとする await Dispatcher.RunAsync(Windows.UI.Core.CoreDispatcherPriority.Normal, () => { this.myTextBox.Text = "データ変更:" + v.Object.value.ToString() + "\n" + "データID:" + v.Key; }); } } // データクラスMyData public class MyData { public double value { get; set; } } }
動かしてみる
いざ動かしてみます。
まず起動するとFirebase上にデータが登録されていきます。これは2度起動したときの状況なのでデータが2つ。
HoloLensに書き出してみます。
無事動きました!
ひとまず、FirebaseをHoloLensの2Dアプリでは動かせました!