[Windows ストア アプリ] タイルを実装する(後編)

こんにちは、うりるーです。

前編ではタイルの概要と標準的なタイルの設定まで行いました。
今回はタイルの後編で「ライブタイル」を実装します。

ライブタイルは基本的に新しい情報を受信しそれを通知するときに、ワイドタイルと組み合わせて使います。デザインはライブタイルではないタイルと同じようにシンプルなものが推奨されていて、使い方としてアプリの名前を通知したり、広告を出すことは想定されていません。また、リアルタイム性は保証されていないので、15分後でも役に立つ情報を配信することが求められています。

参考: タイルとバッジのガイドラインとチェック リスト (Windows ストア アプリ) (Windows)

標準のタイル同様、ライブタイルも完全に開発者が自由に実装できるというわけではなく、あらかじめ用意されているXML形式のテンプレートに準じた形になるようにしなくてはなりません。テンプレートは MSDN サイトにタイル テンプレート カタログとして掲載されており、正方形タイル、ワイドタイルそれぞれ別に実装します。

今回は正方形タイル用に「TileSquareText01」の、ワイドタイル向けに「TileWidePeekImage01」のテンプレートを使って Visual Basic 言語で実装していきます。

まずは、Visual Studio を起動して、右上の ソリューション エクスプローラー 内にある「MainPage.xaml.vb」を開きます。ライブタイルのコードはこのファイルに書いて実装することになります。


初期の状態では「MainPage.xaml.vb」には次のように書かれています。

' 空白ページのアイテム テンプレートについては、http://go.microsoft.com/fwlink/?LinkId=234238 を参照してください

''' <summary>
''' それ自体で使用できる空白ページまたはフレーム内に移動できる空白ページ。
''' </summary>
Public NotInheritable Class MainPage
    Inherits Page

    ''' <summary>
    ''' このページがフレームに表示されるときに呼び出されます。
    ''' </summary>
    ''' <param name="e">このページにどのように到達したかを説明するイベント データ。Parameter
    ''' プロパティは、通常、ページを構成するために使用します。</param>
    Protected Overrides Sub OnNavigatedTo(e As Navigation.NavigationEventArgs)

    End Sub

End Class


' を含む行はコメント行となり、その行に書かれている文字列はプログラムの動作に影響を及ぼしません。この仕組みを利用してコメントにはその下のプログラムがどのような動作をしているのか解説したり、どこまでプログラムを書いたのかを記録するために使われています。

最初に名前空間(機能)を参照するための Imports 文を書きます。これは他のプログラム言語にも同じような機能があり、Java では Import、C では using となっています。

Imports Windows.UI.Notifications
Imports Windows.Data.Xml.Dom

この Imports 文は Public NotInheritable Class MainPage の上に来るようにします。
次に実際にライブタイルを表示するためのプログラムを書いていきます。

処理の名前(プロシージャ名)は TileUpdate にします。処理の内容は Private Sub TileUpdate() と End Sub の間に書きます。変数は Dim 変数名 As データ型 で宣言します。変数名は分かりやすい名前になるように心がけてください。

プログラムの流れとしては最初にワイドタイルの「TileWidePeekImage01」を XML 形式で作り、その XML に正方形タイルの「TileSquareText01」を追加で書き込んで、それを実行させるというものです。XML の形式はタイル テンプレート カタログに記載されているのでそれを参考にします。

参考: [Windowsストアアプリ開発]スタートスクリーンに表示されるタイルをライブタイルにする | クラスメソッド開発ブログ

ライブタイルに画像を使うときはその画像を Assets フォルダーにコピーします。
アプリ内にあるフォルダーの画像を参照するには ms-appx:/// スキームを使います。
今回、ライブタイルの画像として私の Twitter のヘッダー画像を使います。



ただ単にライブタイルの処理のプログラムを書いても実行されませんので、この処理を呼び出すコードを Protected … と End Sub の間に書きます。

