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に書き出してみます。

https://www.youtube.com/watch?v=w--HhRGMgYw

無事動きました！

ひとまず、FirebaseをHoloLensの2Dアプリでは動かせました！