2022-05-03

WinAppDriver

WinAppDriverをインストールして電卓テストサンプルを動かしたよくあるメモ

ダウンロードとインストール
GitHub - microsoft/WinAppDriver: Windows Application Driver
README通り、msiをダウンロードして、exeクリック。ProgramFilesにインストールされる。
WinAppDriver.exe起動確認
WinAppDriver.exeをダブルクリックしても無反応。
WinAppDriverを起動できない時の対処方法 - テストウフを見て、コマンドプロンプト起動を試したら、下記警告。
C:\Program Files (x86)\Windows Application Driver>WinAppDriver.exeDeveloper mode is not enabled. Enable it through Settings and restart Windows Application DriverFailed to initialize: 0x80004005
Windowsの「開発者向け設定」を開き、開発者モードオン。実行できた。
サンプル動かす
GitHub - microsoft/WinAppDriver: Windows Application Driver
よりVisualStudioのサンプルをダウンロード。
CalculatorTest.slnを開き、ビルド。
テストエクスプローラより実行するがほぼ失敗。

WinAppDriverのサンプルを動かすまで - Qiita
FindElementByNameで取得している名称が英語のためと思われる。
inspect.exe

https://www.setrobo.jp/support/Reference/files/InspectObjectsInstall_forWin10.pdf
インストールする。
CalculatorTestのScenarioStandard.cs編集
inspectで要素名を調べ、FindElementByNameを修正。
テスト実行
なんとか成功。

2021-07-30

チュートリアル：React の導入

勉強ログ

ja.reactjs.org

できるようになること

ReactによるWebアプリ開発方法が何となくわかる。

覚えたこと

アロー関数...=>(矢)を使って関数リテラルを記述します。基本的に以下の様に書きます。(引数,...)=>{...関数の本体...}
ES6...ECMAScriptとは標準規格のことで、その6番目のバージョンがES6。ES6はそのままでは全てのブラウザで動かすことはできないので、ES5のコードに変換する（トランスパイル）必要がある。ES6以前ではclass構文が実装がされていなかった。
Props (プロパティ)...親コンポーネントから子コンポーネントに渡される値です。

その他

TypeScriptとJavaScriptの違い。ReactはJavascript推奨。

udemy.benesse.co.jp

イミュータビリティは何故重要なのか
- 複雑な機能が簡単に実装できる(タイムトラベル)
- 変更の検出が簡単
- 再レンダータイミングを決定しやすい

ja.reactjs.org

2021-07-29

最初の Node.js アプリを作成する

勉強ログ

docs.microsoft.com

できるようになること

Visual Studio 2019にてNode.js、Reactの単純なWebアプリが作成できる

覚えたこと

Node.js...Node.js はサーバー側の JavaScript ランタイム環境であり、サーバー側の JavaScript を実行します。
npm...npm は Node.js の既定のパッケージマネージャーです。
React...Webサイト上のUIパーツを構築するためのJavaScriptライブラリです。

2021-07-28

Blazor Serverにて気象データをグラフ化するWebアプリを作成する: Chart.js 呼出編

DIY

完成イメージ

Blazor Serverにて気象データをグラフ化するWebアプリを作成する f:id:cniya:20210728152036p:plain

Step 6: Chart.jsインストール

wwwrootにlibフォルダを追加する。
libフォルダ上で右クリック→追加→クライアント側のライブラリ
Chart.jsをインストール
libフォルダ内にChart.jsフォルダが作成され、必要なjsファイルが配置されていることを確認する

Step 7: Chart.jsの描画テスト

_Host.cshtmlにchart.min.jsの参照設定追加
サンプルグラフを書くrenderChart関数を追加する。

    <script src="lib/Chart.js/chart.min.js"></script>
    <script>
        function renderChart() {
            if (window.chartObj) {
                window.chartObj.destroy();
            }
            var ctx = document.getElementById('myChart');
            window.chartObj = new Chart(ctx, {
                type: 'line',
                data: {
                    labels: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
                    datasets: [{
                        label: "Sample Data",
                        data: [2, 12, 16, 10, 12, 11, 3]
                    }]
                }
            });
        };
    </script>
