名刺アプリ作成のすすめ(Windows 8.1 アプリ開発入門) 第6回 ～ グリッド ページ (著書一覧ページ) の作成 ～

マイクロソフトの田中達彦です。
本連載では、Windows 8.1に対応した名刺アプリの作り方を通じて、アプリの開発方法を説明します。
今回は、アプリの中でグリッド アプリのトップページを使用して、画像データを表示している部分を作成します。
第5回の記事の中では、著書一覧のページの部分です。
https://blogs.msdn.com/b/ttanaka/archive/2014/01/09/windows-8-1-5.aspx

前回まではアプリの仕様などの説明でしたが、今回からは開発ツールであるVisual Studioを使用して実際にアプリを作ります。
Windows 8.1上にVisual Studio 2013が入っている環境でアプリを作成します。
環境の詳細については、第2回の記事をご参照ください。

[開発者用ライセンスの取得]
Visual Studioを初めて起動するときに、開発者用ライセンスを取得するように求められます。
この開発者用ライセンスとは、作成したWindowsストア アプリをローカルPCで実行させるためのライセンスです。
開発者用ライセンスを取得していないと、Windows ストア アプリをローカルPC上で実行できません。

開発者用ライセンスの取得には、マイクロソフト アカウント(旧LiveID)が必要です。
マイクロソフト アカウントを持っていない方は、あらかじめ取得しておきましょう。

開発者用ライセンスの有効期限は30日です。
開発者用ライセンスの取得に使ったマイクロソフトアカウントが、Windowsストアにアプリを上げるための開発者アカウントであれば、有効期限が90日になります。
有効期限が過ぎたら、再度取得します。

[プロジェクトの作成]
Visual Studioでアプリを作るときは、まずプロジェクトを作成します。
それではVisual Studioを起動して、プロジェクトを作成しましょう。
無償版のVisual Studio 2013 Expressを使用している方は、Visual Studioのメニューの[ファイル]-[新しいプロジェクト]を選択します。
Visual Studio 2013 ProfessionalやUltimateのような有償版をご使用の方は、メニューの[ファイル]-[新規作成]-[プロジェクト]を選択します。

[新しいプロジェクト]というダイアログが表示されたら、左側にあるテンプレートの部分のVisual C#を展開し、[Windows ストア]と書かれた部分を選択します。
中央に[グリッド アプリケーション(XAML)]と書かれた部分を選択します。これがプロジェクトです。
下のほうに[名前]という部分があるので、任意の名前を入力します。デフォルトでは、App1のように、Appの後に数字がついている名前が付けられています。

その下にある[場所]で、プロジェクトファイル一式が入るフォルダーを指定できます。
デフォルトではドキュメント フォルダーの下にあるVisual Studio 2013\Projectsの下にファイルが作成されます。

入力が終わったら、[OK]ボタンを押します。
Visual Studioがグリッド アプリケーションに必要なファイルを自動的に生成します。

[生成されたファイル]
グリッド アプリケーションには、デフォルトで以下のファイルが含まれています。

Assetsフォルダーの中には、スタート画面に表示するタイルの画像などが含まれています。
Commonフォルダーの中には、アプリの開発を容易にするためのクラスが含まれています。
DataModelフォルダーの中には、サンプルとして表示されるデータが含まれています。

App.xamlとApp.xaml.csには、アプリが起動したときに最初に呼ばれるクラスが記述されています。
拡張子が.xamlファイルはUIを構築するためのマークアップ言語が含まれていて、拡張子が.csのファイルにはC#のコードが含まれます。

App60_TemporaryKey.pfxは、パッケージの署名に必要なプロジェクト ソース証明ファイルです。
ファイル名の最初のApp60の部分は、プロジェクト名として指定した名前がつきます。

GroupDetailPage.xaml / GroupDetailPage.xaml.csは、グリッド アプリケーションのグループのページに該当するファイルです。
GroupedItemslPage.xaml / GroupedItemsPage.xaml.csは、グリッド アプリケーションのトップページに該当するファイルです。
ItemDetailPage.xaml / ItemDetailPage.xaml.csは、グリッド アプリケーションの詳細ページに該当するファイルです。

Package.appxmanifestは、アプリに関する情報を含んでいます。アプリ マニフェストと呼ばれるファイルです。
例えば、タイルの画像の指定や、アプリで使用している機能の宣言をこのアプリ マニフェストに記述します。

[アプリの実行方法]
Visual Studio上で開発中のアプリを実行するには、以下の3つの方法があります。
- メニューの[デバッグ]-[デバッグ開始]を選択する
- [F5]キーを押す
- ツールバーの緑色の左向き三角ボタン()をクリックする
上記のどれかを実行すると、アプリがビルドされ、エラーがなければアプリが起動します。

何も変更を加えていないグリッド アプリケーションのアプリを実行すると、以下のようになります。

Visual Studio上でアプリを終了させるには、以下のどれかを実行します。
- メニューの[デバッグ]-[デバッグの停止]を選択する
- [Shift] + [F5]キーを押す
- ツールバーの赤色の四角ボタン()をクリックする

[今回変更するファイル]
今回は名刺アプリの中の著作一覧に該当するページを作成します。
公開している名刺アプリでは著書の情報を掲載していますが、画像があるものであればどんな情報でも構いません。画像に関するURLもあれば、なお良しです。

