SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine(コードジン) DeveloperZine(デベロッパージン)- エンジニアの意思決定を支える技術情報メディア ProductZine

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

UWPアプリ開発の最前線

Windows 10 1803の新機能「タイムライン」とはなにか?
~まずはUWPアプリから使ってみる

UWPアプリ開発の最前線 第5回


アダプティブカード(コード生成)

 アダプティブカードのJSONは、アプリで動的に生成することも可能です。それには、NuGetから「AdaptiveCardsパッケージ」を導入します。

AdaptiveCardsのプロジェクト」はオープンソースで開発が進められていて、.NET/UWPだけでなく、JavaScript/Android/iOSにも対応しています。今回はアダプティブカードの組み立てをしたいだけなので、NuGetで「AdaptiveCards」を検索して見つかるものの中から「AdaptiveCardsパッケージ」だけを導入します(次の画像)。なお、その他のパッケージはアダプティブカードを表示するためのものです。また、「Microsoft.AdaptiveCardsパッケージ」は古いバージョンです。

ソリューションのNuGetパッケージの管理画面
ソリューションのNuGetパッケージの管理画面で「AdaptiveCards」を検索したところ

 NuGetパッケージを導入したら、次のコードのようにして動的にアダプティブカードを生成できます。先ほどのJSONの例とまったく同じカードを生成するコードは複雑になりすぎるので、ここでは背景画像の上に文字列を3段だけ表示するカードとしています。

コードで動的にアダプティブカードを生成する(⇒TimelineHelper.cs
// コードで AdaptiveCard を組み立てる
private static IAdaptiveCard CreateAdaptiveCardByCode(string url)
{
  var card = new AdaptiveCards.AdaptiveCard();

  // 背景画像
  card.BackgroundImage
    = new Uri("http://bluewatersoft.cocolog-nifty.com/blog/IMG_0252d.png");

  // 一段目
  card.Body.Add(
    new AdaptiveCards.AdaptiveTextBlock
    {
      Text = "Timeline",
      Size = AdaptiveCards.AdaptiveTextSize.Large,
      Weight = AdaptiveCards.AdaptiveTextWeight.Bolder,
      Color = AdaptiveCards.AdaptiveTextColor.Light,
    });

  // 二段目
  card.Body.Add(
    new AdaptiveCards.AdaptiveTextBlock
    {
      Text = $"at {DateTime.Now.ToString("HH:mm:ss")}",
      Size = AdaptiveCards.AdaptiveTextSize.Small,
      Spacing = AdaptiveCards.AdaptiveSpacing.None,
      Separator = true,
      Color = AdaptiveCards.AdaptiveTextColor.Attention,
      HorizontalAlignment = AdaptiveCards.AdaptiveHorizontalAlignment.Right,
    });

  // 三段目 (何段でも追加可能。ただし、どこまで表示されるかはデバイスによる)
  card.Body.Add(
    new AdaptiveCards.AdaptiveTextBlock
    {
      Text = url,
      Size = AdaptiveCards.AdaptiveTextSize.Medium,
      Color = AdaptiveCards.AdaptiveTextColor.Light,
      Wrap = true,
      MaxLines = 5,
      Spacing = AdaptiveCards.AdaptiveSpacing.Small,
    });

  // 最後は先述のコードと同様に、JSON から AdaptiveCard を生成して返す
  return AdaptiveCardBuilder.CreateAdaptiveCardFromJson(card.ToJson());
}

 上のコードで生成された「タイムライン」の例を示します(次の画像)。

動的に生成したアダプティブカード
上記のコードで「タイムライン」に登録した例

アイコンを変更する

 「タイムライン」のカード左上にはアプリに設定したアイコンとアプリ名が表示されていますが、これを変更することもできます(次の画像)。すぐ上の画像と見比べてみてください。

アイコンとアプリ名部分を変更したアダプティブカード
アイコンを変え、その隣に文字列を追加した「タイムライン」のカード

 これには、アイコンのURIと追加テキストをセットしたUserActivityAttributionオブジェクト(Windows.ApplicationModel.UserActivities 名前空間)を作り、それをUserActivityオブジェクトのVisualElements.Attributionプロパティにセットします(次のコード)。

アイコンとアプリ名部分を変更する(⇒TimelineHelper.cs
userActivity.VisualElements.Attribution = new UserActivityAttribution()
{
  IconUri = new Uri((new Uri(url)), "/favicon.ico"),
  AlternateText = "Timeline TEST",
};

まとめ

 Widnows 10 1803の新機能「タイムライン」をアプリで利用するために、アプリから「ユーザーアクティビティ」を登録する方法と、「タイムライン」からUWPアプリが起動されたときに対処する方法を解説しました。また、「タイムライン」上の表示をカスタマイズするためにアダプティブカードを使う方法も紹介しました。

 なお、本稿の「タイムライン」の画像は、Widnows 10 1803のインサイダープレビュー版「ビルド 17133.73」でのものです。正式リリース版では細部が異なることがあるかもしれませんので、ご承知置き願います。

UWPアプリに興味が湧いてきた人へ

 Windowsデスクトップ用アプリの開発はWindows Formsなら経験があるけど、ちょっとUWPアプリ開発も気になってきたという方へ。ぴったりの電子書籍を書きました!

UWP アプリ開発 101 第2版: Windows Forms 開発者のための C# / XAML による UWP アプリ開発入門』 (BluewaterSoft 2017/7/1)
Kindle版UWPアプリ版があります。
・どちらも無料で最初の方を読めるので、とりあえず試し読みをしてみてください。

 また、Microsoft公式のチュートリアルやたくさんのサンプルコードなどもあります。UWPアプリの開発環境を整えてUWPアプリのプロジェクトを作れるようになったら、これらのドキュメントやサンプルも参考にしてみてください。

この記事は参考になりましたか?

連載通知を行うには会員登録(無料)が必要です。
既に会員の方はを行ってください。
UWPアプリ開発の最前線連載記事一覧

もっと読む

この記事の著者

biac(ばいあっく)

HONDA R&Dで自動車の設計をやっていた機械屋さんが、技術の進化スピードに魅かれてプログラマーに。以来30年ほど、より良いコードをどうやったら作れるか、模索の人生。わんくま同盟の勉強会(名古屋)で、よく喋ってたりする。2014/10~2019/6 Microsoft MVP (Windows Devel...

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

CodeZine(コードジン)
https://codezine.jp/article/detail/10790 2019/11/10 21:09

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー