Windowsストア アプリ開発 Tips集012 ~レビューページへの誘導~

マイクロソフトの田中達彦です。本連載では、C#/XAML でWindowsストアアプリを開発するときにヒントを紹介します。 [レビューとは]Windowsストア アプリをインストールした人は、そのアプリに対してレビューを行うことができます。星5つを最高とする評価と、オプションでコメントを残すことができます。評価は以下のようにWindowsストアに表示されます。 アプリをインストールするときに、評価が高いアプリのほうがインストールされやすいので、評価を高くできる可能性がある方法を紹介します。 [サンプルについて]添付のサンプルは、3回起動するごとに以下のメッセージダイアログを表示します。 このダイアログで「いいえ」を押すと、レビューに行かずにダイアログが閉じます。「はい」を押すと、以下のメッセージダイアログを表示します。 ここでダイアログを閉じると、以下のようにレビューページが表示されます。 ポイントは、アプリに満足していない人には評価してもらわず、アプリに満足している人のみに評価を求めるという点です。この手法により、高い評価のみを得られる可能性が高まります。 [自分のアプリのレビューページ]サンプルの最後のほうに以下のようなコードがあります。 // レビューページの表示。PFN= のあとに、自分のアプリのディープリンクを入れるawait Windows.System.Launcher.LaunchUriAsync(new Uri(“ms-windows-store:REVIEW?PFN=94909f7c-d5a9-4f98-85f2-356164de9e49”)); この中の黄色でマーカーしている PFN= に続く数字とアルファベットの並びを自分のアプリのものに変更します。この並びは、開発者ダッシュボードを見ると知ることができます。既に公開しているアプリであれば、開発者ダッシュボードでそのアプリの詳細ページを開くと、以下のようにアプリの紹介に使えるURLが書かれています。この赤い部分の情報を使用します。 まだ公開していないアプリの場合は、以下のようにそのアプリのリリース用の情報を入力するページを表示し、そのページのURLに入っている情報を使用します。  [前後の記事]011 ~コントロールの明るさを一発で変える~ マイクロソフト田中達彦 ReviewSample.zip

1

Windows 8 ストア アプリ開発関連リンク集 (2013/8/1)

マイクロソフトの田中達彦です。Windows ストア アプリを開発するときに役に立ちそうな、MSDNオンラインの記事のリンク集をテスト的に作成しました。C#/XAMLでアプリを作るときの情報をまとめています。アプリの開発時のヒントや逆引きとしてご活用ください。項目の追加などのリクエストやご意見があれば、コメントにご記入いただくかメールをいただけないでしょうか。 ユーザー インターフェイスナビゲーション全般、ページ間のナビゲーション、Web ページへのリンク、コントロール一覧、コントロールの追加とイベント、コントロールのスタイル、テキストの表示、テキスト入力、図形の描画、ブラシ、アプリ バーの追加、アプリ バーの共有、セマンティック ズームの追加、アニメーション、検索の追加、設定チャームの追加、ライブ タイルの実装、バッジの更新、トースト通知、プッシュ通知、タッチ操作 データとファイルデータ バインディング、ローカルへのデータ保存、ローミング、一時フォルダー (テンポラリ フォルダー)、ファイルやフォルダーへのアクセス、ファイルの読み込みと書き出し、ファイル ピッカー、ファイルのダウンロード、ファイルのアップロード、コンテンツの共有、クリップボード (コピーと貼り付け)、データ保護 API ネットワークHttpClient を使用した接続、ストリーム ソケットを使用した接続、MessageWebSocket を使用した接続、StreamWebSocket を使用した接続、近接通信と NFC、接続情報の取得、Web フィードへのアクセス、フィード エントリの管理 アプリの実行ファイルに応じてアプリを起動、URI に応じてアプリを起動、アプリの自動起動、バックグラウンドでのデータ転送、バックグラウンド タスク マルチメディア / 画像処理Web カメラからのビデオのプレビュー、ビデオの回転、手ぶれ補正の追加、ビデオとオーディオ(音声)の再生、バックグラウンドでのオーディオ再生、ネットワーク上のメディア ファイルを開く、ビデオのサイズ変更、画像のデコード、画像の編集、画像のプロパティの取得、新しい画像の作成 デバイス / センサーデバイス機能を有効にする、印刷機能の追加、印刷プレビューのカスタマイズ、特定のページの印刷、加速度計の使用、ジャイロメーターによる角速度の測定、コンパスによる方位の取得、傾斜計の使用、Orientation センサーによる四元数と回転マトリックス、光センサーによる照明の変化への対応、ユーザーの位置の検出、Bing Map で自分の位置を表示 Windows ストア関連アプリの試用版の作成、アプリ内購入の概要、アプリ内購入(アプリ内課金) 多国語対応 (ローカライズ)UI リソースの翻訳、書式のグローバル対応、言語と地域の管理方法、多言語アプリ ツールキットの使用 このリンク集は、随時更新する予定です。 マイクロソフト田中達彦 

