Azure Logic Appsを試す

Azure Logic Appsを導入しました。なぜ導入したかと言うと以前に書いたAzure Schedulerが2019年9月で終了するからです。
tekitoumemo.hatenablog.com
こんなメールきてびっくりしました。Azure Scheduler作った時に教えてよ！って感じですがまぁ良いです。

Azure Logic Appsとは

AzureのサービスやいろんなAPIやらを組み合わせてサービス作れるよってやつです。

業務上重要なアプリやサービスを Azure Logic Apps に接続して、コードを 1 行も書かずにワークフローを自動化します。

が謳い文句ってやつでしょうか。
azure.microsoft.com

導入方法

AppServiceから「Logic App」とフィルタかけると見つかります。

トリガーを作る

「ロジック アプリ デザイナー」から作ります。

あまり説明するところはないのですが、スケジュール決めてあとは好き勝手にHTTPやらAzureやらいろんな物を組み合わせてくサービスです。最近流行ってるRPAツールですね。

スケジュール

HTTP

なんかいっぱいある

値段

僕の場合は3（アクション）×24（毎時）×30（日）で2160（アクション）回動かすので以下でした。

6円？安くね？ほんとこれ？ちょっと疑問はありますがまぁ値段かかってから確認します。

よくわかってない

トリガーってAppServiceごとにしか作れないのだろうか？
まぁいつか調べます（絶対調べない）

感想

AzureのサービスはAzure Schedulerみたいな微妙なサービスがいっぱいあるのでおそらくここに統合されたサービスがいっぱいあると思います。なのでAzure Logic Appsをみて物足りなかったら他を探すでいいかなと思いました。Azure Schedulerとか1500円したので高杉。

後日

１週間でかかった値段

ひと月8円かかる計算（安杉
トリガーも複数設定できるみたいなのですが、デザイナーからは出来ないようです。

Azure App Service on Linuxで.Net Coreアプリを公開

.Net Coreアプリ作ったのならLinuxで公開したい！って思ったものの、あまり必要性が感じられなかったので手付かずだったのですが値段見たらまぁびっくり！

Windows

Linux

３０００円近くも変わるじゃん！前はほぼ値段変わらなかったのになぜにこんな差が。。まぁそんなこんなでみんなの洋楽ランキングLinuxサーバに移行計画を立てました。PaaSだからGithubブランチ指定してすんなり行くと思いきや、まったくダメで情報も全然無くて結構大変だったので丁寧に書いておきます。

Web Appをたてる

OSはLinux、公開はコード、ランタイムスタックは.Net Core 2.1で。Dockerの方が値段安いっぽいけどちゃんと調べてないから次回へ（たぶんやる）。しかも今ならB1インスタンスが１ヶ月無料なのでやりたい放題っす。

Githubのブランチからデプロイ

Github、Bitbucket、その他もろもろから合ったものを選んでください。

ブランチにPushされたら勝手にデプロイされます。

エラーが出る

はい、ダメでした。原因を探ります。失敗したところをクリックすると以下の画面が表示されます。ログを表示をクリックします。


「Object reference not set to an instance of an object」とでます。おなじみのメッセージですが、意味不明です。これはプロジェクトにsln（ソリューション）ファイルを含めるとkuduが解析出来ないのでダメみたいです。slnを消してプロジェクトを一つにすれば問題ないのですが、テストやライブラリなど複数のプロジェクトがあることが多いのでプロジェクトを一つにする方法はイケてませんし、マルチプラットフォームの意味がないですね。みんなの洋楽ランキングもDapperの自作拡張ライブラリ、定期更新系のAPIライブラリ、テストなどプロジェクトが分かれているので一つにする選択肢はありません。これを回避する方法があります。

ちなみにkuduとは

Kudu is the engine behind git deployments in Azure App Service.
Kuduは、Azure App Serviceのgitデプロイメントの背後にあるエンジンです。（翻訳ママ）

.deploymentファイルとCustom Deployment Scriptを設置する

Custom Deployment Scriptを準備

deploy.shファイルのWebApplication1はプロジェクトに合わせて変えてください。deploy.shはシェルスクリプトなんで名前はなんでもよいです。

#!/bin/bash

# ----------------------
# KUDU Deployment Script
# Version: 1.0.13
# ----------------------

