ソチ オリンピック公式アプリが秀逸

マイクロソフトの田中達彦です。ソチオリンピックもいよいよ終盤に突入しています。日本にいながら時差ボケしています。ソチオリンピックの公式アプリがWindows Phone用に出ていて、これの出来が非常によいので紹介します。 上の写真は、男子フィギュアスケートのフリーの結果です。羽生結弦選手の得点の詳細まで見ることができます。フィギュアスケートの場合は、ライブ中継で点数が出るのとほぼ同時に、このような点数の詳細を見ることができます。スキージャンプの場合は、各審査員の採点をリアルタイムに見ることができます。もちろん、過去の競技の結果の詳細も見れます。 昨晩の女子フィギュアスケートのショートプログラムは日本選手が力を出し切れず残念でしたが、今晩のフリーは会心の演技をしてくれると信じています。 ソチオリンピック公式アプリはこちらから。http://www.windowsphone.com/ja-jp/store/app/sochi-2014-results/76936b6d-88dc-4ae4-a8c4-86bbef318590 マイクロソフト田中達彦

0

Windows Phone アプリケーション トライアスロン2013 参加のすすめ ~愛のささやきプロジェクトを公開~

マイクロソフトの田中達彦です。2013年2月末まで、Windows Phone アプリケーション トライアスロン 2013を開催しています。http://msdn.microsoft.com/ja-jp/jj884074.aspx アプリケーション トライアスロンは、3つのテーマに沿ったアプリをつくり、Marketplaceで公開するというものです。 3つのテーマとは、以下の3つです。第1種目 : 音またはWeb第2種目 : 時計または生カメラ第3種目 : ゲームまたはセンサーこれらのアプリを作ってMarketplaceに登録します。 これはちょっと面白いということで挑戦し、既に作っていたLine Attackをはじめ、以下のアプリを公開しました。 [第1種目]犬棒かるたhttp://www.windowsphone.com/s?appid=99f3def6-aa0d-46da-af70-3c2efee0e66b「犬も歩けば棒にあたる」などで有名な犬棒かるたを、人数が少ないときに遊ぶためのアプリです。それぞれのかるたの音声を録音しておくと、それらの音声をシャッフルして流します。1人でも犬棒かるたの練習をすることができます。※ 遊ぶには、犬棒かるたの物理的なカードが別途必要です。   愛のささやきhttp://www.windowsphone.com/s?appid=039a9504-2e4a-491f-9a03-8d45b8053424犬棒かるたの派生アプリです。好きな人にささやきを録音してもらい、会えない時や落ち込んだ時に聴きます。録音しているささやきをランダムで再生します。   [第2種目]日めくり2013http://www.windowsphone.com/s?appid=a8791432-abc8-4212-83c7-235a37171516旧暦や六曜も表示する、2013年の日めくりカレンダーです。Marketplaceのレビューで、「こういうアプリで日付がタイルに出てきたら最高なのに」というレビューをいただいたのでタイルに日付が出るように修正しました。ただし、日めくりカレンダーなのでカレンダーをめくらないと(アプリを起動しないと)、タイルの情報は更新されません。画面の右のほうをタップすると翌日、左のほうをタップすると前日に移動します。画面の中央付近をタップすると、今日の日付を表示します。タイルに表示される日付は、アプリ起動時の日付です。※ 本アプリは2013年の間のみ使用できます。   [第3種目]Line Attackhttp://www.windowsphone.com/s?appid=a8497517-108c-4dd0-998c-66b21a5d08de現在ブログで連載記事を執筆しているLine AttackのWindows Phone版です。 [愛のささやきのプロジェクト]これからアプリケーション トライアスロンに参加しようと思った方のために、今回は音声を使用したアプリである「愛のささやき」のプロジェクトファイルを公開します。以下のAddDataメソッドで、どのような音声を入力するかの一覧を作成しています。この部分のデータを変更し、背景等を変えると別のアプリになります。 public void AddData(){    listboxRec.Items.Add(“いつもありがとう”);    listboxRec.Items.Add(“感謝してるよ”);    listboxRec.Items.Add(“頑張って”);    listboxRec.Items.Add(“おなか減ったな”);(以下略) [愛のささやきプロジェクトの注意点]- この愛のささやきのプロジェクトは、サンプルとして提供します。- このアプリを改変したものをWindows PhoneのMarketplaceで公開してもかまいません。 マイクロソフト田中達彦 LoveWhisper_201302022300_Marketplace_Release2_forBlog.zip

