方法: Windows Phone のアプリ コネクトで共有ピッカーを拡張する

2012/02/09

アプリ コネクトを使用すると、アプリケーションを画像ビューアーの [共有] リンクから起動し、画像を共有するためのリッチ ユーザー エクスペリエンスを Web サービスに対して提供できます。このトピックでは、画像ビューアーの [共有] ページから起動できるアプリケーションの作成方法について説明し、対応する画像の FileId パラメーターをディープ リンク URI から抽出します。画像の拡張の詳細については、「Windows Phone の画像の機能拡張の概要」を参照してください。

このトピックには、Web サービスと通信するためのコードは含まれていません。画像を Web サービスにアップロードするために必要なコードを用意する必要があります。アプリケーションでの Web サービスの使用の詳細については、「Windows Phone のネットワークと Web サービスの概要」を参照してください。

ヒントヒント:

画像の機能拡張は Windows Phone OS 7.1 で変更されました。Windows Phone OS 7.0 で実行するアプリケーションの画像の拡張方法については、ここ の Windows Phone OS 7.0 開発者向けドキュメントを参照してください。

Windows Phone SDK 7.1 では、E0F0E49A-3EB1-4970-B780-45DA41EC7C28.xml ファイルは必要ありません。共有選択機能を拡張するアプリケーションを Windows Phone OS 7.1 にアップグレードする際にこのファイルを削除し、このトピックで説明する新しい機能拡張手法を使用します。

このリリースの Windows Phone SDK では、このトピックは、デバイスでのみ実行でき、Windows Phone Emulator では実行できません。現在のバージョンのエミュレーターでは、デバイスの Pictures ハブにアクセスできません。

このトピックは、C# 開発を基にしていますが、Visual Basic のコードも提供しています。

このセクションでは、アプリケーションを作成し、共有選択機能の拡張を宣言し、画像コントロールを追加してアプリケーションの起動に対応する画像を表示します。

共有選択機能の拡張アプリケーションを宣言するには

  1. Visual Studio 2010 Express for Windows Phone で、[ファイル] メニューの [新しいプロジェクト] をクリックして新しいプロジェクトを作成します。

  2. [新しいプロジェクト] ウィンドウが表示されます。Visual C# のテンプレートを展開してから、Silverlight for Windows Phone のテンプレートを選択します。

  3. Windows Phone アプリケーション テンプレートを選択します。[名前] ボックスに選択した名前を入力します。既定では、これが共有選択機能の [共有] ページに表示される名前になります。

  4. [OK] をクリックします。[新しい Windows Phone アプリケーション] ウィンドウが表示されます。

  5. [ターゲットの Windows Phone のバージョン] メニューで、Windows Phone 7.1 が選択されていることを確認します。

  6. [OK] をクリックします。新しいプロジェクトが作成され、Visual Studio のデザイナー ウィンドウに MainPage.xaml が表示されます。

  7. [プロジェクト] メニューの [参照の追加] をクリックします。[.NET] タブで、[Microsoft.Xna.Framework] を選択し、[OK] をクリックします。

  8. アプリケーション マニフェストである WMAppManifest.xml ファイルを開き、次のコードを App 要素の子として、Tokens 要素のすぐ下に追加します。これにより、アプリケーションが共有選択機能の拡張をサポートすることが宣言されます。

    <Extensions>
          <Extension ExtensionName="Photos_Extra_Share" ConsumerID="{5B04B775-356B-4AA0-AAF8-6491FFEA5632}" TaskID="_default" />
    </Extensions>
    
    
  9. メイン ページの分離コード ファイル MainPage.xaml.cs を開き、ページの先頭に次のディレクティブを追加します。

    using System.Windows.Media.Imaging;
    using Microsoft.Phone;
    using System.IO;
    using Microsoft.Xna.Framework.Media;
    using System.Windows.Navigation;
    
    
  10. MainPage.xaml で、次のコードを使用して LayoutRoot という名前の Grid を置き換えます。

        <!--LayoutRoot is the root grid where all page content is placed.-->
        <Grid x:Name="LayoutRoot" Background="Transparent">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
    
            <!--TitlePanel contains the name of the application and page title.-->
            <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
                <TextBlock 
                    x:Name="ApplicationTitle" Text="APP CONNECT EXAMPLE" 
                    Style="{StaticResource PhoneTextNormalStyle}"/>
                <TextBlock 
                    x:Name="PageTitle" Text="shared picture" Margin="9,-7,0,0" 
                    Style="{StaticResource PhoneTextTitle1Style}"/>
            </StackPanel>
    
            <!--ContentPanel - place additional content here-->
            <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
                <Image 
                    Height="350" 
                    HorizontalAlignment="Left" 
                    Margin="15,15,0,0" 
                    Name="retrievePic" 
                    Stretch="Fill" 
                    VerticalAlignment="Top" 
                    Width="450" />
            </Grid>
        </Grid>
    
    

