YaGiLoG

UWPアプリ開発ネタなどを。

初めてのUWPアプリ開発 ~9.まとめ~

この記事は、「Windows Phone / Windows 10 Mobile Advent Calendar 2015」の17日目です。

Windows Phone/Mobile 端末を1台も所持していない私ですが、Windows 10 Mobileでも動くUWPアプリ開発ネタということで、こちらのAdvent Calendarにエントリーしました。

はじめに

Build 2015でUWPが正式に発表され、「1つのUWPアプリがすべてのWindows 10デバイスで動作する」ということでワクワクしたのとやる気になったのが、約半年前。
https://i-msdn.sec.s-msft.com/dynimg/IC797981.png
ローカル環境で作ったり動かしたり、de:codeやUWPハンズオンに参加したりしていましたが、やっぱりアプリ公開したり自分から情報発信していかないとといけないなと思い、動き始めた最初がこのブログです。

まずはAdvent Calendarに書くネタを作ろうと、UWPアプリ開発の環境構築~ストア公開までを一通りこなしましたので、ここではそのまとめと感想を書きたいと思います。

UWPアプリ開発の流れ

全8回にまとめました。UWPアプリ開発に興味のある方、お時間のある方はどうぞ。








感想

ストア申請~公開までが早い

提出したアプリがシンプルで機能が少ないという点もあるかもしれませんが、1回の提出で審査が通り、申請した翌日には公開されました。
アプリの種類や機能によってはもう少し時間がかかるのかもしれません。
(まだ、提出されるアプリ自体がそれほど多くないということも?)

レスポンシブUIは大変

「1つのUWPアプリがすべてのWindows 10デバイスで動作する」というメリットと引き換えに、すべてのWindows 10 デバイスで動作させるための手間が、アプリ開発者側にかかってくるという面があります。
その1つがレスポンシブUIですが、小さい画面~大きい画面、縦長/横長の各画面サイズに対応するデザインやレイアウトを考えるのはやはり大変です。
チーム開発であればデザイナーがいると心強いですね。
UWPハンズオンでも言われていましたが、デザイン、レイアウトに困ったときに参考にすべきは、Windows 10標準搭載のアプリ(メール、カレンダー、ストア等)とのことです。

やっぱりMobile端末が欲しい

UWPアプリはすべてのWindows 10デバイスで動作しますので、実機の動作確認がローカルコンピューターだけというものやはり心細いものです。
Mobile エミュレーターもありますが、まだ動作が不安定かなという気もしますので、手元に1台Windows 10 Mobile端末が欲しいです。
今日までのAdvent Carendarの記事でもみなさん書かれていますが、国内Windows 10 Mobile端末もいろいろ出てきましたので、自分へのクリスマスプレゼントで1台買いたいと思います。

最後に

今年は、Windows 10 Mobileが盛り上がった年だったと思います。
一方ではAndroidアプリをWindows 10に移植するProject Astoriaが中断か?なんて話もあったり。

ぜひ来年もWindows 10 Mobileが盛り上がる1年であることを願っています。
私もがんばります。

明日は@x67x6fx74x6fさんです。

初めてのUWPアプリ開発 ~8.ストア申請~

Windowsデベロッパーセンターのダッシュボードから申請します。
サインインしたら、申請するアプリを選択して、「提出を開始する」ボタンを押します。*1
f:id:yagisou:20151216030229p:plain
f:id:yagisou:20151216030657p:plain
画面内の5項目を設定すると、「ストアに提出」ボタンが押せるようになります。

価格と使用可能状況

f:id:yagisou:20151216220134p:plain

基本価格

リストから「無料」を選択します。
f:id:yagisou:20151216220739p:plain

無料のお試し版

リストから「無料評価版はありません」を選択します。
f:id:yagisou:20151216220757p:plain

市場と特別価格

242のマーケットに公開できますが、日本語仕様で作りましたので、日本だけ選択します。
f:id:yagisou:20151216221134p:plain

販売価格

期間限定の販売価格を設定できますが、未設定にします。

分布と認知度

「誰でもストア内でお客様のアプリを検索できます」を選択します。
f:id:yagisou:20151216221501p:plain

Windows10デバイスファミリ

アプリを公開するデバイスファミリを選択できます。
現状は「デスクトップ」と「モバイル」の2つだけですが、UWPアプリなので両方チェックします。
f:id:yagisou:20151216221852p:plain

組織のライセンス

ビジネスストア向けの設定ですかね。
オンラインのボリュームライセンスで購入できるほうにチェックしました。

公開日