3

Line AttackのWindows Phone版公開

マイクロソフトの田中達彦です。現在進行中のブログ記事で解説しているLine AttackのWindows Phone版が公開されました。http://www.windowsphone.com/en-us/store/app/line-attack/a8497517-108c-4dd0-998c-66b21a5d08de Windowsストア アプリ版は日本語と英語に対応していますが、Windows Phone版は英語版のみでの公開です。Windowsストア アプリ版のUIを日本語から英語に変えるには、以下の手順で変更できます。 1. Windowsキーを押しながらXキーを押します。2. コントロールパネルを選択します。 3. コントロールパネルの右上にある検索ボックスに、「language」または「言語」と入力します。 4. [言語]を選択し、以下の画面が表示されたら[言語の選択]をクリックします。 5. [英語]を選択し、[開く]ボタンを押します。6. いちばん下に表示されている[英語(米国)]を選択し、[追加]ボタンをクリックします。 7. 以下のように言語ダイアログに日本語とEnglishが表示されたら、日本語を選んで[下へ]をクリックして、Englishが上に来るように変更します。 8. この状態でLine Attackを起動すると、UIが英語になります。9. 確認が終わったら、日本語が上になるように戻しておきましょう。 マイクロソフト田中達彦

0

Windowsストア アプリ 作り方解説 Line Attack編 第0回 ~開発秘話と画像の用意~

マイクロソフトの田中達彦です。本連載では、Windowsストアアプリとして作成したパズルゲームである、Line Attackのプログラムを解説します。今回は連載を始めるまえに、このアプリを作ろうとしたきっかけを紹介します。Line Attack : http://apps.microsoft.com/webpdp/app/f11e327c-6228-4c8f-8245-ea57d65e0f09 [作ろうと思ったきっかけ]ちょうど2週間くらい前のことです。会社からの帰りで電車に乗っていたとき、隣でiPadを使っている人がいました。ついつい画面を見ると、面白そうなパズルゲームをやっているではないですか。 次の日、また会社帰りの電車の中で、同じゲームをやっている人を見かけてしまいました。ちょうどパズルゲームのサンプルを作りたいと思っていたとこで、そのゲームであればわりと簡単に作れそうだから、ちょっと作ってみようかなという考えが頭をよぎりました。家に帰って調べてみると、そのゲームの名前はわからないものの、パズルとしてはラッシュアワーというパズルということがわかりました。さらに次の日、Windows 8を立ち上げてWindowsストアを見ると、なんとそのゲームが表示されているではありませんか。パズルゲームの名前はBlocked in。http://apps.microsoft.com/webpdp/app/2097beb1-9f5b-42cf-8ed7-8c1ecd9522acWindows 8用のアプリがあるのであれば、わざわざ作る必要はありません。しかし、サンプルとしてパズルゲームを作りたいと思っていたので、他のパズルを作れないか、頭をひねりました。 そして次の日、昼食を食べているときにLine Attackのアイデアが思い浮かびました。とりあえずそのアイデアをアプリにしようとしたため、この後公開するアプリのプロジェクト名がPazzle_idea1という名前になっています。 単純なアイデアなので、類似しているものが既に出ているかもしれません。とはいえ、左端と右端、上端と下端がくっついているので、少なくとも物理的な物体を使うパズルとしては存在しなそうです。 [マス目の数]いざアプリを作ろうとして、最初に画面の設計から入りました。標準的な解像度の1つである1366x768の画面を想定し、真ん中に正方形のメイン画面を設置するとすれば、600x600くらいが適当だろうと判断しました。その600x600をさらに分割しようとしたときに、パッと思いついたマス目の数は6x6か10x10でした。6x6に分割すると、ひとつのマス目の大きさは100x100ピクセル、10x10に分割した時は60x60ピクセルです。60x60ピクセルだと、画面をタッチしたときに隣のマス目を触ってしまう可能性が高くなるので、まずは100x100ピクセルで作ることにしました。将来的には、マス目の数を増やすことも検討しています。 [画像データ]とりあえずアプリを作るとしても、画像データが必要です。Line Attackで使用している画像データは、Windowsアプリ アートギャラリーのものを使用しています。http://msdn.microsoft.com/ja-jp/hh544699この中のゲームの素材の中の、IG168.pngとIG169.pngという素材を宝石として使用しています。もともとこれらの素材は、爆発をイメージして作ってもらったものですが、宝石に見えれば何でもいいのです。 オリジナルの素材は、オレンジと水色の画像しかありません。PowerPointの機能を使い、画像の色を変更して黄緑や紫など、別の画像を作成しました。 ラインとなる黒い棒も、アートギャラリーの素材を使っています。棒という素材はないため、「図形」に含まれるIC052.pngという四角形の素材をアレンジしました。以下の図のように、IC052を少し変形させて、棒の部分のみをトリミングして抜き出しています。 点滅している四角形の部分は、PowerPointの標準の図形として用意されている、角が円い四角形を使用しています。このようにして、ゲームで使う画像を作っていきました。 [今後の連載]次回から、開発途中のプロジェクトファイルを公開しつつ、コードの説明をしていきます。最終的なプロジェクトファイルの公開は、連載終了時になる予定です。 パズルゲーム作成の参考にしたいので、早く最終的なプロジェクトファイルが欲しいという方は、個別にご連絡ください。現在実施している、高専アプリ開発コンテストに参加している高専生の方は、高専アプリ開発コンテスト事務局事務局までお問い合わせください。連載終了を待たずに、プロジェクトファイルをお送りします。 [Windows Phone版]Windows Phone版も先ほど作って、Marketplaceに申請しました。移植にかかった時間は約6時間です。手間取ってしまったところもあるので、慣れれば2~3時間で移植できそうです。申請が通れば、このブログで紹介します。 [次の記事]第1回 画面のレイアウトと表示 マイクロソフト田中達彦