本アプリでは、画像などのデータはインターネットから取得せず、アプリ内に持つことにします。
頻繁に変更されない情報であることと、オフラインでも情報を見られるようにするためです。

アプリに表示されるデータは、DataModel\SampleData.jsonに入っているので、そのファイルを書き換えます。
表示させるための画像データは、Assetsフォルダーに入れるか、別のフォルダーを作成してそこに入れます。

[画像ファイルの追加]
まずは、画像ファイルを追加しましょう。
ここではサンプルのデータとして、Windowsアプリ アートギャラリーにある花札の画像を使ってみます。
Windowsアプリ アートギャラリーとは、画像や写真、効果音などの素材を集めたもので、アプリを作るときに利用できます。
以下のページにリンクがある「ご利用上の注意事項」に同意していただいたうえで、素材をご使用ください。
https://msdn.microsoft.com/ja-jp/hh544699.aspx

アートギャラリーから花札の画像をダウンロードして、その中のFC001.pngからFC008.pngまでの8枚の画像をAssets\dataというフォルダーに入れます。
新しいフォルダーを作成するときには、Visual Studioの右側に表示されているソリューション エクスプローラー上のフォルダーを作りたいところで右クリックし、[追加]-[新しいフォルダー]を選択します。
Assetsフォルダーにdataフォルダーを追加したら、FC001.pngなどの画像ファイルをソリューション エクスプローラー上にドラッグアンドドロップします。
以下のように、画像ファイルが追加されました。

例として花札の画像ファイルを使用していますが、他の画像ファイルでも構いません。
実際に自分の名刺アプリを作るときは、自分の生い立ちや趣味などを一覧にしましょう。

[SampleData.jsonの変更]
アプリで表示している画像や文言は、DataModel\SampleData.jsonに記述してあります。
この中の記述を変えれば、自分が表示させたい画像や文言に変更できます。

プロジェクトを作ったときのSampleData.jsonの最初の部分は、以下のようになっています。
長い文字列の部分は略しています。

{"Groups":[
  {
    "UniqueId": "Group-1",
    "Title": "Group Title: 1",
    "Subtitle": "Group subtitle: 1",
    "ImagePath": "Assets/DarkGray.png",
    "Description" : "Group Description: Lorem ipsum (略) ",
    "Items":
    [
      {
        "UniqueId": "Group-1-Item-1",
        "Title": "Item Title: 1",
        "Subtitle": "Item Subtitle: 1",
        "ImagePath": "Assets/LightGray.png",
        "Description" : "Item Description: Pellentesque (略)",
        "Content" : "Curabitur class aliquam vestibulum (略)"
      },
      {
        "UniqueId": "Group-1-Item-2",
        "Title": "Item Title: 2",
        "Subtitle": "Item Subtitle: 2",
        "ImagePath": "Assets/DarkGray.png",
        "Description" : "Item Description: Pellentesque (略)",
        "Content" : "Curabitur class aliquam vestibulum (略)"
      },

黄色くマーカーした部分は、グループの説明をしている場所です。
水色でマーカーした部分は、それぞれ個別のアイテムの情報です。
グリッド アプリケーションを起動させたときに、グループのTitleや個別アイテムのTitle、Subtitle、そしてImagePathで指定している画像ファイルが表示されています。

それでは、SampleData.jsonを花札のデータに書き換えてみましょう。
以下の黄色でマーカーした部分を変更します。

{"Groups":[
  {
    "UniqueId": "Group-1",
    "Title": "花札",
    "Subtitle": "Group subtitle: 1",
    "ImagePath": "Assets/DarkGray.png",
    "Description" : "Group Description: Lorem ipsum (略) ",
    "Items":
    [
      {
        "UniqueId": "Group-1-Item-1",
        "Title": "松に鶴",
        "Subtitle": "1月",
        "ImagePath": "Assets/data/FC004.png",
        "Description" : "Item Description: Pellentesque (略)",
        "Content" : "Curabitur class aliquam vestibulum (略)"
      },
      {
        "UniqueId": "Group-1-Item-2",
        "Title": "松に赤短",
        "Subtitle": "1月",
        "ImagePath": "Assets/data/FC003.png",
        "Description" : "Item Description: Pellentesque (略)",
        "Content" : "Curabitur class aliquam vestibulum (略)"
      },

変更した後は、文字コードをUnicodeに変更して保存します。
Visual StudioでSampleData.jsonが表示されている状態で、メニューの[ファイル]-[保存オプションの詳細設定]を選びます。
エンコードの部分が「日本語(シフトJIS)」になっているので、それを「Unicode(UTF-8シグネチャ付き)」に変更します。
そして、[Ctrl]+[s]を押すか、メニューの[ファイル]-[DataModel\SampleData.jsonの保存]を選択してファイルを保存します。

もしUnicodeに変更せずに実行してしまうと、以下のように実行時に例外が発生してアプリが止まってしまいます。

このように、表示させたい画像と文字データを用意して、SampleData.jsonを変更すれば、表示させる情報を自由に変えられます。
ここまで変更したアプリを実行すると、以下のようになります。

次回は、表示している画像の大きさを変えたりして、著書一覧のページ(既に花札ページになってしまっていますが...)をカスタマイズする方法を紹介します。

[前後の記事]
第5回 作成するアプリの仕様
第7回 グリッド ページ (著書一覧ページ) を整える

マイクロソフト
田中達彦