Windows Template Studio雛形コードの使い方~Pivot & Tabs プロジェクト~
今度は、Pivotを用いたプロジェクトを作ってみます。
Pivotのプロジェクトは、前回使用したBlankプロジェクトと共通点も多く、割とシンプルな構成になっています。
チェックすべき箇所も少ないので、CodeBehind版/MVVM Basic版の両方をまとめて見ていきます。
Windows Template Studio雛形コードの使い方~Blank & MVVM Basicなプロジェクト~
今度は、MVVM Basicな構成のプロジェクトを見ていきます。
この雛形は、シンプルなMVVM構成でコードを書く時には、割と使い勝手がいいかなと思います。
- 準備
- Code BehindとMVVM Basicのプロジェクトの違い
- MVVMな設計のためのヘルパークラス類
- ViewsとViewModelsフォルダ
- サンプル
- コマンド実行のEnable/Disable制御
Windows Template Studio雛形コードの使い方~Blank & CodeBehindなプロジェクト~
これから何回かに分けて、WindowsTemplateStudioで生成したプロジェクトが、どのような構造になっているか見ていこうと思います。
今回は最初なので、UWPの基本的な仕組みも含めて色々と試してみます。
- プロジェクトの作成
- 全体の構成
- アプリのスタートアップ処理
- ページ表示
- MainPageクラス
- MainPageへの処理追加
- ページ遷移
- ページの追加
- 追加したページへの移動
- 戻る/進む
- ローカライズ処理
- x:Uid属性とreswファイルを用いたローカライズ
- 言語設定の切り替え
- ヘルパークラス類
- ResouceExtensionsクラス
- Singletonクラス
- スタートアップ処理の全体像
- ActivationService & ActivationHandlerクラス
- クラス構成
- アプリ起動処理のカスタマイズ(ファイルの関連付け)
- 動作確認
- ファイル関連付けの解除
Windows Template Studioを使ってみた
Build 2017の動画とか↓のブログ見て知ったのですが、こんなVS拡張機能が出てきました。
Windows Template Studio - Visual Studio Marketplace
今まで、UWPプロジェクトの雛形は、空っぽなウィンドウが表示されるだけの、非常に簡素なものしかありませんでした。 ですが、この拡張機能を使うと、ナビゲーションやMVVMなどを取り入れたプロジェクト雛形を、自分でカスタマイズして生成することができるようになります。
ちなみに、今後6週間程度の間隔で更新を続けるようです。
これは便利かも!!
似たような立ち位置のものとして、Template10っていうのがあったんだけど、この辺との棲み分けってどうなっていくのかな??
続きを読むBuild 2017メモ
ここ最近、Build2017の動画を色々と見て回ってました。
その中で、面白かったものなどを、いくつかメモっておこうと思います。
Fluent Design System
今回のBuildで印象に残ったのは、やっぱコレ。
http://fluent.microsoft.com/
https://channel9.msdn.com/Events/Build/2017/B8066
PlayGound is Expanding
今後、ソフトウェアの対象とするデバイスはどんどん多様になっていきます。
- 普通のデスクトップPCやスマートフォンのような2Dなディスプレイを持っているデバイス
- Amazon Echoとかみたいな、ディスプレイ表示を持たない0Dなデバイスから、
- Hololenseや、その他VR系デバイスなどでの3Dな表示
このような0D~3Dまでの多様なデバイスで一貫したUXを提供する、ってのがポイントですかね。
↓のスライドでこの辺の話題をわかりやすくまとめてくれています。
https://speakerdeck.com/ahomu/fluent-design-system-in-5-minutes
UWPの今後
https://channel9.msdn.com/Events/Build/2017/B8100
Fluent Design SystemでUIがどう変わるかという説明や、どうやってXAMLで実装していくかの説明がされていました。
あと、この動画の最後の方(1:03:30~)のとこで、今後対応する内容の中に「Custom Markup Extension」ってあります。
そのうち、UWPでもMarkupExtension作れるようになるっぽいですね。メッチャ楽しみ!!
XAML Standard
https://github.com/Microsoft/xaml-standard
XAMLを使う各プラットフォームで、
それぞれが方言のような感じで分裂していくのを防ぎたいってことでしょうかね。
Xamarin.Formsって、微妙に各種要素の名前が他のXAML系プラットフォームと違って気持ち悪かったんで、これはちょっと嬉しいニュース。
StackPanelと言わずにStackLayoutになってるとか、
かなりAndroidに寄せたネーミングになってるなぁ、なんて印象は受けてました。
この辺のクラス名がある程度整理されると、微妙な違いな無くなってうれしいんだけど、
これって、既存のXamarin.Formsの各種クラス名をXAML Standardに合わせて名前変えてくってことなんだろうか??
ただ、このXAML Standardでの共通化の話で、WPFが置いてけぼりにされてる感が・・・
MSさん、、、たまにはWPFの事も思い出してあげてください。。。
ちなみに、↓のissuesなどにWPF開発者の方々の声が集まってます。
https://github.com/Microsoft/xaml-standard/issues/20
この辺、今後どうなるか定期的にウォッチしておこうかと思います。
とか思ってたら、こっちのスライドの19ページ目では、
XamarinでもWPF XAMLが再利用できる、、なんて書き方になってるけど、どうなるんでしょうね??
https://view.officeapps.live.com/op/view.aspx?src=https%3a%2f%2fsec.ch9.ms%2fsessions%2fc1f9c808-82bc-480a-a930-b340097f6cc1%2fbuild%2f2017%2fB8110.pptx
UWPのお話
UWPのコントロールについて
https://channel9.msdn.com/Events/Build/2017/B8035
定番どころの3rdパーティ製コントロールライブラリの紹介や、コントロールのスタイル変更やカスタムコントロールの作り方などの説明
UWPでのパフォーマンス向上Tips
https://channel9.msdn.com/Events/Build/2017/P4173
遅延ローディングを使ったTipsとか、その他いろいろパフォーマンス向上などにつながりそうなTips紹介
NuGet
https://channel9.msdn.com/Events/Build/2017/T6081
5:50~あたりで、新しいパッケージング方法の説明をしてます。
.net standardなクラスライブラリだと、
nuspecを書いてnuget.exeからパッケージングするのではなく、プロジェクトのプロパティで設定しておいてビルド時にパッケージを作れるようになってるんですね。
どうでもいいですが、いつも読み方に迷うコイツ「NuGet」ですが、にゅーげっとって発音してますね。
VSCode
https://channel9.msdn.com/Events/Build/2017/T6078
動画の中で↓のリポジトリが紹介されてました。
https://github.com/Microsoft/vscode-tips-and-tricks
VSCodeのTipsなどが色々とまとまっています。
VisualStudio
https://channel9.msdn.com/Events/Build/2017/B8083
プレゼンの冒頭で目の不自由なエンジニアの方が、音声読み上げを使ってライブコーディングしてました。
で、その音声読み上げ、
ものすごいスピードで読み上げしてるんです。
一瞬、何が起きたのかわからなかった。
でも、スクリーンリーダーを使って、ガリガリとコーディングしてました。
ソフトウェアのアクセシビリティ対応をちゃんとしていると、こんなことまでできるのか、、、と色々と感じるものがありました。
Edge
https://channel9.msdn.com/Events/Build/2017/B8041
39:31~
CSS Grid Layoutの対応を進めているみたいですね。
IEやEdgeは一足先にCSS Grid Layoutに対応し始めたのに・・・
その後なんだかんだでCSS Grid Layoutは新しい仕様に変わり、IE/Edgeは新しい仕様に対応せず、取り残された状態になってました。
これは対応がとても待ち遠しいです!!
Xamarin.FormsがWPF>K#対応するっぽい!!
ここのところ、先週のBuild2017の動画を色々見て回ってたのですが、
↓のXamarin.Formsの動画の34:00~あたり。
https://channel9.msdn.com/Events/Build/2017/B8099
今後Xamarin.Formsが、WPFとかGTK#上での実行に対応するようです。
ロードマップや公式ブログを見てみると、2017 3Qあたりでの対応になるみたいなんで、意外とすぐに出てきそうな感じです。
https://blog.xamarin.com/glimpse-future-xamarin-forms-3-0/
https://forums.xamarin.com/discussion/85747/xamarin-forms-feature-roadmap/p1
今までのXamarin.Formsはモバイル環境にフォーカスしてましたが、
この辺が対応されると、Xamarin.FormsでWin/Mac/Linuxのデスクトップアプリも作れるようになります。
なんか、世間の話題はもっぱらXAML Standardの方に持ってかれてましたが、
これって結構ビッグニュースなんじゃないかな??
モバイルからデスクトップまですべてXamarin.Formsでできるなんて、メッチャ夢が広がりますね。
そろそろ、本腰入れてXamarin.Formsも使ってみようかな、と思いました。
knockout.jsでバインディング・コンテキストの値をデバッガで確認する方法
近年のフロントエンド界隈では、Knockout.jsはあまり話題に上らなくなっちゃいましたね。。。
ですが、自分は以前Knockout.jsで書いてたプロジェクトを弄ったりと、今でも結構使ってます。
あと、なんだかんだ言って、双方向データバインディングだけあれば十分ってケースでは、 Knockout.jsのシンプルさは今でも魅力的ですしね。
で、Knockout.jsを使ってHTML上でバインディング定義をしていると、
要素のコンテキストがどんな値になっているか、、、を確認したくなる時がちょくちょくあります。
ちなみに、Chrome用では↓こんな便利な拡張機能があります。
http://qiita.com/sasaplus1/items/8c5a2216f3cb15b792c5
https://chrome.google.com/webstore/detail/knockoutjs-context-debugg/oddcpmchholgcjgjdnfjmildmlielhof
でも、拡張機能などを使わなくても、ブラウザの開発者ツールを活用してお手軽に確認することもできます。
手順
- 開発者ツールを開いて、DOM Explorer的なヤツから、目的のDOM要素を選択します。
- 続いて、コンソールを開き、以下のコマンドを実行します。
Ko.contextFor($0)
するとこんな風に、コンテキストに設定されているオブジェクトの値を確認できます。
ここでは、Edgeでやっていますが、IE11, Chrome, Firefoxなどのブラウザでも、だいたい同じような手順で確認できます。