くうと徒然なるままに

超高校生級のXamariner です。

Connpass イベントページからレポートを自動生成するプログラムを作成しました。

きっかけ

とある理由で 勉強会を主宰するたびに、イベントレポートを毎回提出しなければいけなくなったため、 自動生成してくれるプログラムを作成しました。 怠惰 は大事。

使い方

  1. Connpass の URL を張り付ける
  2. 自動生成の元になる テンプレートを張り付ける or 既存の md ファイルから読み込む
  3. Translate ボタンをクリックして自動生成してもらう
  4. 自動生成した Markdown をコピーボタン or CTRL A + CTRL C
  5. はてなブログ等に張り付ける

当日の様子をTwitter、撮影した写真から数枚張り付ければ、最低限はできるかな。。。?

一応、次のバージョンでは、Twitterから自動でよさげなツイートを取得できるようにする予定です。

ソースコード

github.com

使い方

起動画面

https://lh3.googleusercontent.com/-M1xZvLtJh_0/WVSa3Vth_aI/AAAAAAAAKbQ/LeSlZKqiWdEsYQrCCyLmEGfMCypV7YpyACHMYCw/s0/2017-06-29_15-14-52.png

Connpass の URL を打ち込んだ画面

https://lh3.googleusercontent.com/-A6v9yEWFfZM/WVSbCbsAAjI/AAAAAAAAKbU/4ppmBqXWUEorOU4l3ltFjpbpmvIytfivQCHMYCw/s0/2017-06-29_15-15-36.png

テンプレートを読み込んだ画面

https://lh3.googleusercontent.com/-5wHOpKARA-s/WVSbPzViOzI/AAAAAAAAKbc/j0tk2RDgetICsWIgUIVzpqSbnAHtufVIACHMYCw/s0/2017-06-29_15-16-30.png

自動生成!

https://lh3.googleusercontent.com/-i8f3esas6sA/WVSbV5KRb2I/AAAAAAAAKbg/wQD3OwX81wI2IMqYxy8ZGo-XHsRCHkZSQCHMYCw/s0/2017-06-29_15-16-54.png

自動生成元テンプレート例

{Title} を開催しました。

# 開催内容

{MeetupDescription}...

詳しくは、[こちら]({MeetupURL})

#日時

{DateAndTime}

# 参加人数

{MemberCount} 人

# 当日の役割

運営・登壇

# 資料
[{TextURL}:embed:cite]

# 当日の様子など

技術的な挑戦

  • Angle Sharp
  • Material Design In XAML
  • RxProgramming in WPF
  • 自作テンプレートエンジン

AngleSharp

Web スクレイピングしてくれるライブラリ

見つけたきっかけ

さくさん先生のツイートを見て、興味を持ったから。今まで、 HTMLAgilityPack を利用していたから。

AngleSharp VS HTMLAgilityPack

AngleSharp の、 CSSSelector でタグを指定できるのは、気持ちよく感じた。ただ、慣れてないからそこの部分は、辛み。

個人的には、 Xamarin で使うことも視野に入れるなら、 AngleSharp を選択する。HTMLAgilityPack では、Xamarin な環境では、 X-PATH という機能が使えないから。AngleSharp の CSSSelector で要素を選ぶ方が良いと感じた。

上の Qiita の記事を見ていても、 AngleSharp は HTMLAgilityPack の上位互換のように感じた。

コード例

var doc = await new HtmlParser().ParseAsync(html);

var title = doc.Title.Replace("connpass", "").Replace("-", "");

var memberCount = doc.QuerySelectorAll(".amount span").Select(element => int.Parse(element.InnerHtml))
    .Aggregate((newValue, oldValue) => newValue + oldValue);

var textUrl = URL + "/presentation/";

var ymd = doc.QuerySelector(".ymd").InnerHtml;
var StartTime = doc.QuerySelector(".hi").InnerHtml;
var EndTime = doc.QuerySelector(".dtend").TextContent.Trim();