このセクションでは、アプリケーションの起動に対応する画像の FileId パラメーターを抽出します。このパラメーター値を使用して、画像が画像コントロールに表示されます。実際のアプリケーションでは、このパラメーターを使用して画像を取得し、その画像を Web サービスに送信します。

FileId パラメーターを抽出するには

  • MainPage.xaml.cs で、次のコードを MainPage クラスに追加します。このコードは OnNavigatedTo(NavigationEventArgs) メソッドを実装し、アプリケーションを起動した URI で FileId パラメーターを探します。FileId パラメーターが存在する場合、アプリケーションはメディア ライブラリから対応する画像を取得し、それを使用してビットマップ イメージを作成し、そのイメージを retrievePic という名前の Image コントロールに表示します。

    protected override void OnNavigatedTo(NavigationEventArgs e)
    {
        // Get a dictionary of query string keys and values.
        IDictionary<string, string> queryStrings = this.NavigationContext.QueryString;
    
        // Ensure that there is at least one key in the query string, and check 
        // whether the "FileId" key is present.
        if (queryStrings.ContainsKey("FileId"))
        {
            // Retrieve the picture from the media library using the FileID
            // passed to the application.
            MediaLibrary library = new MediaLibrary();
            Picture picture = library.GetPictureFromToken(queryStrings["FileId"]);
    
            // Create a WriteableBitmap object and add it to the Image control Source property.
            BitmapImage bitmap = new BitmapImage();
            bitmap.CreateOptions = BitmapCreateOptions.None;
            bitmap.SetSource(picture.GetImage());
    
            WriteableBitmap picLibraryImage = new WriteableBitmap(bitmap);
            retrievePic.Source = picLibraryImage;
        }
    }
    
    
注注:

アプリケーションが起動されたら、そのアプリケーションが共有選択機能から起動されたか、アプリケーション リストから起動されたかを開発者が確認する必要があります。共有選択機能から起動された場合は、共有 UI を表示し、上記の方法を使用して画像にアクセスします。共有選択機能から起動されなかった場合は (queryStrings["Action"] = "ShareContent" で確認できます)、標準の画像セレクターを使用して画像を取得します。詳細については、「Windows Phone のセレクター」を参照してください。

デバイスをコンピューターにつないでいる場合、Pictures ハブを使用して、画像ビューアーからアプリケーションを起動できません。ただし、アプリケーションを読み込むには、デバイスをコンピューターにつなぐ必要があります。この手順では、アプリケーションをデバイスに転送して、テストする方法について説明します。

デバイスでアプリ コネクトをテストするには

  1. Windows Phone で、カメラを使用して写真を撮影します。

  2. 電話をコンピューターに接続し、Zune ソフトウェアによって認識されるのを待ちます。Windows Phone デバイスに配置されるようにアプリケーションが設定されていることを確認するために、メニューの [デバッグ] を選択し、[デバッグ開始] を選択します。アプリケーションが表示されたら、[デバッグ] メニューに戻り、[デバッグの停止] を選択します。コンピューターからデバイスを取り外して、スタート画面に移動します。

  3. スタート画面で、[Pictures] アプリケーションをタップし、[すべて] をタップします。[カメラロール] セクションをタップして写真を検索し、写真のサムネイルをタップして写真を拡大します。

  4. アプリケーション バーのページの下部の 3 つのドットをタップします。メニューが表示され、リストの下部に [共有] というオプションが表示されます。[共有] を選択します。

  5. [共有] ページで、アプリケーションの名前を選択します。アプリケーションが開き、画像コントロールに画像が表示されます。

次の図は、左から右へ、Your Share Picker App という名前のアプリケーションを共有選択機能から起動できることを示しています。

OEM_OemMoAppDevGuide_SharePicker

表示: