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

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

「ユーザーアクティビティ」カードをデザインする方法

　先に紹介した「ユーザーアクティビティ」を登録する最小限の手順では、「タイムライン」に表示されるカードは黒背景に文字列が一つだけというシンプルなものでした。背景色を変えたり、もう一つ文字列を追加したりできます。あるいは、「アダプティブカード」という仕組みを使って、もっと複雑なデザインにすることもできます。

背景色と文字を追加する

　先のコードでは、アクティベーションURIをセットした後で、VisualElements.DisplayTextプロパティに文字列をセットしました。そのほかに、VisualElements.Descriptionプロパティ（文字列）とVisualElements.BackgroundColorプロパティ（Windows.UI.Color型）も設定できます（次のコード）。

「タイムライン」のカードに追加の文字列と背景色を設定する（⇒TimelineHelper.csから抜粋）

userActivity.VisualElements.DisplayText = $"UF05 {DateTime.Now.ToString("HH:mm:ss")}";
userActivity.VisualElements.Description = url;
userActivity.VisualElements.BackgroundColor = Color.FromArgb(0xFF, 0x40, 0x5D, 0x47);

上記のコードで「タイムライン」に登録した例

　DisplayTextとDescriptionは、「タイムライン」で検索するときの対象になります。その文字色は、背景色が暗いときには白、明るいときには黒になります。BackgroundColorにはアクリル素材（Acrylic material）効果が掛かるので、画面の背景にもよりますが、おおむね指定した色より暗くなります。また、BackgroundColorに設定したアルファ値は無視されるようです。

アダプティブカード（JSON）

　「アダプティブカード」（Adaptive Cards）を使うと、「タイムライン」の表示をカスタマイズできます（次の画像）。

アダプティブカードで「タイムライン」の表示をカスタマイズした例

　アダプティブカードによる表示は、前述のDisplayText／Description／BackgroundColorを完全に覆ってしまいます。ただし、アダプティブカード内の文字列は検索対象にならないようなので、（検索のためには）DisplayText／Descriptionもセットしておきます。

　アダプティブカードの定義はJSONで記述します（後述するコードで組み立てる方法でも、いったんJSONに出力しています）。そのJSONに記述できる要素は、アダプティブカードのWebサイトのSchema Explorerに掲載されています。アダプティブカードをGUIで編集するエディタはまだ提供されていないようですが、JSON文字列から各種デバイス向けのアダプティブカードのプレビューを表示してくれる「Visualizer」が用意されています（次の画像）。

アダプティブカードのVisualizer

　ちなみに、上の画像はアダプティブカードを表示するアプリを選ぶドロップダウンを開いたところですが、「タイムライン」の他に、CortanaやWindows Notifications（通知）といったさまざまな場面でアダプティブカードが利用されます。

　JSONを書くとき、「ユーザーアクティビティ」を登録するときに置き換える部分をプレースホルダーにしておきます。文字列置換処理がやりやすければどんな形でもよいのですが、例えば「{{」／「}}」で囲んだ部分をプレースホルダーにするなどと自分で決めます（次のコード）。

アダプティブカードにプレースホルダーを設定する例

"type": "TextBlock",
"text": "at {{time}}",
"size": "small",

　上の例では、「ユーザーアクティビティ」を登録するときに、「{{time}}」の部分を実際の時刻に置換してやろうというわけです。

　今回作成したJSONコードの全体は、AdaptiveCard.jsonをご覧ください。その構造は次の画像のようになっています。アダプティブカードの要素は、基本的に上から下へと上に詰めて配置されます。左右に配置するには、ColumnSetを置き、その中に複数のColumnを置きます。

今回作ったアダプティブカードの構造

　アダプティブカードのJSONは、ソースコードに文字列リテラルとして書き込んだり、テキストファイルとしてアプリのリソースに埋め込んだりして利用します。クラウドから取得するようにしてもよいでしょう。ここでは、アプリのリソースにしましょう。プロジェクトにJSONファイルを追加したら、プロパティの［ビルド アクション］を［埋め込みリソース］に変えておきます。

　リソースのJSONファイルを読み込んでアダプティブカードに変換するコードは次のようになります。

リソースのJSONファイルを読み込んでアダプティブカードに変換する（⇒TimelineHelper.cs）

// JSON で記述したカードのテンプレートから AdaptiveCard を作る
private IAdaptiveCard CreateAdaptiveCardFromJson(string url)
{
  // リソースから JSON データを読み込む
  string adaptiveCardJson;
  var assembly = this.GetType().GetTypeInfo().Assembly;
  using (var stream  = assembly.GetManifestResourceStream(
                                  $"{assembly.GetName().Name}.AdaptiveCard.json"))
  using (var reader = new StreamReader(stream))
    adaptiveCardJson = reader.ReadToEnd();

  // プレースホルダーを置き換える
  adaptiveCardJson 
    = adaptiveCardJson.Replace("{{time}}", $"{DateTime.Now.ToString("HH:mm:ss")}");
  adaptiveCardJson = adaptiveCardJson.Replace("{{url}}", url);

  // AdaptiveCard を生成して返す
  return AdaptiveCardBuilder.CreateAdaptiveCardFromJson(adaptiveCardJson);
}

　このようにして生成したアダプティブカードは、UserActivityオブジェクトのVisualElements.Contentプロパティにセットします（次のコード）。

アダプティブカードをユーザーアクティビティにセットする（⇒TimelineHelper.cs）

userActivity.VisualElements.Content = CreateAdaptiveCardFromJson(url);