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ストア アプリ 縦書きビューワー Vol.5 (最終回) ~特殊処理の追加~

マイクロソフトの田中達彦です。本連載では、過去の名作や自分の著書などをWindowsストア アプリ化するための縦書きビューワーについて説明します。 [特殊処理とは?]この縦書きビューワーには、ふりがなの表示や文字下げ、傍点などの機能があります。しかし、作品によってはこれらの機能だけでは作品を表現できないことがあります。例えば、宮沢賢治の風の又三郎では、以下のように黒板に板書している場面があります。 (1366x768の画面の場合、全38ページ中の11ページめ) ここでは、17x4という計算式を黒板に書いています。縦書きビューワーが挿絵に対応していれば、挿絵である程度カバーできるところです。しかし、縦書きビューワーには挿絵の機能はありません。表示する挿絵を何らかの画像データで用意し、その画像データを表示する機能を付けたとしても、文字の明るさや紙面の明るさの変更に対応させるのはちょっと難しいです。 風の又三郎の例では、以下のコードを用意することにより、板書の形式を実現しています。 // 風の又三郎 スペシャルコードstring special11 = “25\n-12\n ̄”;string special12 = “17\n×4\n ̄”; // 風の又三郎 スペシャルコードif (s == “①” || s == “②”){    if (s == “①”)        s = special11;    else        s = special12;    HonbunChar[x, y].Width = HonbunFontWidth * 1.3;    HonbunChar[x, y].FontSize = HonbunFontSize / 1.5;    HonbunChar[x, y].TextAlignment = TextAlignment.Right;    HonbunChar[x, y].TextWrapping =…

0

Windowsストア アプリ 縦書きビューワー Vol.4 ~プログラムの説明~