0

Windowsストア アプリ開発 Tips集011 ~コントロールの明るさを一発で変える~

マイクロソフトの田中達彦です。本連載では、C#/XAML でWindowsストアアプリを開発するときにヒントを紹介します。 [コントロールの明るさ]コントロールの明るさには、2つの種類があります。デフォルトは明るい色に設定されています。 Visual Studioで新しいアプリケーションを作成すると、背景が黒いアプリが作成されます。その上にボタンなどのコントロールを貼りつけると、枠や文字が以下のように白く表示されます。 ここでアプリの背景を水色などの明るい色に変更すると、ボタンそのものが見えにくくなってしまいます。 ボタンのForegroundプロパティを変更しても、以下のように文字の部分の色が変わるだけです。しかも、マウスをボタン上にホバーさせると、文字が白くなって見えにくくなります。 このようなときは、アプリのテーマカラーの種類を変更します。App.xamlを開き、以下の黄色くマーカーした部分を追加します。水色でマーカーした部分は、アプリによって変わるところです。 <Application    x:Class=”App1.App”    xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation”    xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml”    xmlns:local=”using:App1″    RequestedTheme=”Light”    > このようにRequestedThemeをLightに設定すると、以下のように明るい背景上でコントロールが見やすくなります。 RequestedThemeにはDarkとLightがあり、指定していないとき、すなわちデフォルトではDarkになっています。もしアプリ全体を明るい色にするときは、RequestedThemeにLightを設定すると、標準のコントロールの色が見やすい色に変わります。 以下は、連載している縦書きビューワーの設定画面です。左がRequesterThemeがLightの場合、右がDarkの場合です。この場合は背景が明るい色なので、Lightを指定します。         [前後の記事]010 ~プロジェクト内のテキストファイルを使用する~ [Tips集まとめページ]http://blogs.msdn.com/b/ttanaka/archive/2013/03/05/windows-tips.aspx マイクロソフト田中達彦

2

Windowsストア アプリ開発 Tips集010 ~プロジェクト内のテキストファイルを使用する~

マイクロソフトの田中達彦です。本連載では、C#/XAML でWindowsストアアプリを開発するときにヒントを紹介します。 [プロジェクト内のテキストファイルを使用する]テキストデータをアプリ内で使いたいとき、あらかじめプロジェクトファイルにテキストファイルを追加しておき、そのファイルをプログラムで読み込むことができます。まずは読み込みたいテキストファイルを、下図のようにプロジェクトに追加しておきます。ここでは、text.txtというファイルを追加しています。 ファイルを追加するには、Visual Studioのソリューションエクスプローラーのプロジェクト名が表示されている場所の上で右クリックし、[追加]-[既存の項目]を選んで追加するファイルを選択するか、エクスプローラーに表示されているファイルをソリューションエクスプローラー上にドラッグアンドドロップします。 以下のメソッドは、そのtext.txtファイルをtextというstring型のフィールドに読み込むコードです。 public async void LoadText(){    StorageFile file = await Windows.ApplicationModel.Package.Current.InstalledLocation.GetFileAsync(“text.txt”);     string text = await FileIO.ReadTextAsync(file, Windows.Storage.Streams.UnicodeEncoding.Utf8); C#のソースの最初のusing節が並んでいるところには、以下の一文を追加しておきます。 using Windows.Storage; プロジェクトに追加したファイルは、アプリがインストールされたときにアプリ本体と同じフォルダーにインストールされます。アプリがインストールされたフォルダーは、Windows.ApplicationModel.Package.Current.InstalledLocationで取得できます。 ファイルにアクセスして読み込むためのGetFileAsyncメソッドやReadTextAsyncメソッドは非同期のメソッドのため、これらを使用しているLoadTextメソッド自体もasyncキーワードをつけて非同期のメソッドとして定義します。 ここでの注意事項は、テキストファイルの文字のエンコードです。FileIO.ReadTextAsyncを使用してテキストファイルを読み込むときに、UTF-8を指定していますので、テキストファイルもUTF-8で保存します。メモ帳を使っている場合は、メニューの[ファイル]-[名前を付けて保存]を選択し、ダイアログの下のほうにある[文字コード]の部分をUTF-8に変更して保存します。 このように、テキストファイルの文字のエンコードと読み込むときのエンコードを一致させておきます。 [関連記事]FileIO.ReadTextAsync | readTextAsync Methodshttp://msdn.microsoft.com/ja-jp/library/windows/apps/hh701482.aspx [前後の記事]009 ~共有チャームで文字列を共有する~011 ~コントロールの明るさを一発で変える~ [Tips集まとめページ]http://blogs.msdn.com/b/ttanaka/archive/2013/03/05/windows-tips.aspx マイクロソフト田中達彦 

