5
7

More than 5 years have passed since last update.

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

Posted at

なんでやってみたの?

この記事を読んで、これからの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

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

環境

MacOSX ElCapitan
Windows10 on ParallelsDesktop
VisualStudio2015 Community

筆者の経験

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

開発環境準備

まずはSDKをインストール

VisualStudio2015 CommunityはインストールしただけではUWPアプリケーションの開発環境はないのでSDKをインストールします。
(Proとかは最初からはいってるんでしょうか?)
VisualStudioのプロジェクトを選択して
キャプチャ.PNG

テンプレートのC#→Windows→ユニバーサルからユニバーサルWindowsツールをインストールを選択します。
キャプチャ2.PNG

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

キャプチャ3.PNG

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

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

キャプチャ4.PNG

よっしゃ終ったで工藤!!
キャプチャ5.PNG

再びVisualStudio2015を起動してプロジェクトを開けば・・・・
おめでとう!UWPアプリの開発環境が完成した!
キャプチャ6.PNG

初めてのUWPプログラムと配置エラー

初めてのプログラムはお約束のHelloWorldを作ってみます。

とりあえずテンプレートから空白のアプリを選択してプロジェクトを新規作成すると、こんなん出ました。
キャプチャ7.PNG

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




とりあえず起動してちょっと対象アーキテクチャを見てみましょう。
キャプチャ8.PNG

ターゲットプラットフォームにARMがあるのがユニバーサルを感じさせます。
32bitにもまだまだ対応していますね。
キャプチャ9.PNG

そして何も考えないでいきなりビルドしてみると早速怒られました。

キャプチャ10.PNG
なんか変な日本語?ですが、配置に関するエラーのようです。

試しに別の場所にプロジェクトファイルを保存しても配置できませんでした・・・

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

Parallelsの共有設定を変更

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

再ビルドしてみると、無事ビルドが完了しました。
キャプ2.PNG
起動も問題ななくできました。

なぜエラーが発生したのか?

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

以前、C#でWindowsFormアプリケーションを作った時は大丈夫でしたが、
UWPアプリはデバッグでシュミレータ、デバイスを選択できるため、
この辺の関係でネットワークドライブに出力するような設定は気まずいのでしょうか?
スクリーンショット 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

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

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

標準 横長 縦長
スクリーンショット 2016-04-12 21.21.17.png スクリーンショット 2016-04-12 21.21.31.png スクリーンショット 2016-04-12 21.21.52.png

上のようにローカルウィンドウだけではなく、シュミレータでデバッグすることもできます。
スクリーンショット 2016-04-13 20.00.10.png

先ほど出した、ビルドターゲットでシュミレータを選択してデバッグ実行をしてみると、
スクリーンショット 2016-04-13 20.00.55.png
こういった画面が表示され、様々なタッチ操作をエミュレートしたデバッグが可能です。
Hiper-V環境があるWindows10Proなら、WindowsPhoneエミュレータでのデバッグもできるので、
こちらはどちらかと言うとタブレットのデバッグがメインになりそうです。


まとめ

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

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

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

気になったこと

  • 自分は左側にソリューションエクスプローラーを配置して、右側がコード、右下が出力etc。。。というスタイルが好みなのですが、 フォームデザイナを起動するとXAMLエディタがとても狭い・・・・ウマイ配置はないものだろうか! XAMLが少ししか見えないので、ちょっとやりにくいです・・・ スクリーンショット 2016-04-13 20.19.16.png

UWPでは、XAMLエディタでコントロールのイベントのコーディングが行えるので便利なのですが、この狭さでちょっとやりにくいです。
ここはあくまで簡易的なコーディングにしておくべきかなぁ。
スクリーンショット 2016-04-13 20.22.50.png

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5
7