Protected Overrides Sub OnNavigatedTo(e As Navigation.NavigationEventArgs)

  TileUpdate()

End Sub


以上のことを踏まえて「TileWidePeekImage01」と「TileSquareText01」のライブタイルのコードを書くと最終的に次のようになります。


' 空白ページのアイテム テンプレートについては、http://go.microsoft.com/fwlink/?LinkId=234238 を参照してください


Imports Windows.UI.Notifications
Imports Windows.Data.Xml.Dom

''' <summary>
''' それ自体で使用できる空白ページまたはフレーム内に移動できる空白ページ。
''' </summary>
Public NotInheritable Class MainPage
    Inherits Page

    ''' <summary>
    ''' このページがフレームに表示されるときに呼び出されます。
    ''' </summary>
    ''' <param name="e">このページにどのように到達したかを説明するイベント データ。Parameter 
    ''' プロパティは、通常、ページを構成するために使用します。</param>
    Protected Overrides Sub OnNavigatedTo(e As Navigation.NavigationEventArgs)

        TileUpdate()

    End Sub


    Private Sub TileUpdate()
        Dim WideTileXml As XmlDocument
        Dim WideTileImageNode As XmlNodeList
        Dim WideTileTextNode As XmlNodeList
        Dim SquareTileXml As XmlDocument
        Dim SquareTextNode As XmlNodeList
        Dim ImportSquareNode As IXmlNode
        Dim Updater As TileUpdater

        WideTileXml = TileUpdateManager.GetTemplateContent(TileTemplateType.TileWidePeekImage01)
        WideTileImageNode = WideTileXml.GetElementsByTagName("image")
        WideTileImageNode(0).Attributes.GetNamedItem("src").InnerText = "ms-appx:///Assets/livetile.png"
        WideTileTextNode = WideTileXml.GetElementsByTagName("text")
        WideTileTextNode(0).InnerText = "ライブタイル"
        WideTileTextNode(1).InnerText = "東京都市大デジタルコンテンツ研究会"

        SquareTileXml = TileUpdateManager.GetTemplateContent(TileTemplateType.TileSquareText01)
        SquareTextNode = SquareTileXml.GetElementsByTagName("text")
        SquareTextNode(0).InnerText = "小さいタイル"
        SquareTextNode(1).InnerText = "デジ研"

        ImportSquareNode = WideTileXml.ImportNode(SquareTileXml.GetElementsByTagName("binding").Item(0), True)
        WideTileXml.GetElementsByTagName("visual").Item(0).AppendChild(ImportSquareNode)

        Updater = TileUpdateManager.CreateTileUpdaterForApplication()
        Updater.Update(New TileNotification(WideTileXml))
    End Sub

End Class


では実行してみます。

この記事では小さいアイコンをわかりやすくするため、白線で縁取った画像に置き換えてあります。

「ローカルコンピューター」または F5 キーを押してデバッグを開始してアプリを起動したあと、スタート画面に戻ってください。スタート画面に戻ると、いままでのタイルがライブタイルに切り替わったことがわかります。ワイドタイルでは文字が書いてある面と画像の面が交互に切り替わり、正方形タイルでは文字の表示された面のみが表示されます。



ライブタイルではワイドタイルでも正方形タイルでも設定されている小さいアイコンが表示されるようになっています。


また、タイルには表示できる文字数に制限があり、その制限を超えた部分は「…」で省略され、省略された部分は表示されません。ライブタイルはこのように実装されます。

この記事で書いた方法の他にもライブラリを使ってライブタイルを実装する方法もあります。
ライブラリを使って実装する方法は WinRT/Metro TIPS:ライブ・タイルを簡単に利用するには?[Win 8] - @IT を参照してください。

次はバッジやトーストといった通知機能の実装について書きたいと思います。

表示: ねこび〜ん (カネウチカズコ) / CC BY-SA 2.1

0 件のコメント:

コメントを投稿