0

Windowsストア アプリ開発 Tips集009 ~共有チャームで文字列を共有する~

マイクロソフトの田中達彦です。本連載では、C#/XAML でWindowsストアアプリを開発するときにヒントを紹介します。 [他のアプリと文字列を共有する]Windowsストアアプリは、共有コントラクトと呼ばれるさまざまなデータを他のアプリと共有する仕組みを使うことができます。ユーザーがチャームの共有を使うことで、共有コントラクトの機能が呼ばれます。共有コントラクトには、共有ソースと呼ばれるデータを提供する側と、共有ターゲットと呼ばれるデータを受け取る側があります。ここでは、共有ソースとして文字列を共有する方法を紹介します。 まず、共有コントラクトの機能が入っている名前空間を、MainPage.xaml.csの最初のusing節を記述している箇所に、以下のように追加します。 using Windows.ApplicationModel.DataTransfer; そして、DataTransferManagerのグローバル フィールドを定義します。 DataTransferManager dataTransferManager; コンストラクタでは、以下の黄色くマーカーしたところのように実装します。現在のウィンドウに関連付けられているDataTransferManagerオブジェクトをグローバル フィールドに代入し、DataRequestedイベントに対応したイベントハンドラーを定義しています。DataRequestedイベントは、ユーザーがチャームの共有を選択したときに発生するイベントです。 public MainPage(){    this.InitializeComponent();     try    {        dataTransferManager = DataTransferManager.GetForCurrentView();        dataTransferManager.DataRequested +=            new TypedEventHandler<DataTransferManager, DataRequestedEventArgs>(this.DataRequested);    }    catch    {    }} 以下のようにDataRequestedイベントハンドラーを作成し、その中では共有する情報をパッケージ化します。 void DataRequested(DataTransferManager sender, DataRequestedEventArgs args){    DataRequest request = args.Request;    DataRequestDeferral deferral = args.Request.GetDeferral();     request.Data.Properties.Title = “この漢字 読めるかな vol.14”;    request.Data.SetText(Message[CurrentScene]);     deferral.Complete();} ここではデータのTitleプロパティに「この漢字読めるかな vol.14」という文字列を入れ、Message[CurrentScene]に入っている文字列を共有する情報として共有ターゲットのアプリに渡します。共有ターゲットが標準のメールアプリのときは、Titleプロパティに入れた情報がメールのタイトルになります。…

0

Windowsストア アプリ開発 Tips集008 ~特定のWebサイトを表示させる~

