Firebaseがとてつもなく便利、という話を聞いて、Xamarinから触ってみることにしました。iOSネイティブでもAndroidネイティブでもJSでもなくXamarin、という流れに、かなり回り道な感がありますが、Xamarinへの愛があればなんてことないよね。

Firebaseの設定

そういう訳で、まずはFirebaseの設定から。Firebaseのアカウントを作って、最初のプロジェクトを作ると、こんなページが表示されます。この例ではプロジェクトの名前を「xamarin-chat-sample」としました。

データベースへのアクセスキーの取得

まずはデータベースにアクセスするためのキーを取得します。あとでデータベースへのアクセス時に利用するので、控えておいてください。

左上の設定アイコンから「プロジェクトの設定」を選択し、

「データベース」タブを選択し、●印で隠れているトークンの場所にカーソルをあわせると表示される「表示する」リンクをクリックし、アクセスキーを取得します。

データベースへのアクセス権限を公開状態にする

検証を簡単にするため、データベースへのアクセス権限を公開状態にします。

上図のように、「Database」メニューから「ルール」タブを選択し、内容を以下のように変更します。

{
  "rules": {
    ".read": true,
    ".write": true
  }
}

これでFirebase側の設定は完了です。

Xamarin側のコード

今回はXamarin.Formsのソリューションとして、XamarinChatSampleという名前でソリューションを作成しました。ウィザードでの設定はデフォルト通りです。一部、プロジェクトオプションを以下のように変更しています。最初に参考にしたコードがこの設定で書かれていたので、踏襲しているだけです。

参考にした本：Mastering Xamarin.Forms

FireSharpパッケージを追加する

プロジェクトツリー上の「パッケージ」を右クリックして、「Add Packages...」を選択します。そこで「FireSharp」パッケージを検索し、プロジェクトに追加します。

Xamarin.Forms側とあわせて、ビルドするOS側にも追加しておきましょう。

Newtonsoft.Jsonなどの依存パッケージは、FireSharpパッケージを追加するとあわせて自動的に追加されます。

参考：FireSharp

Viewを書こう

投稿したメッセージが表示されれば良いや、という訳でこんな画面を作ってみます。

Xamarin.Formsプロジェクトに「Views」というディレクトリを追加し、その中にForms ContentPage Xamlを追加します。ここでは「ChatPage」という名前にしておきましょう。

ChatPage.xamlの中身はこんなコードになります。

<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="XamarinChatSample.Views.ChatPage">
    <ContentPage.Content>
        <StackLayout>
            <ListView x:Name="messagesView" VerticalOptions="FillAndExpand"></ListView>
            <StackLayout Orientation="Vertical" VerticalOptions="End">
                <Entry x:Name="content" Placeholder="Write something here..." Keyboard="Chat" />
                <Button Text="Send" WidthRequest="80" Clicked="OnSendTapped" />
            </StackLayout>
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

ここで忘れないうちに、アプリを開いたときにChatPageが開かれるよう、App.xaml.csを編集しておきます。

using Xamarin.Forms;
using XamarinChatSample.Views;

namespace XamarinChatSample
{
    public partial class App : Application
    {
        public App()
        {
            InitializeComponent();

           // ここを変更↓
            MainPage = new NavigationPage(new ChatPage());
        }

        protected override void OnStart()
        {
            // Handle when your app starts
        }

        protected override void OnSleep()
        {
            // Handle when your app sleeps
        }

        protected override void OnResume()
        {
            // Handle when your app resumes
        }
    }
}

この時点でChatPage.xaml.csに空のOnSendTappedメソッドを実装してから、ビルドしてiOSシミュレータで起動すると、まっさらなリストビューが表示されると思います。

Firebaseと連携させよう

そういうわけでやっとFirebaseとの連携です。ChatPage.xaml.csの内容はこんな感じにしてみました。

using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using FireSharp;
using FireSharp.Config;
using FireSharp.Interfaces;
using FireSharp.Response;
using Xamarin.Forms;
using XamarinChatSample.Models;

namespace XamarinChatSample.Views
{
    public partial class ChatPage : ContentPage
    {
        private IFirebaseClient firebaseClient = new FirebaseClient(new FirebaseConfig {
            AuthSecret = "(先ほど取得したデータベースへのアクセスキーをここに入力します)",
            BasePath = "https://xamarin-chat-sample.firebaseio.com"
        });

        private ObservableCollection<string> messages = new ObservableCollection<string>();

        public ChatPage()
        {
            InitializeComponent();
            Title = "Message";
            messagesView.ItemsSource = messages;
            ListenChatStream();
        }

        void OnSendTapped(object sender, EventArgs args)
        {
            AddMessage();
        }

        async void AddMessage()
        {
            var message = new Message { body = content.Text };
            await firebaseClient.PushAsync("messages/push", message);
            content.Text = "";
        }

        async void ListenChatStream()
        {
            await firebaseClient.OnAsync("messages", (sender, args, context) =>
            {
                messages.Add(args.Data);
            });
        }
    }
}

AuthSecretには先ほど取得したデータベースへのアクセスキーを入力します。BasePathはFirebaseコンソール上の以下の画面から確認することができます。

Firebaseにpushしているモデルは、以下のように定義しています。

using System;

namespace XamarinChatSample.Models
{
    public class Message
    {
        public string body { get; set; }
    }
}

上記までの実装で、テキストフィールドに何か入力してSendボタンをタップすると、Firebaseにデータが送信されて、そのデータがOnAsyncメソッドでListenされ、アプリ画面上に表示されるところまでの流れができました。ほぼリアルタイムに同期されるので、チャットぽい動作になります。

適当に何か入力してFirebaseコンソールでデータベースの内容を確認すると、以下のようにデータがちゃんと連携されているのがわかります。

あとがき

個人的にサクッとFirebaseとの連携を試してみようと思ったのですが、Firebaseコンソールの見方がよく分からなくてちょっとハマってしまったので、こんな記事を書いてみました。サクッと触ってみたい人の助けになれば幸いです。

Firebaseにはその他にも認証機能や通知機能といったものがあるので、こちらもXamarinで作例が作れれば良いなーと思っています。