「認定後すぐにこのアプリを公開する」を選択しました。
f:id:yagisou:20151216222217p:plain

ここまでで1項目目の設定を保存します。

アプリのプロパティ

カテゴリとサブカテゴリ

ストアで公開するカテゴリを選択します。
ストアでおえかき系のアプリを検索したところ「教育」に分類されていましたので、「教育」とします。
サブカテゴリは未設定です。

ストアの年齢区分

特に年齢制限はありませんので「3+」とします。
f:id:yagisou:20151216222906p:plain

その他の年齢区分

特に審査を受けるようなアプリではないので、未設定とします。
f:id:yagisou:20151216223327p:plain

ハードウェアの基本設定

必須とするハードウェアはありませんので、未設定とします。

アプリの申告

内容を確認したうえでチェックを設定します。
f:id:yagisou:20151216223548p:plain

ここまでで2項目目の設定を保存します。

パッケージ

既に作成済みのアプリパッケージをここでアップロードします。
f:id:yagisou:20151216224153p:plain

ここまでで3項目目の設定を保存します。

説明

f:id:yagisou:20151216224608p:plain
ここでストアに表示される情報を設定します。
既に公開されているアプリの書き方を参考にしながら以下の項目を設定していきます。
何を書けばよいかわからないところは未設定でも大丈夫です。
スクリーンショットは最低1枚あれば大丈夫です。

  • 説明
  • リリースノート
  • スクリーンショット等の画像
  • アプリの機能
  • お勧めのハードウェア
  • キーワード
  • 著作権と商標の情報
  • 追加のライセンス条項
  • Webサイト
  • サポートの連絡先情報
  • プライバシーポリシー

ここまでで4項目目の設定を保存します。

認定の注意書き

アプリを審査するテスターに向けた情報を記載します。
特に複雑なアプリではないのでこんな感じで。
f:id:yagisou:20151216225345p:plain

ここまでで最後の項目の設定を保存します。

ストアに提出

「ストアに提出」ボタンがおせるようになっていますので、押して提出完了です!
申請処理の進捗状況が確認できます。
f:id:yagisou:20151216230022p:plain




そして・・・




公開されました!

f:id:yagisou:20151216230550p:plain
12/10(木)に申請したのですが、翌12/11(金)にはストアに公開されました。
・・・早いですね。
なにはともあれ、ストア公開できましたので、初めてのUWPアプリ開発の目的達成です。

*1:「新しいIAPの作成」は、アプリ内課金の設定ですので、今回は使いません。

初めてのUWPアプリ開発 ~7.申請準備~

機能の実装が終わったところで、申請の準備をします。

動作確認

UWPアプリは、全Windows 10デバイスで動くアプリですので、個々の環境で動作確認したいところですが、手元で動かせるデバイスは限られています。
Windows 10 Pro(PC)は、開発環境のローカルコンピューターでOKでした。
Windows 10 Mobileは、残念ながらMobile端末がありませんので、エミュレーターで確認します。

Windows 10 Mobile エミュレーター

Mobileエミュレーターは、Hyper-Vという仮想化システム上で動作します。Hyper-Vはハードウェア機能を使った仮想化のため、PCレベルで使える/使えないが決まってしまいます。
幸い、私のPCはHyper-Vに対応していますので、Mobile エミュレーターで動作確認します。
f:id:yagisou:20151216020528p:plain
デバッグターゲットで「Mobile Emulator xxx」と表示されていますので、新しいOSビルドのエミュレーターから1つ選択して実行します。
・・・エラーダイアログがでて、起動できません。
「The emulator is "unable to connect to the device operating system: couldnt set up the udp port"」と言われています。
調べたところ、こちらに解決方法が書いてありました。
Hyper-Vマネージャーから、仮想スイッチを再作成したところ、無事に起動しました。
アプリも動いています。
f:id:yagisou:20151216021441p:plain
横に回転してみたところ、レイアウトが崩れてしまいました、、、
f:id:yagisou:20151216022615p:plain
が、標準アプリの電卓も同じ状況なので、エミュレーター側の問題???
f:id:yagisou:20151216022655p:plain
疑問はありますが、目的のストア公開に向けて先を急ぎます。

パッケージ作成

[プロジェクト]->[ストア]->[アプリパッケージの作成]から、ストア申請用のパッケージを作成します。
f:id:yagisou:20151216023552p:plain
バージョンは、最初なので1.0.0.0でと思っていたのですが、「Windows10用とWindows8.x用でバージョンの大小が入れ替わらないように、1.1.0.0からがいいよ」的なことを言われたので、1.1.0.0としました。
f:id:yagisou:20151216023652p:plain
問題なくパッケージの作成が完了しました。
f:id:yagisou:20151216023712p:plain

アプリ認定キットの実行

パッケージの作成が完了した画面に「Windowsアプリ認定キットを起動する」のボタンがあります。
ストアに申請する前に、公開に必要な要件を満たしているかチェックができますので、必ず実施します。
テスト項目は、すべて選択します。
f:id:yagisou:20151216024607p:plain
数分程度でチェックが完了します。無事合格です。
f:id:yagisou:20151216024628p:plain
例えばアプリアイコンがデフォルトのままだったりすると、ここで不合格になりますので、詳細を確認して対応します。

これで申請の準備が整いましたので、いよいよ申請します。

初めてのUWPアプリ開発 ~6.機能の実装~

プロジェクトを作成したら、いよいよ機能を実装していきます。

・・・できあがりがこちら

f:id:yagisou:20151216002742p:plain

ほとんどがサンプルコードの寄せ集めですので、説明するのも申し訳ないのですが、ポイントだけ簡単に。

おえかき機能

UWPハンズオン資料の「06B Inking」を参考にしています。
一旦、色を変えられるだけにして、線の太さの変更などは後日のバージョンアップ対応にまわします。

コルタナさんと連携した音声操作

同じ資料の「06A Speech Commands」を参考にしています。
ここではアプリ起動だけでなく、色の変更や線の削除も音声操作できるようにしました。

その他UIコントロール

上下のコマンドバーは、CommandBarとAppbarButtonコントロールを使っています。
基本的なUIコントロールの使い方は、Windows-universal-samplesの「XamlUIBasics」にサンプルコードがあります。

アプリアイコン作成

デフォルトのアプリアイコンのままではストアの審査に通りませんので(UWPハンズオンでも言われました)、オリジナルのアイコンを作成する必要があります。
デザインは1つでよいのですが、サイズや解像度違いで最低でも7枚の画像が必要です(プロジェクトのAssetsフォルダーの中の7枚です)。

さくっと済ませたいのに面倒くさいという私(たち)のために、エバンジェリストの高橋忍さんが「UWP Logo Maker」という素敵なツールを用意してくださっていますので、こちらを使わせていただきます。

UWP Logo Maker ver.1.0 - 高橋 忍のブログ - Site Home - MSDN Blogs

Default Onlyのチェックが入っていれば、最初からAssetsにある7枚のアプリアイコンが生成されます(1枚だけリネームが必要だったかな?)。

ということで、自分で作り込んだ機能はほとんどありませんが、初めてのUWPアプリ開発はストア公開までの作業を把握することが目的ですので、なにはともあれストア公開に向かいます。

初めてのUWPアプリ開発 ~5.プロジェクトの作成~

プロジェクトを作成して、ストアと関連付けるところまで進めます。
UWPハンズオン資料の「01A Hello UWP World」を参考にします。

ソース管理の方法を決める

プロジェクトを作成する前に、ソースコードのバージョン管理の方法を決めます。
いろいろやり方はありますが、私はVisual Studio上でGitを使う方法にしました(使ったことなかったけれど、気にはなっていたので)。
手順は以下のサイトを参考にしています。

Visual Studio Team Service(旧 Visual Studio Online)を使ったリモートリポジトリの手順が書かれていますが、個人で開発するだけなので、ローカルリポジトリを使用します。

プロジェクトの作成