</body>

Counter.razorを修正し、ボタンクリックでrenderChart()を呼び出すようにする。
Ctrl+F5でWebアプリを起動し、Counterページのボタンクリックでグラフが描画されることを確認する。

@page "/counter"

<h1>Counter</h1>

<button class="btn btn-primary" onclick="renderChart();">Click me</button>
<canvas id="myChart"></canvas>

@code {
}

Step 8: C#からJavascriptを呼び出す

Counter.razor.csを追加する。
partial classにする。
IJSRuntime.InvokeVoidAsyncにてjavascriptを呼び出す。
IJSRuntimeはinjectする。

    public partial class Counter
    {
        [Inject]
        IJSRuntime JSRuntime { get; set; }

        public async Task CallRenderChart()
        {
            await JSRuntime.InvokeVoidAsync("renderChart");
        }
    }

CallRenderChartを呼び出すようCounter.razorを修正する。

<button class="btn btn-primary" @onclick="CallRenderChart">Click me</button>

Step 9 : データセットを動的に生成する

JSON形式のパラメータを構造化したChartJsonクラスをDataフォルダ内に作成する。

    public class ChartJson<T>
    {
        [JsonPropertyName("type")]
        public string Type { get; set; }
        [JsonPropertyName("data")]
        public ChartData<T> Data { get; set; }
    }

    public class ChartData<T>
    {
        [JsonPropertyName("labels")]
        public List<string> Labels { get; set; }
        [JsonPropertyName("datasets")]
        public List<ChartDataSet<T>> DataSets { get; set; }
    }

    public class ChartDataSet<T>
    {
        [JsonPropertyName("label")]
        public string Label { get; set; }
        [JsonPropertyName("data")]
        public List<T> Data { get; set; }
    }

Counter.razor.csにDemoData()メソッド追加。
CallRenderChart内でDemoData()をシリアライズする。

        public async Task CallRenderChart()
        {
            var parameter = JsonSerializer.Serialize(DemoData());
            await JSRuntime.InvokeVoidAsync("renderChart");
        }

        public static ChartJson<double?> DemoData()
        {
            return new ChartJson<double?>()
            {
                Type = "line",
                Data = new ChartData<double?>()
                {
                    Labels = new List<string>() { "Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat" },
                    DataSets = new List<ChartDataSet<double?>>() { new ChartDataSet<double?>() { Label = "Sample Data", Data = new List<double?>() { 20, 12, 16, 10, 12, 11, 3 } } }
                }
            };
        }

CallRenderChart内でJavascriptを呼び出すとき、シリアライズしたjson文字列をパラメータで呼び出せるよう、InvokeVoidAsyncからInvokeAsyncに変更する

            var parameter = JsonSerializer.Serialize(DemoData());
            await JSRuntime.InvokeAsync<string>("renderChart", parameter);

_Host.cshtmlのrenderChartでstring型のパラメータを受け取れるように修正。
受け取ったstringをJSON化してChartの第二引数として与える。

    <script>
        function renderChart(jsonStr) {
            if (window.chartObj) {
                window.chartObj.destroy();
            }
            var ctx = document.getElementById('myChart');
            window.chartObj = new Chart(ctx, JSON.parse(jsonStr));
        };
    </script>

Ctrl+F5で動作確認。

Step 10:

