はてなブックマーク

この記事は、C# Advent Calendar 2018の4日目の記事です。 C#というかWPFやXAMLに特化したネタで失礼します。 Windows10ではOSデザインの刷新として、FluentDesignSystemが段階的に導入されてきてます。 そんなFluentDesignのルック&フィールにマッチするような、半透明のアクリル効果が効いたコンテキストメニューをWPF向けに作ってみました。 アクリルなコンテキストメニュー まずは、出来上がったコンテキストメニューの動作を、以下のgifアニメで見てください。 ほんのりと、背景が透けたメニューになっていることがわかるかと思います。 あと、メニュー左側のアイコンとかチェック状態を表示する部分で、ドロップシャドウを使ってうっすらと立体感を出してるのがこだわりポイント！！ ContextMenu AcrylicContextMenu こういう

はじめに 少し遅れてしまいましたが、この記事はXAML Advent Calendar 2017の25日目の記事です。 今年のBuildでは、Fluent Design Systemなどの発表がありましたが、このデザインをWPFで用いる方法は提供されていません。 対応するAPIがないなら、XAMLの機能を駆使してそれっぽく作ってしまえ!!ということで、FluentDesignをXAMLで再現したライブラリを作ってみました。 XAMLの拡張性は伊達じゃない!! StyleやStoryboard、マークアップ拡張やコンバーターに各種添付プロパティと、XAMLの機能をフル活用して色々なエフェクトを再現しています。 ただ、ウィンドウのアクリル化はXAMLだけではどうにもならないので、↓を使ってそれっぽく再現しています。 WPFでFluent Design Systemのアクリルっぽいウィンドウを作

この記事は、XAML Advent Calendar 2017の1日目の記事です。 今年のbuildでは、Fluent Design Systemが発表され、Windowsの各種UIでも徐々にこういうデザインの部分が増えてきました。 このFluent Designですが、UWPからは簡単に実装することができるAPIが色々用意されています。 しかし、残念ながらWPFでこのようなデザインを実装するための手段は用意されていません。 そうは言っても、WPFでもこういうカッコいいデザインのウィンドウを作ってみたいですよね。 ということでWPFでこういうFluent Designのアクリル風なウィンドウを真似してみました。 Windowを半透明にする方法 Fluent Design Systemのアクリル効果を適用するAPIはUWP用のものしかなく、WPF向のAPIはありません。 また、Win32AP

OpenGLを使って、簡単にクロスプラットフォームなコードを書くための、GLUTというライブラリがあります。 ちょっと必要に迫られて、久しぶりにGLUTを使う機会があったので、VS2017でGLUTを使うまでの手順をざっとまとめておこうと思います。 GLUT使うのは、5～6年ぶりくらいかな。。。 単純なグラデーションを描いたりしただけですが、とても懐かしい気持ちになりましたｗ freeglut glutはもう随分と長いこと更新されなくなっているので、現在はfreeglutという互換ライブラリが使われることが多いようです。 知らんかった。。。 なので、ここではfreeglutを使ってサンプルコードを書いています。 Nugetパッケージ このご時世に、必要なdll一式などをWebサイトから自分でダウンロードしてきて用意するのはちょっと面倒ですよね。 ライブラリはパッケージマネージャ経由で管理し

.Netの様々な環境で動作する、ImageSharpという画像処理ライブラリのv1.0.0beta1がリリースされました github.com 以前.NET blogの↓の記事などでも紹介されてたライブラリです。 https://blogs.msdn.microsoft.com/dotnet/2017/01/19/net-core-image-processing/ 他のクロスプラットフォームな画像処理ライブラリ(ImageMagickやSkiaなど)には依存せず、すべてC#で実装されてます。 また、.NET standardなライブラリになっているので、 通常の.NET Framework環境だけでなく、UWPなどの環境や.NET Core環境、Xamarin環境などでも使えるようです。 ImageSharpで提供してる機能などは、↓のページにまとまっています。 https://gith

最近あまりElectronいじってなかったのですが、 気が付いたらElectron 1.7系のstable版となるv1.7.5がリリースされてました。 てことで、以前書いたElectron+TypeScriptのサンプルコードを最新バージョンに対応させておきました。 Electron/TypeScriptそれぞれを以下のバージョンに更新してます。 Electron 1.7.5 TypeScript 2.5.2 Electronの型定義ファイル Electronのパッケージ内に、TypeScript向け型定義ファイルが同梱されるようになりました。 V1.6.x系の途中から型定義ファイルが含まれるようになってたみたいです。 ↓のようにelectronのパッケージ内に.d.tsファイルが含まれるようになってます。 ってことで、もう@types/electronをnpmから取得せずとも、TypeS

この記事はXAMLアドベントカレンダー 2016 14日目の記事です。 WPFでは、ボタンをはじめとする各種UI要素はベクターベースでの描画を行っています。 そのため、WinFormsやMFCなどのGDI系のUIフレームワークと違い、High-DPIな環境でもボケずにキレイな描画ができる、、、と言われていました。 Per-Monitor DPI Win8.1からはPer-Monitor DPIという仕組みが導入され、ディスプレイごとに異なったDPI設定をすることができるようになっています。 Win8.1が出てきたころには、10inchほどのサイズでFullHD解像度のタブレットやノートPCなどが多数登場してきました。 それらの環境はピクセル密度が非常に高いので、標準で125%や150%のdpi設定になっているものが多数ありました。 このようなHigh-DPI環境のPCを外部ディスプレイに繋

この記事はelectronアドベントカレンダー 2016 21日目の記事です。 遅くなってしまい申し訳ありません。。。 ※アドベントカレンダーのリンクが間違っていたので修正しました・・・汗 前置き ↓去年はこんな記事を書いていました。 このCSS Grid Layout Module Level1ですが、少しずつ仕様の策定が進み、とうとう勧告候補の段階まできました。 CSS Grid Layout Module Level 1 CSS Grid Layout Module Level 1 （日本語訳） CanIUseを見ると、もうすぐFirefoxとChromeでの対応が行われるようです。 http://caniuse.com/#search=grid https://developer.mozilla.org/ja/Firefox/Releases/52 未来は意外と早く来るもんですね。

前回に続き、再度OpenCvSharpネタです。 色々使ってみたので、使い方などを一通りメモしときます。 参考情報 OpenCvSharpのC++API対応についての説明 http://schima.hatenablog.com/entry/2014/03/29/140106 OpenCvSharpのWiki。ここのC++ APIの部分など。 https://github.com/shimat/opencvsharp/wiki http://opencv.jp/reference_manual OpenCvSharp3ではC APIは廃止して、C++ APIを使うようになっています。 まずは、この辺のページを見て、OpenCVのC++ APIをざっと把握するとよいと思います。 画像の入出力 以下の関数で、画像ファイルからMatクラスのデータを作ったり、、Matクラスのインスタンスの内容をフ

超定番cssフレームワークBootstrapのグリッドシステムのようなレイアウトをXAML環境で行うためのライブラリを作ってみました。 WPF/UWPともに、Nugetから以下のパッケージをインストールすることで使えます。 NuGet Gallery | ResponsiveGrid 0.3.1 (WPF/UWPともに共通のパッケージとなっています。) NugetのGUIでResponsiveGridで検索すれば出てきます。 Nugetのパッケージマネージャ コンソールから、以下のコマンドでもインストールできます。 Install-Package ResponsiveGrid 最初はWPF向けに作り始めたけど、こういうレスポンシブなレイアウトは、デスクトップとモバイルを共通で開発できるUWPのような環境の方が需要ありそうなんで、WPFとUWP両対応なライブラリにしてみました。 使い方 準備

お手軽にWPFアプリにモダンなデザインを適用できる、MahApps.Metroというライブラリを使ってみました。 MahApps.Metro Documentation この手のモダンなデザインを適用するライブラリでは、 Modern UI for WPF(MUI)というのもあります。 まだちょろっと使ってみただけですが、MUIと比較してみるとMahApps.Metroの方がクセが少なくてシンプルで使いやすそうな印象です。 使い方 元のウィンドウ インストール 準備 スタイルの設定 スタイルの変更 コードビハインドからのスタイル切替 ウィンドウのカスタマイズ 各種基本のプロパティ WindowCommands Windowのデザイン ボーダー付きウィンドウ VisualStudio風のWindow枠 各種コントロール Button系 アイコン類のパッケージ アイコンの使い方 TextBox

↓を見てこれはよさそう!!と思ってやってみました。 http://qiita.com/mysticatea/items/12bb6579b9155fd74586 このパッケージを使うと、npmスクリプトから指定したページをブラウザで開くことができます。 Win/Mac/Linuxどの環境でも、同じスクリプトでブラウザを開けるのがいい感じ。 これは便利!! ここ最近、VSCodeからブラウザ開くタスク作れないかなぁ、、なんて思って色々調べてましたが、npmのパッケージを使って簡単にクロスプラットフォームに実現する方法がありました♪ 以下のコマンドでdevDependenciesに入れておいて、npmスクリプトからブラウザ開くのに使えます。 npm install opener --save-dev で、こんなnpmスクリプトを書いておくと、ブラウザを開くことができます。 "scripts":

今度はElectronのdialogモジュールを使い、いろいろなダイアログ表示をしてみます。 ↓のドキュメントを参考にやってみます。 http://electron.atom.io/docs/v0.34.0/api/dialog/ dialogモジュールを使うと、メッセージボックスの表示や、ファイルを開く、ファイルを保存、などのダイアログ表示ができます。 このモジュールでは以下のようなメソッドが用意されています。 dialog.showOpenDialog([browserWindow][, options][, callback]) dialog.showSaveDialog([browserWindow][, options][, callback]) dialog.showMessageBox([browserWindow][, options][, callback]) dialo

最近、色々とMVVMな設計のサンプル類を見てると、○○Serviceみたいなクラスを作って、VMが他のモジュールへの依存を極力持たないように設計している例をよく目にするようになった気がします。 ここでは、MVVMでの定番の躓きポイント「VMからのダイアログ表示どうするの？」というネタで、実際にサービスを用いたパターンでコード書いて試してみたいと思います。 また、この手のサービスを使ったパターンでは、DIコンテナ、サービスロケータなどを提供する各種ライブラリを使ったサンプルが多いです。 ですが、DependencyInjectionなどは、MVVMな設計の本質ではないと思うので、ここではそういったライブラリ類は使わず、素のWPFでの最低限なコードでサンプルを書いてみます。 色々参考にしたリンク http://wp.qmatteoq.com/the-mvvm-pattern-dependenc

