9
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

Xamarin.Forms 用の XAML Hot Reload

Last updated at Posted at 2019-09-03

こんにちは、@carcon999です。
Yahoo!ブログが閉鎖される(先日Hatenaに移行しました)というので、これからは、Qiitaに技術系はアウトプットしますのでよろしくお願いします。まずは、月に一本くらいはアウトプットしていきたいと思います。

なんの話か?

先日、#JXUGCが開催するXamarinの勉強会に参加しました。そこで、Xamarin.Formsのホットリロード(Hot Reload)なる機能があることを知り試してみることにしました。簡単に試せると思ったのですが、実はハマるポイントもありましたので、それを交えて紹介します。参加した回のまとめは、JXUGC #25 最新情報アップデート&LT 大会 まとめから。
Xamarin.png

Xamarin.Forms の ホット リロード?

正式なMSの説明はこちら(英語)をご覧ください。
そもそも、ホットリロードでなんでしょ?
hotreload2.png

それは、Xamlで記述したViewの見た目をビルドし直して再転送することなく画面確認することができる機能です。言い方を変えるとアプリを実行中にViewのXamlを書き換えると表示画面がリアルタイム(※)に書き換わってくれる機能です。
※リアルタイムは少し言い過ぎですが、数秒遅れで更新されます。

何がうれしいのか?

今まで、画面をデザインする場合にはXamlでViewを記述し、プレビュー機能などを利用して大凡自分の意図するデザインになったら、実機に転送して確認することが行われていました。それが、Xamlを直しながらダイレクトに実機で画面確認が行えるので、ストレスなく画面確認が行えます。この時間短縮は非常にありがたい!

お試しした環境

2019/09/02現在ですが、MSから提供されているホットリロードは、Visual StudioのPreview版だけです。安定版には機能が提供されていません。ですので、Perview版をインストール必要がありますのでご注意ください。私は、nugetするのかと思いちょっと戸惑いました。(ハマりポイント)
私は、Windows版のVisual Studio Community 2019 16.3.0 Preview2.0を利用しました。OSは、Windows10 Pro.
そこに、AndroidとiPhoneのどちらでも試してみたのですが、結論としては、私のiPhone(XR)iOS 12.4 は実機で動かなかったです。

下記は私の環境での動作結果です。

対象 結果
Androidシミュレータ
Android実機 Xperia XZ1
iPhone シミュレータ
iPhone実機 XR iOS12.4 ×
Windows UWP ×

vspreview2.png

実行する前に設定を変更する。

ツール>オプション>Xamarin>Hot ReloadでEnableにチェックを入れる。
hotreload.png

実行してみる

なんでもよいのでXamarin Formsのアプリをひとまず新規作成して実行してみます。
XamarinForms.png

それで実行すると、VSの上部に警告が表示されます。
「Hot Reload didn't start because your current version of Xamarin.Forms is not compatible.Upgrade to the latest stable release or th newest prerelease of Xamarin.Forms」とのこと。Xamarin.FormsのVersionを上げる必要がありそうです。(怖いですね)
erro.png

Nugetパッケージの管理で確認してみると現在インストールされていたのは、Xamarin.Forms 4.2.0.618605-pre2でしたがこれはダメとのこと。そこで、一番最新の4.2.0.709249をインストールします。(禁断のXamarin.Formsのバージョンアップですが、エラーは起こらず一安心。)
nuget.png

試食(Android版)

ここまできたら、あとは試すのみです。実機でもシミュレータでも実行して画面を表示させ、表示中のViewのXamlを編集します。下記の画面では、ItemsPage.xamlを表示しています。どこでもよいのですが、わかりやすいようにStackLayoutの背景色を変更することにしました。

    <!-- オリジナル -->
   <StackLayout>
        <ListView x:Name="ItemsListView"
                ItemsSource="{Binding Items}"
    <!-- Yellowを追加 -->
   <StackLayout BackgroundColor="Yellow">
        <ListView x:Name="ItemsListView"
                ItemsSource="{Binding Items}"

注意点:Xamlを編集後に、ファイルの保存を行ってください。保存をトリガーに画面が更新されます。
デバイスの表示が切り替わります。もちろん、背景色だけでなくボタンの追加などもビルドなしに反映されますので是非お試しください。

試食(iPhone)

iPhoneでお試しする場合には、もう少し設定が必要です。
設定せずに実行すると、またエラーが表示されます。「Hot Reload encountered a problem and failed to start. Use help -> Report a Problem if the issues persists.」
ヘルプを見ると書いてありました。下記画面のように、
・リンカーの設定を"Don't Link"
・mtouchに"--interpreter"を入れる。
iPhone2.png

さあ、これで実行できるぞ!ってなるんですが、私の場合は、実機で動作しませんでした。
実行すると下記のエラーがでます。(シミュレータではエラーは発生しません。)
※現在解決方法は不明です。
error2.png

2019/09/05追記
Visual Studio Community 2019 16.3.0 Preview 3.0 がリリースされたのでそれでも試しましたが、残念ながらiOSの実機ではダメでした。
少し調べてみたところ、同じ現象で困っている方がいましたが、改善方法についてのヒントはありませんでした。
https://developercommunity.visualstudio.com/content/problem/693788/xamarin-hot-reload-exception-on-xamarinios.html

最後に

私は、新しくXamarin.Formsで作りたいアプリがありまして、良い機会なので利用しますが、もう少し待てば正式版がリリースされると思われますのでそれまで待つのもありかと思います。

それでは、よきXamarin Lifeを!

以上

9
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
9
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?