Counter.razor.cs内でWeatherForecastServiceをinjectし、GetForecastAsyncにてデータを取得する。
ListからChartJsonを生成するメソッドFromForecastListを追加する。

        [Inject]
        WeatherForecastService WeatherForecastService { get; set; }

        public async Task CallRenderChart()
        {
            var forecasts = await WeatherForecastService.GetForecastAsync();
            var parameter = JsonSerializer.Serialize(FromForecastList(forecasts));
            await JSRuntime.InvokeAsync<string>("renderChart", parameter);
        }
        private static ChartJson<double> FromForecastList(List<WeatherForecast> forecasts)
        {
            return new ChartJson<double>()
            {
                Type = "line",
                Data = new ChartData<double>()
                {
                    Labels = forecasts.OrderBy(a => a.Date).Select(a => a.Date.ToShortDateString()).ToList(),
                    DataSets = new List<ChartDataSet<double>>() 
                    { 
                        new ChartDataSet<double>() 
                        { 
                            Label = "Highest Temp.", 
                            Data = forecasts.OrderBy(a => a.Date).Select(a => a.HighestTemperature).ToList() 
                        },
                        new ChartDataSet<double>() 
                        { 
                            Label = "Lowest Temp.", 
                            Data = forecasts.OrderBy(a => a.Date).Select(a => a.LowestTemperature).ToList() 
                        },
                        new ChartDataSet<double>() 
                        { 
                            Label = "Ave. Temp.", 
                            Data = forecasts.OrderBy(a => a.Date).Select(a => (double)a.Temperature).ToList() 
                        }
                    }
                }
            };
        }

Ctrl+F5にてWebアプリ起動し、Counterページのボタンクリックして動作確認する。

参考記事

www.chartjs.org www.ipentec.com

2021-07-26

Blazor Serverにて気象データをグラフ化するWebアプリを作成する: SQL Server 接続編

DIY

完成イメージ

Blazor Serverにて気象データをグラフ化するWebアプリを作成する f:id:cniya:20210728152036p:plain

前提

Visual Studio 2019
SQL Serverの基礎知識
Microsoft Blazor Server Tutorial終了

Step 1: Blazor Server新規プロジェクトの作成

Visual Studio 2019にて新規作成→プロジェクト→Blazor Serverアプリ→.NET 5.0
Ctrl+F5でアプリが起動することを確認する。

Step 2: SQL Server準備

Visual Studio SQL サーバオブジェクトエクスプローラーを表示
(localdb)\MSSQLLocalDBにデータベース「Forecast」を作成
appsettings.jsonに接続文字列追加