WPFのTrigger、便利ですよね。 Styleを作るときに、特定の条件の時に表示を切り替えたり簡単にできて、非常に便利。 でも、ちょっと痒いとこに手が届かない。 Triggerだと、指定したプロパティが特定の値の場合に動作します。 なので、「指定したプロパティが○○以上だったら」みたいな条件を指定できません。 そんな時は、Converterを併用することで前述の動作を実装できます。 こんなコンバーターを用意しておくと、何かと便利だと思います。 public class IsGreaterThanConverter : IValueConverter { public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture) { var

最近は、何かとJSON形式でデータを扱うこと多いですよね。 てことで、C#でJSONの読み書きをやってみました。 C#でJSON扱うときは、↓のライブラリを使うのが定番っぽい。 Json.NET ASP.net WebAPIのJSONシリアライザの標準実装らしいです。 てかダウンロード数半端ないですね。 インストールは、Nugetから以下のコマンドで。 Install-Package Newtonsoft.Json 使ってみた サンプルコードとか 以下のページにサンプルコードがたくさんあります。 この辺見てけば、何となく使い方は掴めそう。 http://www.newtonsoft.com/json/help/html/Samples.htm その他メモ よく使いそうな操作についてメモ。 JSONへのシリアライズ // データ型定義 public class Person { public

ElectronのBrowserWindowクラスで作ったウィンドウの設定などについてメモ。 BrowserWindowクラスのAPIは↓にまとまってますが、よく使いそうなのをメモしときます。 http://electron.atom.io/docs/v0.34.0/api/browser-window/ ウィンドウの位置/サイズに関するメソッド setFullScreen(flag: boolean) ウィンドウのフルスクリーン化をします。 setKiosk(flag)メソッドでも同じようにフルスクリーンになります。 setAspectRatio(adpectRation[, extraSize]) これはmacのときだけ使えるみたい。 ウィンドウのアスペクト比を指定できるそうです。 自分はwin環境しか持ってないので、コレはスキップ。 setBounds/getBounds 以下のメソ

この記事はElectron Advent Calendar 2015 - Qiita2015の8日目の記事です。 今回の記事のサンプルコードは↓コチラ。 https://github.com/sourcechord/electron-gridlayout-sample 目次 前置き CSS Grid Layout Module Level 1 CSS Grid Layoutの各ブラウザの対応状況 対応状況について補足 メリット・デメリット？ CSS Grid Layoutを使ってみる 参考サイト 言葉の定義 Chromiumの拡張フラグを設定する 単純なグリッドレイアウト gridレイアウトをする領域の定義 グリッド上に自動で流し込む場合 流し込む方向の指定 グリッド上の特定の位置へ配置 特定のセルに配置 複数のセルにまたがった配置 ショートハンド Z-Indexの指定 複雑なレイアウト

C#から、xlsx形式のエクセルファイルを簡単に操作できる、ClosedXMLというライブラリを使ってみました。 Office2007以降のドキュメント形式について Office2007以降で使われている、xlsx/docx/pptxなどの形式のファイルは、OpenXMLというフォーマットで作成されています。 これらのファイルを読み込むために、OpenXML SDKというSDKがMSから提供されています。 https://msdn.microsoft.com/ja-jp/library/office/bb448854%28v=office.15%29.aspx https://github.com/OfficeDev/Open-XML-SDK ただし、このOpenXML SDKは使い方が結構面倒で、 「エクセルのシートをちょろっと読み書きしたい」というだけでも、だいぶ仰々しいコードになって

先日インストールしてから、VS Codeをちょこちょこと使っています。 てことで、よく使いそうな操作などをメモしときます。 VS Codeの起動 右クリックメニューからの起動 ファイルを単体で開くときは、右クリックメニューから起動が手っ取り早いです。 完全にメインのエディタとして使うなら、ファイルの関連付けをした方が良いかと思います。。 ただし、日本語入力にはまだ難ありなので、個人的にメインエディタとして使用するのはもう少し先かな。 「ファイル名を指定して実行」からの起動 VS Codeをインストールすると、パスに追加されるようなので、コンソールからcodeと実行すると起動できます。 また、以下のように「ファイル名を指定して実行」ダイアログで「code」と打って実行しても起動できます。 なので、「Win+R」⇒「code」でサクっと起動できます。 タブ操作など エディタ領域を分割 「Ctr

つい先日4.0が出たばかりと思っていたら、もう5.0が出ました。 ただし5.0はLTS版ではないので、Node.jsの公式ページは以下のように、LTSの4系と5.0の両方がトップページに表示されるようになってます。 Node.js ちなみに、Node.js 5.0.0での変更点はこんな感じ。 https://github.com/nodejs/node/blob/v5.0.0/CHANGELOG.md 個人的に特に大きな変更点はコレ!! npm 3系へのアップデート node.jsにバンドルされているnpmのバージョンが上がりました。 npm3系については、以前こんなニュースがありましたが、それがNode.jsの標準として搭載されました。 http://www.infoq.com/jp/news/2015/07/npm http://www.infoq.com/news/2015/06/n

最近あちこちでElectronを使ったアプリが出てきたり、入門記事もちらほら見かけるようになってきました。 流行りものには乗っておこうということで、Electronをちょろっと使ってみました。 Electron JavaScriptでの入門は、良質な記事がネット上に多々あるので、 ここではTypeScriptを使ってElectronアプリを作ってみたいと思います． サンプルコード一式は、以下に置いておきました。 GitHubからcloneした後、npm installしてnpm startすれば実行できます。 準備 プロジェクトの作成 electronのインストール TypeScriptコンパイラ tsconfig.jsonの作成 tsdを使って型定義ファイルを用意 tsdのインストール 型定義ファイルの取得 作ってみる ボタンを押したらalert表示するだけのサンプル エントリポイントの

UWPではコンパイル時にバインディングを行うx:Bindマークアップ拡張という機能が加えられました。 今までのBindingマークアップ拡張よりもパフォーマンスが良かったり、コンパイル時の型チェックができたり、と色々メリットがあります。 (ダックタイプ的なバインディングができなくなるので、コンパイル時の型チェックについては若干デメリットともいえる部分もあるかもしれませんが。) 参考資料 MVAの動画&スライド UWPの各種バインディングについては、 以下のスライドに一度目を通しておくとよいかと思います。 ↓のページの「04 | XAML Data binding」のスライド http://www.microsoftvirtualacademy.com/training-courses/a-developers-guide-to-windows-10?prid=mvp-5001048 MSD