Visual Studio 2015を起動し、[ファイル]->[新規作成]->[プロジェクト]を選択します。
「新しいプロジェクト」画面で、[インストール済み]->[テンプレート]->[Visual C#]->[Windows]->[ユニバーサル]と展開し、「空白のアプリ(ユニバーサルWindows)」を選択します。
ここで「空白のアプリ(ユニバーサルWindows)」が表示されていない場合は、「ユニバーサルWindowsアプリ開発ツール」がインストールされていませんので、インストールします。*1

f:id:yagisou:20151210015807p:plain
名前(プロジェクト名)は「PictureDrawing」としました。
場所はソース管理用に用意したローカルリポジトリのパスを指定し、「ソース管理に追加」のチェックをONにします。
「OK」を押すとプロジェクトが作成されます。

ストアと関連付ける

[プロジェクト]->[ストア]->[アプリケーションをストアと関連付ける]を選択します。*2

f:id:yagisou:20151215014546p:plain
ダイアログが表示されたらウィザードに従って進めます。

f:id:yagisou:20151215015401p:plain
既に予約済みのアプリ名が表示されているはずですので、選択して関連付けを行います。
ここから新しいアプリ名の予約もできるみたいです。

ビルドして実行

ストアとの関連付けが終わったら、ビルドして実行します。
[デバッグ]->[デバッグの開始]で、ビルドと配置が行われ、アプリが起動します。*3
ウィンドウタイトルに、予約済みのアプリ名が表示されていれば、OKです。

*1:Windows8.x向けのストアアプリでは、「ハブ アプリ」のようなテンプレートがいくつか用意されていましたが、UWPアプリ向けのテンプレートは「空白のアプリ」だけです。

*2:この時、ソリューションエクスプローラーでソリューションのルートが選択されていると、項目が無効表示になってしまいます。

*3:「F5」キーを押しても実行してもOKです。

初めてのUWPアプリ開発 ~4.アプリ名の予約~

ストアにアプリを公開する場合、まず初めにやるべきことは、アプリ名の予約です。
開発を始めてからアプリ名の予約をすると、使用できなかった場合に右往左往します。

アプリ名の予約

Windows デベロッパー センターのダッシュボードにサインインします。
「新しいアプリの作成」ボタンをクリックして、アプリ名を予約する画面を開きます。
f:id:yagisou:20151204003044p:plain
既に予約されているアプリ名を入力した場合は、拒否されます。
使用可能なアプリ名を入力して、「アプリ名を予約」ボタンを押せば予約完了です。

アプリの概要を考える

最初にアプリ名を予約しなければならないため、この時点で作成するアプリの大まかな概要を決めておく必要があります。
最初に作るアプリは、公開までのステップを確認することが目的なので、UWPハンズオンの成果を活かして以下の通りに決めました。

アプリ名

「おえかきさん」

アプリコンセプト

子供が簡単に使える、シンプルなお絵かきアプリ

アプリ概要
  • InkCanvasを使ったお絵かきアプリ
  • ペンの色や太さや形状が変更できる
  • 描いた絵の保存、読み込みができる
  • 任意の画像をモノクロ輪郭抽出で読み込む「ぬり絵」機能
  • コルタナさんと連携した音声認識で、アプリ起動やアプリ操作ができる

だいたいこんな感じで、さっそくアプリの作成に取りかかります。

初めてのUWPアプリ開発 ~3.開発者アカウントの登録~

UWPアプリを開発してストアに公開するためには、2つのアカウント登録が必要です。

開発したアプリをストアへの公開をしないのであれば、Microsoftアカウントの登録だけでOKです。

Microsoftアカウントの登録

Microsoftアカウントのページから登録します。

ホーム|Microsoft アカウント

登録は無料です。
Microsoftが提供するサービスを利用するためのメールアドレス形式のアカウントです。
普段使用しているメールアドレスで登録することもできますし、新規に作成することもできます。

以降、Microsoftのサインインを求められた際は、このMicrosoftアカウントを使用します。

ちなみに私がMicrosoftアカウントにしているメールアドレス、ドメインが「hotmail.com」なんですけど、もう新規には作成できないんですね。

開発者アカウントの登録

Windows デベロッパー センターにアクセスし、「ダッシュボード」から登録します。

Windows デベロッパー センター

登録は有料です。課金が発生するのは初回登録時のみです。更新料等はかかりません。

Windows デベロッパー センターにアクセスし、「ダッシュボード」をクリックします。
サインインを求められたら、Microsoftアカウントを入力します。

f:id:yagisou:20151203022444p:plain
「アカウント情報」画面で、アカウントの国/地域に「日本」を選択します。
アカウントの種類は「個人用」を選択します。個人用アカウントの登録料は、1,847円です。

f:id:yagisou:20151203023345p:plain
選択すると、その下に「発行者表示名」「連絡先情報」の入力項目が表示されます。
発行者表示名は、ストアにアプリを公開した際に表示される名称です。
必要な情報を入力して、「次へ」を選択します。
(ページ移動時にMicrosoftアカウントのサインインを求められたら入力してください。)

f:id:yagisou:20151203024122p:plain
「入金」画面で支払方法を選択します。
「プロモーションコード」を持っている場合は、ここで入力すると登録料の支払いが不要です。
私は、プロモーションコードを持っていませんので、クレジットカードでの支払いを選択しました。

f:id:yagisou:20151203025002p:plain
「確認」画面で利用規約に同意して「完了」をクリックします。

f:id:yagisou:20151203025410p:plain
開発者アカウントの登録が完了しました。
これでダッシュボードが利用可能となります。