初めての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デバイスで動作する」ということでワクワクしたのとやる気になったのが、約半年前。
ローカル環境で作ったり動かしたり、de:codeやUWPハンズオンに参加したりしていましたが、やっぱりアプリ公開したり自分から情報発信していかないとといけないなと思い、動き始めた最初がこのブログです。
まずはAdvent Calendarに書くネタを作ろうと、UWPアプリ開発の環境構築~ストア公開までを一通りこなしましたので、ここではそのまとめと感想を書きたいと思います。
UWPアプリ開発の流れ
全8回にまとめました。UWPアプリ開発に興味のある方、お時間のある方はどうぞ。
感想
ストア申請~公開までが早い
提出したアプリがシンプルで機能が少ないという点もあるかもしれませんが、1回の提出で審査が通り、申請した翌日には公開されました。
アプリの種類や機能によってはもう少し時間がかかるのかもしれません。
(まだ、提出されるアプリ自体がそれほど多くないということも?)
レスポンシブUIは大変
「1つのUWPアプリがすべてのWindows 10デバイスで動作する」というメリットと引き換えに、すべてのWindows 10 デバイスで動作させるための手間が、アプリ開発者側にかかってくるという面があります。
その1つがレスポンシブUIですが、小さい画面~大きい画面、縦長/横長の各画面サイズに対応するデザインやレイアウトを考えるのはやはり大変です。
チーム開発であればデザイナーがいると心強いですね。
UWPハンズオンでも言われていましたが、デザイン、レイアウトに困ったときに参考にすべきは、Windows 10標準搭載のアプリ(メール、カレンダー、ストア等)とのことです。
最後に
今年は、Windows 10 Mobileが盛り上がった年だったと思います。
一方ではAndroidアプリをWindows 10に移植するProject Astoriaが中断か?なんて話もあったり。
ぜひ来年もWindows 10 Mobileが盛り上がる1年であることを願っています。
私もがんばります。
明日は@x67x6fx74x6fさんです。
初めてのUWPアプリ開発 ~8.ストア申請~
Windowsデベロッパーセンターのダッシュボードから申請します。
サインインしたら、申請するアプリを選択して、「提出を開始する」ボタンを押します。*1
画面内の5項目を設定すると、「ストアに提出」ボタンが押せるようになります。
価格と使用可能状況
基本価格
リストから「無料」を選択します。
無料のお試し版
リストから「無料評価版はありません」を選択します。
市場と特別価格
242のマーケットに公開できますが、日本語仕様で作りましたので、日本だけ選択します。
販売価格
期間限定の販売価格を設定できますが、未設定にします。
分布と認知度
「誰でもストア内でお客様のアプリを検索できます」を選択します。
Windows10デバイスファミリ
アプリを公開するデバイスファミリを選択できます。
現状は「デスクトップ」と「モバイル」の2つだけですが、UWPアプリなので両方チェックします。
組織のライセンス
ビジネスストア向けの設定ですかね。
オンラインのボリュームライセンスで購入できるほうにチェックしました。
公開日
「認定後すぐにこのアプリを公開する」を選択しました。
ここまでで1項目目の設定を保存します。
アプリのプロパティ
カテゴリとサブカテゴリ
ストアで公開するカテゴリを選択します。
ストアでおえかき系のアプリを検索したところ「教育」に分類されていましたので、「教育」とします。
サブカテゴリは未設定です。
ストアの年齢区分
特に年齢制限はありませんので「3+」とします。
その他の年齢区分
特に審査を受けるようなアプリではないので、未設定とします。
ハードウェアの基本設定
必須とするハードウェアはありませんので、未設定とします。
アプリの申告
内容を確認したうえでチェックを設定します。
ここまでで2項目目の設定を保存します。
パッケージ
既に作成済みのアプリパッケージをここでアップロードします。
ここまでで3項目目の設定を保存します。
説明
ここでストアに表示される情報を設定します。
既に公開されているアプリの書き方を参考にしながら以下の項目を設定していきます。
何を書けばよいかわからないところは未設定でも大丈夫です。
スクリーンショットは最低1枚あれば大丈夫です。
ここまでで4項目目の設定を保存します。
認定の注意書き
アプリを審査するテスターに向けた情報を記載します。
特に複雑なアプリではないのでこんな感じで。
ここまでで最後の項目の設定を保存します。
ストアに提出
「ストアに提出」ボタンがおせるようになっていますので、押して提出完了です!
申請処理の進捗状況が確認できます。
そして・・・
公開されました!
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 エミュレーターで動作確認します。
デバッグターゲットで「Mobile Emulator xxx」と表示されていますので、新しいOSビルドのエミュレーターから1つ選択して実行します。
・・・エラーダイアログがでて、起動できません。
「The emulator is "unable to connect to the device operating system: couldnt set up the udp port"」と言われています。
調べたところ、こちらに解決方法が書いてありました。
Hyper-Vマネージャーから、仮想スイッチを再作成したところ、無事に起動しました。
アプリも動いています。
横に回転してみたところ、レイアウトが崩れてしまいました、、、
が、標準アプリの電卓も同じ状況なので、エミュレーター側の問題???
疑問はありますが、目的のストア公開に向けて先を急ぎます。
パッケージ作成
[プロジェクト]->[ストア]->[アプリパッケージの作成]から、ストア申請用のパッケージを作成します。
バージョンは、最初なので1.0.0.0でと思っていたのですが、「Windows10用とWindows8.x用でバージョンの大小が入れ替わらないように、1.1.0.0からがいいよ」的なことを言われたので、1.1.0.0としました。
問題なくパッケージの作成が完了しました。
アプリ認定キットの実行
パッケージの作成が完了した画面に「Windowsアプリ認定キットを起動する」のボタンがあります。
ストアに申請する前に、公開に必要な要件を満たしているかチェックができますので、必ず実施します。
テスト項目は、すべて選択します。
数分程度でチェックが完了します。無事合格です。
例えばアプリアイコンがデフォルトのままだったりすると、ここで不合格になりますので、詳細を確認して対応します。
これで申請の準備が整いましたので、いよいよ申請します。
初めてのUWPアプリ開発 ~6.機能の実装~
プロジェクトを作成したら、いよいよ機能を実装していきます。
・・・できあがりがこちら
ほとんどがサンプルコードの寄せ集めですので、説明するのも申し訳ないのですが、ポイントだけ簡単に。
おえかき機能
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
名前(プロジェクト名)は「PictureDrawing」としました。
場所はソース管理用に用意したローカルリポジトリのパスを指定し、「ソース管理に追加」のチェックをONにします。
「OK」を押すとプロジェクトが作成されます。
ストアと関連付ける
[プロジェクト]->[ストア]->[アプリケーションをストアと関連付ける]を選択します。*2
ダイアログが表示されたらウィザードに従って進めます。
既に予約済みのアプリ名が表示されているはずですので、選択して関連付けを行います。
ここから新しいアプリ名の予約もできるみたいです。
初めてのUWPアプリ開発 ~4.アプリ名の予約~
ストアにアプリを公開する場合、まず初めにやるべきことは、アプリ名の予約です。
開発を始めてからアプリ名の予約をすると、使用できなかった場合に右往左往します。
アプリ名の予約
Windows デベロッパー センターのダッシュボードにサインインします。
「新しいアプリの作成」ボタンをクリックして、アプリ名を予約する画面を開きます。
既に予約されているアプリ名を入力した場合は、拒否されます。
使用可能なアプリ名を入力して、「アプリ名を予約」ボタンを押せば予約完了です。
アプリの概要を考える
最初にアプリ名を予約しなければならないため、この時点で作成するアプリの大まかな概要を決めておく必要があります。
最初に作るアプリは、公開までのステップを確認することが目的なので、UWPハンズオンの成果を活かして以下の通りに決めました。
アプリ名
「おえかきさん」
アプリコンセプト
子供が簡単に使える、シンプルなお絵かきアプリ
初めてのUWPアプリ開発 ~3.開発者アカウントの登録~
UWPアプリを開発してストアに公開するためには、2つのアカウント登録が必要です。
開発したアプリをストアへの公開をしないのであれば、Microsoftアカウントの登録だけでOKです。
Microsoftアカウントの登録
Microsoftアカウントのページから登録します。
ホーム|Microsoft アカウント |
登録は無料です。
Microsoftが提供するサービスを利用するためのメールアドレス形式のアカウントです。
普段使用しているメールアドレスで登録することもできますし、新規に作成することもできます。
以降、Microsoftのサインインを求められた際は、このMicrosoftアカウントを使用します。
ちなみに私がMicrosoftアカウントにしているメールアドレス、ドメインが「hotmail.com」なんですけど、もう新規には作成できないんですね。
開発者アカウントの登録
Windows デベロッパー センターにアクセスし、「ダッシュボード」から登録します。
Windows デベロッパー センター |
登録は有料です。課金が発生するのは初回登録時のみです。更新料等はかかりません。
Windows デベロッパー センターにアクセスし、「ダッシュボード」をクリックします。
サインインを求められたら、Microsoftアカウントを入力します。
「アカウント情報」画面で、アカウントの国/地域に「日本」を選択します。
アカウントの種類は「個人用」を選択します。個人用アカウントの登録料は、1,847円です。
選択すると、その下に「発行者表示名」「連絡先情報」の入力項目が表示されます。
発行者表示名は、ストアにアプリを公開した際に表示される名称です。
必要な情報を入力して、「次へ」を選択します。
(ページ移動時にMicrosoftアカウントのサインインを求められたら入力してください。)
「入金」画面で支払方法を選択します。
「プロモーションコード」を持っている場合は、ここで入力すると登録料の支払いが不要です。
私は、プロモーションコードを持っていませんので、クレジットカードでの支払いを選択しました。
「確認」画面で利用規約に同意して「完了」をクリックします。
開発者アカウントの登録が完了しました。
これでダッシュボードが利用可能となります。