SHOEISHA iD

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

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

UWPアプリ開発の最前線

UWPアプリを作るとき、画面遷移やアーキテクチャで悩んだら!?
~Windows Template Studioを使ってみよう

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

  • X ポスト
  • このエントリーをはてなブックマークに追加

生成された機能を利用する

 ここまで見てきたように、Windows Template Studioで生成した画面は、それなりに動くものでした。一方、Windows Template Studioで生成した機能の方は、利用するコードを実装しなければ動きません(一部の機能デモを除いて)。先ほどプロジェクトを生成するときに、トースト通知と共有へ送る機能を追加しました。この2つの機能を利用するコードを実装してみましょう。

トースト通知を出す

トースト通知の出し方を探る

 タスク一覧で"toast"を含むTODOコメントを検索してみると、次の画像のように4つ見つかりました。

"toast"を含むTODOコメント
"toast"を含むTODOコメント

 1つ目のTODOコメントはDefaultLaunchActivationHandler.csにあって、「// TODO WTS: Remove or change this sample which shows a toast notification when the app is launched.」となっています(上の画像に見えています)。起動時のトースト通知は、ここで出していたのですね。そこで呼び出しているToastNotificationsServiceクラスのShowToastNotificationSampleメソッドを改造すれば自由なメッセージを出せそうです。

 ここで、ToastNotificationsServiceクラスのメソッドの呼び出しが、Singleton<ToastNotificationsService>.Instance.{メソッド名}()というちょっと変わった書き方になっているのを覚えておいてください。

 起動時にトーストを出す行(上の画像の28行目)はもう不要なので、コメントアウトしておきます。

UIを作る

 ここでは、Mainページにテキストボックスとボタンを追加して、ボタンのクリックでテキストボックスの内容をトースト通知として出すようにしてみましょう。MainPage.xamlに次のようなXAMLコードを追加します。