0

Windowsストア アプリ 作り方解説 XNA編 第5回 ~ジェスチャーのシミュレート~

マイクロソフトの田中達彦です。本連載では、Windows Phone 7用のXNAで開発したShoot EvoというゲームをWindowsストア アプリとして移植したときのポイントを紹介します。本連載では、C#とXAMLを使用して同様のアプリを作っていきます。 [使用しているジェスチャー]Shoot EvoのXNA版では、ジェスチャーとしてフリックとタップを使っています。フリックは、画面をシュッと指でなぞる操作で、ボールを蹴るときに使っています。タップは、画面を触る操作で、シュート後に画面を元に戻すときに使っています。 XNAでは、以下のようにフリックとタップを使用しています。 // タッチパネルの状況を検知するwhile (TouchPanel.IsGestureAvailable){    GestureSample gs = TouchPanel.ReadGesture();     // 画面がフリックされたかどうか    if (gs.GestureType == GestureType.Flick)    {        // もしボールが動いていないときは、フリックに合わせてボールを動かす        if (BallSpeed.X == 0 && BallSpeed.Y == 0)        {            BallSpeed.X = gs.Delta.X / 50;            BallSpeed.Y = gs.Delta.Y / 50;             // シュートの情報を記録            TotalShoot++;             CurrentShoot++;            if (CurrentShoot > MaxShoot)                CurrentShoot…

0

Windowsストア アプリ 作り方解説 XNA編 第4回 ~キャラクターの描画~

