より良いエンジニアを目指して

記事を頻繁に書き直す性格なのでごめんなさい。

「ハッブル宇宙望遠鏡」のUWPをデスクトップ開発者のお手元に

先日のInsider Dev Tourで持っていかれたのはWinUIの最新版のデモアプリ「ハッブル宇宙望遠鏡」でした。

GitHubでもリポジトリが公開されているので、デスクトップ開発者として家に帰ってすぐ動かしてみたくなったのでチャレンジしました。

その前にハッブル宇宙望遠鏡とは

周回軌道し、天体観測する宇宙望遠鏡です。

デモアプリはその望遠鏡が収めた天体の美しい画像を眺めることができます。

ja.wikipedia.org

動かすまでの準備

以下のリポジトリをクローンなり・ダウンロードしてください。

github.com

動作環境としてはWindows10のバージョンが条件を満たす必要があり、UWPのSDKが必要です。

ソリューションをVisual Studioで開こうとするとSDKをインストールしてくださいと出ます。

またWindows10のバージョンも確認し、必要に応じて更新します。

私の場合は1803ですが、これでは古いので

f:id:rimever:20190622215402p:plain

Windows Updateで1903に更新しました。

f:id:rimever:20190622215345p:plain

ソリューションを開こうとすると、以下のような画面が開かれたので

f:id:rimever:20190623072134p:plain

インストールしました。

f:id:rimever:20190623072154p:plain

デモを動かす

あとはビルドして実行するだけです。

f:id:rimever:20190623073609p:plain

来た来たーっ!

f:id:rimever:20190623073811p:plain

f:id:rimever:20190623074054p:plain

縦長にすると上のようにレスポンシブに動きます。

UIについて、最近のMicrosoftは〜という意見もありますが、色々進化してますね。

デスクトップ開発者であれば、これは楽しむべきでしょう。

TODOをアンロックしていこう

リポジトリのコードではTODOコメントがいくつかあり、東京で@okazuki さんにデモしていただいたように一部がコメントアウトされています。

f:id:rimever:20190623144226p:plain

このコメントアウトを解除することで、新しいWinUIを楽しめるようになっています。

f:id:rimever:20190623141834p:plain

私の場合、csファイルのTODOはリストアップされるのですが、xamlファイルのTODOがリストアップされません。

StackOverflowを見ても仕様のようです。

大田さんによるとデモの時は、TODOで検索して、Ctrl+K,Ctrl+Hでブックマークして追加していたそうです。

f:id:rimever:20190624205518p:plain

ItemsRepeaterを使うようにすれば、プレビューを左端に動かしても繰り返しで、最後の画像に戻ります。

f:id:rimever:20190623143529p:plain
スクショではさっぱり伝わりませんが、ItemsRepeaterを反映

f:id:rimever:20190623143643p:plain
こちらはローディングのLottiePlayer

ブランチを切り替えてみる

これは、発表者だった@okazuki さんに教わったのですが、このリポジトリにはブランチが用意されています。

f:id:rimever:20190624204218p:plain
SourceTreeで見たとき

このブランチを切り替えることで、アプリの状態を切り替えることができます。

UWP-UI-Final は、デモ終了時のコード。全てのTODOが解除されています。時間がない方はこのブランチで最終形態を確認してみるのも良いかと。

WinUIとは

そもそもWinUIを知りませんでした。言葉自体、馴染みありませんでした。

Windows10でUWPアプリを開発するためのライブラリ、Windows UI Library、通常WinUIです。

docs.microsoft.com

追記(2019/6/24)

以下のように発表したご本人からありがたいアドバイスをいただいたので追記しました。

@okazuki さん、ありがとうございました。