マイクロソフトの田中達彦です。本連載では、C#/XAML でWindowsストアアプリを開発するときにヒントを紹介します。 [特定のWebサイトの表示]特定のWebサイトを表示したいときには、以下のようなメソッドを作成して、それを呼びます。 async void ShowTodaysFortune(){    await Launcher.LaunchUriAsync(new Uri(“http://apps.microsoft.com/windows/app/612d3bce-2574-4713-a2a4-8d73158a1ac2”));} [表示に使用されるWebブラウザー]Windowsストア アプリからWebサイトを表示させたとき、起動するWebブラウザーは設定によって変えることができます。Internet Explorerのインターネットオプションのプログラム タブには、以下のようにリンクの開き方を選択するオプションがあります。 デフォルトは[Internet Explorerで自動的に判定する]になっており、Windowsストア アプリからWebサイトを表示させたときはWindowsストア アプリのInternet Explorerが起動します。もしこのオプションを[常にデスクトップ用Internet Explorerで開く]に変更すると、Windowsストア アプリからWebサイトを表示させたときにも、デスクトップのInternet Explorerが起動するようになります。すなわち、どちらのInternet Explorerを起動させるかは、ユーザーに決定権があります。 [関連記事]Launcher.LaunchUriAsync(Uri) | launchUriAsync(Uri) Method (Windows)http://msdn.microsoft.com/ja-jp/library/windows/apps/hh701480.aspx Windowsストア 審査の通し方 No.01 ~[4.1] インターネットを使うアプリは12歳以上に設定し、プライバシーポリシーを用意する~http://blogs.msdn.com/b/ttanaka/archive/2012/10/23/windows-no-01-12.aspx [前後の記事]007 ~別のページを表示させる~009 ~共有チャームで文字列を共有する~ [Tips集まとめページ]http://blogs.msdn.com/b/ttanaka/archive/2013/03/05/windows-tips.aspx マイクロソフト田中達彦

0

Windowsストア アプリ開発 Tips集007 ~別のページを表示させる~

マイクロソフトの田中達彦です。本連載では、C#/XAML でWindowsストアアプリを開発するときにヒントを紹介します。 [特定のページの作成]例えばゲームのアプリなどは、起動しただけでは遊び方が分からないものがあります。遊び方を書いたページを用意し、ユーザーが遊び方を知りたいときにそのページを表示できれば便利ですよね。Windowsストアアプリでは、設定チャームからそのページを呼び出したり、画面上のボタンやアプリバーから特定のページを呼び出すことができます。 まずは、表示させるページを作ってみましょう。Visual Studio 2012でプロジェクトを開き、ソリューション エクスプローラーのプロジェクト名が表示されている上で右クリックし、[追加]-[新しい項目]を選択します。下図のような新しい項目の追加ダイアログが表示されたら、[基本ページ]を選択します。 作成したいファイル名を[名前]に入力し、[OK]を押すとページができます。基本ページと似たものに空白のページがあります。空白のページを使用するより、基本ページを使用したほうが最初から[←]ボタンなどがついているため便利です。 その際に、以下のダイアログが表示されたら[はい]をクリックします。 このダイアログは、元のプロジェクトが[新しいアプリケーション]のときに表示されます。プロジェクトを作成するときに[新しいアプリケーション]で作成すると、ほとんど機能がないシンプルなアプリのひな形を作成します。追加する基本ページには、戻るボタンをはじめとするいくつかの機能が含まれていますので、追加でそれらの機能を実現させるための数個のファイルが作成され、Commonフォルダーの下に入ります。 [特定のページの表示]作成したページを表示するには、以下のコードを実装して呼び出します。ここでは、BasicPage1というページを追加したと仮定し、そのページを表示させます。 this.Frame.Navigate(typeof(BasicPage1)); BasicPage1というのは、基本ページを作成したときにつけたファイル名です。そのファイルを見ると、ファイル名がそのままクラス名として使用されていることがわかります。このページを表示させたあと、元のページに戻るには左上の[←]ボタンを押します。 [関連記事]パート 3: ナビゲーション、レイアウト、ビューhttp://msdn.microsoft.com/ja-jp/library/windows/apps/jj215600.aspx Windowsストア アプリ 作り方解説 Line Attack編 第9回 ~表紙ページの追加~http://blogs.msdn.com/b/ttanaka/archive/2013/02/14/windows-line-attack-9.aspx [前後の記事]006 ~タイルやスプラッシュを簡単に作るには~008 ~特定のWebサイトを表示させる~ [Tips集まとめページ]http://blogs.msdn.com/b/ttanaka/archive/2013/03/05/windows-tips.aspx マイクロソフト田中達彦

0

Windowsストア アプリ開発 Tips集006 ~タイルやスプラッシュを簡単に作るには~