var dateAndTime = $"{ymd} {StartTime} - {EndTime}";

var meetupDescription = doc.QuerySelector("#editor_area").TextContent.Replace(" ","").Substring(0,256);

Material Design In XAML

WPF アプリケーションのデザインをよしなにしてくれるライブラリ 凝ったデザインにする場合は別だが、適当なデザインを最小のコストで作る という目的に着目すればかなりできる子

公式Github リポジトリのドキュメントを見ればすぐに導入できる

デザインを適当させたいときは、 Style を弄るだけでできて、最高!

FAB(Floating Action Button) を導入するコード例

https://lh3.googleusercontent.com/-1yaMy7vmSGQ/WVIuQOL4buI/AAAAAAAAKac/3Xir5XOIu_s1D9FOXZIrF1bpuTVPv_xfACHMYCw/s0/2017-06-27_19-06-52.png

<Button Command="{Binding OpenTemplateFileFromLocal}" ToolTip="Open Template File" Grid.Row="1" Grid.Column="0" HorizontalAlignment="Left" VerticalAlignment="Bottom" Style="{DynamicResource MaterialDesignFloatingActionDarkButton}">
            <Viewbox Width="36" Height="36">
                <Canvas Width="24" Height="24">
                    <Path Data="M4,2H20A2,2 0 0,1 22,4V16A2,2 0 0,1 20,18H16L12,22L8,18H4A2,2 0 0,1 2,16V4A2,2 0 0,1 4,2M18,14V12H12.5L10.5,14H18M6,14H8.5L15.35,7.12C15.55,6.93 15.55,6.61 15.35,6.41L13.59,4.65C13.39,4.45 13.07,4.45 12.88,4.65L6,11.53V14Z" Fill="Black" />
                </Canvas>
            </Viewbox>
        </Button>

RxProgramming in WPF

