くうと徒然なるままに

モバイルアプリを作りながらバックエンドも作っています。

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 - Framework Design Guidelines | Microsoft Docs

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

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

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

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

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

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