iOS シミュレーター で XAML をプレビューする

アップデートから大分経ってしまいましたが、Visual Studio 15.6 のアップデートを確認していました。

すると

iOS シミュレーターでのライブ XAML プレビュー
Xamarin Live Player では、開発者は Visual Studio と iOS または Android デバイスを使用するだけでアプリの展開、テスト、デバッグを継続的に行うことができます。 Visual Studio 2017 バージョン 15.5 では、開発者が再コンパイルや再展開を必要とせずに、Android エミュレーター内でリアルタイムの XAML の変更を直接プレビューできるようにサポートを追加しました。 このリリースでは、Windows 用のリモートの iOS シミュレーターに、この機能が追加されました。

15.5 からあったということろが気になったのでとりあえず Android の方を先日試してみました。

今回は、iOS シミュレーターの方を試してみました。

■ リモート iOS シミュレーターの設定

Visual Studio のメニュー ツール > オプション > Xamarin > iOS の設定 > Simulator > リモート Simulator から Windows へ のチェックを ON にします。
※関連）以前にリモート iOS シミュレーターを試した際の記事です。

■ Xamarin.Forms プロジェクトの新規作成

Visual Studio から普通に新規作成します。
私は、.NET Standard で作成しました。 あと、ターゲットのプラットフォームから UWP を外しておきました。Windows 10 Mobile には Live Player ない様ですし。

■ mac との接続

リモート iOS シミュレーターを使うには、Visual Studio を使っている Windows と Visual Studio for mac を インストールした mac を同一ネットワーク内に配置し、Windows から mac へリモート接続できるようにする必要があります。

■ 実行

準備が整ったら、Shift + Alt + F5 という、ちょっと普通は押さないキーで実行です。
メニューからなら ツール > Xamarin Live Player > ライブ実行の現在のビュー です。ちょっと何言ってるかわからない日本語ですが、心を強く持って構わず選択していきましょう。

XAML はプロジェクト新規作成時から変えていません。

黄色いバーで live running と表示され実行されているのがわかります。
もう一か所注目のポイントは、デバッグ実行されていない点です。皆さんがこれまで何度も押してきたであろう緑の左三角アイコンが緑のままになっています。

■ シミュレーター上の Xamarin Live Player

上の操作でシミュレーターが起動し、Windows 上で画面が表示されます。
ここで起動直後注目してほしいのが、ホーム画面上でインズトール済みアプリとして確認できる「Xamarin Live」です。

このアプリが自動で実行され一旦接続待ちの画面になります。

その後、XAML のプレビューが表示され Xamarin Live Player 上で、いつもの Welcome to Xamarin.Forms! が表示されています。

■ XAML を変更

この状態で、XAML を変更してみます。

Welcome to Xamarin.Forms!! と ! を増やしてみました。
そして、コマンド Ctrl + S（ファイルの保存）。

iOS シミュレーター上の表示が変更されました！

■ XAML の確認に便利

XAML の確認に便利に使えるかもしれませんね。

Apple TV につながらない時に確認することの一つ

先日初めて Apple TV というものに mac をつなぐ機会がありました。
素直にはつながらなかったので、メモを残しておきます。

■ サポートページ

私が今回素直につながらなかった理由はこのサポートページに載っている内容です。挙動が少し異なりましが、
問題がある場合 の AirPlay メニューに Apple TV が表示されない場合 が理由でした。

■ 実際の挙動

• メニューには Apple TV が表示されている
• 選ぶと Apple TV が見つからない、とエラーになる

という挙動でした。

■ Apple TV

初めて接続してみましたが、VM 上のパワーポイントでスライド表示時に登壇者モードになるのがいいですね。
chrome cast は今のところ、登壇者モードにする方法がわかりません。できない？
詳しい方いたらぜひ教えてください。

秋葉原 C# もくもく会 #33 勉強会を開催しました

■ C# もくもく会

C# もくもく会 #33 を開催しました。

C# もくもく会 は東京の秋葉原で毎週木曜日に開催している .NET 系の勉強会です。

