You are on page 1of 64

Windowsストア攻略

-なるべく楽をする方向で-

株式会社システムフレンド
西村誠

はじめに
これからのお話は
開発を楽にはしますが、
アプリケーションの品質は落ちるかもしれません

用法用量を判断してご利用ください

Agenda
・自己紹介
・Windowsストア攻略
・Tips
・ストア公開までの道(時間があまったら)

自己紹介

自己紹介
西村誠

広島から来ました

自己紹介
株式会社システムフレンド

Windows Phone ハンズオン in 広島

EC-CUBE公式エバンジェリスト
眠るシーラカンスと水底のプログラマー
http://coelacanth.heteml.jp/blog/

自己紹介
今日は広島からWindows8の熱を感じとりに来ました

ひとつでも多くのものを置いて帰り、
ひとつでも多くのものを持って帰ろうと思います

自己紹介

自己紹介

自己紹介

Windowsストア攻略

Windowsストア攻略
今回は基本的なところは飛ばして、

ストア登録のポイント&はまりどころ
を紹介しようと思います
1.画面について
2.レイアウト&コントロールについて
3.デザインについて?

Windowsストア攻略
1.画面について
Windows8はPC、タブレット・・・様々な画面解像度に対応している必
要があります。
では開発者はどのようなポイントに気を付ければ良いでしょう?

Windowsストア攻略
1.画面について
・最少サイズで必ずチェックする
画面サイズは1024×768が最小サイズ
このサイズで文字やコントロールが切れないかチェック
シュミレーターはかならず最少幅で
動作確認

Windowsストア攻略
1.画面について
・最少サイズで必ずチェックする
画面サイズは1024×768が最小サイズ
このサイズで文字やコントロールが切れないかチェック
デザインビューは最少幅を選べないので
シュミレーターでチェック!!

Windowsストア攻略
1.画面について
・縦横をチェックする
縦持ち、横持ち時の動作を必ず確認する
シュミレーターでチェック!!!

Windowsストア攻略
1.画面について
・縦横をチェックする
縦持ち、横持ち時の動作を必ず確認する
横持ちから縦持ちに持ち替えたときに横スクロールが発生するような
場合に縦スクロールがすでにあるようなレイアウトは注意

Windowsストア攻略
1.画面について
・縦横をチェックする
縦持ち、横持ち時の動作を必ず確認する
横持ちから縦持ちに持ち替えたときに横スクロールが発生するような
場合に縦スクロールがすでにあるようなレイアウトは注意
そういう場合にRichTextColumnsが便利

Windowsストア攻略
1.画面について
・縦横をチェックする
縦持ちと横持ち時はどうやって表示を変える?
方法1:VisualStateManagerで制御
(ー)実行時にエラーになる
(+)x:nameの重複がさけれる
VSのデバイスで確認

Windowsストア攻略
1.画面について
・縦横をチェックする
縦持ちと横持ち時はどうやって表示を変える?

方法2:一画面に縦のレイアウトと横のレイアウトを記述して
Visibilityで制御する
(+)XAMLコードが直観的
(ー)x:nameが重複する
方法1がおすすめ

Windowsストア攻略
1.画面について
・縦横をチェックする
縦持ちと横持ち時はどうやって表示を変える?
楽をしたい場合は横持ち時の画面は横にスクロールする形にしておいて、
縦持ち時も同じレイアウトで表示

Windowsストア攻略
1.画面について
・スナップをチェックする

スナップは横幅320ピクセルの細長い領域になる
端末の解像度は1326以上ないとスナップできない
動作はシュミレーターでチェック

楽をしたい場合はスナップ時は画像だけ表示しておけばOK

Windowsストア攻略
1.画面について
・セマンティックズームは必須ではない

楽をしたい場合は未対応で

Windowsストア攻略
1.画面について
・まとめ

画面についてはシュミレーターで切れている部分がないかしっかりチェック
最少画面サイズでの確認を忘れずに
スナップも忘れずに

Windowsストア攻略
2.レイアウト&コントロールについて
拡張するコントロール
GridView & ListViewをうまく使おう

Windowsストア攻略
2.レイアウト&コントロールについて
拡張するコントロール
GridView & ListViewをうまく使おう

Windowsストア攻略
2.レイアウト&コントロールについて
セッティングチャーム
設定時に画面右に一部分表示するような処理は
チャームフライアウトで実現する(ex:星座表)
ただしC#のコントロールにはデフォルトで
チャームフライアウトは無い
CharmFlyout
http://nuget.org/packages/CharmFlyout

Windowsストア攻略
2.レイアウト&コントロールについて
検索チャーム使用時の起動に注意
検索チャームからアプリが起動することがある
この場合検索結果画面が最初に表示される
初期化処理は
App.xaml.csのOnSearchActivatedイベントハンドラーで
楽をしたい場合は検索未対応だ!!

Windowsストア攻略
2.レイアウト&コントロールについて
既存のプロジェクトを利用する
プロジェクト作成時に

「グリッドアプリケーション」
「分割アプリケーション」
を利用すると
最初からデザインのコンセプトに沿ったレイアウトになっている
Windowsストアアプリの構成を学ぶにもおすすめ

Windowsストア攻略
2.レイアウト&コントロールについて
MS提供のテンプレートを利用する

Windows 8 アプリ開発体験テンプレート

Windowsストア攻略
2.レイアウト&コントロールについて
MS提供のテンプレートを利用する

最初から色々そろっているが、
テンプレートを使ったアプリが増えてきたので今後はオリジナリティを求められ
るかも?
とはいえスタート位置としてはかなり楽!!

Windowsストア攻略
2.レイアウト&コントロールについて
・まとめ

GridView、ListViewをうまく使おう
プロジェクトやテンプレートを利用する
XAMLとHTMLのコントロールの違いに注意