マイクロソフトの田中達彦です。本連載では、過去の名作や自分の著書などをWindowsストア アプリ化するための縦書きビューワーについて説明します。 [WinRTでの縦書き]Windowsストア アプリを作成するためのAPIであるWinRT(ARM用OSのWindows RTとは別のものです)は、縦書きに対応していません。そのため、縦書きを実現させるために、TextBlockという文字を表示させるためのコントロールを、表示する文字数分だけ表示させる方法を使用しました。以下の図の青い四角の部分が、それぞれTextBlockです。空白を含め、原稿用紙のように画面一面にTextBlockを配置しています。 ふりがなの部分は、ふりがなとして表示する文字のところのみ小さなTextBlockを配置しています。 TextBlockコントロールは、最初から画面上に貼りつけているわけではありません。画面の大きさにしたがって、プログラムによってTextBlockを貼りつけています。原稿用紙のようにTextBlockを配置している部分は、MainPage.xaml.csの中のSetCharsメソッドです。このメソッドで画面上の文字を表示するエリアの大きさを取得し、フォントサイズから縦と横の行数を計算しています。そして、原稿用紙のマス目のようにTextBlockを配置しています。これらのTextBlock1つずつに、文字を1つずつ設定していきます。なお、縦の行数は、行頭禁則処理の関係で、文字を表示させるエリアよりも2文字分余分にTextBlockを配置しています。例えば行頭に句読点が来るときは、その句読点を前の行の行末に表示させます。句読点とそれに続いて閉じカッコがある場合は、閉じカッコも前の行の行末に表示させます。 Windowsストア アプリは、さまざまな解像度に対応させるだけではなく、スナップやポートレイト(縦長画面)にも対応させる必要があります。それらの環境によって縦横の行数が変わってきます。画面の状態が変化するたびに、TextBlockをマス目のように貼る作業を実行しています。 [文字の表示]マス目のように配置されたTextBlockに文字を入れているのは、MainPage.xaml.csの中のSetTextというメソッドです。表示させるべき文字列は、HonbunTextというstring型のフィールドに丸ごと入っています。その中で表示を開始する位置を指定し、その位置にある文字を右上から順次表示させています。 このSetTextメソッドでは、どの文字を表示するかを判別し、特別な処理が必要かどうかを判断しています。例えば、「」というようなカッコは、90度横に回転させて表示しています。以下はその部分の処理です。CompositeTransformを使用して、TextBlockを回転させたり、表示位置をずらしたりしています。 CompositeTransform ct = new CompositeTransform();ct.TranslateX = 0;ct.TranslateY = lineAdjust;ct.CenterX = 0;ct.CenterY = 0;ct.Rotation = 0;HonbunChar[x, y].RenderTransform = ct;HonbunChar[x, y].Text = “”; if (“」≫』】〕)>]}:―…~ー-“.IndexOf(HonbunText[index]) >= 0){    ct.CenterX = HonbunFontWidth / 2;    ct.CenterY = HonbunFontHeight / 2;     ct.TranslateX = HonbunFontWidth / 6;    ct.TranslateY += HonbunFontHeight…

0

Windowsストア アプリ 縦書きビューワー Vol.3 ~タイルの作成~

マイクロソフトの田中達彦です。本連載では、過去の名作や自分の著書などをWindowsストア アプリ化するための縦書きビューワーについて説明します。 [タイルなどの画像データ]Windowsストア アプリでは、スタート画面やWindowsストアに表示させるための画像ファイルを用意する必要があります。画像は、以下のサイズのものを用意します。黄色くマーカーしている画像は必ず用意しないといけない画像データです。 ロゴ (正方形のタイル)120x120、150x150、210x210、270×270 ワイド ロゴ (ワイドタイル)248x120、310x150、434x210、558×270 小さいロゴ (スタート画面で全アプリを表示させたときなどに使用)24x24、30x30、42x42、54x5416x16、32x32、48x48、256×256 ストア ロゴ50x50、70x70、90×90 バッジ ロゴ24x24、34x34、43×43 スプラッシュ スクリーン620x300、868x420、1116×540 [画像データの作り方]これらの画像データを作るときのお勧めの方法は、PowerPointとWin8IconMakerを組み合わせることです。まずはPowerPointで元となるデータを作ります。このとき、縦横比が15:31のデータと1:1のデータを作っておくと便利です。1:1のデータは、タイル用とそれ以外(小さいロゴとストア ロゴ)用の2種類を用意しておくと、見やすいロゴになります。 以下は「芋粥」の15:31、タイル用の1:1、それ以外の1:1の画像データです。        PowerPointのファイルを添付したので、そのファイルをご参照ください。画像データの背景と文字の部分を合わせて選択し、右クリックして[図として保存]を選択すると、用意した画像データをファイルに保存することができます。画像ファイルの作成方法は、下記のブログ記事をご参照ください。http://blogs.msdn.com/b/ttanaka/archive/2013/03/06/windows-tips-006.aspx 元の画像ファイルを作ったら、Win8IconMakerを使用して、各サイズの画像ファイルを一気に作ってしまいます。Win8IconMakerは、もともとWindows Phone用に故川西裕幸エバが作成したものを、高橋忍エバがWindows 8用に作り直したものです。下記の高橋エバのブログからダウンロードできます。http://blogs.msdn.com/b/shintak/archive/2013/03/30/10406326.aspx 1:1で用意した画像ファイルを読み込ませ、右中央に表示されている正方形の部分をクリックすると、画像全体を対象にした各種の大きさの画像ファイルを作成できます。画像データの任意の範囲を選択することもできます。15:31の画像も同様に読み込ませ、各種の大きさの画像ファイルを作成します。 元の画像データを15:31で作っておき、画像全体を読み込ませるようにしておけば、スタート画面にタイルが並んだときにも文字の位置がずれることなく、以下のようにきれいに表示できます。 源氏物語のタイトルってかっこいい!! [連載記事一覧]第1回 : アプリのテンプレートhttp://blogs.msdn.com/b/ttanaka/archive/2013/04/11/windows-vol-1.aspx  アプリのテンプレートを提供するとともに、使用するときの注意事項、使用方法を説明しています。 第2回 : 青空文庫のアプリ化http://blogs.msdn.com/b/ttanaka/archive/2013/04/12/windows-vol-2.aspx  文字下げ、文字上げなどの特殊処理を行う方法を説明しています。 第3回 : タイルの作成http://blogs.msdn.com/b/ttanaka/archive/2013/04/12/windows-vol-3.aspx  アプリを公開する際に必ず用意しないといけないタイルの作成方法を説明します。 第4回 : プログラムの説明http://blogs.msdn.com/b/ttanaka/archive/2013/04/15/windows-vol-4.aspx  どのような方法で縦書きを実現させているのかを説明します。 第5回 : 特殊処理の追加http://blogs.msdn.com/b/ttanaka/archive/2013/04/17/windows-vol-5.aspx  独自に特殊処理を追加する方法を説明します。 マイクロソフト田中達彦 data.pptx

0

Windowsストア アプリ 縦書きビューワー Vol.2 ~青空文庫のアプリ化~

マイクロソフトの田中達彦です。本連載では、過去の名作や自分の著書などをWindowsストア アプリ化するための縦書きビューワーについて説明します。 [縦書きビューワーのテンプレート]縦書きビューワーのテンプレートは、連載第1回の記事にて提供しています。http://blogs.msdn.com/b/ttanaka/archive/2013/04/11/windows-vol-1.aspx使用する前に、注意事項を必ずお読みください。 [青空文庫について]青空文庫とは、利用に対価を求めない、インターネット電子図書館です。http://www.aozora.gr.jp/ 青空文庫に収録されている作品をアプリ化するときは、必ず事前に下記の「青空文庫収録ファイルの取り扱い基準」を熟読し、基準を順守してください。http://www.aozora.gr.jp/guide/kijyunn.html青空文庫に収録されているファイルをもとにアプリを作るときは、まず著作権等の観点から使用できる作品かどうかをご確認ください。青空文庫の作品の中で、簡単にアプリ化できるものと、かなり手を加えないとアプリ化できないものがあります。アプリ化しようとしている作品が、簡単にアプリ化できるかどうかを判断するには、その原稿の図書カードの情報で確認できます。 (例 : 芥川龍之介「芋粥」の図書カード)http://www.aozora.gr.jp/cards/000879/card55.html 図書カードに、「いますぐXHTML版で読む」というリンクがあります。そのリンクをクリックすると、芋粥をWebブラウザー上で読めます。XHTML版のページのいちばん下に、「表記について」という項目があります。この部分に多くのことが書いてある作品は、手を加える分量が多い可能性があります。逆に、「このファイルは W3C 勧告 XHTML1.1 にそった形式で作成されています。」という項目しかないものは、すぐアプリ化できます。 ここの項目に書いてあるものへの対応策は、それぞれ以下のとおりです。 「くの字点」をのぞくJIS X 0213にある文字は、画像化して埋め込みました。JIS第3水準、第4水準の漢字があります。アプリ化する前に、それらの漢字を原稿に組み込んでください。(第1回の記事を参照) 傍点や圏点、傍線の付いた文字は、強調表示にしました。傍点については、第1回の記事をご参照ください。 本文中の/\は、二倍の踊り字(「く」を縦に長くしたような形の繰り返し記号)原稿中に「〱」または「〲」を入れることで、二倍の踊り字として表示できます。「〱」または「〲」は、ひらがなのクまたはグではありません。「おなじ」と入力して変換すると出てきます。 [縦書きビューワーでできることとできないこと]今回のバージョンの縦書きビューワーでできることとできないことをまとめました。 できること- ふりがなの表示- 傍点- 太字 (強調表示)- 上からの文字下げ- 地からの文字上げ- 上下中央への文字列の配置- 繰り返し記号(「〱」または「〲」)の表示- 改ページ できないこと- 挿絵、画像データの表示- 一部の文字のみフォントサイズを変える- アルファベットの横向き表示- 傍線 この縦書きビューワーは青空文庫のファイルを表示することを目的としているわけではないので、青空文庫の注意書きを直接解読して処理をするということを行っていません。自分が読みたいもの、他の人に読んでもらいたいものをアプリ化するという目的で作成しています。特別なことをするときには、原稿となるファイルに手を加える必要があります。 [特別な処理の方法]縦書きビューワーで実装している機能を呼び出す方法を説明します。 – ふりがなの表示ふりがなは、「《」と「》」で括ってください。「表示」という文字に「ひょうじ」というふりがなをつけるときは、「表示《ひょうじ》」と書きます。「《」と「》」で括ってある場所から先頭に向かってさかのぼり、漢字以外の文字が出てきたところの次の文字からふりがなをふり始めます。漢字が並んでいるとき、その一部にふりがなをふりたいときは、「一二|三四《さんし》五」というようにふりがなが始まる漢字の前に「|」を入れます。この記述方法は、青空文庫のふりがなのふり方に準拠しています。 「《」と「》」の間に何も文字が書かれていないときは、アプリが正常に動作しません。青空文庫の原稿には、最初の部分に注意書きがあり、そこに「《》」という文字列があります。この注意書きを削除しないと、アプリは動作しません。詳細は第1回の記事をご参照ください。 アルファベットや、ひらがなが混じった文字列にふりがなをふりたいときは、特殊記号を使います。本縦書きリーダーでは、「⑫」という文字をふりがなの判定に使うことができます。「《」のすぐ後に「⑫」の文字があったときは、ふりがなのふり始めの文字の前に「⑫」を入れることで、ふりがなの表示位置を指定します。(例)「⑫C・M《⑫ツェーエム》」 – 傍点傍点は、打ちたい文字の直後に「《●》」と入れます。以下の例は、「びいどろ」に傍点を打つ例です。「それからまた、び《●》い《●》ど《●》ろ《●》という」 – 太字 (強調表示)太字で表示したい箇所を「⑲」と「⑳」で括ります。例えば以下の文章の「晴れる」という部分を太字にするには、「明日は⑲晴れる⑳だろう」と書きます。 – 上からの文字下げ文字下げをしたい場合は、文字下げをする文の前の文の文末に「⑮」という記号を入れ、続けて下げる文字数を半角数字の1から9までで指定します。⑮の次に数字を入れていないと、アプリは正常に動きません。10文字以上文字下げすることはできません。文字下げの解除は、文字下げの最終行の行末に「⑯」という記号を入れます。 – 地からの文字上げ文字上げをしたい場合は、文字上げをする文の前の文の文末に「⑰」という記号を入れ、続けて上げる文字数を半角数字の1から9までで指定します。⑰の次に数字を入れていないと、アプリは正常に動きません。10文字以上文字上げすることはできません。文字上げの解除は、文字上げの最終行の行末に「⑱」という記号を入れます。 – 上下中央への文字列の配置上下中央に配置したい文の行頭に、「⑬」の記号を入れます。 – 繰り返し記号(「〱」または「〲」)の表示原稿の中に、「〱」または「〲」の記号を入れます。「〱」または「〲」は「おなじ」と入力して変換すると表示されます。 -…

0

Windowsストア アプリ 縦書きビューワー Vol.1 ~アプリのテンプレート~

マイクロソフトの田中達彦です。本連載では、過去の名作や自分の著書などをWindowsストア アプリ化するための縦書きビューワーについて説明します。 [注意事項] テンプレートを使用される前に、必ずお読みくださいこのテンプレートファイルまたはプロジェクトファイルはサンプルとして公開され、使用条件は以下のMicrosoft Limited Public Licenseに準拠します。http://msdn.microsoft.com/ja-jp/gg415737.aspx#P ただし、以下の条件下での使用のみを許諾します。- Windows ストア アプリ、またはWindows Phone用のアプリを作成するために使用すること。- 作成するアプリは1作品ごとに作成し、複数の作品をまとめたアプリを作成しないこと。(判定基準としては、1つのテキストファイルの内容のみを表示させるアプリであること)- 本テンプレートまたはプロジェクト ファイルを使用または応用、または改変し、汎用的なビューワーを作成しないこと。すなわち、ユーザーが任意のファイルを選択し、表示させることができる機能を実装しないこと。- 上記の条件に合致していれば、本テンプレートまたはプロジェクトファイルを使用または応用、または改変してアプリを作成し、無償、有償を問わず公開できます。- アプリを公開した際に、公開した旨を作成者である田中達彦、またはマイクロソフトに報告しなくても構いません。- アプリを公開したことで何らかの被害が生じた場合、田中達彦、またはマイクロソフトは責めを負いません。自己責任にてアプリを公開するようお願いいたします。 [2013/4/18 変更]============================テンプレートを一部修正しました。最新の場所は1.64です。 修正点は、テキストファイルを読み込む場所です。場合によってはアプリが起動しないことがありました。この現象を回避しています。なお1.63のテンプレートを使用していてアプリが起動しない場合は、アプリを強制終了(アプリの上端をつかんで、下までおろす)して、再起動してください。========================================= [縦書きビューワーとは]やはり名作などは横書きではなく、縦書きで読みたいですね。WinRT APIには縦書きの機能がないため、テキストファイルの内容を縦書きで表示するためのアプリのテンプレートを作成しました。このテンプレートを使用すると、以下のように縦書きで読めるアプリを作成できます。 このテンプレートには、文字の大きさや行間の広さを変えたり、ふりがなの表示/非表示を切り替える機能や、フォントを変える機能を実装しています。 白地に黒い文字だけではなく、黒字に白い文字で表示させることもできます。自分の好みの設定を保存することもできます。 [使用方法]アプリを作成するためには、Windows 8の環境と、Visual Studio 2012が必要です。アプリの作成方法は、以下のとおりです。 1. 本ブログ記事に添付している.zipファイルをダウンロードします。2. .zipファイルを解凍せずに、ドキュメント フォルダーの下のVisual Studio 2012\Templates\ProjectTemplates\Visual C#にコピーします。3. Visual Studio 2012を起動し、メニューの[ファイル]-[新規作成]-[プロジェクト]を選択します。Visual Studio Expressを使用している場合は、[ファイル]-[新しいプロジェクト]を選択します。4. [新しいプロジェクト]ダイアログが表示されたら、左側のテンプレートでVisual C#を選択し、中央に表示されているプロジェクトの中から、[AozoraReader1.63]を選択します。5. [名前]の部分に作成したいプロジェクト名を入力して、[OK]をクリックします。6. そのままアプリを実行すると、芥川龍之介の芋粥が表示されます。7. アプリ化したいテキストファイルを用意し、メモ帳で開きます。そして、text.txtという名前で保存します。保存するときは、[ファイル]-[名前を付けて保存]を選択し、以下の文字コードの部分を必ずUTF-8に変更して保存してください。メモ帳以外のテキストエディターを使用すると、改行コードの扱いが異なる場合があるため、アプリが正常に動かない可能性がでてきます。 8. Package.appxmanifest を開き、[アプリケーションUI]タブにある表示名、説明を変更します。また、ロゴ、ワイド ロゴ、小さいロゴ、ストア ロゴ、スプラッシュ スクリーンの情報や画像データを変更します。9. [パッケージ]タブにある[証明書の選択]をクリックし、使用する証明書を選択します。証明書を持っていない場合は、Visual Studioで新規のWindowsストア アプリのプロジェクトを作成し、そこで自動的に作成された証明書を流用してください。その場合は、[証明書の構成]ボタンをクリックし、[ファイルから選択]を選び、新しく作成したプロジェクトで使用している証明書を選択します。…

2

Windowsストア アプリ開発 ~ クイズのサンプル公開~ (quiz sample)

マイクロソフトの田中達彦です。「この漢字読めるかな?」などの連載で使用していたサンプルを、クイズに特化したものとして作成しなおしました。 「この漢字読めるかな?」は、別の用途で作っていたプロジェクトの流用で、クイズとしても使えるものの、プログラムの構造を理解しないと変更しづらいものでした。今回公開するクイズのプロジェクトは、特定の部分を変えるだけでオリジナルのクイズアプリを作れるように変更しています。それでは、作り方を説明していきます。 [プロジェクトのダウンロード]本ブログ記事より、ZIP化されたプロジェクトファイルをダウンロードし、展開してください。展開すると、その中にプロジェクト一式が入っています。dataというフォルダーには、タイルを作るためのファイルが入っています。 [プログラムの変更]プロジェクトをVisual Studio 2012で開き、MainPage.xaml.csを開きます。その中に、以下のコードがあります。この部分を変更することで、画面に表示されるタイトルや背景を変えられます。 // 変更する場所 /////////////////////////////////////////////////// ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓// ここから下のデータを変更または追加します //// // クイズのタイトルQuizTitle = “雑学クイズ No.1”; // スタート画面に表示する文字列QuizDescription = “雑学クイズを出します。何問正解できるでしょうか?”; // 出題する質問数を入れてください// 用意している質問数がMaxQuestionsの数より多いときは、ランダムで出題しますMaxQuestions = 5; // 背景の画像を指定しますBackBitmap = “Assets/CG005.jpg”; // 質問の部分の色と、回答の選択肢の部分の色を指定します// 透明度、赤、緑、青の要素を、0x00から0xffまでで指定しますQuestionColor = new SolidColorBrush(Windows.UI.Color.FromArgb(0x99, 0x13, 0x46, 0x46));AnswerColor = new SolidColorBrush(Windows.UI.Color.FromArgb(0xe5, 0x00, 0x20, 0x6f)); MaxQuestionsは、アプリの中で出題する問題数です。例えば10問の質問を出題したい場合は、ここに10を代入します。用意している質問数がMaxQuestionsより多いときは、用意している質問の中からランダムで質問を選びます。用意している質問数がMaxQuestionsより少ない場合は、用意している質問をすべて出題します。 BackBitmapには、背景の画像名を入れます。ここでは以下のように、Assetsフォルダーに入っているCG005.jpgというファイルを使用しています。 このCG005.jpgは、Windowsアプリ アートギャラリーからダウンロードしたものです。http://msdn.microsoft.com/ja-jp/hh544699.aspx 他の背景にする場合は、プロジェクトに画像ファイルを追加し、BackBitmapにその名前を入れます。 [質問の変更と追加]質問は、以下の形式で追加します。 // 質問を用意します// Questionに質問を入れ、CorrectAnswerに正解を入れます// WrongAnswersには、1つ以上の不正解を入れます。不正解が3つ以上ある場合は、ランダムで表示しますQuestions…

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ストア アプリ 作り方解説 Line Attack編 第9回 ~表紙ページの追加~

マイクロソフトの田中達彦です。本連載では、Windowsストアアプリとして作成したパズルゲームである、Line Attackのプログラムを解説します。Line Attack : http://apps.microsoft.com/webpdp/app/f11e327c-6228-4c8f-8245-ea57d65e0f09 [注意事項]- この連載で提供するプロジェクトファイルは、サンプルとして提供しています。- 毎回の記事で提供するプロジェクトファイルは、その時点でのソースコードです。最終バージョンのソースコードと異なる場合があります。 [今回のプロジェクトファイル]今回提供するプロジェクトは、アプリの起動時に説明ページが表示されるように実装しています。Windowsストアアプリ版のLine Attackのプロジェクトファイルの公開は、今回が最後です。 [説明ページの追加]今回は、既にあるアプリに別のページを追加して表示する方法を説明します。前回までのプロジェクトを実行すると、いきなりゲームが始まりました。Line Attackのような単純なゲームであれば、特に説明がなくても何とかなるかもしれません。しかし、ゲームの説明があったほうが良いことは明らかです。そこで、ゲームの起動時に以下のような説明のページを追加しました。 このページは空白のページとして追加したものに、必要な要素を追加したものです。空白のページを追加するには、Visual Studioのソリューション エクスプローラーのプロジェクト名が表示されているところ(本プロジェクトの場合はPazzle_Idea1)で右クリックして、[追加]-[新しい項目]を選択し、[空白のページ]を選択します。(今気づきましたが、プロジェクト名のパズルのスペルが間違ってますね…)ここでは、HowToPlay.xamlという名前の空白のページを追加しています。 その中身は、たったこれだけです。黄色くマーカーした部分が、追加した部分です。 <Page    x:Class=”Pazzle_idea1.HowToPlay”    xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation”    xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml”    xmlns:local=”using:Pazzle_idea1″    xmlns:d=”http://schemas.microsoft.com/expression/blend/2008″    xmlns:mc=”http://schemas.openxmlformats.org/markup-compatibility/2006″    mc:Ignorable=”d”>     <Grid PointerReleased=”Grid_PointerReleased_1″ Background=”Black”>        <Image Name=”ImageHowToPlay” HorizontalAlignment=”Stretch” VerticalAlignment=”Stretch” Stretch=”Uniform” Source=”Assets/HowToPlayENG.png”/>        <CheckBox Name=”CheckBoxNoShow” Content=”Show how to play” HorizontalAlignment=”Left” VerticalAlignment=”Bottom” FontSize=”24″ Margin=”100,0,0,20″ Checked=”CheckBoxNoShow_Checked” Unchecked=”CheckBoxNoShow_Unchecked” IsChecked=”True” />        <TextBlock Name=”TextBlock1″ Text=”Click/Tap any place to start.”…

0

Windowsストア アプリ 作り方解説 Line Attack編 第8回 ~アプリ内購入(アプリ内課金) ~

マイクロソフトの田中達彦です。本連載では、Windowsストアアプリとして作成したパズルゲームである、Line Attackのプログラムを解説します。Line Attack : http://apps.microsoft.com/webpdp/app/f11e327c-6228-4c8f-8245-ea57d65e0f09 [注意事項]- この連載で提供するプロジェクトファイルは、サンプルとして提供しています。- 毎回の記事で提供するプロジェクトファイルは、その時点でのソースコードです。最終バージョンのソースコードと異なる場合があります。 [今回のプロジェクトファイル]今回提供するプロジェクトは、Windowsストアに上がっているものとほぼ同じものです。このプロジェクトに最初に表示されるページと、タイルなどの画像ファイルを追加すると、ストア用に作成したリリース1になります。このプロジェクトには、アプリ内購入の機能が追加され、ステージのデータも50面までは完成しています。 [アプリ内購入について]Windowsストア アプリは、アプリ内でユーザーに課金することができるアプリ内購入(アプリ内課金、アプリ内販売、in-app purchaseとも言います)を実装できます。Windowsストアが提供しているアプリ内購入は、開発者が価格と期間を決めることができます。期間は購入した機能を使用できる期間で、以下の中から選択できます。 これらの期間は、Windowsストアにアプリを申請するときに設定するだけです。期間限定で使用できる機能を実装するときに、プログラム側で日にちの設定等をする必要はありません。使用できる期間が終了したときは、ユーザーが明示的に再度購入するまで、ユーザーはその機能を使えません。ユーザーが意識しないところで課金が発生しないように、自動更新されない仕組みになっています。 アプリ内購入については、下記記事のアプリ内購入の項目もご参照ください。http://blogs.msdn.com/b/windowsstore_ja/archive/2012/07/26/windows-making-money.aspx [アプリ内購入の仕組み]アプリ内購入は、特定の機能を使用できるかどうかのフラグを作成し、ユーザーが購入していたときにその機能を使用できるようにします。すなわち、アプリ内にすべての機能を実装しておき、フラグによって特定の機能を使用できるか使用できないかを選択できるようにしておきます。このフラグのことを製品IDと呼びます。このブログ記事の執筆時では、製品IDは100個まで用意することができます。 製品IDは、ユーザーが未購入のときは無効に設定されています。ユーザーが購入し、かつ有効期間内であれば、製品IDは有効になります。コード内で製品IDが有効か無効かを判定し、特定の機能を使用できるように実装します。 ユーザーがアプリを使用しているときに、アプリ内購入の機能を使おうとしたときには以下のようなメッセージが出ます。 ここで[購入]を選択すると、購入のプロセスに進みます。ここの「説明」と書かれている部分の右にある文章は、Windowsストアにアプリを申請するときに設定します。 [アプリ内購入の実装]アプリ内購入を実装するには、Windows.ApplicationModel.Storeに含まれる機能を使用しますので、MainPage.xaml.csの最初のusing節が並んでいるところに、以下のようにこの名前空間を追加します。 using Windows.ApplicationModel.Store; 製品IDが有効かどうかを調べるために、以下のようにLicenseInfoというフィールドを用意して、CurrentAppSimulator.LicenseInformationを代入しています。 // in-app purchaseLicenseInformation LicenseInfo; public MainPage(){    this.InitializeComponent();     Timer.Interval = new TimeSpan(0, 0, 0, 0, 33);    Timer.Tick += Timer_Tick;    Timer.Start();     // in-app purchase    LicenseInfo = CurrentAppSimulator.LicenseInformation;} ここではアプリ内購入のテストを行うために、CurrentAppSimulatorというクラスを使用しています。このクラスを使うことで、アプリ内購入のシミュレートを行えます。Windowsストアにアプリを上げる際には、このCurrentAppSimulatorをCurrentAppに変更します。もし変更を忘れていると、Windowsストアの審査に通りません。 製品IDが有効かどうかのコードは、NextStageメソッドに実装しています。製品IDは、開発者が任意の文字列を設定します。ここでは、LAPaidStage1という製品IDを使用しました。 private async void NextStage(){   …

3