【#UWP】入門書 「UWP アプリ開発 101」 第2版 (VS2017 対応) 好評発売中です

「UWP アプリ開発 101 (one oh one）」

Windows Forms 開発者のための
C# / XAML による UWP アプリ開発入門
第2版 (Visual Studio 2017 対応)
(A4換算で約200ページ)

この本は、 2～3日間の研修を想定して作成したテキストです。 Windows Forms 開発者にとっては馴染みの薄いデータバインディングやデータテンプレートなどに重点を置いて解説しています。
※ Xamarin ではなく、MS 純正の UWP アプリ開発方式の方です。

2017年 7月に第2版となりました。 Visual Studio 2017 対応版です。 無償の Visual Studio 2017 Community を使って演習していきます。

入手はこちらからどうぞ↓

• Kindle 版
   
• UWP アプリ版

どちらも定価 700円ですが、
・ Kindle版は「無料サンプルを送信」で冒頭1割ほどが読めます
・ UWPアプリ版は冒頭3分の1ほどが無償で読めます

UWP アプリ版は、Windows 10 Mobile でも読めます。
HoloLens や Xbox One でも OK ♪

» 続きを読む

【.NET / Win8.1 ストアアプリ】 HttpClient で TLS 1.1 / 1.2 に対応するには

SSL / TLS 1.0 に脆弱性が見つかり、 非推奨となったのは、 2015年の春。

PCI DSS v3.1の公開と変更点の概要 | NTTデータ先端技術株式会社
http://www.intellilink.co.jp/article/pcidss/16.html

なので、 それ以降もサポートが継続されているプラットフォームでは TLS 1.1 / 1.2 は使えるようになっているはず (新バージョンはもちろん、 サポート継続中なら旧バージョンでも!) と思い込んでいたのですが… (汗;

実際に、 この記事を書いている時点で、 .NET Framework 4.5 以上では Windows Update により自動的に、 .NET 3.5 では次のようなコードを追加するだけで、 TLS 1.1 / 1.2 でアクセスできるようになります。

// .NET 3.5 以降で TLS 1.1 / 1.2 を有効にする方法
ServicePointManager.SecurityProtocol = SecurityProtocolType.Tls11 | SecurityProtocolType.Tls12;

ところが、 Windows 8.x の Windows Runtime に ServicePointManager はありません。 なので、 Win8.x 向けストアアプリで HttpClient クラス (System.Net.Http.名前空間) とか使っていると、 お手上げ…!?

Win8.x 用ストアアプリは Windows 10 でも動作しますから、 「オワコン、切捨て!」 とはいきません。　さて、 どうしたものでしょう?

その答は、 (なぜかw) Xamarin に関するブログ記事で見つかりました♪

Use TLS 1.2 on a Windows Store App developed with Xamarin – Where is my solution
https://blogs.msdn.microsoft.com/whereismysolution/2017/11/01/605/

「Windows.Web.Http 名前空間の HttpClient クラスを使えばいいよ!!」 と。

なんとまぁ、 拍子抜けです。
ただし、 細かい使い勝手は違っています。 例えば、 タイムアウトの設定は、 次のコードのように CancellationToken を使ってやるとか。

using (var client = new Windows.Web.Http.HttpClient())
{
  // タイムアウト設定=15秒
  System.Threading.CancellationTokenSource cts
    = new System.Threading.CancellationTokenSource(15000);

  Windows.Web.Http.HttpResponseMessage response 
    = await client.GetAsync(new Uri(contentUrl)).AsTask(cts.Token);

  if (response.IsSuccessStatusCode)
  {
    // アクセス成功。何かする…
  }
}

ともあれ、 解決策があってヤレヤレです f(^^;
この4月に青空文庫の SSL 対応に対する修正をやったつもりになっていたのですが、 6月初めに TLS 1.0 を無効化されたタイミングでアクセスできなくなってて蒼くなりました。

【Windows 10 1803】 設定アプリがようやく使えるものになってきた♪

Windows 10 の「設定」アプリといえば、 役に立たない代表でしたw
例えば、 「あ、 スリープまでの時間をちょっと変えたい!」 と思って、 「設定」アプリで「電源」を検索しても、 何も無し。 「フォント」とか「プログラム」とか検索しても、 何も無し。 おかげで、 タスクバーに置いたコントロールパネルへのショートカットが手放せなかったわけですが…。

※ 1709 の設定アプリで「電源」を検索したところ

それが、 1803ではずいぶんと検索結果が出てくるようになりました。 それも「設定」 アプリ内だけではなくて、 コントロールパネルへのリンクも出てきます。 例えば、 「電源」で検索すると5項目ほど出てくるので、 その中から「電源プランの選択」を選んでみると…、

※ 1803 の設定アプリで「電源」を検索したところ

…コントロールパネルの「電源オプション」が開きます♪

【Windows 10 1803】 ストアにフォントのダウンロードコーナーができた

Windows 10 1803 (Redstone 4) build 17133.1 がリリースプレビュー リングに流れてきました。 いよいよ RTM として一般公開されるのも近そうです。

この 1803 の新機能として (正確には build 17040 から)、 フォントをストアからインストールできるようになっています。 今のところ、 次の画像のように英語のフォントがいくつかあるだけですが、 今後は増えるだろうと期待されます♪

フォントは、 アプリ > 個人用設定 > フォント というカテゴリに分類されています (次の画像)。

「ああ、最初の画像はそのカテゴリのページなのね!」 …と思ったあなた、 それは早とちりというものです。 ずいぶん前から、 ストアのアプリではサブカテゴリの一覧が表示できなくなっているのです (Web のストアにはあります)。 フィードバックで何回か指摘したけど梨の礫なので、 バグではなく仕様変更なのでしょう。

では、 冒頭の「フォントコーナー」へはどうやって行くのでしょうか?
答えは、 「検索ボックスに "font" と入力して表示されるサジェスチョンから選択する」 です!

【VS2017 15.7pv2】 XAML のランタイム ツールに 「ヒートマップ」 が増えた

先週に公開された Visual Studio 2017 Version 15.7 Preview 2 ですが、 デバッグ中に XAML 画面の上端に表示される 「ランタイム ツール」 (runtime tools) にこんなボタンが増えてます。

"Display Heatmaps" (ヒートマップを表示する)
なんでしょう、 これ? ドキュメントが見当たらないっぽいのですが、 画面のどの部分に CPU / GPU の負荷が掛かっているのかをビジュアライズしてくれるってことかな。

次からの3枚は、 OFF / ON にしたところ / ON 状態で ListView 上をマウスホバーしたところ

ON にしておくと、 なんだかしょっちゅうウィンドウ全体が真っ赤になります。 まるで3倍速くなったかのようですが、 もちろん実行速度は変わりませんw (っていうか Heatmaps 処理が噛む分、 遅くなってるはず)

【.NET Core】 プロジェクトを作ると 「project.assets.json が見つかりません」 エラー

Visual Studio 2017 で .NET Core 2.0 のプロジェクトを作ったら、 こんなエラーを喰らいました orz

エラー 資産ファイル 'C:\project-copy\test\BluewaterSoftProject\work\おためし\CoreConsoleApp1@test\CoreConsoleApp1\obj\project.assets.json' が見つかりません。NuGet パッケージの復元を実行して、このファイルを生成してください。 CoreConsoleApp1 C:\Program Files\dotnet\sdk\2.1.4\Sdks\Microsoft.NET.Sdk\build\Microsoft.PackageDependencyResolution.targets 327

このとき、 画像に見えるように、 ソリューション エクスプローラーで 「依存関係」 に黄色の警告マークが付いていて展開できません。
エラーメッセージにあるように NuGet パッケージの復元をやってみても、 効果なし。

原因は、 プロジェクトのフルパスの途中に '@' 記号 (半角) が入っていたこと。 それと、 '$' 記号 (半角) もダメです (他にもありそう)。 なお、 日本語は大丈夫みたい。

【#UWP】 ビットマップの表示色を変える (Win2D.uwp 経由で Direct2D を使う)

例えば、 モノクロ 2 値やグレイスケールの画像を用意しておいて、表示するときに色を変えたいとかあるわけですよ。

上の画像は、 白と透明の  2 値画像ですが、 そのまま黒バックの上に表示すると、 次の画像のようになります (真ん中にカラーピッカーを追加しています)。

メモリー上のビットマップ内部では、 それぞれのピクセルは (R,G,B) = (0xff, 0xff, 0xff) か (0, 0, 0) のどちらかになっています。 そこで例えば、 (0xff, 0xff, 0xff) のピクセルだけを (0xff, 0, 0) に変えてやれば、 赤い画像に変わるわけです。

が、 それをピクセルごとにちまちまやってたんでは、 時間が掛かってしょうがありません。
昔、 8 x 8 = 64 ピクセルとか、 16 x 16 = 256 ピクセルとかを扱ってればよかった時代には、 当時の超非力な CPU でも、 256 回のループなんてのはまぁなんとかなりました (←いつの時代だよ!? w)。
今や、 1000 x 1000 ピクセルのビットマップとか平気で扱わなきゃならない時代。 1000 x 1000 ピクセルを全部舐めたら 100 万回ですよ!?

そんなわけで、 Direct2D の出番です♪

C# で書いている UWP アプリから DirectX を使うには、 SharpDX ってのもあります。
SharpDX は、 ほぼ DirectX をラップしただけの API なので、 生 DirectX プログラミングできるスキルがないと、 使うのはちょっと大変です。
例: WinRT／Metro TIPS：SharpDXを使ってDirectXで音声ファイルを再生するには？［ユニバーサルWindowsアプリ開発］

で、 それよりもっと WinRT API 寄りにガッツリとラップしてくれたのが、 Win2D  です。

横文字得意な人向け ⇒ Introducing Win2D: GPU accelerated 2D graphics programming in the Windows Runtime - Building Apps for WindowsBuilding Apps for Windows (2014/9/5)

Win2D でどんなことが出来るのかは、 サンプルアプリを見るのが早いです。
⇒ Win2D Example Gallery

» 続きを読む

【#UWP】 CompactOverlay モード: Picture in Picture というか、「最前面に表示」するウィンドウを作る

UWP アプリをやってると、 Windows Forms や WPF の TopMost プロパティが懐かしくなることってありますよね f(^^;

Creators Update (Version 1703, build 15063) から、 UWP アプリでも可能になりました♪

上の画像で、左上に赤丸の付いたウインドウ (この後で紹介するコード) と画面右上にある青色のウインドウが最前面に表示されています。 最大化した Visual Studio は、 インテリセンスのポップアップが出ているので、 これがアクティブな (フォーカスを持った) ウインドウです。 その手前に 2 つのウインドウが表示されているのです。

この「常に手前に表示」機能を実装したアプリの例

• クラウディアさんタイマー
• Square Clock

これをやるには、 ApplicationView クラスの TryEnterViewModeAsync メソッドを使います。

その使い方を説明する前に、 この CompactOverlay モードの動作を紹介しておきましょう。

こんなアプリを作りました。 これは通常モードのときのウインドウです。 表示エリアの左上に赤丸を置きました。 左下のボタンで、 モードを切り替えます。

そして、 CompactOverlay モードに入ると、 ウインドウの位置は必ず画面右上に移動されます (最初の画像にあるように、 その後で動かすのは OK)。

また、 モードに入る前のウインドウサイズは無視されて、 デフォルトでは上の画像のようなサイズになります (後のコードのところで説明しますが、 ある程度はサイズ指定可能)。

» 続きを読む

【#UWP】 15063用の Acrylic Effect を、ちゃんと実装してみる

前の記事「どこでも掴んで動かせるウィンドウを作る」のソースコードには、 15063 (Windows 10 Creaters Update, Version 1703) でもウィンドウに Acrylic Effect を掛けるために、 とりあえず暫定的なコードを書いていました。

※ クラウディア画像: © 2011 Microsoft Corporation All Rights Reserved.

今回、改めてわりと真面目に実装しなおしてみました。

• Acrylic Effect 自体に色を付ける (前回は、手前に半透明の色を置いて誤魔化してましたw)
• 設定で透明効果を OFF にしたとき (タブレットモードのときも)、ソリッドカラーにする
• ウィンドウがフォーカスを失ったときも、ソリッドカラーにする

ひとつめは、面倒なんでやりたくないよ～、っと思ってた案件なんです。 が、サックリ使えるコードを JuniperPhoton 氏が公開してくださってるのを見つけたので、それを利用。 次のようなコードを書くだけですみました。超らくちん♪ (要 NuGet パッケージ 「Win2D.uwp」)

draggableGrid.Background
  = new MyerSplash.Common.Brush.AcrylicHostBrush()
    {
      TintColor = accentColor,
      TintColorFactor = 0.4,
      BackdropFactor = 0.6,
      BlurAmount = 20,
    };

二つめは、UISettings クラスの AdvancedEffectsEnabled プロパティで判定できます。 このプロパティが変化したときには UISettings クラスの AdvancedEffectsEnabledChanged イベントが叩かれるので、そのハンドラーで Acrylic Effect とベタな背景ブラシを切り替えてやれば OK。

ただし、AdvancedEffectsEnabledChanged イベントは別スレッドで叩かれるので要注意。 次のように Dispatcher.RunAsync してやります (内部関数にしているのは、ついでに ColorValuesChanged イベントにも対応したため)。

// 別スレッドで叩かれる!
_uiSettings.AdvancedEffectsEnabledChanged
  += (setting, o) => runAsync_SetBackgroundBrush();

async void runAsync_SetBackgroundBrush()
{
  await this.Dispatcher.RunAsync(CoreDispatcherPriority.Normal, () =>
  {
    // ここで適切な背景ブラシをセット
  });
}

三つめは、 Window.Current.Activated イベントで e.WindowActivationState を見て切り替えてやるだけですね。

以上のコード全体 ⇒ https://github.com/biac/blogcode/tree/master/DraggableWindow

【#UWP】 どこでも掴んで動かせるウィンドウを作る

Window.Current.SetTitleBar(draggableGrid);
↑これだけで、 指定した UI コントロール (ここでは Grid) をマウスで掴んでウィンドウを動かせるようになります。

いやぁ、 SetTitleBar は以前から知ってたんですけどね。 てっきり本来のタイトルバー領域内だけでしか有効にならないと思い込んでました (汗;

画面いっぱいの Grid に適用してやれば、↓ごらんの通り (クリックして拡大するとアニメGIF)。 合わせて、 描画領域をタイトルバーに押し出してやるのと、 Fluent Design の Acrylic Effect も使ってます。

※ クラウディア画像: © 2011 Microsoft Corporation All Rights Reserved.

ウィンドウの中をマウスでドラッグして、　ウィンドウを動かせます。 上の動画では分かりませんが、　タイトルバー扱いなので、 右クリックするとタイトルバーと同じコンテキストメニューが出ますし、 ダブルクリックするとウィンドウが最大化します。

SetTitleBar したコントロール (および、 その中に置いたコントロール) には、 触れません。 ボタンやテキストボックスなどを触れるようにするには、 SetTitleBar するコントロールとは別のビジュアルツリーに入れてやります (次のコード)。

<Grid x:Name="rootGrid">
  <!-- タイトルバー扱いする Grid -->
  <Grid x:Name="draggableGrid"  Background="……省略……"/>

  <!-- 操作可能な UI を置くための Grid -->
  <Grid x:Name="contentGrid" Margin="20">
    <StackPanel HorizontalAlignment="Center">
      <ToggleSwitch Header="ToggleSwitch" />
      <TextBox Header="TextBox" TabIndex="0" />
    </StackPanel>
  </Grid>
</Grid>


• コード全体: https://github.com/biac/blogcode/tree/master/DraggableWindow
• 描画領域をタイトルバーまで押し出す方法: WinRT／Metro TIPS： タイトルバーにUIコントロールを配置するには？［Windows 10 UWPアプリ開発］

※ なお、 このコードでは Windows 10 1703 (15063) でも Acrylic Effect が有効になるようにするため、 面倒なことをしています。 1709 (仮) 以降でよければ、 Acrylic Effect は XAML で属性を指定するだけです。