アダプティブカード(コード生成)
アダプティブカードのJSONは、アプリで動的に生成することも可能です。それには、NuGetから「AdaptiveCardsパッケージ」を導入します。
「AdaptiveCardsのプロジェクト」はオープンソースで開発が進められていて、.NET/UWPだけでなく、JavaScript/Android/iOSにも対応しています。今回はアダプティブカードの組み立てをしたいだけなので、NuGetで「AdaptiveCards」を検索して見つかるものの中から「AdaptiveCardsパッケージ」だけを導入します(次の画像)。なお、その他のパッケージはアダプティブカードを表示するためのものです。また、「Microsoft.AdaptiveCardsパッケージ」は古いバージョンです。
NuGetパッケージを導入したら、次のコードのようにして動的にアダプティブカードを生成できます。先ほどのJSONの例とまったく同じカードを生成するコードは複雑になりすぎるので、ここでは背景画像の上に文字列を3段だけ表示するカードとしています。
// コードで 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プロパティにセットします(次のコード)。
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アプリのプロジェクトを作れるようになったら、これらのドキュメントやサンプルも参考にしてみてください。
