shuhelohelo’s blog

Xamarin.Forms多めです.

LiveSharpを使ってコードの変更をアプリ再起動なしで即座に反映する

20200717追記

UIをすべてC#で書ける機能C#マークアップ拡張においては非常に有用なツールと思う.

devblogs.microsoft.com

もともとの本文

Xamarin.Forms(だけに限りませんが)は現時点でホットリロードが可能になっていて,Xamlの変更であればデバッグ中の変更が即座にエミュレータや実機に反映されるため,開発が非常に便利になっています.

ソースコードの変更についてはもちろんデバッグの停止と再実行を行う必要があります.

LiveSharpはXamarin.Forms(だけに限りませんが)のデバッグ中のコードの変更をデバッグの停止・再実行を行うことなく,そのままエミュレータや実機に反映することができるアプリケーションです.

www.livesharp.net

インストール

公式サイトの手順のとおりです.

LiveSharpはサーバーとクライアントに分かれており,サーバーをdotnet toolコマンドでPCにインストールし,クライアントをプロジェクトにNugetでインストールします.

ですのでサーバーのインストールはPCへの1回だけです.

サーバーのインストール

コマンドラインで以下のコマンドを実行し,インストールします.

dotnet tool install --global livesharp.server

クライアントのインストール

Nugetでインストールします.

LiveSharp.Serverというパッケージがありますが,これは無視します.上記のとおり,サーバーはコマンドからインストールします.

f:id:shuhelohelo:20200715155805p:plain

実行

まずはLiveSharpのサーバーを起動します.

コマンドラインから以下のコマンドを実行します.

>livesharp

これでサーバーが起動しました.

f:id:shuhelohelo:20200715160222p:plain

サーバーを停止する場合はCtrl+Cです.

MVVMな形でサンプルプログラムを作成しました.

以下のViewModelを作成しました.

using MvvmHelpers;
using System;
using System.Collections.Generic;
using System.Text;

namespace XFHabitTracker.ViewModels
{
    public class HabitListViewModel : BaseViewModel
    {
        private string _message = string.Empty;
        public string Message
        {
            get => _message;
            set => SetProperty(ref _message, value);
        }

        public HabitListViewModel()
        {
            Message = "こんにちは!";
        }
    }
}

MvvmHelpersというライブラリを使っていますが,中でやっていることはプロパティの変更を通知する,といういつものことです.

Messageというプロパティがあって,これがView側のLabelのTextプロパティにバインディングされています.

            <Label
                FontSize="Large"
                HorizontalOptions="CenterAndExpand"
                Text="{Binding Message}"
                VerticalOptions="CenterAndExpand" />

それではアプリをデバッグ実行します.

デバッグを開始すると,ブラウザで以下のようなページが表示され,ここでLiveSharpのログを見れたりします.

f:id:shuhelohelo:20200715164400p:plain

さて,今回はエミュレータを使っていますが,以下のようにMessageプロパティにセットした文字列が表示されます.

f:id:shuhelohelo:20200715163241p:plain

次に,デバッグを実行したまま,ViewModelのMessageプロパティにセットする文字列を以下のように変更します.

f:id:shuhelohelo:20200715163440p:plain

そして保存すると,以下のようにエミュレータに表示されている文字列も変化します.

f:id:shuhelohelo:20200715163550p:plain

通常であれば,ここはデバッグの停止・再実行が必要な場面です.

これはかなり便利ですね.

LiveSharpはサブスクリプション型のアプリケーションで,個人であれば月々9.9ドルからになっています.

まだ使い始めたばかりですが,Xamlの変更だけでなくロジックの方の変更によって生じるViewの変化もリアルタイムで確認できるというのは,とても便利な気がします.

正直,ありかな,と.