Windowsストア攻略
3.デザインについて
あなたがプログラマーならWindowsストアアプリの
タイポグラフィーとかインフォグラフィックについて頭が痛いはず
(かくいう私が頭が痛い・・・というか何かが理解を拒む)
そういう場合はデザイナーさんを味方につけましょう!!
(かなり楽になります。これが一番楽する方法かも・¥・)

Tips

Tips
・タイルの画像にアプリ名がある場合は左下の表記はアプリ名ではなく、画像

ライブタイルでWebからもらったXMLで更新する場合はマニフェストではなく
XML側に指定を書く

Tips
・インターネットに接続する場合はプライバシーポリシーを
アプリ内に表示
Webにページを作ってそこをブラウザで開くか、WebViewで表示でもOK

Tips
・データ取得する前に中途半端な部分を表示しない
(郵便番号が取得できるまでの表記が[〒 - ]など)
必須ではないが、ちゃんとしておきたい

Tips
・ストア申請時になぜかブルガリア語の説明を求められる
<Resource Language="x-generate" />

<Resource Language="JA-JP" />

ブルガリア問題体験した人?

Tips
・なんか勝手にズームするぞ
<ScrollViewer ZoomMode="Disabled“

Tips
・GridViewやListViewは自前でScrollViewerを内包しているので、
無駄にScrollViewerで囲まない
・GridViewやListViewはCanvas、StackPanelなどでくくると高さが判定
できず折り返ししないことが!!

Tips
・文字数が長すぎる場合は3点リーダー「・・・」で
TextTrimming="WordEllipsis"

Tips
・データバィンディング時に表示に合わせて値を加工したい場合は
Converterを(CommonディレクトリのBooleanToVisibilityConverter
などを参考に)

Tips
・Commonディレクトリのファイルの追加方法

Commonディレクトリのファイルを必要とするようなコントロールやコントラク
トの追加をすればOK
もっとスマートな方法ある?

Tips
・タイルやトースト通知は独自の定期実行APIがあるのでバックグラウンドタス
クにしない(バックグラウンドタスクの定期処理を実装する場合ユーザーに確
認ダイアログが出る)

Tips
・WACKでテストしようね

Tips
・背景画像をトップGridに定義すると画像読み込みの間表示が乱れること
があるので下の階層でCanvasなどに指定するとよいかも?
描画が入れ子の下から行われるからツリーの上位だと時間がかかる?
(最近の事象なのでその通りかは検証中)

Tips
・未実装の機能はきっぱり削る
アプリは完成した状態で

Tips
・Templateをアイテム毎に切り替えたい場合は
TemplateSelectorを使う

class hogeSelector : DataTemplateSelector
{
protected override DataTemplate SelectTemplateCore(object item,
DependencyObject container)
{

ストア公開までの道

ストア公開までの道
最初にも書きましたが、
EC-CUBEというPHPで書かれたECサイト構築フレームワークのエバンジェリ
ストをやっています。

これがお仕事で、会社ではPHPを書いています。
C#というか.NET系は趣味のWindows Phoneのみ
仕事でも好きなVisualStudioを使いたいと日々考えていました

ストア公開までの道
という感じでWindows Phoneの開発はしていましたが、
Windows8はDeveloperPreviewは触らずConsumerPreviewからの
デビュー。
Windows Phoneの経験が生きて習得は0からに比べて楽でした。

ストア公開までの道
7月
Windows Phoneのコンテストの入賞にあわせて
AEL(ApplicationExcellnceLab)に参加
早期にアカウントをとるのが大事にと考えて東京に行きました

ストア公開までの道
AELには2本のアプリを持ち込んで個人用と会社用のアカウントを取得

2本目のアプリは新幹線の移動中に完成
・・・まぁ、少しして全然完成してないことがわかるんですが

ストア公開までの道
AELでマイクロソフトの技術者の人にアプリを見てもらいながら
いろいろ情報を取得
その時アプリのパッケージが作れないバグと遭遇
(今でもマイクロソフトアカウントの登録名が日本語だとパッケージが作れない
ので注意)
ドキュメントのディレクトリのパスに日本語があるとアウト
この場合は新しいアカウントを作るか、いったんローカルアカウントでログインし
てマイクロソフトアカウントをそっちに紐づけるとOK

ストア公開までの道
7月末日

もらったアカウントでアプリを申請
14日後・・・
要件1.1で審査落ち

ストア公開までの道
AELの担当の方に相談

担当「おしパッケージ送ったら見てやるぜー!!」
素敵!!

ストア公開までの道
で素敵にいろいろ修正したのですが・・・

RCからRTMの転換期で一般にはRTMが出回ってないけど、
ストアはRTMでビルドしたパッケージしか受け付けない状態に・・・

8月の盆までストアお休み状態・・・
失われた夏事件

ストア公開までの道
盆明け直後にRTMを手に入れた日の夜にアプリを申請
あくる朝・・・

「審査通りましたおめでとう!!」
んー、あの2週間待ちはなんだったんだろう

ストア公開までの道
教訓
早期にストアのアカウントを手に入れることは大事
(いろいろ苦労もするけど・・・)
MicrosoftはWindows8を押している!!
協力も得られるし、チャンスも得られる!!
(いろいろ苦労もするけど・・・)

続きは・・・

ストア公開までの道
今週のMicrosoftカンファレンスには行きます
会場でお会いしたらぜひお声かけください

自己紹介
株式会社システムフレンド
東京にも支社がありますので、
Windows8(WindowsPhoneも・・・)のご相談はお気軽に!!

ストア公開までの道
眠るシーラカンスと水底のプログラマー
http://coelacanth.heteml.jp/blog/
Twitter:coelacanth

Facebook:西村誠

ご清聴ありがとうございました