きなこもち.net

.NET Framework × UiPath,Orchestrator × Azure × AWS × Angularなどの忘備録

UWP × Windows Template Studio × UWP開発のスタートダッシュ

この記事の目的

この記事では、
Universal Windows Platformアプリのすごさを実感する。
Windows Template Studioの導入ができるようになる。

ことを目的としています。

本題

  1. デスクトップアプリ開発を取り巻く環境
  2. Windows Template Studioを導入するための条件は?
  3. Windows Template Studioをインストールする手順は?
  4. Windows Template Studioの使い方は?
  5. どんなものが出来上がるの?
  6. 今後やっていくことメモ
  7. 参考
■デスクトップアプリ開発を取り巻く環境

Windowsでクラサバアプリを開発するとなると以下の3形態の開発が候補になります。
Windows Form
WPFWindows Presentation Foundation)
・UWP
それぞれについてMSDNマガジンで言及されていた特徴を簡単にまとめてみます。

Windows Form
 ・すぐに廃止されることはない。
 ・三人の中で一番古い(2001年に登場)。
 ・最新のグラフィックスカードに対応していない。
 ・追加コンポーネントを利用しないと見た目が古い。
 ・Microsoft Storeを利用できない。

Windows Presentation Foundation
 ・すぐに廃止されることはない。
 ・Window Formの後に登場。
 ・まだ更新されている技術。
 ・Microsoft Storeを利用できない。

Universal Windows Platform
 ・誕生したばかり。
 ・Windows Form、WPFのようなデメリットがない。
 ・出始めの時期にあった制約(DBアクセスができないなど)がなくなりつつある。
 ・RasberryPiをはじめとしていろいろなデバイスで実行可能。

今回の記事では、WindowsForm、WPF、UWPのどれを選択してデスクトップアプリを開発するかについての議論が目的ではないので、深く追っていくことはしません。
ただ、それぞれの違いを調べている中で見つけた掲示板で分かりやすい議論をしているものがあったので、忘備録としてリンクを残しておきます。
https://teratail.com/questions/77077

まだ、UWPでの業務アプリ開発という点では普及が進んでいないようですね。。。
そんな中ですが、UWP開発をよりスムーズ行うために公開されているWindows Template Studioについて見ていきます。
Windows Template StudioはVisual Stuidioの拡張機能として提供され、
プロジェクトの種類 (ハンバーガー メニューを備えたナビゲーション ウィンドウ、空のプロジェクト、またはピボットとタブ)、Model-View-ViewModel (MVVM) パターン用の MVVM フレームワーク、プロジェクトに含めるページ、および組み込むことを考えている Windows 10 機能を選ぶことができます。
もろこみのテンプレートを作成することができる拡張機能というところでしょうか。
今回は、このWindows Template Studioをインストールして、プロジェクトを作るところまでを
MSDNマガジンを参考にしながらすすめていきます。

Windows Template Studioを導入するための条件は?

Windwos Template Studioの導入自体には、特に条件がないようです。
UWPの新機能が使えるようにするために、Windows 10をFall Creators Updateにするのが良いと思います。
また、Visual Stuidioのバージョンも.NET Standard 2.0がサポートされているUpdate4移行に更新しておくのが良いと思います。

Windows Template Studioをインストールする手順は?

Step1)Visual Stuidioを起動します

Step2)[ツール]、[拡張機能と更新プログラム] の順に移動します
f:id:kinakomotitti:20180225155444p:plain

Step3)[オンライン]を選択し、検索ボックスに「Windows Template Studio」を入力して検索
f:id:kinakomotitti:20180225155450p:plain
※図はすでにインストールした後のものになります。
あとは、インストーラーの指示に従い処理を進めていくことで、インストールが完了します。

Windows Template Studioの使い方は?

Step1)新しいプロジェクトを作成
f:id:kinakomotitti:20180225155458p:plain
Step2)Windows Template Studioを選択
Step3)プロジェクトの種類と、farmeworkを選択
f:id:kinakomotitti:20180225155505p:plain
いきなりハードルが高いです。
frameworkを選択することができますが、それぞれがどうなっているのかわからないです。
MVVMってひところでいっても、3つも選択肢があるようです。
今回は、まだ序盤なので、簡単なアプリケーションを作るのに最適な従来型モデル「コードビハインド」を選択します。
Step4)ページの選択
f:id:kinakomotitti:20180225155518p:plain
これまたいろいろありますね。
今回は、どんなものが作れるのか知りたいので、Blank以外全部選択します。
f:id:kinakomotitti:20180225155526p:plain
追加ボタンを押下したら、名前の入力ができるようになります。
f:id:kinakomotitti:20180225155531p:plain
ページの名前を入力したら、確認ボタンを押下することで、追加が完了します。
Step5)機能の選択
f:id:kinakomotitti:20180225155541p:plain
f:id:kinakomotitti:20180225155607p:plain

アプリケーションの起動時方法に関する機能から、LiveTile機能、Toast通知に関する機能まで追加することができます。
これは感動ですね。
Windows Store App時代に、LiveTileの実装で苦労しましたが、機能を選択するだけで追加できるようになるとは思いもしませんでした。
他にもトースト通知など、重要な機能が簡単に実装できるようになっているようですね。
早く出来上がったテンプレートの中身を見てみたいです!
今回は、Toast Notifications、Live Tileだけ選択します。
Step6)作成ボタンを押下
作成ボタンを押下することで、Step5までに選択してきた機能、ページを含んだアプリケーションがテンプレートとして作成されてきます。

■どんなものが出来上がるの?

以下の図のようなソリューションが出来上がりました。
f:id:kinakomotitti:20180225155618p:plain
いろいろ追加されていることがわかります。
とりあえず、実行してみました。
f:id:kinakomotitti:20180225155649p:plain
いつもの画面が表示され・・・
f:id:kinakomotitti:20180225155643p:plain
Main画面が表示されました!
上には、各ページへ遷移するためのコントロールがありますね。

WebViewを押下してみました。
f:id:kinakomotitti:20180225155711p:plain
MSのページに遷移しました。
簡易的なWebブラウザをパパっと作れました。
Settings機能では、アプリケーション全体のテーマを選択できました。
f:id:kinakomotitti:20180225155717p:plain

■今後やっていくことメモ

今回は、取り急ぎコードビハインドでアプリケーションを作成しました。
せっかくUPW開発をするので、MVVMの考え方を勉強するためにも、MVVMのフレームワークを選択してアプリ開発をしていこうと思います。
また、フリーで提供されているTelerik UI とやらも気になるので、調査していこうと思います。
https://github.com/telerik/UI-For-UWP
何かしらのアプリを作ってみたいですなぁ。。。
アイディアはないですがw

まとめ

Windows Template Studioを使えば、UWPを効率的に開発することができる。
Live Tile、トースト通知機能の実装追加も可能。
MVVMだけではなく、コードビハインドも選択できるので、MVVN苦手、やりたくない人でも大丈夫w