もくもく自習を基本とし、分からないことを教えあったり情報共有したりしている会です。 定期開催していますので、お時間のある時に遊びに来ていただければと思います。
ちょっと詰まった時、ネット上で聞くのははずかしいなぁ、という課題のできた時などにも思い出していただけると嬉しいです。

今日は開始前に少し時間をとることができたので普段より少しだけ高級で上品なお菓子(ロールケーキ)を用意してみました。

■ 目指す勉強会スタイル

世界一敷居の低い勉強会を目指しています。
何か聞きたいことがある場合は、聞く相手を決めずに独り言のようにつぶやくと誰かが拾ってくれる、そんなスタイルでやっています。

■ 次回予定

次回は 2018/04/12 に開催予定です。

C# に関心のある方、是非遊びに来てください。

Visual Studio の 15.6.5 がリリースされました

前回のアップデートから 2 週間近くですが Visual Studio の 15.6.5 がリリースされました。
少し安定してきたのかもしれません。

相変わらず日本語ページは遅いので、最新のリリースは英語版を参照するのがおすすめです。

■ 更新内容

今回も多くはありませんが、結構重大な問題も解決しています。

• Web アプリケーション開発時に設定をすべてのユーザーに適用する設定が機能していない問題
• AnkhSVN 拡張機能などを有効sにしている場合に、プロジェクトでエラー Visual C# 2017 compiler was not created が表示されることがある問題
• NuGet パッケージマネージャーが最新のパッケージバージョンを素早く取得しない問題
• NuGet パッケージのアップデートで Visual Studio がハンズアップする問題
• Visual Studio を複数立ち上げながら Visual Studio のアップデートを行うとインストーラーがエラーになる問題
• TFS の ビルドエージェントがテンプフォルダ C:\Windows\temp に消されない .itrace ファイルを書き出し続ける問題
• クラウド上などでテストを実行すると vstest.console.exe で socket exception によりテストが失敗する問題 .
• Xcode 9.3 対応

影響のない方も少なくないかもしれませんが、とりあえずアップデートしましょう。

■ 更新方法

Visual Studio の更新はメニューの ツール > ツールと機能を取得 で開くインストーラーから行えます。

Xamarin Android Device Manager で新しい仮想デバイスを作る

Xamarin でデバッグ用の Android のエミュレーターを管理するツールが変更されるということで、
まずインストールまで確認してみました。

管理するツールをインストールしただけでは、デバッグはできませんから次は仮想デバイスを作ることになります。

■ Android Emulator Manager の起動

ツール > Android > Android Emulator Manager で新しい Android Emulator Manager が起動します。

最初仮想デバイスは何も登録されていません。

管理ツール右上の [ ＋ New ] をクリックし仮想デバイスを新規作成します。

■ 仮想デバイスの作成

[ ＋ New ] をクリックすると次の画面になります。

• Name: にデバイスの名前を入力します。
  わかりやすい名前を付けましょう。特にこだわりがなければ、API レベルや画面サイズ等を書いておけば良いでしょう。
• System image: で作る仮想デバイスの API レベルを選択します。
  特にこだわりがなければ、Android 8.0 - Oreo (API 26) を選べば良いでしょう。システムイメージがインストールされていない場合でも、選択するとダウンロードされるので構わず選択します。
• Device: を選択します。
  好みで良いですが、画面サイズやメモリサイズなどが小さいほど軽くなる点には留意したいところです。
• その他のプロパティを適当に設定しますが、あまり変更する必要はないでしょう。気を付ける点はカメラの有無くらいでしょうか？
• [ Create ] で仮想デバイスが作成されます。

■ 仮想デバイスの起動

仮想デバイスが作成されるとこのようにリストに表示されます。

[▷ Start] で仮想デバイスが起動します。

これで、実機なしでデバックし放題です！

Xamarin Android Device Manager のインストール

Xamarin クロスプラットフォームのモバイル開発として少なくとも私の期待には応えてくれる素晴らしいプロダクトです。
しかし、デバッグ用の Android のエミュレーターは環境構築の中でも特にハマりやすいポイントです。
そんなエミュレーターを管理するツールが変更されるということで、
まずインストールまで確認してみました。

■ 以前

これまでは、Android エミュレーターは Google エミュレーター マネージャー で管理していました。
Visual Studio では（インストールされていれば） ツール > Android > Android Emulator Manager から起動できました。

この画面ですね。
このツールが現行の Android のバージョンでは廃止され CUI ツールになるので、Xamarin 用に GUI のツールを作ってくれたとのことです。

■ SDK ツールのアップデート

古い Android SDK ツールでは（古いバージョンの Android でエミュレーターを作成する場合は）、これまでの エミュレーター マネージャー が使えるということなので、まずはアップデートします。
Visual Studio で ツール > Android > Android SDK Manager で SDK マネージャーが開きます。

ここで ツール タブの Android SDK Tools でバージョン 26.1.1 を選択し、右下の [ 変更の適用 ]。

これでアップデートされます。

■ エミュレーター マネージャーの起動

ここまでで Android SDK ツール はアップデートされましたが、実はまだ Xamarin Android Device Manager はインストールされていません。
インストールするには、

• インストールされていなくても構わず ツール > Android > Android Emulator Manager を選択

してください。

次のメッセージが表示されますので、[ Install AVD Manager ] を選択します。

Web ブラウザが起動し、インストーラーがダウンロードされます。
※ダウンロードされたインストーラー

■ インストーラーの実行

実行すると普通のインストーラーです。普通にボタンをポチポチしていけばインストールされます。

■ Android Emulator Manager の起動

ツール > Android > Android Emulator Manager で新しい Android Emulator Manager が起動します。

今回は、ここまで。エミュレーターはディスク容量を食うので慎重にいかなければなりません。
エミュレーターの作成はまた後日記事にしたいと思います。

Xamarin Live Player で XAML をプレビューする

sual Studio 15.6 のアップデートを確認していました。

すると

iOS シミュレーターでのライブ XAML プレビュー
Xamarin Live Player では、開発者は Visual Studio と iOS または Android デバイスを使用するだけでアプリの展開、テスト、デバッグを継続的に行うことができます。 Visual Studio 2017 バージョン 15.5 では、開発者が再コンパイルや再展開を必要とせずに、Android エミュレーター内でリアルタイムの XAML の変更を直接プレビューできるようにサポートを追加しました。 このリリースでは、Windows 用のリモートの iOS シミュレーターに、この機能が追加されました。

という項目を見つけました。

15.5 からあったということろが気になったのでとりあえず Android の方試してみることにしました。

■ Android 端末に Xamarin Live Player をインストール

まず、実機に Xamarin Live Player をインストールする必要がありますが、これは以前にインストール済みなのでスキップ。
まだ、インストールされていない方はこちらからインストールできるようです。

■ Xamarin.Forms プロジェクトの新規作成

Visual Studio から普通に新規作成します。
私は、.NET Standard で作成しました。 あと、ターゲットのプラットフォームから UWP を外しておきました。Windows 10 Mobile には Live Player ない様ですし。

■ ペアリング

Visual Studio と実機（にインストールした Xamarin Libe Player）をペアリングします。

普通に解説通り QR 取り込みです。PC と Android を同一 WiFi ネットワークに接続するところがポイントです。

■ 実行

準備が整ったら、Shift + Alt + F5 という、ちょっと普通は押さないキーで実行です。
XAML はプロジェクト新規作成時から変えていません。

黄色いバーで live running と表示され実行されているのがわかります。
もう一か所注目のポイントは、デバッグ実行されていない点です。皆さんがこれまで何度も押してきたであろう緑の左三角アイコンが緑のままになっています。
Android 実機では Xamarin Live Player 上で、いつもの Welcome to Xamarin.Forms! が表示されています。

■ XAML を変更

この状態で、XAML を変更してみます。

Welcome to Xamarin.Forms!! と ! を増やしてみました。
そして、コマンド Ctrl + S（ファイルの保存）。

Android 実機上の表示が変更されました！

■ XAML の確認に便利

今回 試してみましたが、XAML の確認に便利そうですね。