マイクロソフトの田中達彦です。本連載では、C#/XAML でWindowsストアアプリを開発するときにヒントを紹介します。今回は、Windowsストアアプリ全般に関わるタイル等の画像の作り方を紹介します。 [アプリに必要なタイル等の画像]Windowsストア アプリを作るとき、スタート画面に表示されるタイルやスプラッシュ スクリーンの画像を用意する必要があります。Visual Studio 2012 Update 1を使用すると、以下の画像をVisual Studioで設定できます。なお、黄色くマーカーした画像は、必ず用意しないといけない画像です。 スプラッシュ スクリーン1116x540868x420620x300 ワイド タイル (ワイド ロゴ)558x270434x210310x150248x120 正方形のタイル (ロゴ)270x270210x210150x150120x120 小さいロゴ54x5442x4230x3024x24256x25648x4832x3216x16 ストア ロゴ90x9070x7050x50 バッジ ロゴ43x4334x3424x24 小さいロゴは、スタート画面を下図のようにセマンティックズームしたときや、すべてのアプリの一覧として表示したときに使用されます。 ストアロゴは、Windowsストア内でそのアプリを表示させたときなどに使用されます。 バッジロゴに関しては、タイルにバッジを表示させるときに使用しますので、バッジの機能を使わない場合は用意しなくても構いません。 [PowerPointを使ったタイルの作成方法]今回紹介する方法は、PowerPointを使って作成する方法です。例として、スプラッシュ スクリーン用の画像とワイド タイルの画像を作る方法を紹介します。これらの画像は、どちらも31:15の大きさです。 PowerPoint上にスプラッシュやタイルの背景となる長方形を31:15の大きさで配置します。横31cm、縦15cmの大きさで配置するとわかりやすいです。下のほうの図では、抹茶色の長方形の部分が該当します。 そして、その長方形の上に文字や画像データを配置します。なるべく長方形から出ないように配置すると、後の処理がやりやすいです。下のほうの図では「漢」という文字をオブジェクトとしてみたときの上端が、長方形よりはみ出しちゃっています。 最後に、長方形とその上に配置した画像や文字をすべて選択して右クリックし、[図として保存]を選択して保存します。 このときに、長方形より文字や画像がはみ出していなければ(正確には、端ぎりぎりに文字等を配置したときも長方形よりはみ出してしまうことになってしまう)、保存した画像の大きさが31:15になっています。 あとは、この画像のサイズを変えていきます。画像サイズを変えるには、Office Picture Managerというツールが便利です。このツールは、Office 2010、Office 2007に含まれています。Office 2013には含まれていません。Office 2010、Office 2007をインストールしている環境でエクスプローラー上で.pngなどの画像ファイルを右クリックし、[プログラムから開く]を選んだときに、以下の図のように[Office]と表示されます。これがOffice Picture Managerです。 Office Picture Managerで31:15の画像を開き、メニューの[画像]-[サイズ変更]を選択します。もし画像が31:15になっていないときは、メニューの[画像]-[トリミング]でサイズを変更しましょう。下図では、PowerPointを使って保存した1500x726のファイルを編集しているところです。[ユーザー設定のサイズ]を選び、ピクセル数を入力して[OK]をクリックすると、その大きさの画像に縮小します。 目的のサイズに変更したら、名前をつけて保存しておきます。これを繰り返して、1116x540、868x420、620x300、558x270、434x210、310x150、248x120の画像を作ります。正方形のタイルの場合は、PowerPointで縦横比1:1の画像ファイルを作成し、Office Picture Managerでサイズを変えていきます。 [関連記事]タイルとバッジのガイドラインとチェック リストhttp://msdn.microsoft.com/ja-jp/library/windows/apps/hh465403.aspxスプラッシュ画面の追加http://msdn.microsoft.com/ja-jp/library/windows/apps/xaml/Hh465331(v=win.10).aspx [前後の記事]005 ~グリッドアプリの最初のアイテム(タイル)を大きくする~007 ~別のページを表示させる~ [Tips集まとめページ]http://blogs.msdn.com/b/ttanaka/archive/2013/03/05/windows-tips.aspx…

0

Windowsストア アプリ開発 Tips集 まとめページ

