UWPのColorPickerを使う(備忘録)
Windows10のFall Creators Update (ver. 16299)には、新たなコントロールとしてColorPickerが登場しています。
- ColorPickerクラスのドキュメント
ColorPicker Class (Windows.UI.Xaml.Controls) - UWP app developer | Microsoft Docs
- ColorPickerクラスの利用方法
Color Picker - UWP app developer | Microsoft Docs
便利なクラスですね。
- ColorとSolidColorBrushの変換
ColorPickerクラスで取得できる値の型はColorクラスです。
しかし、TextblockコントールのForeground等に色を指定する場合、型はSolidColorBrushである必要があります。
自分が試して実装できたやり方を備忘録として残します。
- コンバート用のクラスを作る
public class Color2BrushConverter : IValueConverter { /// <summary> /// Color⇒brush /// </summary> public object Convert(object value, Type targetType, object parameter, string language) { if (value == null) { return new SolidColorBrush(Colors.Blue); } if (value is Color color) { return new SolidColorBrush(color); } else throw new Exception("Can't get SolidColorBrush"); } public object ConvertBack(object value, Type targetType, object parameter, string language) { throw new NotImplementedException(); } }
- staticresourceとして使えるようにする
例として、App.xaml。(この手のやり方は調べたらごまんと出てくると思いますw)
<Application xmlns:local1="using:SampleApp.Class" > <Application.Resources> <local1:Color2BrushConverter x:Key="Color2BrushConverter"/> </Application.Resources> </Application>
- ColorPickerの値を記録
MVVM的なやり方で、ViewModelに保存。
ViewModel.MyColorの型はColorです。
<ColorPicker x:Name="myColorPicker" Color="{x:Bind ViewModel.MyColor, Mode=TwoWay}" />
#このとき、Color型のViewModel.MyColorの値が空(#00000000)の場合、コードビハインド側でmyColorPicker.Colorに初期値を与えた方が良さそうです。
(MVVMのこういう初期状態の対処方法は別にあるかもですが、私はまだそこまで理解できてないです)
- TextBlock側のバインディング時にコンバータを利用
冒頭に
xmlns:local1="using:SampleApp.Class"
を追加し、TextBlockコントロール内でこんな感じに記載。
<TextBlock Text="サンプル" Foreground="{x:Bind ViewModel.MyColor, Converter={StaticResource Color2BrushConverter}, Mode=OneWay}"/>
- 色の16進数表記からColor型に変換する
「ViewModel.MyColor.ToString();」とすると、#00FF0000のような16進数表記の値が出力されます。
しかし、これは直接Color型に代入することはできません。
win32?では下記のような変換ができたらしいです。
using System.Windows.Media; Color color = (Color)ColorConverter.ConvertFromString("#FFDFD991"); //Or string hex = "#FFFFFF"; Color color = System.Drawing.ColorTranslator.FromHtml(hex);
しかし、上記はUWPでは無理なので、変換するためのメソッドを用意する必要がありそうです。
public SolidColorBrush GetSolidColorBrush(string hex) { hex = hex.Replace("#", string.Empty); byte a = (byte)(Convert.ToUInt32(hex.Substring(0, 2), 16)); byte r = (byte)(Convert.ToUInt32(hex.Substring(2, 2), 16)); byte g = (byte)(Convert.ToUInt32(hex.Substring(4, 2), 16)); byte b = (byte)(Convert.ToUInt32(hex.Substring(6, 2), 16)); SolidColorBrush myBrush = new SolidColorBrush(Windows.UI.Color.FromArgb(a, r, g, b)); return myBrush; }
これにより、
ViewModel.MyColor = GetSolidColorBrush("#FFDFD991").Color;
とすることで変換ができそうです。
今回参考にしたブログはこちらです
www.joeljoseph.net
UWPでEntity Framework CoreのSQLiteを使う(備忘録)
ずいぶん昔に作りかけのプロジェクトを見てみると、ListViewに入れるリストに対するCRUDの実装を色んなクラスとか用いてゴリ押しで行っていたことがありました。(数か月後に見返してヤバイと思ったことが…)
これじゃいけないと考え、ほかの方法を探しました。
そして、様々な方のブログを読み、MSの開発者向けサイトにも説明してあるFE Coreを利用したSQLiteを利用することにしました。(なぜ早く考え付かなかった)
Getting Started on UWP - New Database - EF Core | Microsoft Docs
詳細はこちらのサイトに書いてあるので、自分のための備忘録として情報を整理しました。
- バージョンの問題
SQLiteを利用するにはこちらの二つをインストールする必要があります。
> Microsoft.EntityFrameworkCore.Sqlite
> Microsoft.EntityFrameworkCore.Tools
公式サイトでは”.NET Core 2.0.0 SDK or later.”と書いてあるのですが、私の環境では依存関係で問題が起きたので、それぞれ1.1.3、1.1.2のバージョンを利用しています。
なお、その時のプロジェクト自体VS2015の頃から使っていたため、他のバージョンが古いものがあったのかもしれません。そのため、次にVS2017 で新規で作る際は、問題ないかもしれません。
最新版をインストールしようとして問題が起これば、1.1.xを利用する必要があるかもしれませんね。
- CRUDの実装
private async void InsertButton_Click(object sender, RoutedEventArgs e) { // レコードの追加 using (var db = new BloggingContext()) { var blog = new Blog { Name = "Test01" }; db.Blog.Add(blog); await db.SaveChangesAsync(); } } private async void RetrieveButton_Click(object sender, RoutedEventArgs e) { // レコードの取得 using (var db = new BloggingContext()) { foreach (var blog in db.Blog) { await new MessageDialog($"ID = {blog.BlogId}, Name = {blog.Url}").ShowAsync(); } } } private async void UpdateButton_Click(object sender, RoutedEventArgs e) { // レコードの更新 using (var db = new BloggingContext()) { var blog = db.Blog.Where(x => x.ID == 1).FirstOrDefault(); blog.Name = "Test02"; await db.SaveChangesAsync(); } } private async void DeleteButton_Click(object sender, RoutedEventArgs e) { // レコードの削除 using (var db = new BloggingContext()) { var blog = db.Blog.Where(x => x.ID == 1).FirstOrDefault(); db.Blog.Remove(blog); await db.SaveChangesAsync(); } }
以下、大変参考になったブログです。
blog.okazuki.jp
USBジェスチャータッチパッドを使ってみた
先日、ドスパラでこちらの商品
を購入しました。ジェスチャー操作がかなり便利ですが、3千円という手頃な価格で購入できるので、ぜひおすすめしたい商品となっています。
Windowsにおけるジェスチャー操作って使いものになるの?
商品の前に、そもそもWindowsのタッチパッドにおけるジェスチャー操作は使い物になるのか?結論から言うと、「使いものになる(但しWindows10 Ver.1703 Creators Update以降搭載に限る)」です!
Ver.1703より前のWin10でも3本指までは使えました。
Windows 10のツボ(1):Windows 10の新しい「タッチパッドジェスチャー」を使いこなす - ITmedia PC USER
Ver.1703では、これに4本指のジェスチャーに対応し、よりmacOSライクなジェスチャー操作が可能になりました!
もちろん、高精度タッチパネルを搭載のマシンに限ります。
※上記はOS標準の機能です。しかし、タッチパッド関連はメーカーが自由に設定できる(ソフトウェアをプリインするなど)ため、高精度タッチパネルを搭載していても、上記のジェスチャーが利用できるかはメーカーや端末次第です。Surfaceはもちろん利用可です。
ちなみに…タッチパネルで操作してるよって場合は仮想タッチパッドがおすすめ
タッチ対応している場合、Win10 Ver.1703では仮想タッチパッドが使えるので、ジェスチャー操作が使えます。
私が持っているタブレット端末でも、時折仮想タッチパッドを利用しています。
仮想タッチパッドで利用できるジェスチャー操作も4本指までとなっています。
商品について
では、上記のジェスチャ-操作を踏まえ、商品について説明します。
中身
USBケーブルが二本入っていました。わかりにくいですが、左側のケーブルはタッチパッド側の端子がL字型になっていたので、設置場所の都合を考えてのことでしょうか。また、中国語と英語の記載のある説明書があります。
タッチパッドの範囲は比較的広いです。
上の段のアイコンは、左から”ブラウザのホーム画面起動”、”BackSpace”、”左矢印”、”右矢印”、”Enter”となっています。
下の段のアイコンは、左から”左クリック”、”ホイールクリック”、”右クリック”をした状態にするものです。
例えば、左クリックのアイコンをタップすると次のようにランプが点灯し、左クリックした状態となります。
※PTPのランプはWin10で利用するときに点灯されるようです。Win7では隣のPWRが点灯するそうです。
裏面にはジェスチャー操作の解説があります。(中国語と英語ですが)
使い心地
私が使っているPCはMFV LIFEBOOK AH77/Cです。一度OSをクリーンインストールしてます。表示はこんな感じ。
はい、何もないですね。
では、先ほどの商品をUSBケーブルを用いて接続してみます。
このように、きちんと設定項目が出てきています。
この商品は4本操作にまで対応しているため、現在のWin10に入っている操作方法すべてを網羅しています!
また、このタッチパッドの表面も非常に滑らかでジェスチャー操作しやすいです!
仮想デスクトップの切り替えが指四本のスワイプでできるので、この機能が非常に捗ります(Macでは昔からできましたがw)!仮想デスクトップの便利さがやっとわかったという気がしますw
気になるころ
- 押し込みはできない
このタッチパッド、残念ながら一般的なタッチパッドのように、押し込むことはできません。普段からタップだけで操作している場合は、あまり抵抗なく扱えるかと思います。(左下に”クリックした状態”にするキーがありますが、使うには慣れが必要ですw)
- USBでの有線接続
USBケーブルを用いた有線接続ですので、多少はケーブルによるごちゃごちゃ感はぬぐえませんw(Bluetooth対応だと、大きくなりかねない、技適が…とかなるので仕方ないですね)
まとめ
なんといっても3千円という手軽さでジェスチャ操作が実現できますし、デスクトップPCでもジェスチャー操作が扱えるようになります。
ジェスチャー操作を使いたい、という方には非常におすすめの品だと思います!
Windows10 Creaters update で気になる箇所
数日前にWindows10の来年春のアップデートであるCreaters Update が発表されました。
講演中はPaint 3DやPeople Barなどの発表がメインでした。しかし、下記の紹介ムービーの中で気になるアップデート内容がちらちら写っていました。その中で得に個人的に気になったものを、スクショと共に紹介したいと思います。
※もちろん開発中の映像・スクショなので、今後のIPや製品版では変わる可能性があります。
⇒動画
- UWP版Windows Defender
Windows DefenderのUWP版と思わしき画像が映っています。Ver1607でもアイコンはフラットデザインになっていました。とうとうアプリ自体もUWP化しそうな感じです。
定義の更新はストア経由になる可能性もありえるのだろうか…?
- カラーの設定
上記のスクショを見る限りでは、カラーの設定がより柔軟にできるようです。右側にはカラムも増えていますね。(Feedback hubの右側のような奴?)
カテゴリが整理されるようですね。現行では「背景、色、ロック画面、テーマ、スタート、タスクバー」の6つの項目があります。しかし、スクショでは「テーマ、スタート、タスクバー、ロック画面、アクションセンター」の5個です。どうやら、「背景、色、テーマ」の三つが「テーマ」に統合されているようですね。これはもしかしたら後述の「テーマの購入」が影響しているのかもしれません。
また、アクションセンターが現在の「通知とアクション」から分離してこちらのカテゴリに移動にしているようです。アクションセンターについては後述しますが、設定項目が増えたことによる移動かもしれません。
タスクバーの項目には、”People Bar”の設定項目が増えているかもしれませんね。
- テーマの購入
上記のストアですが、「パーソナリゼーション」のタブが登場しています。下段に注目すると、テーマと思わしきものが販売されています。Minecraft版は有料みたいですね。
テーマの設定と言えば、現在は
https://support.microsoft.com/ja-jp/help/13768/desktop-themes-featured?ocid=w8_client_themes
のサイトからファイルをDLして、適用する方法が存在しています。現行のテーマの設定は、いつしかのIPでは”クラシック”と表記されていたので、ストアからDLする形に置き換えるつもりなのかもしれません。
- アクションセンター
下部のクイックアクション部分が大きく変わっていますね。音量と画面の輝度をスライドバーで調節できるようになったみたいです。他にもon/offするものと設定ページに飛んだりするもので分離しているようですね。
上部も歯車マークがついたりと、何等かのへんこうがあるようです。
- Edge
Edgeのタブプレビューに変更が加わっているようです。今よりも使いやすくなってそうですね。
- Groove music maker
Groove music makerというものが追加されるようです。これも”クリエーター”を意識したものなのでしょうか。この調子でWindowsムービーメーカに代わるUWPアプリを作ってほしいものです。
以上、六つの項目を紹介しました。”クリエーター向け”や”3D”を押している”creaters update”ですが、OSの基本的な部分にも改良が加わっていることが分かり、とても期待したいと思えました。現行のIPでは上記のような大きな変更は未だ加わっていませんが、来週以降のIPでどんどん追加されていくのを期待したいと思います。
PCとモバイルのUWPアプリ対応状況
個人的なセレクションではありますが、2015年12月27日時点での、UWPアプリの対応状況を表にまとめてみます。
※思い出したアプリがあれば随時更新していきたいとは思います。
※2016/03/16に追記
※2016/03/20に追記
○→UWPに対応、△→Win8.1以前、×→ストアに存在しない
アプリ名 | PC | モバイル | 備考 |
---|---|---|---|
SNS(公式) | |||
○ | △○ | 3/16頃にモバイル版もUWP化 | |
Line | ○ | △○ | 3/14頃にモバイル版もUWP化 |
△ | ○ | ||
× | × | ||
Foursquare | △ | △ | |
× | ○ | モバイル版は現在Beta版 | |
Swarm | × | △ | |
wunderlist | ○ | △ | PC版は最近UWP版のBetaが取れました、モバイル版はまだ8.1ベース |
クラウドサービス(公式) | |||
OneDrive | × | ○ | PCはデスクトップ版のみ。現在ユニバーサル版を作ってるとか? |
DropBox | △○ | △○ | UWP化してました |
Box | ○ | △○ | モバイル版もありました。 |
Googleドライブ | × | × | |
Evernote | △ | △ | |
× | × | ||
その他(公式) | |||
Amazon | △ | △ | |
乗換NAVITIME | △ | △ | |
NAVITIME ドライブサポーター | △ | △ | |
Yahoo!乗換案内 | △ | × | |
Yahoo!地図 | △ | × | |
Yahoo!天気・災害 | △ | × | |
ジョルテ | ○ | ○ | 機能が圧倒的に不足している。 |
MapFan | △ | △ | |
ニュース・RSSリーダー(サードパーティ製) | |||
Nextgen Reader | △ | △ | |
Feed Viewer | ○ | ○ | |
Ninja News Reader | ○ | △ | |
Readiy | △ | × | |
my time line | △ | × | |
Latermark for Pocket | ○ | ○ | |
Twitter(サードパーティ製) | |||
Aristea | △ | △ | |
Mevy | △ | × | |
Flantter | △ | × | |
AeroPrism | △ | × | |
Tweet it! for Windows | ○ | ○ | |
Fenice for Twitter | ○ | ○ | |
Tweetium | ○ | ○ | |
Aeries | ○ | ○ | |
動画 | |||
Youtube | × | △ | (モバイル版アプリはあるが、GoogleのせいでWebへのリンクとなる) |
Netflix | ○ | △? | (サービス未加入につき、モバイル版は未確認) |
Hulu | ○? | × | 8.1版はDL化。UWP版は少なくとも日本ではDL不可 |
myTube! | ○ | ○ | |
Hyper for YouTube | ○ | × | (PC版は8.1ベース?) |
MetroTube | △ | △ | 現時点(3/20)で確認できず |
こうしてみると、アプリによって様々ですね。
意外だったのは、海外のTwitterクライアントでPCとモバイル両方に対応しているUWPアプリが多かったことですね。
あと、調べた限り、日本製アプリでUWPに対応しているアプリはありませんでした。Yahoo!は特にそう思います。
どちらかにしか対応していないものもあるので、今後は両方に対応されるようになって欲しいですね。
(Windowsフィードバックからみた)機内モードについての誤解
Windows10が公開されてはや5ヶ月、不満や問題点も多々あるかと思います。
Windows10に対して改善を希望するにはWindowsフィードバックアプリを利用するのが一番の近道です。少なくとも優先度が高まる可能性があります。
日本のフィードバックは無法地帯というか、荒れ放題荒れてる印象も受けますが…
さて、あるときWindowsフィードバックで機内モードに対する投稿に疑問を持ちました。
この画像は”機内”で検索した結果です。この中では
主にこの二つがフィードバックにあげられています。
1番の機内モードが勝手にオンになるのはバグだと思われるので、早急に対処して欲しいところです。
問題は2番です。結論から言うと、”機内モードがONになっている状態でWi-FiやBluetoothがONに出来る”ことは正常な動作です。
※当然ですが、機内モード中は携帯回線を用いた通信はオンにできません。
だのに意味が無い、ありえないなどというフィードバックがいくつか投稿してあります。誤解している方も少なからずいる、ということを示していると思われます。
そこで、機内モードについて考えてみたいと思います。
はじめに結論から言うと、機内モードはワイヤレス機能を一括でオフにする機能ではありますが、すべてのワイヤレス機能自体を使用不可にする機能ではありません。
では、そもそも機内モードとはなんなのでしょうか?
機内モードとは”ワイヤレス機能をオフにし、航空安全基準に従って使用できる状態に”するモードとのことだそうです。そして、”航空会社で許可されている場合は、機内モードで Wi-Fi および Bluetooth を使用でき”ると書いてあります。
では、航空会社で許可される場合とはどういうことがあるのか?
それは、”機内Wi-Fi”といったサービスが提供されている機内です。
例えば、JALもこのようなサービス行っています。
JAL国際線 - 国際線機内インターネットサービス JAL SKY Wi-Fi
このサイトにも、利用方法には”機内モードをオンにした上でWi-Fiをオンにする”といったやり方が記載されています。
つまり、機内モードがオンの状態でWi-Fiをオンに出来ることは、航空会社で許可されている場合においては航空安全基準に従っている、ということが出来るので、仕様上問題ありません。むしろ”正常な”動作です。
機内モードについて誤解している方に少しでも役に立てば、と思います。
ですが、こういう記事を書いてて、フィードバックをする際には、ちゃんとそれが仕様なのかバグなのかを調べてから投稿したいと思いますね。
読んでくださり、ありがとうございます。
Windows10におけるキャプチャ方法
この記事では、Windows10を利用して、キャプチャ方法が改良されていると実感することが多々あります。そこで、キャプチャ方法についてまとめてみたいと思います。
※記事には既にWin8/8.1で実装済みのものを含みます。ご了承下さい。
Windows+PrintScreen
Windows8.xを使ったことのある方にはおなじみかもしれません。
Windows7までは、デスクトップ全体をキャプチャするのに、PrtScrボタンを利用し、いったんクリップボードへとコピーする、という形でした。そのため、保存するにはペイント等に張り付ける必要があります。
それが!Windows10(厳密には8以降)では、Win+PrtScrキーで勝手に保存してくれます。
保存先はピクチャフォルダ内に作られる、スクリーンショットというフォルダです。
連番が振られる形で保存されます。
Snipping Tool自体は昔のWindowsから標準で搭載されていましたが、Windows10では使い勝手が向上しています。大きな変更点は、遅延時間を設定できることです。
通常は新規作成を押す時点のデスクトップ画面しかキャプチャできません。そのため、新規作成を押した瞬間に表示できないものはキャプチャできませんでした。(スタートメニューとかアクションセンターとか)
それが、この遅延設定のおかげで、新規作成ボタンを押して数秒の猶予があるため、スタートメニューのチャプチャができます!
例えば、この画像みたいにスタート画面とか。
Win+Hによる共有
Windows8/8.1で登場したチャームという機能がありました。その中に共有機能がありましたが、それがより改良された形で残っています。
まず、Windows8/8.1での共有機能はWindowsストアアプリ限定で利用でき、主にストアへのリンクかスクリーンショット、どちらを共有するか選べました。(ストアアプリを起動していない場合は、デスクトップのスクショ共有のみ)
Windows10では、ストアへのリンクが廃止された代わりに、すべてのアプリでスクリーンショットの共有が可能です。(もちろんデスクトップも可能)
中でも、CortanaさんのWindowもWin+Hで共有できるのです。
ただ、このやり方の問題点は、”ローカルへの保存”には向かないことです。現時点でも、私は一旦Skitch touchに共有して保存しています。
(サービス終了しますけど…)
現時点でのWindows10が共有時に”クリップボードへコピー”すら用意されていないのは問題です。なので、フィードバックを送りたいと思います。
ゲームバー
最後に紹介するのが、ゲームバーです。アプリのウインドウを保存するなら、これが一番実用的かもしれません。
ゲームバーの使い方は、アプリ上でWinキー+Gを押し、ゲームとして記憶させるだけ、です。ゲームバーと言う名前ですが、すべてのアプリで使えます(使えないアプリもあるかもしれませんが)
ゲームとして記憶させれば、あとはWin+Alt+PrtSrcでスクリーンショットが撮影できます。
保存先はPC>ビデオ>キャプチャ、です。
以上、四つほど紹介しました。