特集
» 2018年02月09日 05時00分 公開

特集:GitHub探検隊:便利なUWP用拡張機能/NuGetパッケージを発見! (1/2)

デフォルトのUWPアプリ用プロジェクトテンプレートはあまりにも貧弱だ。そこで、UWPアプリ開発に役立つ拡張機能やNuGetパッケージを探してみた。

[かわさきしんじ,Insider.NET編集部]
「特集:GitHub探検隊」のインデックス

「特集:GitHub探検隊」

 Visual Studio(以下、VS)で「素の」UWP(Universal Windows Platform)アプリを開発しようという場合、アプリのひな型を作成するためのプロジェクトテンプレートには[空白のアプリ(ユニバーサル Windows)]しかない(Xamarinを使用してUWPアプリ「も」開発する場合には空のアプリか、マスター/詳細形式を選択可能ではある)。

 VSが標準で提供しているテンプレートがこの1つだけ。高度なUWPアプリを作ろうとしたら、ほぼスクラッチの状態から全てを開発者が作り上げていく必要がある。これでは、UWPアプリ開発に取り掛かろうという気にはそうそうはならない。そこで、本稿ではUWPアプリ開発の大きな助けとなるツールやNuGetパッケージをGitHubで探してみた。

UWP Community Toolkit

UWP Community Toolkit


 UWP Community Toolkitは、UWPアプリ開発に役立つヘルパー関数やカスタムコントロールなどをまとめたもの。NuGetパッケージとして提供されている。

 どんな機能があるかは、サンプルアプリが提供されているので、これで確認できる。

UWP Community Toolkitのサンプルアプリ UWP Community Toolkitのサンプルアプリ

 このアプリを見ると分かるように、コントロール/アニメーションなど、多くの機能が提供されている。

 UWP Community ToolkitはNuGetパッケージとして提供されている。VSでUWPアプリプロジェクトを開き、ソリューションエクスプローラーでプロジェクトを右クリックして、コンテキストメニューの[NuGet パッケージの管理]項目などからインストールする。機能ごとに個別のパッケージとして提供されているので必要なものを選択するようにしよう。このときには検索テキストに「Microsoft.Toolkit」などと入力する。

UWP Community Toolkitとして配布されているパッケージ群 UWP Community Toolkitとして配布されているパッケージ群

 パッケージとしては以下のようなものがある(抜粋)。

  • Microsoft.Toolkit.Uwp.Notifications:タイル、トースト、通知など、UWPアプリの通知機能を利用するためのパッケージ
  • Microsoft.Toolkit.Uwp.Services:Facebook、Twitterなどのサービスを利用するためのヘルパー
  • Microsoft.Toolkit.Uwp.UI:XAMLでUIを構築する際のコンバーターなどを含んだパッケージ
  • Microsoft.Toolkit.Uwp.UI.Animations:アニメーション効果を実現するためのパッケージ
  • Microsoft.Toolkit.Uwp.UI.Controls:XAMLコントロールを格納したパッケージ

 いずれかのパッケージをインストールすれば、同時に依存関係があるパッケージもインストールされるはずだ。

 例えば、空白のUWPアプリプロジェクトを作成して、そこにMicrosoft.Toolkit.Uwp.UI.Controlsパッケージをインストールし、Bladeコントロールを追加したものだ。一番左のブレードでタイルをクリックすると、右側に選択したブレードがそれぞれ表示される。

Bladeコントロールの利用例 Bladeコントロールの利用例

 このパッケージを利用すれば、UWP向けに作成された多くのコントロールを利用できる。[空白のアプリ]プロジェクトテンプレートを利用するにしても、こうしたツールキットが提供してくれるさまざまな機能を使うことで、全てをスクラッチから作るという手間はかなり減るはずだ。

Template 10

Template 10


 Template 10は、UWPアプリ用のプロジェクトテンプレートやコントロールなどを集めた拡張機能。VSの[ツール]メニューから[拡張機能と更新]からインストールできる(「Template 10」ではなく「Template」で検索するとよい)。インストール後には、[新しいプロジェクト]ダイアログに[Template 10]というカテゴリーが表示されるようになる。ここには3種類のプロジェクトテンプレートが表示される。

Template 10拡張機能により追加された3種類のプロジェクトテンプレート Template 10拡張機能により追加された3種類のプロジェクトテンプレート

 Template 10で追加されるテンプレートはおおよそ次のような機能を提供してくれる。

  • [Blank]:VS標準の[空白のアプリ(ユニバーサル Windows)]に相当する
  • [Minimal]:最低限のページ遷移機能などを備えたプロジェクトテンプレート
  • [Hamburger]:ハンバーガーボタンを備えたプロジェクトテンプレート

 [Blank]プロジェクトテンプレートは、[空白のアプリ]プロジェクトテンプレートとほぼ同様だが、ソリューションエクスプローラーを見ると、Template 10がMVVMを意識したフォルダ構成となっているのが分かる。

[Blank]テンプレートから作成したプロジェクトのソリューションエクスプローラー [Blank]テンプレートから作成したプロジェクトのソリューションエクスプローラー

 実際、残る2つのプロジェクトテンプレートから作成したプロジェクトでは、ページ遷移を含むロジックの記述はビューモデルをメインに行われるようになっている(ドキュメントでは「MVVMを必要とはしないが、それを使用しないXAMLアプリとか想像が難しい」とも書いてある)。

 [Minimal]テンプレートは、[Hamburger]テンプレートからハンバーガーメニューを取り除き、タイトルバー部分でページ遷移を行うようにしたもの。いわば実用的なXAMLアプリを作成する際の「最小限」の機能を備えたプロジェクトテンプレートといえる。

[Minimal]テンプレートから作成したアプリ [Minimal]テンプレートから作成したアプリ

 [Hamburger]テンプレートは、よくあるハンバーガーメニューを備えた、フルスペックのUWPアプリを作成するためのプロジェクトテンプレートということになるだろう。

[Humburger]テンプレートから作成したアプリ [Humburger]テンプレートから作成したアプリ

 Template 10にはこの他にも、XAMLベースのアプリを作成する上で必要となるコントロール、サービス、ビヘイビア、コンバーター、MVVMクラス、各種ユーティリティークラスなども含まれている。UWP Community Toolkitとは異なり、最初からハンバーガーボタンを持ったプロジェクトを作成するといったことも可能なので、普通のUWPに求められている要件を手早く満たしたいときにはうってつけだ。なお、Template 10の各種機能はNuGetパッケージとしても提供されているので、個別のプロジェクトでパッケージをインストールして、その機能を活用することも可能だ。

 これからUWPアプリ開発に取り掛かろうという人にとっては、整理されたソースコードを手に入れて、それにあれこれと手を加えて試せるという意味で、よいサンプルにもなっている。

 次にMicrosoftが提供する同様なプロジェクトテンプレートを見てみよう。

       1|2 次のページへ

Copyright© Digital Advantage Corp. All Rights Reserved.

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。