[アーティクル]
02/10/2017

January 2017

Volume 32 Number 1

最新のアプリ - UWP Community Toolkit の調査

Frank La La | January 2017

Frank La Vigne ユニバーサル Windows プラットフォーム (UWP) が進化するにつれ、UI の共通パターンや課題が現れてきます。UWP には、すぐに使えるコントロールの豊富な機能セットや API があります。しかし、UWP の提供内容にはギャップもあれば、手間のかかるコーディングや作業が必要な機能もあります。このギャップを解消し、UWP 開発をさらに迅速にし、初心者にも分かりやすくするため、Microsoft は UWP Community Toolkit を作成しています。この UWP Community Toolkit は、GitHub (bit.ly/2b1PAJY、英語) からダウンロードできます。

UWP Community Toolkit の目標は、開発者コミュニティに参加を促し、さまざまなコントロールやヘルパー関数開発の協力を得て、UWP 開発を単純化することです。UWP Community Toolkit のツールには、コントロール、通知、アニメーション、サービス、ヘルパーの 5 つのカテゴリがあります。今回は、それぞれのカテゴリを紹介し、UWP プロジェクトにこのツールキットを実装する方法を説明します。

UWP Community Toolkit Sample App

UWP Community Toolkit を調査する最善の方法は、Windows ストアから UWP Community Toolkit Sample App をダウンロードすることです (bit.ly/2bypOyw)。このアプリには、ツールキットのあらゆる機能の例 (図 1 参照) だけでなく、コントロール、アニメーション、通知などのインタラクティブなデモもあります (図 2 参照)。

図 1 UWP Community Toolkit Sample App のホーム画面

図 2 RadialGauge コントロールのパラメーター調整

このサンプルアプリはコントロールの XAML やコード表現も提供するため、UI 要素を簡単に変更、調整、および実装できます。

インターフェイスコントロール: 前述のように、UWP Community Toolkit にはさまざまな UI コントロールが含まれています。本稿執筆時点では、13 種類の UI コントロールがあります。このコントロールの多くは、モバイル向けに最適化されたモバイルアプリケーションや Web サイトでよく使われているものです。そのような例の 1 つに、HamburgerMenu コントロールがあります。通常 3 本の横線で構成されるハンバーガーメニューは、そこにメニューが折りたたまれていることを示しています。コントロールをタッチまたはクリックすると、コントロールの状態が切り替わります。図 3 および図 4 に、折りたたまれた状態のコントロールと展開されたコントロールをそれぞれ示します。

図 3 折りたたまれたハンバーガーメニュー

図 4 展開されたハンバーガーメニュー

UWP Community Toolkit で、すべてのコントロールの機能と設定を調査することをお勧めします。コントロールには非常に高い柔軟性があるため、UWP プロジェクトのあらゆる部分に価値を追加できます。

通知: Windows 10 では、開発者がライブタイルやトースト通知を作成してユーザーにイベントをタイムリーに通知したり、最新情報を伝達できるリッチな API が提供されています。タイルとトースト通知の詳しい説明については、UWP タイルとトースト API を担当するチームが執筆しているブログ「タイルとトースト」 (bit.ly/2fzFsv1、英語) を参照してください。

通知やライブタイルの作成は便利かつ強力ですが、XML や XPath に不慣れな開発者にとっては難しい場合もあります。UWP Community Toolkit では、基盤構造の上にオブジェクトモデルを重ねることで、トースト通知やライブタイルの UI を生成できるようにして、難しい部分を簡単に処理できるようにしています。

アニメーション: Windows 10 では、宣言型保持モード API のリッチな Composition API が導入されています。この API を使用して、複合オブジェクト、アニメーション、視覚効果を UWP アプリに直接作成できます。基本的に、この API は XAML と基本の DirectX アーキテクチャとの間にある 1 つ層です。Composition API は、XAML 開発者が C# でコードを記述しながら、DirectX が持つパフォーマンス上のメリットを利用できるように作られています。Composition API の詳細については今回のコラムでは取り上げませんが、bit.ly/2fzCfeQ で確認できます。