{
  "ConnectionStrings": {
    "DefaultConnection": "Server=(localdb)\\mssqllocaldb;Database=Forecast;Trusted_Connection=True;MultipleActiveResultSets=true"
  },
  "Logging": {

Step 3: EF CoreインストールとモデルのMigration

Nugetパッケージの管理から下記インストール
- Microsoft.EntityFrameworkCore
- Microsoft.EntityFrameworkCore.Design
- Microsoft.EntityFrameworkCore.SqlServer
Data\WeatherForecast.csに求めるテーブル構造にあわせてプロパティを追加する
- 日付、最高気温、最低気温、平均気温、降水量、日照時間をフィールドとするテーブル構造にする

    [Table("WeatherForecast")]
    public class WeatherForecast
    {
        public int Id { get; set; }
        [DisplayName("日付")]
        public DateTime Date { get; set; }
        [DisplayName("最高気温")]
        public double HighestTemperature { get; set; }
        [DisplayName("最低気温")]
        public double LowestTemperature { get; set; }
        [DisplayName("平均気温")]
        public int Temperature { get; set; }
        [DisplayName("降水量")]
        public double Precipitation { get; set; }
        [DisplayName("日照時間")]
        public double DaylightHours { get; set; }
    }

Pages\Fetchdata.razor、Data\WeatherForecastService.csがコンパイルエラーにならないよう、一旦日付と平均気温のみ表示するよう修正する
Data\WeatherForecastDbContext.cs追加

    public class WeatherForecastDbContext : DbContext
    {
        public WeatherForecastDbContext(DbContextOptions<WeatherForecastDbContext> options)
            : base(options)
        {
        }
        public DbSet<WeatherForecast> WeatherForecast { get; set; }
    }

Startup.csのConfigureServicesでAddDbContext呼び出し追加。

        public void ConfigureServices(IServiceCollection services)
        {
            services.AddDbContext<WeatherForecastDbContext>(options =>
                            options.UseSqlServer(
                                Configuration.GetConnectionString("DefaultConnection"),
                                providerOptions => providerOptions.CommandTimeout(120)));
            services.AddRazorPages();

パッケージマネージャーコンソール起動
Add-Migration 成功後、Update-database実行。

PM> Add-Migration InitialCreate
Build started...
Build succeeded.
To undo this action, use Remove-Migration.
PM> Update-database
Build started...
Build succeeded.
Done.

SQL サーバオブジェクトエクスプローラーを起動しテーブル生成を確認する。

Step 4: BlazorからSQL Serverデータを取得し表示する

Data\WeatherForecastService.csを修正。SQL Serverからデータを取得するメソッドを実装。

    public class WeatherForecastService
    {
        WeatherForecastDbContext _Context { get; }

        public WeatherForecastService(WeatherForecastDbContext context) =>
            _Context = context;

        public Task<List<WeatherForecast>> GetForecastAsync() =>
            _Context.WeatherForecast
                .OrderBy(x => x.Id)
                .ToListAsync();
    }

Pages\FetchData.razorでForecastService.GetForecastAsyncをパラメータ無しで呼び出すよう変更。あわせて戻り値をList<>型に変更する。

    private List<WeatherForecast> forecasts;
    protected override async Task OnInitializedAsync()
    {
        forecasts = await ForecastService.GetForecastAsync();
    }

Startup.csのConfigureServicesメソッド内でAddSingletonを削除してAddScopedに変更。

        public void ConfigureServices(IServiceCollection services)
        {
            services.AddDbContext<WeatherForecastDbContext>(options =>
                            options.UseSqlServer(
                                Configuration.GetConnectionString("DefaultConnection"),
                                providerOptions => providerOptions.CommandTimeout(120)));
            services.AddRazorPages();
            services.AddServerSideBlazor();
            services.AddScoped<WeatherForecastService>();
        }

Ctrl+F5にてアプリを起動。FetchDataページの動作を確認する。

Step 5: テストデータを入れて動作確認する

次のSQLにてテストデータをインサート

insert into WeatherForecast (Date,HighestTemperature,LowestTemperature,Temperature,Precipitation,DaylightHours) values(cast('2020/01/01' as date),10.7,3.7,6.9,0,6)
insert into WeatherForecast (Date,HighestTemperature,LowestTemperature,Temperature,Precipitation,DaylightHours) values(cast('2020/01/02' as date),11.8,3,8.2,0,9.3)
insert into WeatherForecast (Date,HighestTemperature,LowestTemperature,Temperature,Precipitation,DaylightHours) values(cast('2020/01/03' as date),13.5,6.6,10.3,0,5.9)
insert into WeatherForecast (Date,HighestTemperature,LowestTemperature,Temperature,Precipitation,DaylightHours) values(cast('2020/01/04' as date),12.5,6.4,9.6,0,7.2)
insert into WeatherForecast (Date,HighestTemperature,LowestTemperature,Temperature,Precipitation,DaylightHours) values(cast('2020/01/05' as date),10.3,5.3,7,0,4)

Ctrl+F5にてアプリを起動。FetchDataページの動作を確認する。

参考記事

blazor-master.com

2021-07-24

ASP.NET Core Blazor と Chart.js で入門する Web アプリ作成－導入編：サンプルを動かす

勉強ログ

qiita.com

できるようになること

BlazorにてChart.jsの組み込み、.razorファイルからの呼び出し方法が理解できる。

覚えたこと

ComponentBase...Razor コンポーネントはComponentBase基底クラスから継承されます。razorコンポーネントとC#コードを分離して記載するコードビハインドといった記載では、ComponentBaseを継承したクラスとする。
DI(Dependency Injection)...内部で依存先を new するのではなく、外から依存先の実装を設定してもらうという考え方。BlazorのDIの流れ。
- 初期化時にInterfaceおよび対応する具象クラスをDIに登録する
- オブジェクトを使いたい箇所で、Blazorフレームワークによってインターフェイスオブジェクトとしてインジェクトしてもらう

2021-07-23

ASP.NET Core と MongoDB で Web API を作成する

勉強ログ

docs.microsoft.com

できるようになること

MongoDBの知識習得

覚えたこと

MongoDB...JSON形式のデータを蓄えるデータベース管理システム（DBMS）です。ドキュメント指向データベースに分類されます。