マイクロソフトの田中達彦です。C#/XAML でWindowsストアアプリを開発するときにヒントを紹介する「Windowsストア アプリ開発 Tips集」のまとめページです。逆引き辞典としてもご使用ください。新しいTipsを追加するたびに、このページも更新していきます。まだまだ項目は少ないですが、徐々に増やしていきます。 [アプリバー]アプリバーを自動的に表示させるアプリバーのボタンの表示名を変更する [グリッド アプリケーション]グリッドアプリの最初のアイテム(タイル)を大きくする [ストレージ]何らかの値をストレージに記録するプロジェクト内のテキストファイルを使用する [タイル]タイルやスプラッシュを簡単に作るには [チャーム]設定チャームに項目を追加する共有チャームで文字列を共有する [ナビゲーション]別のページを表示させる特定のWebサイトを表示させる [その他の連載記事]Windowsストア アプリの作り方解説 今日の運勢編 (全10回)http://blogs.msdn.com/b/ttanaka/archive/2012/09/11/windows-1.aspxVisual Studioのプロジェクトとして用意されているグリッド アプリケーションをカスタマイズします。 良いWindowsストア アプリの作り方 (連載中)http://blogs.msdn.com/b/ttanaka/archive/2012/10/18/windows-vol-01.aspx良いWindowsストア アプリとは何か、またその作成方法について説明しています。 Windowsストア 審査の通し方 (連載中)http://blogs.msdn.com/b/ttanaka/archive/2012/10/23/windows-no-01-12.aspxWindowsストアでアプリを公開するためには、アプリの審査に合格しなければなりません。アプリの審査時に落ちやすいポイントを説明しています。 Windowsストア アプリ 作り方解説 XNA編 (全8回)http://blogs.msdn.com/b/ttanaka/archive/2012/11/13/windows-xna-1-windows-phone-7.aspxWindows PhoneのXNAで作られたアプリを、Windows 8に移植する例を解説しています。 「この漢字 読めるかな?」の改変方法 (全4回)http://blogs.msdn.com/b/ttanaka/archive/2013/01/08/10383100.aspxこの漢字 読めるかな? というWindowsストアアプリのプロジェクトを公開し、そのアプリを改変する方法を説明しています。 Windowsストア アプリ 作り方解説 Line Attack編 (連載中)http://blogs.msdn.com/b/ttanaka/archive/2013/01/25/windows-line-attack-0.aspxLine Attackというパズルゲームの作り方を解説しています。 マイクロソフト田中達彦

0

Windowsストア アプリ開発 Tips集005 ~グリッドアプリの最初のアイテム(タイル)を大きくする~

マイクロソフトの田中達彦です。本連載では、C#/XAML でWindowsストアアプリを開発するときにヒントを紹介します。 [グリッドアプリのプロジェクト]この記事は、C#で作成したグリッド アプリケーションのトップページに表示されるアイテム(タイル状のもの)を、以下のように各グループの最初だけ大きく表示させる方法を説明します。 [GridViewを継承するクラスの作成]アイテムの一部を大きくするには、アイテムを表示しているGridViewクラスを拡張したクラスを使用します。最初に、GridViewを継承するクラスを作成しましょう。ここでは、CustomGridViewというクラス名にします。 このクラスを作るには、Visual Studioでプロジェクトを開き、ソリューション エクスプローラーのプロジェクト名上で右クリックし、[追加]-[新しい項目]を選択します。新しい項目の追加ダイアログが表示されたら、クラスを選び、名前をCustomGridView.csに変更し、[追加]ボタンを押します。CustomGridView.csが作成されたら、以下の黄色くマーカーした部分を追加します。 using System;using System.Collections.Generic;using System.Linq;using System.Text;using System.Threading.Tasks; using Windows.UI.Xaml;using Windows.UI.Xaml.Controls;using App17.Data; namespace App17{    class CustomGridView : GridView    {        protected override void PrepareContainerForItemOverride(DependencyObject element, object item)        {            var obj = item as SampleDataCommon;            var gridItem = element as GridViewItem;             if (obj.UniqueId.IndexOf(“Item-1”) > 0)            {                gridItem.SetValue(VariableSizedWrapGrid.ColumnSpanProperty, 2);                gridItem.SetValue(VariableSizedWrapGrid.RowSpanProperty, 2);           …

0