UWP Community Toolkit は、Composition API に加えて XAML のビヘイビア―と拡張メソッドの両方を備えているため、この API の能力を簡単に利用できるようになります。UWP Community Toolkit Sample App には、5 つのアニメーションのセットに対してさまざまなパラメーターを試すことができるコントロールサーフェスもあります。さらに、そこで試したアニメーションの C# コードと XAML マークアップがツールキットによって生成されるので、そのアニメーションを実装することができます。

サービス: 現在はクラウドの時代なので、アプリをクラウド内のサービスに接続することで、そのアプリはより適切になります。ただし、アプリにクラウドのサービスを追加すると、OAuth 経由の認証の実装、REST API の操作、それらの API の流動的な特性など、アプリが非常に複雑になる可能性があります。さいわい、UWP Community Toolkit は、その複雑さに対処する広範なオブジェクトモデルを備えています。現状、UWP Community Toolkit は、Bing、LinkedIn、Facebook、Twitter、Microsoft Graph サービスへのサポートを提供しています。つまり、開発者は最小限の労力で簡単に上記のオンラインサービスに接続できます。

ヘルパー関数: UWP Community Toolkit には、アプリ開発の共通作業を簡素化するさまざまなヘルパー関数も含まれています。たとえば、クラウドサービスにクエリを行うには、その前にアプリがネットワークに接続されているかどうかを確認します。この作業はこのツールキットが無くても可能ですが、ツールキットがあれば、この部分をわずか 1 行のコードで済ませることができます。ヘルパー関数は、印刷、バックグラウンドタスク、システム情報の取得などにも使用できます。

プロジェクトへの UWP Community Toolkit の追加

UWP Community Toolkit をプロジェクトに追加する最も簡単な方法は、NuGet を使用することです。Visual Studio の [ファイル] メニューから [新規作成]、[プロジェクト] の順に選択して、新しい空白の UWP プロジェクトを作成します。[インストール済み]、[テンプレート]、[Windows]、[ユニバーサル]、[空白のアプリ (ユニバーサル Windows)] の順に選択します。プロジェクトに「UWPToolKitApp」という名前を付け、[OK] をクリックします。

UWP Community Toolkit をプロジェクトに追加する最も簡単な方法は、NuGet パッケージを追加することです。ソリューションエクスプローラーで [参照] を右クリックして、コンテキストメニューから [NuGet パッケージの管理] を選択し、NuGet パッケージマネージャーを表示します。

検索ボックスに「Microsoft.Toolkit.Uwp」と入力すると、UWP Community Toolkit に関連するすべての NuGet パッケージが表示されます。UWP Community Toolkit 自体に加え、他のパッケージやライブラリを含む多くの結果が表示されます。図 5 は、パッケージとその機能の簡単なリファレンスです。

図 5 UWP Community Toolkit の NuGet パッケージ

NuGet パッケージの名前	説明
Microsoft.Toolkit.Uwp	色変換ツール、インターネット接続の検出、ストレージファイル処理、ストリームヘルパークラスなど、コードのみのヘルパーを含むメイン NuGet パッケージ。
Microsoft.Toolkit.Uwp.Notifications	Windows 10 のタイル通知、トースト通知、バッジ通知をコードから生成する通知パッケージ。XML 構文を使用する必要をなくすため、IntelliSense サポートを含みます。
Microsoft.Toolkit.Uwp.Notifications.Javascript	JavaScript 向けの通知パッケージ。
Microsoft.Toolkit.Uwp.Services	Bing、Facebook、LinkedIn、Microsoft Graph、Twitter 向けのサービスヘルパーを含むサービスパッケージ。
Microsoft.Toolkit.Uwp.UI	XAML コンバーター、ビジュアルツリー拡張機能、XAML UI 向けのヘルパーを含む UI パッケージ。
Microsoft.Toolkit.Uwp.UI.Animations	ブラ―、フェード、回転などのアニメーションや合成の動き。
Microsoft.Toolkit.Uwp.UI.Controls	RadialGauge や RangeSelector などの XAML コントロール。

