はじめに
Xamarin.Formsでモバイルアプリケーションを開発するとき、WPFやWinFormsのようなデザイナがないため、xaml書いてはエミュレータまたは実機でデバッグして表示を確認することを繰り返す必要があります。
熟練の方々にはxamlを書きつつ脳内には正確なUIのイメージが構築されているのだと思いますが、私のようにデザイナにおんぶにだっこな人間にはなかなか大変だったりします。
そこで最近巷で噂のあ「LiveXaml」というツールが非常に便利です。
これは、エミュレータまたは実機でデバッグ中にxamlを修正すると、その修正内容が直ちにデバッグ中のアプリケーションに反映されるという、素晴らしいものです。
その効果については動画でもググってもらうとすぐにわかると思います。
今回は、そのインストールについてです。
私はインストールするときに拡張機能だけインストールして「あれ、できないぞ？」と2時間ぐらい悩みましたが、インストールが必要なのは拡張機能だけではなく、Nugetパッケージもです。
LiveXamlを使えるようにするまで
LiveXamlを使えるようにするには、以下の2つをインストールする必要があります。
ちなみに、14日間の無料トライアルがあり、これはアカウントの登録など必要ありません。
インストールが完了したらすぐに試用を開始できます。
- Visual Studio拡張機能のインストール
- Nugetパッケージのインストール
拡張機能だけでは動きません。
拡張機能のインストール
メニューのツール→拡張機能と更新プログラムを選択してください。
オンラインタブで「livexaml」を検索すると、「LiveXAML for Xamarin Forms」という拡張機能が見つかるので、それをインストールします。
（張り付けた画像ではすでにインストール済みになっていますが）
インストール自体は、Visual Studioを終了させると開始します。この辺は指示に従えばOKです。
LiveXamlの設定メニューは？
LiveXamlの設定はメニューのツール→LiveXAML Settingsです。
以下のウィンドウが開きます。
もし、ライセンスを購入したらここで入力するのでしょう。
右側にNuGetパッケージをインストールすることと、使い方が書いてあります。
「1. Install LiveXAML package」に、「Automatic」と「Manual」とあります。
「Manual」のほうはわかります。自分でパッケージをインストールしてね、ということです。
では「Automatic」のほうはボタンを押せば自動でインストールしてくれるのかというとそんなことはありません。
このボタンはLiveXAMLの有効/無効を切り替えるためのボタンです。
個人的にトグルボタンの嫌いなところは、ボタンのラベルに書いてある内容が「現在の状態」を表しているのか、「ボタンを押した後に得られる状態」を表しているのかわかりにくいことがある点です。
今回のボタンは、「ボタンを押した後に得られる状態」なので、上の画像のようになっていたらつまりは「現在LiveXAMLは有効」ということになります。
とまあ、この「Automatic」と「Manual」は全然対になっていなかったりします。
Nugetパッケージのインストール
メニューのツール→NuGetパッケージマネージャー→ソリューションのNuGetパッケージの管理を選択してください。
そして、参照タブで「livexaml」を検索すると、「LiveXAML」というパッケージが見つかるので、インストールします。
（画像ではインストール済みになっていますが）
これでLiveXamlのインストールが完了し、使うことができるようになりました。
使ってみよう
使い方は上で説明した設定ウィンドウにも書いてありますが、以下のとおりです。
- エミュレータまたは実機でデバッグ開始
- xamlファイルを編集し、保存
- デバッグ中のアプリケーションの表示が変更されることが確認できる
とても便利ですね！
おわりに
とても便利なLiveXaml、買わない手はないと思うのですが、気になるお値段は以下のとおりです。
- 買い切り：240ドル
- 月極：24ドル/月
お安い！