マイクロソフトの田中達彦です。本連載では、Windows Phone 7用のXNAで開発したShoot EvoというゲームをWindowsストア アプリとして移植したときのポイントを紹介します。本連載では、C#とXAMLを使用して同様のアプリを作っていきます。 [XNAの描画方法]XNAとC#/XAMLで全く違う部分が、キャラクターなどの画像の描画の部分です。XNAでは、例えばボールを描画するときには以下のようにBallというTexture2Dのフィールドを作成します。 Texture2D Ball; そして、Loadメソッドでball.pngという画像を以下のように読み込み、Ballフィールドに代入します。 Ball = Content.Load<Texture2D>(“ball”); 描画は、Drawメソッドで行います。以下のように、描画するものと位置、色を指定して描画します。 spriteBatch.Draw(Ball, BallLocation, Color.White); BallLocationはVector2で定義されたフィールドで、描画する位置のX座標をY座標を含んでいます。 [C#/XAMLでの描画方法]C#/XAMLの場合は、XAMLに画像イメージを表示させるためのImageコントロールを用意し、そのパラメーターを変えることで目的の画像を表示させます。まずXAMLには、以下のようにImageコントロールを貼り付けます。 <Image x:Name=”ball1″ HorizontalAlignment=”Left” Height=”60″ Margin=”338,403,0,0″ VerticalAlignment=”Top” Width=”60″ Source=”Assets/ball.png” Stretch=”Fill”/> このときのMarginの値はボールの位置です。この値はプログラム中で変更していきます。もしプログラム中で画像データを読み込むときは、以下のようなコードを書きます。初期値として設定している画像以外の画像を表示させるときに使います。 string imageUri = “ms-appx:///Assets/ball.png”;BitmapImage bitmap = new BitmapImage(new Uri(imageUri));ball1.Source = bitmap; Drawメソッドに相当する部分では、表示する位置のみを以下のように設定します。ImageコントロールにはMarginというプロパティがあり、そこで位置を決めます。Pointとして定義したBallLocationを使い、ball1というImageコントロールの位置を定義しています。 ball1.Margin = new Thickness(BallLocation.X, BallLocation.Y, 0, 0); [XAMLでの画面構成]C#/XAML版では、サッカーのフィールド(芝生の部分)、サッカーゴール、ボール、モンスターの4つの要素にそれぞれImageコントロールを使って画像を表示させています。以下は、そのときのXAMLのコードの例です。プロジェクト名や、画像を貼り付ける位置によって細かいパラメーターが変わることがあります。 <Page    x:Class=”App33_xnafake.MainPage”    xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation”    xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml”    xmlns:local=”using:App33_xnafake”    xmlns:d=”http://schemas.microsoft.com/expression/blend/2008″    xmlns:mc=”http://schemas.openxmlformats.org/markup-compatibility/2006″   …

0

Windowsストア アプリ 作り方解説 XNA編 第3回 ~Update、Drawメソッドを置き換える~

マイクロソフトの田中達彦です。本連載では、Windows Phone 7用のXNAで開発したShoot EvoというゲームをWindowsストア アプリとして移植したときのポイントを紹介します。本連載では、C#とXAMLを使用して同様のアプリを作っていきます。 [XNAのUpdateとDrawメソッド]C#などで作成したアプリは、イベントドリブンでプログラムが動きます。ユーザーが何か操作したときなどに発生するイベントに対して、プログラムを用意するのです。XNAはイベントドリブンではなく、1/30秒ごとに特定のメソッドが呼ばれるので、その中にコードを書いていきます。1/30秒ごとに呼ばれるメソッドには、UpdateメソッドとDrawメソッドの2つがあります。Updateメソッドは各種フィールド等の値の更新を行うためのメソッドで、Drawメソッドは描画を行うためのメソッドです。 [タイマーを使用した呼び出し]WinRTには、XNAのようなUpdateメソッドとDrawメソッドがないので、DispatcherTimerというタイマーを使用してUpdateとDrawの代わりにします。まずは、以下の黄色でマーカーしている部分のようにTimerというフィールドを用意します。 public sealed partial class MainPage : Page{    DispatcherTimer Timer = new DispatcherTimer(); 次に、コンストラクタの中で、何秒ごとにタイマーによるイベントを発生させるかを定義し、イベントハンドラーを設定します。ここでは、33ミリ秒ごとにイベントが発生するように設定します。この値は、ほぼ1/30秒ごとに相当します。 以下の黄色くマーカーした部分を入力する途中で、2行目の += を入力した直後にTabキーを2回押します。Tabキーを押すことで、イベントハンドラーが自動的に生成されます。最後の3行めのStartメソッドの呼び出しで、タイマーをスタートさせます。 public MainPage(){    this.InitializeComponent();     Timer.Interval = new TimeSpan(0, 0, 0, 0, 33);    Timer.Tick += Timer_Tick;    Timer.Start();} 上記の += を入力したときに自動的に生成されたTimer_Tickイベントハンドラーに、以下のようにUpdateとDrawに該当する部分を用意します。 void Timer_Tick(object sender, object e){    // Update     // Draw } Updateメソッドはそのままコピーして、次回以降の連載で説明する方法でXNAのコードからストア アプリのコードに移植できます。Drawメソッドは、XNAとストア…

0

Windowsストア アプリ 作り方解説 XNA編 第2回 ~Windows PhoneのXNAとWindowsストア アプリの違い~