今回は、メイン NuGet パッケージ (Microsoft.Toolkit.Uwp) とサービスパッケージ (Microsoft.Toolkit.Uwp.Services) を追加します。Microsoft.Toolkit.Uwp のエントリをクリック後、NuGet パッケージマネージャーの右側に表示される [インストール] ボタンをクリックします。[プレビュー] ダイアログが表示されたら、変更を確認してから [OK] をクリックします。ここで [キャンセル] をクリックすると、NuGet パッケージのインストールがキャンセルされます。[ライセンスへの同意] ダイアログが表示される場合は、[同意する] をクリックしてライセンス条項に同意します。ライセンスを確認できるオプションがあります。ライセンスに同意しないオプションもあります。[同意する] をクリックすると、パッケージのインストールが完了します。Microsoft.Toolkit.Uwp.Services パッケージにも同様のプロセスを繰り返します。このパッケージには複数のライセンス条項が含まれる可能性があります。

インストール作業が完了したら、ソリューションエクスプローラー内の [参照] セクションにインストールした NuGet パッケージが表示されることを確認します。

Bing による検索: ここからは、オンライン接続をチェックするアプリのサンプルと、そのアプリが動作するデバイスモデルを作成します。アプリでは、デバイスに関する情報について Bing で検索するオプションを表示します。

MainPage.xaml ファイルを開き、図 6 の XAML を追加して、シンプルな UI を作成します。

図 6 サンプルアプリの UI を作成する XAML

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
  <Grid.RowDefinitions>
    <RowDefinition Height="33*"/>
    <RowDefinition Height="607*"/>
  </Grid.RowDefinitions>
  <Button Name="btnSearch" Click="btnSearch_Click" Grid.Row="0">Search Bing</Button>
  <ListView Name="lvSearchResults" Grid.Row="1">
    <ListView.ItemTemplate>
      <DataTemplate>
        <StackPanel>
          <TextBlock Text="{Binding Title}" FontWeight="Bold"></TextBlock>
          <TextBlock Text="{Binding Published}" FontStyle="Italic" ></TextBlock>
          <TextBlock Text="{Binding Link}" Foreground="Blue"></TextBlock>
          <TextBlock Text="{Binding Summary}"></TextBlock>
        </StackPanel>
      </DataTemplate>
   </ListView.ItemTemplate>
  </ListView>
</Grid>

MainPage.xaml.cs ファイルで、コンストラクターメソッドに以下のコードを追加します。

btnSearch.IsEnabled = ConnectionHelper.IsInternetAvailable;
btnSearch.Content = $"Search Bing for {SystemInformation.DeviceModel}";

さらに、MainPage.xaml.cs ファイルに以下のコードを追加します。

private async void btnSearch_Click(object sender, RoutedEventArgs e)
  {
    var searchConfig = new BingSearchConfig
    {
      Country = BingCountry.UnitedStates,
      Language = BingLanguage.English,
      Query = SystemInformation.DeviceModel,
      QueryType = BingQueryType.Search
    };
  lvSearchResults.ItemsSource =
    await BingService.Instance.RequestAsync(searchConfig, 50);
  }

Visual Studio によって、コードへの適切な using ステートメントの追加が支援されます。

ここで、ソリューションを実行します。デバイスがインターネットに接続していると、検索ボタンが有効になります。ボタンテキストには、デバイスのモデルも表示されます。ボタンが有効になっている場合、そのボタンをクリックすると、図 7 のように表示されます。通常、アプリが動作するデバイスに応じて結果が変わります。

図 7 デバイスモデルの検索結果

トースト通知: 共通の開発作業を簡素化する UWP Community Toolkit のもう 1 つの機能に、トースト通知があります。トースト通知は、アプリの状態に応じてユーザーに絶えず情報を与えるため、UWP アプリのユーザーエクスペリエンスの重要な部分になります。しかし、Toast Notification API は XML に関する知識を必要とします。開発初心者はここで混乱する可能性があり、熟練の開発者でもストレスを感じることがあります。UWP Community Toolkit は、トースト通知の作成を実際に簡素化します。