トースト通知の機能を使うためのUI(MainPage.xaml
<!-- bw: トースト通知の機能を使うためのUIを追加 -->
<StackPanel >
    <TextBox x:Name="TextBox1" Header="トースト通知に表示する文字列"
             Text="トースト通知の機能を使ってみた"
             AcceptsReturn="True" MaxHeight="150" TextWrapping="Wrap"
             ScrollViewer.VerticalScrollBarVisibility="Auto" />
    <Button Click="OnSendToast" Margin="0,5,0,0">トースト通知</Button>
</StackPanel>

コードビハインドからトースト通知のメソッドを呼び出す

 上のコードでボタンのClickイベントハンドラー名(OnSendToastの部分)の中にカーソルを置いて[F12]キーを押すと、イベントハンドラーのメソッドがコードビハインドに自動生成されます。イベントハンドラーでは、先ほど見つけたShowToastNotificationSampleメソッドを呼び出してみましょう(次のコード)。「Singleton<ToastNotificationsService>.……」というちょっと変わった呼び出し方をするのでしたね。

ボタンクリックのイベントハンドラー(MainPage.xaml.cs
// bw: トースト機能を使う
private void OnSendToast(object sender, Windows.UI.Xaml.RoutedEventArgs e)
{
    Singleton<ToastNotificationsService>.Instance.ShowToastNotificationSample();
}

 これで実行してみると、Mainページのボタンクリックでトースト通知が出ます。ただし、通知の内容は以前のままです。

トースト通知のメソッドを改造する

 トースト通知を出すメソッドを改造して、引数で渡したメッセージを表示するようにしましょう。また、通知にキャンセルボタンは不要ですね。そこは削除しましょう。

 まず、メソッドのシグネチャを次のコードのように修正します。

トースト通知のメソッドを改造(ToastNotificationsService.Samples.cs):その1
//public void ShowToastNotificationSample()
// bw: 引数を追加(トースト通知に出すメッセージ)
public void ShowToastNotificationSample(string toastMessage)

 つづいて、トーストに表示する文字列を設定している部分を書き換えます(次のコード)。

トースト通知のメソッドを改造(ToastNotificationsService.Samples.cs):その2
new AdaptiveText()
{
    //Text = @"Click OK to see how activation from a toast notification can be handled in the ToastNotificationService."
    // bw: 表示するメッセージを変更
    Text = toastMessage
}

 それと、キャンセルボタンを設定しているところは削除してしまいましょう(次のコード)。

トースト通知のメソッドを改造(ToastNotificationsService.Samples.cs):その3
Buttons =
{
    // More about Toast Buttons at https://docs.microsoft.com/dotnet/api/microsoft.toolkit.uwp.notifications.toastbutton
    new ToastButton("OK", "ToastButtonActivationArguments")
    {
        ActivationType = ToastActivationType.Foreground
    },

    // bw: キャンセルボタンは削除
    //new ToastButtonDismiss("Cancel")
}

 以上で、トースト通知を出すメソッドの改造は終了です。最後に、呼び出しているイベントハンドラーの部分を、引数にテキストボックスの内容を渡すように変更します(次のコード)。

ボタンクリックのイベントハンドラーを変更(MainPage.xaml.cs
// bw: トースト機能を使う
private void OnSendToast(object sender, Windows.UI.Xaml.RoutedEventArgs e)
{
    //Singleton<ToastNotificationsService>.Instance.ShowToastNotificationSample();
    // bw: 引数にテキストボックスの内容を渡す
    Singleton<ToastNotificationsService>.Instance
        .ShowToastNotificationSample(this.TextBox1.Text);
}

 これで完成です。実行してみると、次の画像のようにテキストボックスの内容を通知の本文としてトースト通知が画面の右下に出てきます。通知の[OK]ボタンをクリックしなかったときは、アクションセンターにも表示されます。このように長い文字列を設定すると途中で切られてしまうことには注意しないといけません。

トースト通知が表示された
トースト通知が表示された
トースト通知はアクションセンターにも表示される
トースト通知はアクションセンターにも表示される

共有へ送る

共有へ送る方法を探す

 タスク一覧で探すと、「// TODO WTS: Start sharing data from your pages / views with these steps:」で始まる長いTODOコメントが見つかります(次の画像)。そこには、4ステップの実装手順が示されています。

共有へ送る機能を実装する手順を示すTODOコメント
共有へ送る機能を実装する手順を示すTODOコメント

 共有へ送るのもクリップボードへコピーするのと同じような処理に思えますが、上のTODOコメントに見るように、イベントに応答する形でデータを提供するというちょっと面倒な実装をしなければなりません。Windows 8.x時代には共有へ送るボタンがOS側に付いていたのでそのような実装になり、そのまま引き継がれているのです。

UIを追加する

 ここでは、WebViewページに共有ボタンを追加して、表示しているWebページのURLをボタンクリックで共有へ送るようにしてみましょう。

 WebViewページに、次のコードのようにボタンを追加します。ボタンのClickイベントハンドラー名「OnShareTo」の中で[F12]キーを押して、イベントハンドラーを生成しておいてください。

共有ボタンを追加する(WebViewPage.xaml
<Button Style="{StaticResource BrowserButtonStyle}"
        Click="OnOpenInBrowser" x:Uid="WebView_OpenInBrowserButton">
    <FontIcon FontFamily="Segoe MDL2 Assets" Glyph="&#xE774;" />
</Button>
                
<!-- bw: 共有ボタンを追加 -->
<Button Style="{StaticResource BrowserButtonStyle}"
        Click="OnShareTo" ToolTipService.ToolTip="Share to">
    <FontIcon FontFamily="Segoe MDL2 Assets" Glyph="&#xE72D;" />
</Button>

 なお、紙面の都合でToolTipService.ToolTipプロパティに直書きで文字列をセットしています。実際には、Windows Template Studioが生成した上のボタンのように、x:Uidを設定した上で、文字列はリソースファイルResources.resw)に置いてください(トースト通知のUIも同様)。

TODOコメントのステップに従って実装する

 TODOコメントの4つのステップに従って、表示しているWebページの情報を共有へ送るShareUrlメソッドを実装します(次のコード)。ShareUrlメソッドは、ボタンのClickイベントハンドラーから呼び出します。

 このコードには、4つのTODOコメントをコピーし(適宜改行を追加しました)、また、その概略を日本語で付記してあります。

表示しているWebページの情報を共有へ送る(WebViewPage.xaml.cs
// bw: 共有ボタンのイベントハンドラー
private void OnShareTo(object sender, RoutedEventArgs e)
{
    ShareUrl();
}

// bw: 共有へ送るAPI(DataTransferManagerオブジェクト)
private DataTransferManager dataTransferManager;

// bw: 表示しているWebページの情報を共有へ送る
// 以下のusingが必要
//   using Sample01.Hamburger.CodeBehind.Helpers;
//   using Sample01.Hamburger.CodeBehind.Models;
//   using Windows.ApplicationModel.DataTransfer;
private void ShareUrl()
{
    // - Step 1. Setup a DataTransferManager object in your page / view
    //   and add a DataRequested event handler
    //   (i.e. OnDataRequested) to be called whenever the user invokes share.
    // ステップ1:DataTransferManagerオブジェクトを取得し、
    //           DataRequestedイベントハンドラーを設定する
    if (dataTransferManager == null)
    {
        dataTransferManager = DataTransferManager.GetForCurrentView();
        dataTransferManager.DataRequested += OnDataRequested;
    }

    // DataRequestedイベントハンドラー(内部関数)
    void OnDataRequested(DataTransferManager sender, DataRequestedEventArgs args)
    {
        // 共有へ送りたいデータ
        Uri uri = this.webView.Source;
        string pageTitle = this.webView.DocumentTitle;

        // - Step 2. Within the OnDataRequested event handler
        //   create a ShareSourceData instance and add the data you want to share.
        // ステップ2:WTSのShareSourceDataオブジェクトを作り、
        //           共有したいデータをセットする
        var shareSourceData = new ShareSourceData(pageTitle);
        shareSourceData.SetWebLink(uri);

        // - Step 3. Call the SetData extension method before leaving the event handler
        //   (i.e. args.Request.SetData(shareSourceData))
        // ステップ3:WTSのSetData拡張メソッドを呼び出す
        args.Request.SetData(shareSourceData);
    }

    // - Step 4. Call the DataTransferManager.ShowShareUI method
    //   from your command or handler to start the sharing action
    // ステップ4:ShowShareUI静的メソッドを呼び出すと、共有ポップアップが出る
    DataTransferManager.ShowShareUI();
}

 これで実行してみると、次の画像のように共有ボタンのクリックで共有のポップアップが出てきます。そこで共有先のアプリを選ぶと、そのアプリが立ち上がって共有したい情報(ここでは、表示しているWebページのURLとタイトル)を処理します。なお、共有のポップアップと共有先のアプリが同時に写っているのは、画像合成です。

表示しているWebページを共有する
表示しているWebページを共有する

次のページ
後から画面や機能を追加する

関連リンク

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

  • X ポスト
  • このエントリーをはてなブックマークに追加
UWPアプリ開発の最前線連載記事一覧

もっと読む

この記事の著者

biac(ばいあっく)

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

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

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

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/11282 2019/01/09 11:00

おすすめ

アクセスランキング

アクセスランキング

イベント

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

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

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

メールバックナンバー

アクセスランキング

アクセスランキング