TOPページ > Tips > Windows Phone 7 > Hub Integrate(ハブの統合) > Pictures Hub >

Pictures Hubから任意の写真をパラメータとして渡してアプリケーションを起動する(Windows Phone OS 7.1～)

h1. 第39回　Pictures HubとMusic + Videos Hubにアプリケーションを統合してみよう！（2）

h2. はじめに

前回( http://gihyo.jp/dev/serial/01/windows-phone/0038 )は、Windows Phone OS 7.1向けに、Music + Videos HubとPictures Hubのトップ画面からアプリケーションを起動する方法についてご紹介致しました。

今回は、Pictures Hubで任意の1枚の写真を「すばやく画像処理したい場合」または「共有したい場合」など、Pictures Hubから写真情報をパラメータとして渡し、任意のアプリケーションを起動する方法をご紹介したいと思います。

!http://ch3cooh.jp/wp-content/uploads/2011/10/Screen-Capture-20111117051216822.jpg!

Windows Phone OS 7.0とOS7.1とでは手順が異なりますので、どちらのSDKを使うかによって使い分けて頂ければと思います。まずは、Windows Phone OS 7.1での写真の共有とアプリ起動の方法についてご紹介させて頂きまして、次にそれぞれのWindows Phone OS 7.0での実装についてご紹介します。

h2. Pictures Hubから任意の写真をパラメータとして渡してアプリケーションを起動する

Pictures Hubにて選択した写真をすばやく画像処理したい場合、わざわざPictures Hubを終了させずにアプリケーションを起動する方法が提供されています。

WMAppManifest.xmlを編集します。ソリューションエクスプローラー開き、Propertiesフォルダを開きます。

!http://ch3cooh.jp/wp-content/uploads/2011/10/hubtype.png!

一番下にあるWMAppManifest.xmlを開きます。以下のようにApp要素の子要素として、以下のExtensions要素を追加します。ExtensionNameやConsumerIDの値は固定値ですので変更しないでください。

<Extensions>
      <Extension ExtensionName="Photos_Extra_Viewer" ConsumerID="{5B04B775-356B-4AA0-AAF8-6491FFEA5632}" TaskID="_default" />
</Extensions>

どこに追加して良いのか判らない方がいるかもしれません。MAppManifest.xmlを全文表示します。

<?xml version="1.0" encoding="utf-8"?>
<Deployment xmlns="http://schemas.microsoft.com/windowsphone/2009/deployment" AppPlatformVersion="7.1">
  <App xmlns="" ProductID="{25000fe8-f99e-454a-a115-a48a0eb15606}" 
       Title="PictureHubWP71Test" RuntimeType="Silverlight" 
       Version="1.0.0.0" Genre="apps.normal"  
       Author="author" Description="" Publisher="PictureHubWP71Test">
    <IconPath IsRelative="true" IsResource="false">ApplicationIcon.png</IconPath>
    <Capabilities>
      <Capability Name="ID_CAP_GAMERSERVICES"/>
      <Capability Name="ID_CAP_IDENTITY_DEVICE"/>
      <Capability Name="ID_CAP_IDENTITY_USER"/>
      <Capability Name="ID_CAP_LOCATION"/>
      <Capability Name="ID_CAP_MEDIALIB"/>
      <Capability Name="ID_CAP_MICROPHONE"/>
      <Capability Name="ID_CAP_NETWORKING"/>
      <Capability Name="ID_CAP_PHONEDIALER"/>
      <Capability Name="ID_CAP_PUSH_NOTIFICATION"/>
      <Capability Name="ID_CAP_SENSORS"/>
      <Capability Name="ID_CAP_WEBBROWSERCOMPONENT"/>
      <Capability Name="ID_CAP_ISV_CAMERA"/>
      <Capability Name="ID_CAP_CONTACTS"/>
      <Capability Name="ID_CAP_APPOINTMENTS"/>
    </Capabilities>
    <Tasks>
      <DefaultTask  Name ="_default" NavigationPage="MainPage.xaml"/>
    </Tasks>
    <Tokens>
      <PrimaryToken TokenID="PictureHubWP71TestToken" TaskName="_default">
        <TemplateType5>
          <BackgroundImageURI IsRelative="true" IsResource="false">Background.png</BackgroundImageURI>
          <Count>0</Count>
          <Title>PictureHubWP71Test</Title>
        </TemplateType5>
      </PrimaryToken>
    </Tokens>
    <Extensions>
      <Extension ExtensionName="Photos_Extra_Viewer" ConsumerID="{5B04B775-356B-4AA0-AAF8-6491FFEA5632}" TaskID="_default" />
    </Extensions>
  </App>
</Deployment>

端末へのデプロイ後にPictures Hubで任意の写真を選択し、「アプリ…」を選択しました。PictureHubWP71Testというテストアプリが一覧に追加されているのが確認出来ます。

!http://ch3cooh.jp/wp-content/uploads/2011/10/Screen-Capture-20111117051217842.jpg!

h3. 自アプリケーション側でパラメータを受け取る

Pictures Hubの「アプリ…」からアプリケーションを選択させると、クエリ文字列に「token」というトークンが付与されます。このトークンから写真情報を取得することが可能です。簡単なサンプルコードは以下の通りです。

// トークンを取り出す
var token = NavigationContext.QueryString["token"];
 
// トークンから写真情報を取得
MediaLibrary library = new MediaLibrary();
Picture picture = library.GetPictureFromToken(token);

実際のアプリケーション内で使用する場合は以下のような実装になるかと思います。

MainPageページへの遷移後にOnNavigatedToメソッドが呼び出されるので、「token」というキーが存在確認を行い、キーが存在していればMediaLibrary.GetPictureFromTokenメソッドを使用しPictureオブジェクトを取り出だして、Imageコントロールへ設定します。

using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using Microsoft.Phone.Controls;
using Microsoft.Xna.Framework.Media;
 
namespace PicturesHubWP70Test2 {
    public partial class MainPage : PhoneApplicationPage {
        public MainPage() {
            InitializeComponent();
        }
 
        protected override void OnNavigatedTo(NavigationEventArgs e) {
            // クエリ文字列を取得
            var queryStrings = NavigationContext.QueryString;
 
            // Pictures Hubで選択した場合「token」というキーが付与されます。
            // tokenが存在しなければ処理を行いません。
            if (queryStrings.ContainsKey("token")) {
 
                // XNAFramworkを使用してトークンから写真を取得
                MediaLibrary library = new MediaLibrary();
                Picture picture = library.GetPictureFromToken(queryStrings["token"]);
 
                // BitmapImageオブジェクトを作成
                BitmapImage bitmap = new BitmapImage();
                bitmap.CreateOptions = BitmapCreateOptions.None;
                bitmap.SetSource(picture.GetImage());
 
                // Imageコントロールに画像をBitmapImageオブジェクトを設定
                image.Source = bitmap;
            }
        }
    }
}

Microsoft.Xna.Framework.Media名前空間のMediaLibraryクラスを使用していますので、ソリューションエクスプローラーから[参照の追加]を選択して、「Microsoft.Xna.Framework」を追加しておくのを忘れないでください。

h2. Windows Phone OS 7.0でアプリケーションの起動を行う

Windows Phone OS 7.0向けにPictures Hubからの「extras…」(OS 7.1以降の「アプリ…」に相当)に対応するには、「Extras.xml」という特殊な名前のスクリプトファイルを追加する必要があります。

ソリューションエクスプローラーから該当のプロジェクトを作成し、[追加]->[新しい項目]を選択します。インストールされたテンプレートから「XML ファイル」を選択します。ファイル名は必ず「Extras.xml」としてください。

!http://ch3cooh.jp/wp-content/uploads/2011/10/extras_wp70.png!

「share…」の場合と異なり、Extras.xmlは中身が空では正しく動作しません。エディタ等にてExtras.xmlを開いて頂きまして、以下のxmlをコピーしてください(xmlの中身は下記通りである必要があります)。

!http://ch3cooh.jp/wp-content/uploads/2011/10/extras_wp70_3.png!

<?xml version="1.0" encoding="utf-8" ?>
<Extras>
  <PhotosExtrasApplication>
    <Enabled>true</Enabled>
  </PhotosExtrasApplication>
</Extras>

端末へこのアプリケーションをデプロイした状態で、Pictures Hubで任意の写真を見ている時にアプリケーションメニューの「extras…」をタップすると、自アプリケーションが追加されていることが確認できます。

以上で、extrasの一覧に表示させる為の準備は完了です。あとは自アプリケーション側でパラメータを受け取る場合、Windows Phone OS 7.1の場合と同様に「FileId」というキーが存在しているかどうか確認を行うと良いでしょう。

h2. Pictures Hubから任意の写真をパラメータとして渡して共有する

ユーザーは、Pictures Hubから写真を共有したいサービスやアプリケーションを選択することが可能です。この共有アプリケーション一覧に開発中のアプリケーションも表示させることが出来ます。

まずはWMAppManifest.xmlを編集する必要があります。ソリューションエクスプローラーにてPropertiesフォルダを開きます。

!http://ch3cooh.jp/wp-content/uploads/2011/10/hubtype-324×300.png!

一番下にあるWMAppManifest.xmlを開きましょう。以下のようにApp要素の子要素として、以下のExtensions要素を追加します。ExtensionNameやConsumerIDの値は固定値ですので変更しないでください。

<Extensions>
      <Extension ExtensionName="Photos_Extra_Share" ConsumerID="{5B04B775-356B-4AA0-AAF8-6491FFEA5632}" TaskID="_default" />
</Extensions>

端末へのデプロイ後にPictures Hubで任意の写真を選択し、「共有…」を選択しました。PictureHubWP71Testというテストアプリが一覧に追加されているのが確認出来ます。

!http://ch3cooh.jp/wp-content/uploads/2011/10/Screen-Capture-20111117051217355.jpg!

h3. 自アプリケーション側でパラメータを受け取る

Pictures Hubの「共有…」からアプリケーションを選択した場合、クエリ文字列に「FileId」というトークンが付与されます。このトークンから写真情報を取得することが可能です。

// トークンを取り出す
var token = NavigationContext.QueryString["FileId"];
 
// トークンから写真情報を取得
MediaLibrary library = new MediaLibrary();
Picture picture = library.GetPictureFromToken(token);

実際のアプリケーション内で使用する場合は以下のような実装になるかと思います。

MainPageページへの遷移後にOnNavigatedToメソッドが呼び出されるので、「FileId」というキーが存在確認を行い、キーが存在していればMediaLibrary.GetPictureFromTokenメソッドを使用しPictureオブジェクトを取り出だして、Imageコントロールへ設定します。

using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using Microsoft.Phone.Controls;
using Microsoft.Xna.Framework.Media;
 
namespace PicturesHubWP70Test2 {
    public partial class MainPage : PhoneApplicationPage {
        public MainPage() {
            InitializeComponent();
        }
 
        protected override void OnNavigatedTo(NavigationEventArgs e) {
            // クエリ文字列を取得
            var queryStrings = NavigationContext.QueryString;
 
            // Pictures Hubで選択した場合「FileId」というキーが付与されます。
            // FileIdが存在しなければ処理を行いません。
            if (queryStrings.ContainsKey("FileId")) {
 
                // XNAFramworkを使用してトークンから写真を取得
                MediaLibrary library = new MediaLibrary();
                Picture picture = library.GetPictureFromToken(queryStrings["FileId"]);
 
                // BitmapImageオブジェクトを作成
                BitmapImage bitmap = new BitmapImage();
                bitmap.CreateOptions = BitmapCreateOptions.None;
                bitmap.SetSource(picture.GetImage());
 
                // Imageコントロールに画像をBitmapImageオブジェクトを設定
                image.Source = bitmap;
            }
        }
    }
}

Microsoft.Xna.Framework.Media名前空間のMediaLibraryクラスを使用していますので、ソリューションエクスプローラーから[参照の追加]を選択して、「Microsoft.Xna.Framework」を追加しておくのを忘れないでください。

h2. Windows Phone OS 7.0で写真の共有を行う

Windows Phone OS 7.0向けにPictures Hubからの「share…」(OS 7.1以降の「共有…」に相当)に対応するのは、特殊な名前のxmlファイルを追加するだけで対応が可能です。

ソリューションエクスプローラーから該当のプロジェクトを作成し、[追加]->[新しい項目]を選択します。

!http://ch3cooh.jp/wp-content/uploads/2011/10/create-xml.png!

いくつか種類ごとに並んでいますので、XMLファイルを選択して「E0F0E49A-3EB1-4970-B780-45DA41EC7C28.xml 」というファイルを追加します。中身は空で大丈夫です。

!http://ch3cooh.jp/wp-content/uploads/2011/10/create-xml2.png!

以上で「Extras…」よりも簡単ですが対応は完了です。

自アプリケーション側でパラメータを受け取る場合は、Windows Phone OS 7.1の場合と同様に「FileId」というキーが存在しているかどうか確認を行うと良いでしょう。

h2. さいごに

今回はPictures Hubのアプリケーション統合に挑戦しました。

もし現在、写真編集や共有系のアプリを開発される方がいらっしゃるのであれば、少しコードを追加するだけでハブに統合出来ます。

Pictures Hubを終了させずに、画像閲覧中から特定のアプリケーションに遷移出来るのは便利だと感じて頂けたのではないでしょうか。

今回は以上で終わりです。ありがとうございました。