UWPアプリをParallels上のWin10で開発してみた話


##なんでやってみたの？
この記事を読んで、これからのWindowsアプリはUWPが基本になるかもなぁって思ったので。
http://pc.watch.impress.co.jp/docs/news/event/20160411_752422.html

##対象
自分のようにこれからはUWPだ！でもどうやって開発するのかな？と思った人

##そもそもUWPって何よ？
詳しい説明は公式を。
https://msdn.microsoft.com/ja-jp/library/dn975273.aspx

ざっくばらんに説明すると、
「１つのソースコードでWindows10が搭載されたいろんなデバイスでレスポンシブなアプリケーションが作れるよ！やったねたえちゃん！」
というところでしょうか。
Microsoftの今後の方針や、これからの開発者はどうなるのか？を考えながら書いていきます。

##環境
MacOSX ElCapitan
Windows10 on ParallelsDesktop
VisualStudio2015 Community

##筆者の経験
１年前までC++でパッケージ開発、現在はユーザー企業で社内Sler。メインはVBA。
現在、プライベートでRubyOnRails勉強中。
C#経験はは商用レベルだと殆ど無し
XAML？なにそれ美味しいの？

##開発環境準備
###まずはSDKをインストール
VisualStudio2015 CommunityはインストールしただけではUWPアプリケーションの開発環境はないのでSDKをインストールします。
（Proとかは最初からはいってるんでしょうか？）
VisualStudioのプロジェクトを選択して
![キャプチャ.PNG](https://qiita-image-store.s3.amazonaws.com/0/58546/420b6f7c-c82b-b3fd-3ab3-b6d88d8aae4b.png "キャプチャ.PNG")

テンプレートのC#→Windows→ユニバーサルからユニバーサルWindowsツールをインストールを選択します。
![キャプチャ2.PNG](https://qiita-image-store.s3.amazonaws.com/0/58546/e5c31564-1765-6477-78c1-e4ddc97870d1.png "キャプチャ2.PNG")

インストールする機能選択ダイアログでユニバーサルWindows開発ツールをチェックしてインストール開始。


![キャプチャ3.PNG](https://qiita-image-store.s3.amazonaws.com/0/58546/632a6e69-772f-5283-d66e-585284b22676.png "キャプチャ3.PNG")

###ここでVisualStudioを終了させるのを忘れずに！

ダラダラインストールが終わるのを待ちます。割と時間かかります。

![キャプチャ4.PNG](https://qiita-image-store.s3.amazonaws.com/0/58546/70320292-f9de-d005-2ef3-d1140c9d1765.png "キャプチャ4.PNG")

よっしゃ終ったで工藤！!
![キャプチャ5.PNG](https://qiita-image-store.s3.amazonaws.com/0/58546/cec3abce-813d-3a9e-eac8-db14a6914358.png "キャプチャ5.PNG")

再びVisualStudio2015を起動してプロジェクトを開けば・・・・
おめでとう！UWPアプリの開発環境が完成した！
![キャプチャ6.PNG](https://qiita-image-store.s3.amazonaws.com/0/58546/d668054e-4e79-2243-166b-6302cc44d303.png "キャプチャ6.PNG")



##初めてのUWPプログラムと配置エラー
初めてのプログラムはお約束のHelloWorldを作ってみます。

とりあえずテンプレートから空白のアプリを選択してプロジェクトを新規作成すると、こんなん出ました。
![キャプチャ7.PNG](https://qiita-image-store.s3.amazonaws.com/0/58546/6403be38-14af-0972-2050-4e0dd87ad593.png "キャプチャ7.PNG")

最小プラットフォームと最大プラットフォームが選択できるようです。
ターゲットのビルドバージョンより新しいビルドバージョンでは動かなくなるのでしょうか？
それとも単にアプリストアで表示ためだけなんでしょうか。
高品質のアプリをリリースするためには最低限MinimumVersionのWindows10環境とTargetVersionのWindows10環境の両方でテストが必要になりそうです。

<br /><br />
とりあえず起動してちょっと対象アーキテクチャを見てみましょう。
![キャプチャ8.PNG](https://qiita-image-store.s3.amazonaws.com/0/58546/828052c0-a28c-a37c-9db0-47c4a13c45ce.png "キャプチャ8.PNG")

ターゲットプラットフォームにARMがあるのがユニバーサルを感じさせます。
32bitにもまだまだ対応していますね。
![キャプチャ9.PNG](https://qiita-image-store.s3.amazonaws.com/0/58546/93350f94-e6a0-da61-7672-801f6de80d88.png "キャプチャ9.PNG")

###そして何も考えないでいきなりビルドしてみると早速怒られました。
![キャプチャ10.PNG](https://qiita-image-store.s3.amazonaws.com/0/58546/0eaad6d3-9b90-0ca7-0cba-7a95e864b309.png "キャプチャ10.PNG")
なんか変な日本語？ですが、配置に関するエラーのようです。
###試しに別の場所にプロジェクトファイルを保存しても配置できませんでした・・・


エラーを見ると、「ファイルがネットワーク共有にあるため、AppxManifest.xmlからの登録欲求を拒否しています。ローカルにファイルを配置してください。」　とあります。

##Parallelsの共有設定を変更
筆者はすべてのディスクを共有フォルダにする設定にしていたので、一度Windows10の仮想環境をシャットダウンしてホームフォルダのみ共有する設定に変更後、Windows10を再起動しました。

再ビルドしてみると、無事ビルドが完了しました。
![キャプ2.PNG](https://qiita-image-store.s3.amazonaws.com/0/58546/57fef440-b0f7-29f1-3ecb-2d9218c659e5.png "キャプ2.PNG")
起動も問題ななくできました。

###なぜエラーが発生したのか？
ちょっとここで疑問になったので、ビルド設定を変えて、ネットワークドライブに出力する設定にしてみると、
再び配置エラーが発生しました。
逆にソリューションがネットワークドライブにあったとしても、ビルド出力先がローカルであれば問題ないようです。

以前、C＃でWindowsFormアプリケーションを作った時は大丈夫でしたが、
UWPアプリはデバッグでシュミレータ、デバイスを選択できるため、
この辺の関係でネットワークドライブに出力するような設定は気まずいのでしょうか？
![スクリーンショット 2016-04-12 20.49.39.png](https://qiita-image-store.s3.amazonaws.com/0/58546/6e72de34-c754-c173-1b8c-f5c759685fa3.png "スクリーンショット 2016-04-12 20.49.39.png")

##HelloWorldの作成
ビルドできるようになったので、まずMainPage.xamlを開いてみます。
XMALデザイナーが開かれますが、注目は左上。画面の大きさが選択できるんです。
IoTやXBOXがあるところがマルチデバイス！って感じですね。
さすがに84"Surface Hubは解像度が大きく、3840x2160という大きさです。
フルサイズでデバッグできるモニタが限られますね・・・（4Kモニタなら大丈夫そうですね)

![スクリーンショット 2016-04-12 21.03.51.png](https://qiita-image-store.s3.amazonaws.com/0/58546/6a9fae56-e575-af19-2784-a1c17d23f7b9.png "スクリーンショット 2016-04-12 21.03.51.png")

このサイトを参考に、写経します。
http://www.atmarkit.co.jp/ait/articles/1509/29/news020.html

細かい説明は上のサイトを見ていただくとして、出来上がったものを色々いじってみます。
先進的なのはWebページのように、ウィンドウの大きさを変えても見た目が崩れない、ということですね。
コレがWindowsFormだと右に下にスクロールバーが出たりしますし、小さめなダイアログは拡大・縮小ができないようになってたりします。

|標準|横長|縦長|
|:--:|:--:|:--:|
|![スクリーンショット 2016-04-12 21.21.17.png](https://qiita-image-store.s3.amazonaws.com/0/58546/37a9e9ff-7970-1bd2-b956-0af5f2ddbec3.png "スクリーンショット 2016-04-12 21.21.17.png")|![スクリーンショット 2016-04-12 21.21.31.png](https://qiita-image-store.s3.amazonaws.com/0/58546/8cb4e35f-3e7a-0b45-029a-9523c9045053.png "スクリーンショット 2016-04-12 21.21.31.png")|![スクリーンショット 2016-04-12 21.21.52.png](https://qiita-image-store.s3.amazonaws.com/0/58546/321bad8d-4f01-7d9a-7244-24e1632663e9.png "スクリーンショット 2016-04-12 21.21.52.png")|


上のようにローカルウィンドウだけではなく、シュミレータでデバッグすることもできます。
![スクリーンショット 2016-04-13 20.00.10.png](https://qiita-image-store.s3.amazonaws.com/0/58546/b928964f-2405-08d5-bbea-ea78a527c426.png "スクリーンショット 2016-04-13 20.00.10.png")

先ほど出した、ビルドターゲットでシュミレータを選択してデバッグ実行をしてみると、
![スクリーンショット 2016-04-13 20.00.55.png](https://qiita-image-store.s3.amazonaws.com/0/58546/6a37c283-4583-9fd6-31ae-bab500fd617e.png "スクリーンショット 2016-04-13 20.00.55.png")
こういった画面が表示され、様々なタッチ操作をエミュレートしたデバッグが可能です。
Hiper-V環境があるWindows10Proなら、WindowsPhoneエミュレータでのデバッグもできるので、
こちらはどちらかと言うとタブレットのデバッグがメインになりそうです。


<br />
##まとめ
XAMLはHTMLの感覚で書けるあたり、UIはWeb開発の感覚に近いものを感じます。
Webデザイナが今後UWPアプリのデザインも行う時代になるんでしょうか。

逆に、今までWindowsフォームをデザイン屋に頼まないで自分で作っていた開発者はこういったレスポンシブなデザインの知識を勉強していく必要が出てきそうだなぁと思いました。
私も例に漏れず、自分でフォームを実装していたので、今後、レスポンシブなデザインを勉強する必要性が出てきそうです。

UWPはこれからのプラットフォームですが、大きい可能性がありそうなので、どんどん慣れて行きたいですね。
次は簡単なアプリを作ってみて、ストアで公開してみようと思います。


##気になったこと
* 自分は左側にソリューションエクスプローラーを配置して、右側がコード、右下が出力etc。。。というスタイルが好みなのですが、
フォームデザイナを起動するとXAMLエディタがとても狭い・・・・ウマイ配置はないものだろうか！
XAMLが少ししか見えないので、ちょっとやりにくいです・・・
![スクリーンショット 2016-04-13 20.19.16.png](https://qiita-image-store.s3.amazonaws.com/0/58546/eefe719d-4556-4abc-2dd4-0e0b49c31eaf.png "スクリーンショット 2016-04-13 20.19.16.png")

UWPでは、XAMLエディタでコントロールのイベントのコーディングが行えるので便利なのですが、この狭さでちょっとやりにくいです。
ここはあくまで簡易的なコーディングにしておくべきかなぁ。
![スクリーンショット 2016-04-13 20.22.50.png](https://qiita-image-store.s3.amazonaws.com/0/58546/0e33e25b-459d-8d59-7513-0c1788e11d74.png "スクリーンショット 2016-04-13 20.22.50.png")

* レスポンシブなデザインにすると、今までのWindowsFormで使っていたツールバーを使うようなデザインは厳しそうですね。
（ツールバーそのものがタッチ操作には向いてないと思いますし、モバイルアプリに近いデザインが必要になるでしょう）