あるSEのつぶやき・改

ITやシステム開発などの技術に関する話題を、取り上げたりしています。

Xamarin.Forms, XAMLのデザインをリアルタイムで実機確認できるGorilla Playerがすばらしい

はじめに

Xamarin を調べていたのですが、どうも Xamarin.iOS, Xamarin.Android はトレンドとしては旧式で、現在は Xamarin.Forms でほぼ開発をして、できない部分を Xamarin.iOS, Xamarin.Android で作り込むのだという結論に至りました。

それで、Xamarin.Forms を調べ始めたのですが、立ちはだかるのが XAML(ザムル)の壁です。

いやぁ、いろいろと分からないところも多いのですが、中でも不便だと感じたのが XAML のデザインをリアルタイムで確認する方法が公式には用意されていないということでした。

調べてみるとLiveXAMLというのがあって、かなりよさげなのですが残念ながら有償プロダクトでした。

Xamarin Live Player というのも存在するようですが、Android 版はあるけれど、iOS版が消えてしまっている模様。

それで、最後にたどり着いたのが Gorilla Playerでした。

このツールのすばらしいところは、ユーザー登録が必要だとはいえ、iOS 版、Android 版 の XAML ビューアーを無償で利用できるというところです。

実際に使ってみて、その機能も申し分なくこれはすばらしい Xamarin の XAML デザインツールだと思いました。

Gorilla Player のインストール

Gorilla Player のインストールは、まず Gorilla Player のサイトでユーザー登録をする必要があります。

すべて英語ではありますが、簡単なものなので問題なく登録できると思います。

ユーザー登録が済むと、Gorilla Player をダウンロードできます。

Windows 版と Mac 版があるので、ご自身の環境にあった方をダウンロードしてインストールします。

Mac では、起動時にセキュリティ警告が表示されるので、control キーを押しながらプルダウンメニューを表示して「開く」から初回は起動する必要があります。

Gorilla Player は、Android と iOS の端末にもインストールする必要があります。

それぞれのアプリストアで、「Gorilla Player」と検索すると出てくるのでそれをインストールします。

インストールが済んで、各端末からパソコンに接続できたら準備完了です。

Gorilla Player の動作について

この Gorilla Player ですが、パソコンにインストールしたものがサーバーとして動作し、各端末はサーバーに接続して XAML の更新情報を取得し画面を実機上でリアルタイムに書き換えるという動作をします。

実際に動作させてみる

実際に Xamarin.Forms のプロジェクトを作成して動作を確認してみましょう。

使い方は、Gorilla Player で表示したい XAML ファイルを右クリックして「Stick Gorilla to this」を選択すると、そのXAMLが実機での表示対象となります。

今回、サンプルの 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" xmlns:local="clr-namespace:HelloWorld" x:Class="HelloWorld.MainPage">
    <StackLayout>
        <Label Text="Hello,World" 
               HorizontalOptions="Center" 
               VerticalOptions="CenterAndExpand" />
    </StackLayout>
</ContentPage>

ラベルの「Hello,World」を「こんにちは、世界」に書き換えるとどのような動作をするかというと、テストでは Android, iPhone, iPad の3台を接続していたのですが、3台同時に更新されて感嘆の声をあげてしまいました

スクリーンショットは以下の通りです。

  • Android 変更前

f:id:fnyablog:20180917144837p:plain

  • Android 変更後

f:id:fnyablog:20180917145009p:plain

  • iPhone 変更前

f:id:fnyablog:20180917145136p:plain

  • iPhone 変更後

f:id:fnyablog:20180917145232p:plain

  • iPad 変更前

f:id:fnyablog:20180917145401p:plain

  • iPad 変更後

f:id:fnyablog:20180917145500p:plain

おわりに

XAML を実機ではといえリアルタイムにデザインを確認できる Gorilla Player はすばらしいですね。

Microsoft におかれましては、ぜひ買収などでこの機能を組み込んでいただきたいものです。

Gorilla Player があればかなり生産性が上がること間違いなしです。