今回のサンプルアプリでは、検索結果が返ってきたことをユーザーに通知するため、シンプルなトースト通知を追加します。Bing は検索結果をすぐに返すため、この通知はサンプルアプリにとって大きな付加価値にはならないかもしれません。しかし、長時間作業の完了をユーザーに通知する際に、トースト通知は役立ちます。

最初に、プロジェクトに Microsoft.Toolkit.Uwp.Notifications NuGet パッケージを追加します。前述の手順を繰り返して、パッケージをプロジェクトに追加します。

次に、図 8 のコードを MainPage.xaml.cs ファイルに追加し、トースト通知のコンテンツを作成します。アプリが動作しているデバイスについての情報をある程度埋めるには、System Information ヘルパークラスを使用します。

図 8 サンプルトースト通知のコンテンツを作成するコード

private ToastContent CreateDummyToast()
{
  return new ToastContent()
  {
    Launch = "action=viewEvent&eventId=1983",
    Scenario = ToastScenario.Default,
    Visual = new ToastVisual()
    {
      BindingGeneric = new ToastBindingGeneric()
        {
          Children =
            {
              new AdaptiveText()
                {Text = $"Bing search results returned for
                  {SystemInformation.DeviceModel}"},
              new AdaptiveText()
                {Text = $"Available Memory {SystemInformation.AvailableMemory}"},
              new AdaptiveText(){Text =
                $"Running {SystemInformation.OperatingSystem}
                {SystemInformation.OperatingSystemVersion}
                ({SystemInformation.OperatingSystemArchitecture})"}
             }
          }
        }
      };
    }

コードをよく見ると、UWP Community Toolkit が Toast Notification API XML 形式を中心とするオブジェクトモデルを追加していることがわかります。これによって、トースト通知のコンテンツを作成するプロセスが簡素化されます。開発者は、制約のないフォーマットのメリットや柔軟性を利用しながら、オブジェクトモデル (と IntelliSense) を使用してコードを記述できます。

ここで、以下のメソッドを追加します。

private void PopToast()
{
  ToastContent toastContent = CreateDummyToast();
  ToastNotificationManager.CreateToastNotifier()
    .Show(new ToastNotification(toastContent.GetXml()));
}

最初の行で CreateDummyToast メソッドを呼び出して、トースト通知のコンテンツを構築してから、そのコンテンツを ToastContent オブジェクトに割り当てます。次の行では GetXml メソッドを使用して、Toast Notification API が対応できる XML 形式にオブジェクトモデルを変換します。

最後に、btnSearch_Click イベントハンドラーで検索結果が Bing から帰ってきた直後に PopToast メソッドを呼び出します。ソリューションを実行し、上記のように、検索ボタンをクリックします。すると直後に、図 9 のような通知が表示されます。

図 9 返されるトースト通知

まとめ

UWP Community Toolkit は、リッチで魅力的な UWP アプリを作成するための重要なリソースを提供します。UWP Community Toolkit の新しいコントロールやクラウドサービス API のライブラリなどにより、開発者は REST API の組み込みに関する低レベルのコード作成に煩わされることなく、クラウド内サービスに接続するアプリを簡単に開発できます。UWP Community Toolkit は、開発者コミュニティの協力によって進化を続けています。機能セットは継続的に進化し、チームはその恩恵を受けています。UWP Community Toolkit はまさにコミュニティがコミュニティのために作り上げています。

Frank La Vigne は独立系コンサルタントであり、顧客がより良いコミュニティを形成するためにテクノロジの活用を支援しています。FranksWorld.com (英語) に定期的にブログ記事を投稿し、Frank’s World TV (youtube.com/FranksWorldTV (英語)) という YouTube チャンネルを主催しています。

この記事のレビューに協力してくれた技術スタッフの David Catuhe に心より感謝いたします。

次の方法で共有

最新のアプリ - UWP Community Toolkit の調査

UWP Community Toolkit Sample App

プロジェクトへの UWP Community Toolkit の追加

まとめ

その他のリソース