マイクロソフトの田中達彦です。本連載では、Windows Phone 7用のXNAで開発したShoot EvoというゲームをWindowsストア アプリとして移植したときのポイントを紹介します。本連載では、C#とXAMLを使用して同様のアプリを作っていきます。 [XNAにあってWindowsストア アプリにないもの]Windows PhoneのXNAにあって、Windowsストア アプリを作るときのAPIであるWinRTにないものがいくつかあります。画面描画に関する実装方法も違います。元のXNAのアプリで使用していて、Windowsストア アプリでそのまま動かない部分を列挙しました。 a. 表示させる画像やキャラクターの扱いXNAでは、Texture2Dクラスを使用して画像を保持し、表示させています。 b. Initialize、LoadContent、Updata、Drawの各メソッドXNAでは、これらのメソッド内で必要な処理を行います。 c. 座標の管理XNAでは、Vector2クラスを使用して2次元の座標を管理しています。WinRTでは、2次元の座標を保持させるために、代わりにPointクラスを使用できます。 d. 文字列の扱いXNAでは、SpriteFontクラスを使用して文字列の保持し、表示させています。 e. タッチパネルの状態の検知XNAでは、TouchPanel.ReadGesture()を使用してフリックなどのジェスチャーの状況を検知できます。 f. 衝突判定XNAでは、RectangleクラスのIntersectsメソッドを使用して衝突判定を行えます。WinRTでは、RectクラスのIntersectメソッドを代わりに使用できます。 g. 分離ストレージへの情報の読み書きXNAとWinRTでは、分離ストレージへの読み書きの方法が違います。 ざっとこれらの部分を変更すれば、Shoot EvoをWindows 8上で動かせるようになります。実際に移植をしたところ、これらの部分は3時間程度で終わりました。 [Windowsストア アプリにあって、Windows Phone 7のXNAにないもの]Windows Phone 7のXNAにはない機能で、Windowsストア アプリを作るときに対応させないといけないものもあります。対応させないといけない項目を列挙しました。 A. 異なる解像度への対応Windows Phone 7は800x480の解像度しかありませんでしたが、Windows 8は1024x768、1366x768、2560x1440など、様々な解像度があります。 B. スナップへの対応Windows 8にはスナップと呼ぶアプリを2つ同時に実行できる機能があります。このスナップに対応させる必要があります。 移植に時間がかかるのはこちらのほうで、まだ移植作業の途中です。次回以降は、個別の項目をどのように移植していったかを説明していきます。 [前後の記事]第1回 : オリジナルのWindows Phone 7 アプリ (ソースコード掲載)第3回 : Update、Drawメソッドを置き換える番外1 : Shoot Evo…

0

夏の陣2012 出陣帖 for Windows Phone

マイクロソフトの田中達彦です。今年もやってきたケータイ国盗り合戦の夏の陣用の出陣帖を作りました。http://www.windowsphone.com/ja-JP/apps/1af0059d-aa02-42b8-ae38-5d43ac344e21 ケータイ国盗り合戦とは、日本を600の国に分けて、それぞれの国に行くという位置ゲームです。夏の陣は、夏の間だけ開催している、日本国内にある100のスポットを攻略するという期間限定のゲームです。100のスポットは、自分が出かけていく方法のほかに、他の人に相乗りするという方法もあります。 このWindows Phone用の出陣帖では、100のスポットの獲得状況を管理できます。 夏の陣に参加されている方は、ぜひ使ってみてください。宝刀の数の一覧を表示するところで、初期バージョンでは朱雀と玄武の色が逆になっています。修正版をすでにアップしているので、数日中には修正版にアップデートできる予定です。 マイクロソフト田中達彦

0

くーまん Player♪ Windows Phoneで登場

マイクロソフトの田中達彦です。Windows Phoneで、くーまんPlayer♪ のアプリが公開されました。http://www.windowsphone.com/ja-JP/apps/edd9c803-c0d1-4eee-b50c-4e937aa695e5 最近くーまんとWindows Phoneは仲が良く、こんなストラップもあります。Windows 8の開発者向けイベントなどで配っています。 くーまんは、僕の過去のブログにもこっそり登場させています。http://blogs.msdn.com/b/ttanaka/archive/2010/10/26/amp-plug-in-1.aspx くーまんについては、別の場でしっぽりと語る予定です。 マイクロソフト田中達彦

0