Posted at

LiveXamlを有効にする手順


はじめに

Xamarin.Formsでモバイルアプリケーションを開発するとき、WPFやWinFormsのようなデザイナがないため、xaml書いてはエミュレータまたは実機でデバッグして表示を確認することを繰り返す必要があります。

熟練の方々にはxamlを書きつつ脳内には正確なUIのイメージが構築されているのだと思いますが、私のようにデザイナにおんぶにだっこな人間にはなかなか大変だったりします。

そこで最近巷で噂のあ「LiveXaml」というツールが非常に便利です。

これは、エミュレータまたは実機でデバッグ中にxamlを修正すると、その修正内容が直ちにデバッグ中のアプリケーションに反映されるという、素晴らしいものです。

その効果については動画でもググってもらうとすぐにわかると思います。

今回は、そのインストールについてです。

私はインストールするときに拡張機能だけインストールして「あれ、できないぞ?」と2時間ぐらい悩みましたが、インストールが必要なのは拡張機能だけではなく、Nugetパッケージもです。


LiveXamlを使えるようにするまで

LiveXamlを使えるようにするには、以下の2つをインストールする必要があります。

ちなみに、14日間の無料トライアルがあり、これはアカウントの登録など必要ありません。

インストールが完了したらすぐに試用を開始できます。


  • Visual Studio拡張機能のインストール

  • Nugetパッケージのインストール

拡張機能だけでは動きません。


拡張機能のインストール

メニューのツール拡張機能と更新プログラムを選択してください。

image.png

オンラインタブで「livexaml」を検索すると、「LiveXAML for Xamarin Forms」という拡張機能が見つかるので、それをインストールします。

(張り付けた画像ではすでにインストール済みになっていますが)

インストール自体は、Visual Studioを終了させると開始します。この辺は指示に従えばOKです。

image.png


LiveXamlの設定メニューは?

LiveXamlの設定はメニューのツールLiveXAML Settingsです。

image.png

以下のウィンドウが開きます。

もし、ライセンスを購入したらここで入力するのでしょう。

image.png

右側にNuGetパッケージをインストールすることと、使い方が書いてあります。

「1. Install LiveXAML package」に、「Automatic」と「Manual」とあります。

「Manual」のほうはわかります。自分でパッケージをインストールしてね、ということです。

では「Automatic」のほうはボタンを押せば自動でインストールしてくれるのかというとそんなことはありません。

このボタンはLiveXAMLの有効/無効を切り替えるためのボタンです。

個人的にトグルボタンの嫌いなところは、ボタンのラベルに書いてある内容が「現在の状態」を表しているのか、「ボタンを押した後に得られる状態」を表しているのかわかりにくいことがある点です。

今回のボタンは、「ボタンを押した後に得られる状態」なので、上の画像のようになっていたらつまりは「現在LiveXAMLは有効」ということになります。

とまあ、この「Automatic」と「Manual」は全然対になっていなかったりします。


Nugetパッケージのインストール

メニューのツールNuGetパッケージマネージャーソリューションのNuGetパッケージの管理を選択してください。

image.png

そして、参照タブで「livexaml」を検索すると、「LiveXAML」というパッケージが見つかるので、インストールします。

(画像ではインストール済みになっていますが)

image.png

これでLiveXamlのインストールが完了し、使うことができるようになりました。


使ってみよう

使い方は上で説明した設定ウィンドウにも書いてありますが、以下のとおりです。


  1. エミュレータまたは実機でデバッグ開始

  2. xamlファイルを編集し、保存

  3. デバッグ中のアプリケーションの表示が変更されることが確認できる

とても便利ですね!


おわりに

とても便利なLiveXaml、買わない手はないと思うのですが、気になるお値段は以下のとおりです。


  • 買い切り:240ドル

  • 月極:24ドル/月

お安い!