はじめてのWindows Phoneアプリ



WreathDeco

昨年12月__。
クリスマスに合わせてWindows Phoneアプリ「リース・デコ」を作成しました。
クリスマスリースにアイテムを貼り付けてオリジナルリースをつくって遊ぶアプリです。

遊び方は以下の通り。

(1)ベースとなるリースをえらぶ
(2)アイテムを選んで貼り付ける

アイテムの移動ツール、削除ツール、拡縮ツールや回転ツールがあります。
他、画像保存機能やFacebook投稿機能があります。

ダウンロードはこちら

http://www.windowsphone.com/ja-JP/apps/6fc3f1dc-a068-4fe5-82eb-fbdc48d8e2a0

画面設計における反省点が大変多いアプリとなりましたが、
作成の過程で学んだことも多くあります。そんな徒然をまとめてみました。

戻る(バック)ボタンの挙動

バックボタンを押したときの挙動についてです。リース・デコでは、以下のように実装しました。

  • ページの前面に重ねてコンテンツを表示している場合 … 前面コンテンツを削除
  • 前面コンテンツがない場合 … Facebook投稿画面 –> 編集画面 –> ベース選択画面 –> トップ画面 –> アプリの終了

また、ページ遷移を行う場合は、確認アラートがでるようにしています。アプリ終了時のサンプルが以下。
デバックすると「QuitExceptionはハンドルされませんでした。」というメッセージが表示され
Exceptionが投げられていることがわかります。

XXX.xaml.cs

protected override void OnBackKeyPress(System.ComponentModel.CancelEventArgs e)
{

    MessageBoxResult m = MessageBox.Show(“終了します。”, “アプリの終了”, MessageBoxButton.OKCancel);
    if (m == MessageBoxResult.Cancel)
    {
    e.Cancel = true;         //以降の動作キャンセル
    }
    else if (m == MessageBoxResult.OK)
    {
    e.Cancel = true;
    App.Quit();         //App.xaml.csに記述
    }

}

App.xaml.cs

// ハンドルされない例外の発生時に実行されるコード
private void Application_UnhandledException(object sender, ApplicationUnhandledExceptionEventArgs e)
{

if (e.ExceptionObject.InnerException is QuitException)

    return;

if (System.Diagnostics.Debugger.IsAttached)
{
// ハンドルされない例外が発生しました。デバッガーで中断します。
System.Diagnostics.Debugger.Break();
}
}

private class QuitException : Exception { }

public static void Quit()
{

    throw new QuitException();

}

テーマカラーと配色

Windows Phoneは個人の好みに合わせて端末のテーマカラーやアクセントカラーを設定できます。
うっかり忘れがちですが、アプリのデフォルトカラーもテーマカラーに左右されることに注意しなければいけません。
テーマカラーは黒(dark)白(light)があります。
このテーマカラーに合わせて、主に文字色、背景色、ボーダーの色などがデフォルトが決まっています。
たとえばアプリケーションバーやアラート、ボタン、通常のテキストや背景などは、Foreground、Background、BorderBrushなどで色設定をしなければデフォルトカラーが適用されます。(下図 左Dark 右Light)

すべてに対して色要素を設定すればテーマカラーに左右されない色設定が可能ですが、テーマカラーを利用することも可能です。以下、テーマカラーの利用例。

Background=”{StaticResource PhoneBackgroundBrush}”

Foreground=”{StaticResource PhoneForegroundBrush}”

BorderBrush=”{StaticResource PhoneBorderBrush}”

また、テーマカラーによって背景色や文字色が変化することで、画像を変更の必要になることもあります。以下のようにすることでテーマカラーに合わせてVisibilityを変更できます。

<Image Width=”60″ Stretch=”None” Visibility=”{StaticResource PhoneDarkThemeVisibility}”  Source=”../Assets/Images/dark.png” />
<Image Width=”60″ Stretch=”None” Visibility=”{StaticResource PhoneLightThemeVisibility}” Source=”../Assets/Images/light.png” />

アニメーションとタッチのタイミング

リース・デコでは、拡縮や回転ツールを利用したいとき、編集をおこないたいアイテムをタップすることでページ下部に表示される、拡縮(または回転)パレットを使用します。
このパレットの表示には、アニメーションを使用しています。
また、編集を終えた際、アイテム以外のキャンバスをタップすることでパレットがページ下部からなくなる仕様になっています。

  • アイテムをタップ–>パレット表示
  • アイテム以外のキャンバスをタップ–>パレットを非表示

となるよう実装しようとしていたのですが、その際に問題になったのが以下 __。

パレットを表示する(Collapsed–>Visible)短いアニメーションが動作している合間に、
パレットのVisibilityをCollapsedにするという指示が効かない
という問題です。
アニメーションがActiveのときには、一度アニメーションをStopさせて Visibilityを変更する必要があります。

if (mainXaml.ShowItemDetail_Storyboard.GetCurrentState() == ClockState.Active)
{

    mainXaml.ShowItemDetail_Storyboard.Stop();    //動いていたら停止

}
mainXaml.Over_Grid.Visibility = Visibility.Collapsed;

複数行にわたる投稿(改行)

リース・デコでは、完成したリースをFacebookへ投稿する機能を設ける際に、オープンソースのFacebook C# SDKを使用しています。このSDKを使用することで、OAuth2.0などの認証やAPI呼び出しが容易にできます。

Graph APIを使用すると、Facebookの持つデータへのアクセスや、ステータスや写真等の投稿ができるのですが…

今回実装できなかったのが、リース画像投稿時のメッセージにおける改行です。
Facebook DevelopersのTechnical Q & Aにも同じ質問がありましたが、解決策を見つけることができませんでした。
Facebook C# SDKが提供しているサンプルコードでも改行はされず…。
また、投稿時の改行は投稿された画像のメッセージを、Facebook上で一度編集ボタンを押すと自動的に改行されます。
少し心残りのある部分です。

エミュレータで「@」を入力する

エミュレータでPCのキーボードを使用して文字を入力したいときは、「Pause/Break キー」を押します。
「@」のキーが見つからず困ったのですが、「Shift+2」で入力できるようです。

Marketplaceのアートワークとアプリのアートワークの違い

Windows Phoneのアプリケーションでは、タイルやアイコンに透過を使うことで、透明な部分にテーマカラーのアクセンカラーが使用されます。その効果を利用するためには、タイルやアイコンに用いる画像も背景が透明なものを用意するのですが…
ところが、Marketplaceには背景が透明なアートワークは登録できません。(正しく表示されません)
その場合には、仮の色がついたアートワークを用意することになるのですが、なんかすっきりしない気がしてしまいます。
Marketplaceで入手したイメージと手元のあらわれたタイルの色が違うとことに違和感が拭えません。
Marketplaceにもテーマカラーを設定できたらいいのにと思ってしまいます。