クイズこの人は誰「関西IT勉強会顔出し活動の有名人編」
うわーびっくりするなあ去年アドベントカレンダー書いてから１年放置か。
今年はアドベントカレンダー参加せんかったんやけど、なんかこの時期はなんか書かなアカンなあと思ったので来てみたら１年ぶりか。
気分的にはアドベントカレンダー書いてるつもりで軽いのをちょっと書いてみる。
皆さん dlib ってご存知？じゃあ、OpenCVは？
ちまたでは機械学習大ブームで次元次元とか言うてますけど、大丈夫ですか？乗り遅れてませんか？
はい、私は遅れてます。だって、テンソルとか言われても難しすぎでしょ？カリー化とか不動点コンビネータとか言い出した頃ぐらい難しすぎます。
テンソル - Wikipedia
https://ja.wikipedia.org/wiki/%E3%83%86%E3%83%B3%E3%82%BD%E3%83%AB
なので、アホはアホらしくそういう難しいことは考えずに、最先端の人たちの研究結果を享受しましょう。
ってわけで、今日テーマは dlib でクイズこの人は誰「関西IT勉強会顔出しの人たち編」をお送りします。
とは言ってもそれだけじゃ、なんのこっちゃわかんないので練習問題を。
うおーきれいに顔のパーツ認識してますねーさすが人類の英知SVM。素人でも自分GPU使って学習させんでも、dlib使えばこれくらいは余裕ですねー
※dlib のサイトにおいてある正面顔の学習済みデータは使ってる。
サポートベクターマシン - Wikipedia
https://ja.wikipedia.org/wiki/%E3%82%B5%E3%83%9D%E3%83%BC%E3%83%88%E3%83%99%E3%82%AF%E3%82%BF%E3%83%BC%E3%83%9E%E3%82%B7%E3%83%B3
だがしかし、この問題はムズい。練習問題のくせにムズすぎる。。。
元の写真結構良い写真なのになー
では、ネット上に存在してる画像を厳選していつもの角度のをみてみましょう。
今回もいい感じにパーツ認識してますねーさすがdlib！
しかも、このいつもの見慣れた角度に、がおーと何かを叫んでるような大口。
もうお分かりですねー
せーかいは
すごない？マジで。OpenCVでお手軽顔認識とかも前に実験したけど、学習させてないときはこんな精度でんかったもんね。
一応 dlib のC++版のサンプルを動かしただけで結果を載せとくと。(俺っちPython書けないんでC++でイジってる、とはいえ久々のC++げーはきそうやけどｗ)
若干エッジが甘かったり、位置が微妙やったりするのは画質のせいやと思う。HOG特徴量抽出は暗部ノイズに弱いんじゃないかなと思う。
※HOG特徴量のWikipedia無かったー
まあまあ画質が良いのを認識させると超笑顔でもいい感じに抽出できる。
同じこざけさんでも暗部ノイズがのってる画像だと認識精度はずいぶん落ちる。
もう少し時間を見つけて、この辺の実験とかもやってみて結果報告してみたいとは思っています。
この辺で遊び始めちゃうと高性能なパソコン欲しくなっちゃって困るんだよなーそしてPython書けなイカン。
今日はこの辺で、ごきげんよう。良いお年を。
Visual Studio CodeでJavaScript開発しよう
今日の記事は、Visual Studio / Visual Studio Code Advent Calendar 2015 11日目のエントリーです。
Visual Studio / Visual Studio Code Advent Calendar 2015 - Qiita
12月の9日時点で結構埋まってるのに11日だけ空いてたので、ちゃっかり登録しちゃいました。
去年はかなりタフなAdvent Calendarばかり書いちゃったので今回は軽い感じでいきます。
基本的に初学者に優しいブログを目指していますので技術的難易度は低めです。
で、最初に「Visual Studio CodeでJavaScript開発しよう」ってタイトルで書こうと決めて、この数日前に更新されたVS Code拡張のDebugger for Chromeを使ってgulpでbrowserify使ってsource mapsも使ってトランスパイルしたES6のJavaScriptをChrome上でデバッグするようなアツいネタを書こうと思ってました。
でも、ちょっと時期尚早でした。挫折しました。
いや、最近の動きから言うともしかしたらタイミングの問題だけなのかも知れません。
Advent Calendarのネタ的には当初の目論見はあきらめざるを得ない感じになっちゃいました。
とは言うもののNode.jsで動くちょっとしたコードなんかを手軽に試して手軽にデバッグすると言うような用途にはVS Codeは抜群に使えると思います。（トランスパイルしないか、トランスパイル後のコードをデバッグするのであれば）
またgulpとの連携も現時点で問題なく出来ているので、もう少し待てば上に書いたようなbrowerifyやbabelifyを駆使したような開発もいい感じになるんじゃないかと期待しています。
現時点であんまり情報が無かったVS Codeとgulpとの連携について書いておきます。
・ともかく作業フォルダを作る
・そのフォルダをVS Codeで開く
・そこにgulpfile.jsを作る（中身は後述）
・F1キーを押して、taskとか入れるとConfigure Task Runnerが出るのでそれを選びます。
・するとgulp用のtasks.jsonが出来上がるので、tasksにgulpタスクを追記する
・ctrl + shift + bでgulpタスクを実行します。
こんな感じ。
gulpfile.js
var gulp = require('gulp');
gulp.task('default', function() {
console.log('Hello gulp world');
});tasks.json
tasks.json
{
"version": "0.1.0",
"command": "gulp",
"isShellCommand": true,
"args": [
"--no-color"
],
"tasks": [
{
"taskName": "default",
"isBuildCommand": true,
"showOutput": "always"
}
]
}色んな意味で変化の激しい領域なので、半年後ぐらいには相当変化してるだろうと思います。
そういう意味でもしばらく目が離せない状況が続くんではないでしょうか。
ま、これまた色んな意味で情報を追っかけるだけでも大変なんですけどね。
じゃんじゃんVS Code使っていきましょう！
近況報告
半年ぐらい前に転職して、しばらくXamarin+MVVMçrossなスマートアプリの開発をやってた。
今月からWindows10２を導入し、UWPアプリの謎にせったり迫らなかったりの毎日になりそう。
正直言えばXamarinベースでやったことないスマホアプリ開発よりは、UWPでアプリ作りなおす
方がずっと良い。色んな大変さもあるかもしれんのやけどね。
あずはWindow10に慣れること、次にUWPの新機能をチェックすること、それぐらいかな。
UWPつってもタブレットでしか動かさないし、既存品のリプレースやし、大きな問題は無いかもと思ってる。
MVVMLightかPrism入れてコンポーネント化を勧めて。保守性と拡張子の高いアプリにしたいな。
なので、個人的にMVVMLightかPrismを試しに使ってみたい思ってる。
しばらくはUWPでデータバインディングの修行って感じなる。さて、どうなりますことやら。
WPF 垂直GridSplitterのポイント
１周遅れのWPF入門です。難易度低めやけど、ハマるとつらい系。
検索してこのページに辿りついてる人ならご存知の通り、WPFのGridSplitterって結構正しく書くのが難しい。
そもそも GridSplitterってなんやねんって人はあんまいないと思うけど、図示してみると
実は正しく機能させるためのポイントは決まってる。
- 外枠になるGridを３分割する
- 左側のペイン
- つまみ(GridSplitter)
- 右側のペイン
- ３分割した真ん中のペインのサイズをAutoにする
実際MSDNにもそう書いてる。
方法 : ユーザーによるサイズ変更が可能なアプリケーションを GridSplitter で作成する | Microsoft Docs
でも、そのポイントだけじゃうまくいかないのな。今日はそういうお話。
順番に行きます。
- VS2013 でWPFアプリケーションのプロジェクトを新規で作る
- Gridを３分割する
- 真ん中をGridSplitterする
- ３分割Gridの真ん中のWidthをAutoにする
１．VS2013 でWPFアプリケーションのプロジェクトを新規で作る
WpfApplication1って名前でテキトーに。（今回はさすがに省略します）
２．Gridを３分割する
ここで
<Window x:Class="WpfApplication1.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="MainWindow" Height="350" Width="525"> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="167*"/> <ColumnDefinition Width="Auto"/> <ColumnDefinition Width="318*"/> </Grid.ColumnDefinitions> </Grid> </Window>
まあ、全部手で書いてもしれてますね。GUIでの編集がおすすめですが。
続いて
３．真ん中をGridSplitterする
Grid.Column="1"にWidth="5"のGridSplitterを配置します。
<Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="167*"/> <ColumnDefinition Width="Auto"/> <ColumnDefinition Width="318*"/> </Grid.ColumnDefinitions> <GridSplitter Grid.Column="1" Width="5"/> </Grid>
この状態で実行してみると、確かにそれっぽい雰囲気になります。
これでＯＫなハズなんやけど、実際には奇妙な挙動になります。
具体的には、GridSplitterが右には移動するけど左にはいかないのです。
より現象がわかるように左のペイン(Grid.Column=0）と右ペイン（Grid.Column=2）に背景色をつけてみましょう。
<Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="167*"/> <ColumnDefinition Width="Auto"/> <ColumnDefinition Width="318*"/> </Grid.ColumnDefinitions> <StackPanel Grid.Column="0" Background="Aquamarine"></StackPanel> <GridSplitter Grid.Column="1" Width="5"/> <StackPanel Grid.Column="2" Background="DodgerBlue"></StackPanel> </Grid>
実行したらこんな感じ。
で、左にはGridSplitterが動かないので右に移動させると
こうなって・・・
あれれー
モーゼの十戒みたいに左右にペインが割れていきます。なんだこれ？
さて、いよいよ今回の記事の結論です。
実はこの謎の挙動はGridSplitterに１つ属性を追加するだけで解決できます。だけど、わからんかったらずっとわからんと思うんだよねー
答えは
「HorizontalAlignmentにCenterもしくはStretchを入れる」
です。
ええっHorizontalAlignmentのデフォルトってStretchじゃねーの？って思うよねー
でも、このケースは違う。挙動から推測するとHorizontalAlignment="Right"になってる。（ちなみにHorizontalAlignment="Left"って設定すると、右には行けなくて左に動かすとモーゼの十戒みたいになる。蛇足ながら）
垂直GridSplitter設定したのにモーゼの十戒になっちゃうとお困りの方は、GridSplitterに
「HorizontalAlignmentにCenterもしくはStretchを入れる」
を試してみてください。
では、ここまでの全XAMLコードを載せます。
<Window x:Class="WpfApplication1.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="MainWindow" Height="350" Width="525"> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="167*"/> <ColumnDefinition Width="Auto"/> <ColumnDefinition Width="318*"/> </Grid.ColumnDefinitions> <StackPanel Grid.Column="0" Background="Aquamarine"></StackPanel> <GridSplitter Grid.Column="1" Width="5" HorizontalAlignment="Center" /> <StackPanel Grid.Column="2" Background="DodgerBlue"></StackPanel> </Grid> </Window>
こういう話はほぼほぼWindows Store App用のXAMLでも同じ感じになります。
Windows Store Appの場合Gridレイアウトをどの程度使うかって話はありますが。
以上です。
2014年Advent Calendarに参加して
今年初めてAdvent Calendarに参加したわけですが、調子にのって５個も参加してしまいました。
転職して１年半、しがらみも足かせも無くなったのもあって全力で関西の勉強会に参加するようになりました。
年に何度か発表する機会もいただき、関西の勉強会界隈で知ってもらえる機会も増えました。
と同時にブログを書く気持ちが減退していたのも事実です。
勉強会で発表すると受けるにせよ、受けないにせよ、即座に反応がわかります。
一方ブログの場合、そうはいきません。ありがたいことにこういう過疎ってるブログでもコメントいただくこともありますが。
今回Advent Calendarに沢山登録した理由は
- Advent Calendar 駆動でブログを更新すること
- 家でのコーディングを自己満足に終わらせずにアウトプットすること
- やっぱりみんなに楽しんで欲しいこと
まあ、勉強会で発表するのとほぼほぼ同じ理由ですかね。
人間弱いもんなので、なんだかんだ理由をつけてサボってやらないことを正当化して、できない理由づけをしようとしてしまいます。
毎日のように家で実験コードを書いていても、それをブログの記事にするのはコストが高い。
かと言って、GitHubに説明もなしに書きっぱなしのソースコードをあげるだけってのもやっぱり違う。
アウトプットをきちんとせなアカンなあって思いつつも怠けてた自分を追い込むためにAdvent Calendarの力を借りたってことなのでした。
2015年は最低でも週一でブログを更新するようになろう。と、軽い目標を立てました。このエントリが2015年の自分を追い込むように。
おまけ。
いろふ Advent Calendar の反響。
前日のガチネタやったWPFで3D Visualizationをフリにしたネタやったわけですが、irofさん人気なのかみうみう人気なのか不明ながら、サイトへのアクセスがほそぼそと続いています。（驚）
クリスマスの晩にみんな、何やっとんねん。
終わり良ければすべて良しとなるように、明日仕事納めして来年また頑張るぞー！！！
irof 3d visualization
今日の記事は、いろふ Advent Calendar 2014 22日目のエントリーです。
いろふ Advent Calendar 2014 - Adventar
私が関西の勉強会に積極的に参加しだすようになったのは、2013年の1月の終わりの頃でした。
当時から既にirofさんは有名で特にツイッターで有名でした。マルチインスタンスがどうこう言われてたと記憶しています。
幸運にも私は結構早い段階(2013/2)にDevLove関西の勉強会でirofさんと接触しました。
・・・そんなのどうでも良いですね。
まずはお絵かきします。好きなペイントソフトを用意してコアラの絵をかきまぁす！
私は今回 Paint.net というソフトを使いました。
手書き感が持ち味なので、わざとマウスでいい感じに書きまぁす！
つづいて、3DソフトでUV座標系のチェックをします。
どうしましょう！コアラ感が失われてしまいました！
まあでもマッピング座標系は完璧です！さすが俺！
ほんで、何はなくともVisual StudioというわけでVisual Studio 2013を立ち上げて"いろふさん"と言う名前の空のASP.NETプロジェクトを作成しまぁす！
そのあと、２・３時間昼寝でもしてください。
zzz
zzz
zzz
３時間後。
妖精さんの活躍のおかげでいろふさんの3D Visualizationが出来ました！
さすがです！さすがマルチインスタンスです！見事に可視化されています！
ん？
んん？
んんん？
なんか色の違うインスタンスが混ざってる！！！
なんやこれ！？
みうみうなんできたん？
めちゃやっつけ仕事ですけど、今回の妖精さんの作品は↓↓↓
http://fuku518.azurewebsites.net
にて公開中です。Chrome推奨、メモリもCPUパワーも結構食うと思います。飽きたら閉じといてください。
※いつまで動かしとくかは不明です。止まってたらごめんなさい。
レアインスタンスがゲットできない場合はリロードしたり気長に待ってみてください。きっとでまぁす！
こういうガチのアドベントカレンダーって一回やってみたかったんだ！満足満足。
WPFアプリケーションをレイヤー付きで可視化するツールの制作
今日の記事はFriendly Advent Calender 2014 20日目のエントリーです。
Friendly Advent Calendar 2014 - Qiita
本日のエントリはFriendlyのAdvent Calenderでありつつ、WPF(XAML) Advent Calender番外編でもあります。
私は、大阪のフィードテイラーというスマホ/タブレット向けのソフトウェア開発の会社でWindowsプラットフォームを担当しています。
この１年半でC#やWPF、ストアアプリ開発に真剣に取り組んできた中で、関西で知り合った勉強会仲間たちから教わった技術を総動員して、今できる2014年の集大成的なツールでも作ってみようかと思ったのを形にしてみました。
プログラマなんで口では仕事できないので、ソースコードか動くプログラムで語りたいと思います。
私は可視化が好きだ。
コンピューターグラフィックスが好きだ。
インタラクティブなのはもっと好きだ。
（みうみう風）
というわけで、ネタ的にはコンピュータグラフィックス的と言うかお絵かき的な簡単なツールの技術検証プロトを制作したいと思います。
先月末にあっためとべや大阪で準備したWPF3Dと今年６月のAsian Automation Alliance（通称:みうみう祭り）で発表したFriendlyを組み合わせて可視化ツールをぱぱっと作ってみたいと思います。
2014/11/29 Room metro #28 大阪 「XAML Day」 Room metro #28
2014/6/28 Asian Automation Alliance 6月28日 Asian Automation Alliance ～自動化を語り合おう！(2014/06/28)(兵庫県)
実現したいことは
です。あんまり時間が取れなかったので、最低限しか実現できてませんが動作イメージは↓こんな感じ。
表示対象のアプリケーションはAtlassianのSourceTree（みんな使ってるよね！）の例です。
実現するにあたっていろいろと課題がありました。解決できていない問題もいろいろと残っています。
が、Friendlyの実行中の別プロセスから情報を持ってくると言う強力な能力とWPF 3Dを組み合わせることでこんなこともできるんだなって言うのを実際に動かして感じてもらいたいです。
初期状態
拡大中
グリングリン
コントロールの選択
ここまでのソースコードはGitHubにあげていますので、開発環境のある方は是非試してみてください。
GitHub - fuku518/WpfVisualizer
ほんで感想とかいただけると嬉しいです。
使い方
- GitHubからクローンします
- 3D Tools for the Windows Presentation Foundation をダウンロードします。 https://3dtools.codeplex.com/
- Petzold.Media3D library(Charls Petzold!!!) http://www.charlespetzold.com/3D/Petzold.Media3D.dll
- プロジェクトの参照に上の２つのDLLを追加します
- ビルドして実行
操作方法
制限事項
- DLLインジェクションを使ってるので、操作後に解析対象のアプリを再起動しないといけないと思います
- 解析対象のアプリと同じターゲットでビルドする必要があります。x64アプリならWpfVisualizerもx64でビルドしてください
- WPF アプリでも解析できないアプリがいろいろあると思います（まあ、アルファ版なので）
- レンダリングに失敗するコントロールが山ほどあります（ノウハウいりそう）
世界一のテスト自動化ライブラリーFriendlyの存在を知らなかったら、このツールを作れなかったですし、作れるとも思わなかったと思います。
Friendlyはテスト自動化ライブラリーなんですが、テスト以外のツール（実行時の解析系）に広く応用がきくと思います。
以上で今回の Friendly Advent Calender 2014 featuring WPF は終わりです。
徹夜しながら作ったので、最後の方はぼーっとしてきて全然バグが取れなくて死にそうでした。でも、ここまでできたので満足です！