Prism,Reactive Property, Unity といった Rx なプログラミングを 実現するためのライブラリ群を WPF でも使ってみた(今まで Windows Store App, Xamarin といった環境で使用したことはあっても、 WPF で利用したことはなかった。

Prism Template Pack を使えば、すぐに導入できた。先人に感謝

自作テンプレートエンジン

C# でテンプレートエンジンは、どれがいいのかわからなかったので、自作してみました。

自作テンプレートエンジンの仕様

タグを埋め込むと埋め込んだタグが渡したクラスのプロパティを解析して、同じ名前のものが存在したら、そのプロパティの値と置き換わる感じです。

埋め込むタグ例

{Title }

テンプレートエンジンに渡すクラス例 (というか内部で使ってるクラス)

    public class ArticleData
    {
        public string DateAndTime { get; set; } = "";
        public string Title { get; set; } = "";
        public string MemberCount { get; set; } = "";
        public string TextURL { get; set; } = "";
        public string MeetupDescription { get; set; } = "";
        public string MeetupURL { get; set; } = "";
    }

結果

AI を使いこなせ! Cognitive Services 勉強会!

Twitter で教えてもらったことのメモ

String と string

String と string はどちらを使うべきか問題

調査したところ、 string を使うべきらしい。MSDN にコーディングガイドラインによると

stackoverflow.com

一応、 NETFX のソース的には、以下のようなコードが書かれてました。

public sealed class String : IComparable, ICloneable, IConvertible, IComparable<String>, IEnumerable<char>, IEnumerable, IEquatable<String>

ローカル変数は UpperCamel と Camel どちらがいいの問題

ローカルスコープの変数にUpperCamelのものとCamelなものが混在してる

Pascal or Camel らしい

Capitalization Conventions | Microsoft Docs

Array を意味ないのに list にしてる

Arrayを特に意味もないのにListにしてる事は一瞬で思った

これは、単純なコードの消し忘れミス

リテラル直書き禁止か否か

“"はstring.Emptyのほうが リテラルの意味をソースで理解できない場合があるから、僕のとこは一律ダメ… あと、仕様書上、名前が付いていないリテラルソースコードにあるのが許されないとか、変更時に水平展開漏れないかとかまぁ社内の事情。const string EMPTY_STRING = ”“ でも受>け入れOK

速度差はあまりないから、それ以外の部分に気をつけろという話のようですね。 可読性的には、自分のほかの方と同じで、 “” の方が見やすいとおもうので、それで行きたいと思います。

WPF で ファイルピッカーを開いてテキストを読み出す

やり方

WPF にて、 ファイルピッカー を開くためには、 OpenFileDialog というクラスを利用します。

コード

using Microsoft.Win32;
using Reactive.Bindings;
using System.IO;
---
var fileDialog = new OpenFileDialog();
var result = fileDialog.ShowDialog();
if (!result.HasValue || !result.Value) return;
var fileAddress = fileDialog.FileName;
if (!File.Exists(fileAddress)) return;
var fileText = File.ReadAllText(fileAddress);
if (string.IsNullOrWhiteSpace(fileText)) return;
return fileText ;

Xamarin 勉強会 in 名古屋 with JXUG, MSP, JXUG学生支部 を開催しました。

開催内容

なごやでもXamarinの勉強会が開催されます!今回は、なんと!講師として、日本マイクロソフトのテクニカルエバンジェリストの千代田まどかさん(ちょまどさん(@chomado))にも来ていただきます! 会の概要 このイベントは、Xamarinの基礎についてMSPのメンバー、MicrosoftMVPの方、ちょまどさんに教えていただけるイベントです。(初心者大歓迎!) 今回は、Xamarinで開発をしていく中でお世話になるかもしれないReactiveProgrammingという概念や、VSTSとXamarinの…

詳しくは、こちら

日時

2017/04/08(土) 13:00 - 18:00

参加人数

45 人

当日の役割

運営・登壇

資料

jxug.connpass.com

当日の様子など

https://scontent-nrt1-1.xx.fbcdn.net/v/t31.0-8/17855604_1475247202548637_4010635442289911111_o.jpg?oh=fc287f2df06eb78e74bdeaa9e3baee99&oe=59DFF712

https://scontent-nrt1-1.xx.fbcdn.net/v/t31.0-8/17854667_1475247339215290_870735033617529380_o.jpg?oh=903da027042822cdc9d03ce2e5dbe894&oe=59C3A55A

https://scontent-nrt1-1.xx.fbcdn.net/v/t31.0-8/17807451_1475247509215273_1396018021337513351_o.jpg?oh=8cc6ca2e50f0be0f8568315fe44c70b6&oe=5A10223E

https://scontent-nrt1-1.xx.fbcdn.net/v/t31.0-8/17855559_1475247775881913_2632130553606304334_o.jpg?oh=d26c96da99fc09ec17db7c1521323b4e&oe=59DEDC74

https://scontent-nrt1-1.xx.fbcdn.net/v/t31.0-8/17834840_1475248735881817_392619415528262172_o.jpg?oh=f131b20909d7135cb325fdce86382c1f&oe=59E15E4C

Xamarin から Bing Image Search を使うサンプルを公開しました。

MSP と CenterCLR が 6/24 に開催したイベント 「AI を使いこなせ! Cognitive Services 勉強会!」 にて、私達が登壇した、ハッカソンに出てみたお話」の登壇でデモとして使用した 「Xamarin から Bing Image Search を使うサンプル」 を公開しました。

サンプル自体は、 Xamarin 製ですが、 Bing Image Search を叩く部分は、PCL として切り離してあるため、 WPFASP.NET で、使用するときでも参考になるかと思います。

ソースコードのポイント

 public static async Task<List<ImageData>> GetBingImageSeatchAsync(string MemberName, string BingSubscriotionKey)
        {
            var client = new HttpClient();

            // Request headers
            client.DefaultRequestHeaders.Add("Ocp-Apim-Subscription-Key", BingSubscriotionKey);

            var uri = $"https://api.cognitive.microsoft.com/bing/v5.0/images/search?q={MemberName}";

            var response = await client.GetAsync(uri);

            var responseText = await response.Content.ReadAsStringAsync();

            var BingImageURLList = JsonConvert.DeserializeObject<BingImageSearchObject>(responseText);
            var BingMemberList = BingImageURLList.value
                .Select(value => new ImageData() { ImageURL = value.contentUrl })
                .ToList();
            return BingMemberList;

        }

Github

github.com

AI を使いこなせ! Cognitive Services 勉強会!

mspjp.connpass.com

AIが自撮りと欅坂46のメンバーと似ている判定するアプリ『KeyaLens』の配信を開始!

くぅは、 自撮りと欅坂46 のメンバーがどれくらい似ているか判定するアプリ『KeyaLens』を Google Play, Windows Store(審査に落ちた), Amazon Android App Store で配信開始いたしました。 f:id:kuxumarin:20170621233045p:plain 『KeyaLens』 は、自撮りを取るだけで、欅坂46 のメンバーとどれだけ似ているか AI が判定してくれるAndoid, Windows向けスマートフォン用アプリです。(iOS 向けは近日リリース予定)

特徴は、 アイドルとどれくらい似ているのかをスマホから写真を撮るだけで手軽に体験できます。

開発者向け宣伝

このアプリの 似ている度合いを判定するのは、 Microsoft Azure の Custom Vision Service を利用しています。 また、学習の過程で、 Bing Image Serch API を利用しています。

技術的な要素

  • Xamarin.Forms
  • Prism
  • Unity (DI Container)
  • Custom Vision Service
  • HtmlAgilityPack
  • Clean Architecture

f:id:kuxumarin:20170623202515j:plain f:id:kuxumarin:20170623202531p:plain

【『KeyaLens』の概要】
◆名称 :KeyaLens
◆価格 :完全無料
◆対応端末 :Android™, Windows10

Google Play

Google Play で手に入れよう

Amazon Android アプリストア版

www.amazon.co.jp

UWP (デスクトップアプリ・モバイル版)

ストアの審査に落ち続けたため、OneDrive へのリンクになります。 Add-AppDevPackage.ps1 を実行すれば、インストールされます。 ※ 設定>更新とセキュリティ>開発者向け>サイドロードアプリ よりサイドローディングを有効にしてください。

1drv.ms

Android は、Google Inc. の商標です。
※その他すべての商標は、各々の所有者の商標または登録商標です。

de:code 2017 にCognitive Hands On のスタッフとして参加してきました。

De:code とは、 日本Microsoftが主催している開発者向け大規模イベントで、 東京タワーの近くのホテルを借りて行われています。

今回、私は、 EXPO の中にある、 Cognitive Hands On のスタッフとして参加してきました。

スタッフについて

de:code の EXPO エリアに Azure のブースがあります。その中に、Cognitive Service についてのハンズオンのエリアがあります。そこでサポートスタッフみたいなことをしてました。

具体的には、 Cognitive Service のデモアプリを見てもらった後に、 ハンズオンをしてもらいました! みんな、Cognitive Service は聞いたことあるけど、実際に使ったことない方が多かった感じです。 おすすめな Cognitive Service を聞かれたときに、 LUIS をごり押ししましたw

セッション・キーノートの感想

キーノートの感想

キーノートは、全体的に 「AIはいいぞ」というメッセージを強く感じました。

たとえば、SQLServer 2017 に機械学習エンジンが搭載され、CT スキャンの画像からガンがあるかどうかを判定できたり、 機械学習エンジンの Chainner との協業 が発表されたりしてました。

また、 少し前までは、 Mobile First & Cloud First というメッセージを発信してましたが、 「intelligent Cloud &Intelligence Edge」に代わってる感じがしました。 モバイルデバイスだけでなく、 すべてのデバイスクラウドにつながるようになるんでしょうね。

セッションの感想

今年は、スタッフをやっていたということで、あまりセッション数は見ることができませんした。しかし、見たいものは大体見ることができました。 一応、見たセッションは以下のものになります。

Day 1

MW 04 「Xamarin 入門」コード共通化で開発スピードアップ!AIを活用したクロスプラットフォームアプリをXamarin で作ってみよう!

「AI を活用した」というところに惹かれて聴講しました。ちょまどさんのは、安定でわかりやすいですね。

Day2

D113 ダウンタイムを最小に! ~Azure における障害/災害に耐えうるアーキテクチャ設計のポイント~

セッションレベルは400 らしく、ガツンとくる内容でした。正直朝一にこの内容はキツイw耐障害性に必要となる用語・計算方法について解説があった後に、各サービスでの耐障害性の対応状況、構築時のリファレンスモデルの紹介があった感じです。。

MR09 デスクトップ アプリをストアから配布するための A to Z

荒井セッションです。今年は、前年までと違い最後ではなく途中に配置されていました。 COM のお話とか、前年の内容をもとにさらなる応用的な内容が中心でした。UWP と、既存の Win32 アプリと Bridge された Win32 アプリとの動作時の制限の違いなどについての説明がありました。 おそらく、ここに書くためにはスペースが足りないのでここらへんまでにしておきます。詳しくは、 de:code 振り返り会で。で。

CT 05 Xamarin を支える技術 2017

榎本 温さんによる Chalk Talk です。 参加者に、どこかで顔を見たことがあるような方が多かった印象です。Chalk Talk へは参加するのが初めてでした。参加者と登壇者との双方向コミュニケーションが活発に行われるとうのは聞いていました。しかし、実際はXamarin に対する解説で時間がほとんど終わってしまったのが残念でした。 また、de:code は参加者が多いため難しいかもしれませんが、 30 人も同じ部屋に入って双方向コミュニケーションをするのは難しいのではないかと思いました。10 人ぐらいの人数が最適では?

知りたかったことを知れたし、スタッフもできたし、最高でした。 あと、意外にブログを見てます。って言われたので少しうれしかったですw

WPF の UserControl で コントロールの高さと幅を取得する

やりかた

WPF アプリに UserControl を追加します、以下のような コードを高さを幅を表示するために追加しておきます。

具体的には、 ActualHeight メソッドと、 ActualWidth メソッドを利用することで取得できます。

Xaml コード

<StackPanel>
    <TextBlock Name="Height"></TextBlock>
    <TextBlock Name="Width"></TextBlock>
</StackPanel>

CSharp コード

public UserControl1()
{
    InitializeComponent();

    Height.Text = ActualHeight.ToString();
    Width.Text = ActualWidth.ToString();
}

しかし、取得できない

2つ並べたテキストブロックに UserControl の高さと幅が表示されることが想定されますが、実際には、表示されていません。

解決策

非同期 で ActualHeight メソッドと、 ActualWidth メソッド を実行する

この問題は、一見同期的に実行されるように見えるメソッドが非同期で実行されるところに問題があります。 具体的には、以下のメソッドは、 Xaml を解析したり、コントロールを配置したりするメソッドです。このメソッドが非同期的に実行されます。

InitializeComponent()

そのため、

InitializeComponent() が呼び出されたすぐ後に、 UserControl の高さと幅を取得しても、 0 になってしまいます。

ということで、 今回は、 Dispatcher.BeginInvoke() メソッドを使って解決していきます。

CSharp コード

 public UserControl1()
        {
            InitializeComponent();

            Dispatcher.BeginInvoke(new Action(() =>
            {
                Height.Text = ActualHeight.ToString();
                Width.Text = ActualWidth.ToString();
            }),
            DispatcherPriority.Loaded);
        }

実行結果

できました。

解決策②

実際に使うときは、ウィンドウの大きさを変えたときにも対応できるようにしたいといけないため、対応できるコードも置いておきます。

SizeChanged += (sender, args) =>
{
    Height.Text = ActualHeight.ToString();
    Width.Text = ActualWidth.ToString();
};

実行結果