# Helpers
# -------

exitWithMessageOnError () {
  if [ ! $? -eq 0 ]; then
    echo "An error has occurred during web site deployment."
    echo $1
    exit 1
  fi
}

# Prerequisites
# -------------

# Verify node.js installed
hash node 2>/dev/null
exitWithMessageOnError "Missing node.js executable, please install node.js, if already installed make sure it can be reached from current environment."

# Setup
# -----

SCRIPT_DIR="${BASH_SOURCE[0]%\\*}"
SCRIPT_DIR="${SCRIPT_DIR%/*}"
ARTIFACTS=$SCRIPT_DIR/../artifacts
KUDU_SYNC_CMD=${KUDU_SYNC_CMD//\"}

if [[ ! -n "$DEPLOYMENT_SOURCE" ]]; then
  DEPLOYMENT_SOURCE=$SCRIPT_DIR
fi

if [[ ! -n "$NEXT_MANIFEST_PATH" ]]; then
  NEXT_MANIFEST_PATH=$ARTIFACTS/manifest

  if [[ ! -n "$PREVIOUS_MANIFEST_PATH" ]]; then
    PREVIOUS_MANIFEST_PATH=$NEXT_MANIFEST_PATH
  fi
fi

if [[ ! -n "$DEPLOYMENT_TARGET" ]]; then
  DEPLOYMENT_TARGET=$ARTIFACTS/wwwroot
else
  KUDU_SERVICE=true
fi

if [[ ! -n "$KUDU_SYNC_CMD" ]]; then
  # Install kudu sync
  echo Installing Kudu Sync
  npm install kudusync -g --silent
  exitWithMessageOnError "npm failed"

  if [[ ! -n "$KUDU_SERVICE" ]]; then
    # In case we are running locally this is the correct location of kuduSync
    KUDU_SYNC_CMD=kuduSync
  else
    # In case we are running on kudu service this is the correct location of kuduSync
    KUDU_SYNC_CMD=$APPDATA/npm/node_modules/kuduSync/bin/kuduSync
  fi
fi

if [ "x$DEPLOYMENT_TEMP" = x ]; then
    DEPLOYMENT_TEMP=/tmp/`date +%s`
    CLEAN_LOCAL_DEPLOYMENT_TEMP=true
fi

if [ "x$CLEAN_LOCAL_DEPLOYMENT_TEMP" = xtrue ]; then
    rm -rf "$DEPLOYMENT_TEMP"
    mkdir "$DEPLOYMENT_TEMP"
fi
##################################################################################################################################
# Deployment
# ----------

echo Handling ASP.NET Core Web Application deployment.

# 1. Restore nuget packages
dotnet restore "WebApplication1/WebApplication1.csproj"
exitWithMessageOnError "dotnet restore failed"

# 2. Build and publish
dotnet publish "WebApplication1/WebApplication1.csproj" --output "$DEPLOYMENT_TEMP" --configuration Release
exitWithMessageOnError "dotnet publish failed"

# 3. KuduSync
"$KUDU_SYNC_CMD" -v 50 -f "$DEPLOYMENT_TEMP" -t "$DEPLOYMENT_TARGET" -n "$NEXT_MANIFEST_PATH" -p "$PREVIOUS_MANIFEST_PATH" -i ".git;.hg;.deployment;deploy.sh"
exitWithMessageOnError "Kudu Sync failed"


##################################################################################################################################
echo "Finished successfully."

.deploymentファイルを準備

.deploymentファイルはデプロイ時に実行されるスクリプトを記述するファイル（正直よくわかってない）で先ほど準備したCustom Deployment Scriptを指定します。フルパスにしないとNot Foundが出るのでちゃんと指定します。

[config]
command = /home/site/repository/deploy.sh

準備が出来たらPushしてください。

Custom Deployment Scriptは以下を参考に
github.com

再度デプロイする

次はデプロイが成功するはずなので、サイトを見に行きます。

そうするとサイトが立ち上がりません。

MVCテンプレ作ってデプロイしたらちゃんと動いたので、謎です。

スタートアップ ファイルを指定する

[アプリケーションの設定]からスタートアップ ファイルを指定します。ここで重要なのは、各フレームワークによって指定の仕方が違います。.Net Coreは以下の通りです。こんな記述方法知らんがな。

dotnet <myapp>.dll

ここにフレームワーク毎の指定方法が書いてあります。
docs.microsoft.com

サイトを確認する（二度目）

はい。動いたけど動いていません（え
心折れそうになったんですが、一つ心当たりが合ったのでそれを実施しました。

.Net Coreのバージョンを下げる

以前の記事で.Net Coreのバージョンを2.1.5にあげました。
tekitoumemo.hatenablog.com
公式ではApp Service反映してるよ！って言ってたのですがエラーの内容から怪しいのでバージョン指定なしでプロジェクトファイルの内容を変更します。

<PackageReference Include="Microsoft.AspNetCore.App" Version="2.1.5" />
↓
<PackageReference Include="Microsoft.AspNetCore.App" />

何も指定しないと2.1.1になるみたいです。

はい、確認しましょう。

サイトを確認する（三度目）

よっしゃー！ざっと見た感じ、Reactも動いてるしいい感じですね！もうちょっと動作確認したり、Coreのバージョンを下げたのでそれに伴ってNugetのバージョンを下げる必要がありそうです。また、移行する時間、告知、メンテナンス中のページとか作らなきゃいけないですので今月いけるかな〜？って感じです。

さいごに

記事では流れで書いているので簡単そうに見えますが、昨日の夜から今日も仕事でしたが適当にタスク２つぐらい終わらせてあとはずっと調べてました（クビ。開発もMacでやってるしWEBサーバーもマルチプラットフォームで実現出来たのでサービス開始から５ヶ月でようやく完全マルチプラットフォーム化実現しそうです。一応、Windowsでも動くような構成にしてるので（Windows機ないからわかりませんが）どの環境からも開発できるようになりました。.Net CoreのリリースノートにApp Serviceも反映したよって書いてあったのですがAzure App Service on Linuxは完全別物なんですね。3000円浮くし、application insightsとかゆくゆくはKubernetesとか試して見ようかなと思います。最後に参考になったサイトのリンクを貼っておきます。

Deploying ASP.NET Core to App Service on Linux – Honza's Blarg
Azure web app on linux deployment failed on deploy.ssh - Stack Overflow
Azure App Service on Linux の FAQ | Microsoft Docs

ASP.NET MVCにおけるモデル検証について

かなり一般的なネタですが、以外に実装されている現場が少なく、色々処理した後にエラーチェックしてバグる現象が発生していることが多い気がするので備忘録として。以下に書いているコードは.Net Core2.1です。Frameworkでもほぼ一緒なので参考になるかなと思います。

モデル検証って言うとなんか小難しく感じるのですが、要はエラーチェックです。公式はこう言ってます。

アプリでは、データベースにデータを格納する前に、データを検証する必要があります。 データにセキュリティ上の脅威がないかどうかを確認し、種類とサイズが適切に設定されていることを検証しなければなりません。また、ご自身のルールに準拠している必要もあります。

で、ASP.NETだと簡単にできるよって言ってます。

検証を実装するのは冗長で面倒な場合がありますが、必要不可欠です。 MVC では、検証はクライアントとサーバーの両方で発生します。
さいわい、.NET では検証が検証属性に抽象化されています。 これらの属性には検証コードが含まれているため、開発者が記述しなければならないコードの量は少なくて済みます。

まぁ、他のフレームワークでもあるよねって感じですが。

本題に入ります。

モデル

Personというモデルがあり、名前と年齢が定義されています。

public class Person {

    public string Name { get; set; }

    public int Age { get; set; }

}

名前は１０文字まで、年齢は９９歳までというバリデーションをつける場合はAttributeをつけます。

[Display (Name = "名前")]
[MaxLength (10)]
public string Name { get; set; }

[Display (Name = "年齢")]
[Range (0, 99)]
public int Age { get; set; }

これで条件通りのバリデーションをつけれますが以下のようなエラーが出力されます。

"The field 名前 must be a string or array type with a maximum length of '10'."

これだとアプリ毎に適切なメッセージじゃないのでメッセージをつけます。

[Display (Name = "名前")]
[MaxLength (10, ErrorMessage = "{0}は10文字まで")]
public string Name { get; set; }

[Display (Name = "年齢")]
[Range (0, 99, ErrorMessage = "{0}は99歳まで")]
public int Age { get; set; }

これで以下のようなメッセージが出力されます。

"年齢は99歳まで"
"名前は10文字まで"

バリデーションはいろんな種類があるので以下を参考にしてください。
docs.microsoft.com

次にアプリ独自の検証は必ず必要なので、CustomValidationAttributeで検証します。今回はsaitoって名前で29歳（僕）だったらエラーにします。

public class Person {

    [Display (Name = "名前")]
    [CustomValidation (typeof (Person), "CheckName")]
    public string Name { get; set; }

    [Display (Name = "年齢")]
    public int Age { get; set; }

    public static ValidationResult CheckName (string value, ValidationContext context) {
        var model = (Person) context.ObjectInstance;
        if (model.Name == "saito" && model.Age == 29) {
            return new ValidationResult ("この人はダメです。");
        }
        return ValidationResult.Success;
    }
}

上記のコードでモデルを取得して組み合わせ技で検証出来るのでだいたいは事足りるかなと思います。

コントローラ

次にコントローラー側の検証します。

WEBAPIなどに使われるApiControllerAttributeを指定している場合はコントローラ側に来る前に以下のエラーを吐きました。ちょっと独自のエラーを返したい場合はどうするのかよくわかりません。いつか調べます（絶対調べない）

{
    "Age": [
        "年齢は99歳まで"
    ],
    "Name": [
        "名前は10文字まで"
    ]
}

MVCの場合は以下のように検証します。ModelState.IsValidはモデルにエラーがあるか判定するフラグでfalseだったらエラーがあるってことです。

[HttpPost]
public string Post ([FromBody] Person person) {

    if (!ModelState.IsValid) {
        // ここでエラーチェック
    }
    return "Success";
}

独自のエラーモデルなどを使っている場合はModelStateからエラーメッセージとプロパティを取得できます。

// プロパティ毎のエラーを保持
ModelState.Values
// 一番最初のプロパティのエラーを保持
ModelState.Values.First ().Errors
// 一番最初のプロパティのエラーの最初のメッセージ（エラーが複数ある場合）
ModelState.Values.First ().Errors.First ().ErrorMessage
// エラーがあるプロパティの名前
ModelState.Keys

いろいろ書きましたが、これだけ覚えていればだいたいのエラーチェックがAttributeで済むと思います。エラーチェックは作り込んでから直すと結構大変なんでここら辺は習得しておく必要があるかなと思います。いつものごとく雑ですが、githubにあげましたので参考になればと思います。個人の趣味ブログなのですげーテキトーにコード書いてますのでご注意を。
github.com

.NET Core 2.1.5にアップデートした

2018年10月2日に「.NET Core 2.1.5」がリリースされました。僕の運用してるみんなの洋楽ランキングが2.1.0だったので備忘録として残しておきます。まぁ超簡単。

更新内容をざっくり

2.1.3　バグ修正
2.1.4　脆弱性あったのでその修正←ここ重要
2.1,5　バグ修正

詳しくはgithubに書いてあるので興味ある人は見てください。個人的にはパフォーマンス系の改善が欲しかったな>2.2に期待
github.com

注意事項

.NET Coreのバージョンが公開されたからと言ってAzure AppServicesで最新バージョンが使えるとは限りません。Azure AppServicesを使っている人は必ずリリースノートを確認してください。今回は同日にデプロイされたのですが、2.1.3は6日も誤差がありました。
core/2.1.5.md at master · dotnet/core · GitHub
ちゃんとデプロイした日付も書いてくれてます（やさしい

Deployment of .NET Core 2.1.5 to Azure App Services will begin on today, October 2, 2018. Deployment will proceed to additional regions and is expected to complete by the end of the week.

アップデート

SDKをダウンロード

以下のURLからSDKをダウンロードしてきます。WindowsとMacはインストーラーで。
www.microsoft.com
Debianは以下を参考に。Ubuntuの「ソフトウェアの更新」はあまり信用出来ないからコマンドからやった方が良い気がする。
.NET Core その32 - .NET Core 2.1.5がリリースされました・.NET Core 2.1.5をインストールするには - kledgeb

Microsoft.AspNetCore.Appを2.1.5に

csprojを書き換えれば良いです。

<PackageReference Include="Microsoft.AspNetCore.App" Version="***" />
↓
<PackageReference Include="Microsoft.AspNetCore.App" Version="2.1.5" />

2.14以上には最低でもあげたいですね。下の画像にも書いてあるし。

おわり

.Net系のフレームワークのバージョンアップはまじで優秀な印象。

ついでに

nuget周りもとりあえずあげときました。
僕は以下２つが対象でした。

dotnet add package MailKit --version 2.0.6
dotnet add package AutoMapper.Extensions.Microsoft.DependencyInjection --version 5.0.1

雑談

モバイルアプリを作ろうと思っててxamarinをやってます。WEBは.Net CoreとReact勉強になったし（我ながらどちらも素晴らしい選定だった）、SEOに怯えてちまちまくだらない改善してもしょうがない感じがするんで心機一転によいかなと。あとreact naitiveと迷ったんですが、IDEが整っていること、手抜き（コードが共通して使える）が出来るのが最強かなと。コードは書けば書くほど負債になるので、出来るだけプログラミングやらない方向で進めたいのです>エンジニア失格

スクレイピングにはAngleSharpが良いらしい

github.com

C#のスクレイピングライブラリはHtml Agility Packがメジャーですが、昔使った感じだとなんか微妙なので(XPathとかだるい)他のライブラリを探してみたらAngleSharpってのが良さそうなのでこちらを使ってみました。ちなみに僕が運用しているみんなの洋楽ランキングでは、情報の収集と自動化にAngleSharpを使っています。
mygkrnk.com

AngleSharpをダウンロードします。

dotnet add package AngleSharp --version 0.9.10

余談ですが、メジャーバージョンが出ていない理由は.net coreの進みが早くてライブラリが追っついていないようです。作者はこう嘆いています。

One of the greatest killers was Microsoft's ever growing change
最大の殺人者の1人は、マイクロソフトの絶え間ない変化（翻訳ママ）

killersってすげー表現だな、どういうニュアンスで言ってんだろ？
Request for stable release (=version 1.0) · Issue #709 · AngleSharp/AngleSharp · GitHub

using

using AngleSharp.Parser.Html;

stackoverflowとか見てて名前空間がわからない調べることが多いんだけど、みんなどうしてんのかな？

htmlをパースする

htmlは適当に取ってきてください。

var parser = new HtmlParser ();
var doc = parser.Parse (html);

属性を取得

今回はみんなの洋楽ランキングのいいね数を取得します。一番最初に取得するいいね数なので10位のいいね数が取得されます。
これ

var likeApp = doc.GetElementsByClassName ("like-app");
var count = likeApp.First().Attributes["react-prop-counts"].Value;
// count : "5"

InnerHtmlを取得

せっかくなんで曲名で検索します。

var enrryTitles = doc.GetElementsByClassName ("entry-title");
var title = enrryTitles.Where(x => x.InnerHtml.Contains("In My Feelings")).First().InnerHtml;
// title : <a href=\"/music/784\">In My Feelings</a>

HtmlAgilityPackに比べてめちゃめちゃ使いやすくなってるので、スクレイピングを検討している人は試してみてはどうでしょうか。まだまだいろんなやり方はあるので、ドキュメントを見てください。一応、調べてる最中にタラタラ書いたコードをGithubに上げたので参考になれば。個人の趣味ブログなのですげーテキトーにコード書いてますのでご注意を。
github.com

タイムズと車を所有した場合に掛かる金額を比較してみた

最近はタイムズのカーシェアが流行りまくっていて、車を持つ人が減るレベルで素敵なサービスを展開しています。車を保有する人にとって「実際問題、どっちが金掛かるの？」って疑問が湧くと思います。僕もどっちがお金かかるのか疑問だったので、僕が使ってる頻度でどれだけ差が出るのか検証してみました。

（注）あくまで僕が普段使いしてる範囲の話。あとタイムズの回し者ではないし、批判してるわけでもありません。まぁ、すげーてきとーなんで、あくまで参考程度に。

前提条件

僕 : 週5電車通勤
車種 : コンパクトカー
使う場面
お迎え 週3回 15分/1回
買い物 週2回 2時間/1回
実家 月2回 6時間/1回
旅行 3ヶ月に1回 72時間/1回

だいたいこんな感じです。タイムズのレンタル時間に合わさせてるのもありますが、まぁ、こんなもんでしょう。

車を所有した場合に掛かる金額を計算してみます。

ガソリン 月2回 8000円
税金 年1回 34500円
保険 年1回 100000円
ローン 月1回 30000円
JAF 年1回 6000円
駐車場 月10000円

月にすると59708円
年にすると716500円

次にタイムズのカーシェアを使った場合に掛かる金額を計算します

家族プラン 月1回 1030円
迎え 月12回 206円/15分
買い物 月8回 1648円/2時間
実家 月2回 4020円/6時間
旅行 3ヶ月に1回 24690円/1回
+ 距離料金 3200円（200キロ計算）
TCP安心補償サービス 月23回 309円/1回

月すると79652円
年にすると955824円

なんと普通に普段使いして年間20万ちょっとタイムズが高いと言う結果になりました。実際に僕が掛かっている金額と比べてエグい差※1が出てしまったので、保有した方をかなり盛っていますがだいたいこんなもんでしょう。ただ、都内に住んでいたり車に乗る頻度が少ない人はタイムズの方が得になる場合があると思います。さらに僕の場合は、コンパクトカーなので、もっと良い車乗ったら話が変わります。結論として、都内に住んでいたらカーシェア、都外だと車を保有した方が良いことがわかりました。ただ、タイムズだと車が使われていたり、忘れ物出来なかったり、駐車場に行かなきゃいけなかったりと買った方がお金的にも精神的にもお得だなあと感じてしまいました。乗り出し５０万ぐらいでそれなりに状態が良い中古車が売ってるのでマジで絶対買った方が良い！いやマジで

余談

新型スープラ。2JZエンジンとかやば。この画像まんまだったらZ超えるでしょ

※1 ６０万以上差が出ました。

【第２弾】React使ってちょっとしたもの作った

大したものじゃないんですが、課題だった日付の検索プルダウンを実装しました。数年に遡って週ごとにプルダウンを出してたのですが、使いづらすぎる、量が多すぎる、パフォーマンスも気になるので整えました。インデックスが1000を超えたので（ページ数は2000弱）、そろそろサイト内でいろいろ見れるように整理する段階に入ったかなと思って使いやすくすることが課題でした。

前置きが長くなりましたが、どういう風に変えたのか画像を貼ります。

変更前↓

手抜き杉。

変更後↓

デザインも整えて検索しやすいようにしました。まぁ、この検索方法はどっかの有名サイトの丸パクリなんで間違い無いでしょう笑

２時間ぐらいでできるかなーと思ってましたが、結局、８時間（一人日）ぐらいかかっちゃったので苦戦したところをさらっと書きます（ちなみにReactはドドド初心者、Angularは３ヶ月程度仕事でやってる）

this.setState is not a function

なんやこれ？と思って調べたらbindを使わなきゃいけないらしい。書き方は以下。

this.{メソッド} = this.{メソッド}.bind(this);

なんかthisの指すところが違うからbindしてthisを示す必要があるみたい（よくわからないけど）

TypeSctiptが辛い

修行だと思ってるけど本当に苦行。めんどくさいのでstate、propに型をanyにしてるのですが、いちいちcastしなきゃいけなくてめんどい。型宣言するとスラスラ書けないからanyにしたけど結局めんどいから、結果どっちもめんどい（笑）これとかねもう。

this.state.tests as string[]).map((value) =>
    <option value={value} selected=true >{value}</option>
)}

つらみ

他Domが操作できなくて辛い

Aungularでもできないのですがね、Reactだと出来ると思っちゃった（笑）Jqueryの置き換えだから結構めんどくさかった。
なんとか出来るのですが、非推奨なのでやらないでください。結局onchangeで対応した。

refでやる

<input type="email" ref={ input => { this.Input = input }} />
React.findDOMNode(this.refs.Input)

結局fetchでいいよね？

使いやすいからfetchを選定してるけど、どれが良いのかわからん。

コンポーネント化することでサーバー側のコードが綺麗になる

コンポーネント化することで、クライアント＋APIで対応出来るのでその分サーバ側のコードが減りました。
辛いところじゃないと思うのですが、直すところが増えるので大変。ここも時間かかった一つの要因だけど、結果よかった。

いろいろ辛かったけど、結果綺麗に出来た気がする。

次はこれやるよー多分
github.com