はまったりひらめいたり…とか…

Angularや.NETやAzureやその他色々。

Angular

Angular Elementsで作成したWeb Componentsの設定情報をプレーンなJSから変更する

はじめに この記事内のアプリケーションは下記バージョンで構成しています。 Angular CLI: 10.0.1 Angular: 10.0.2 この記事を参照されるタイミングによっては サンプルコードが動作しなかったりする可能性がありますのでご留意くださいませ。 そもそもなに…

AzureDevOpsのCIで.NET CoreとAngularのアプリケーションをバージョンアップする

はじめに この記事内で使用する各フレームは下記バージョンで構成しています。 Angular: 9.1.8 .NET Core: 3.1 また、AzureDevOpsは記事作成時点のキャプチャやコマンドが掲載されています。 この記事を参照されるタイミングによっては 動作しなかったり画面…

Angular MaterialのComponentHarnessを使ってみた(Autocomplete編)

はじめに この投稿内のAngularは下記のバージョンで構成しています。 この記事を参照されるタイミングによってはサンプルコードが動作しない可能性がありますのでご留意くださいませ。 Angular CLI: 9.1.6 @angular/material: 9.2.3 ComponentHarness 先日、…

AngularのライブラリをAzure Artifactsで使用する

はじめに 2020年1月時点の記事となります。 記事を見ていただくタイミングによっては 記事中で使用しているAzureのキャプチャやコマンドが変更されている可能性がありますのでご留意ください。 また、Angluarは下記バージョンで構成しています。 @angular/cl…

MSAL.js+Azure AD v2を触ってみる

はじめに 使用ライブラリは下記のバージョンでお送ります。 msal.js: 1.0.1 SPAっぽいなにかを作りたかったのでAngularも使用しています。 @angular/cli: 8.0.0 ただ、記述するソースコードの殆どはmsal.jsのヴァニラなものを使用しているので 他のフレーム…

ReactiveFormsで使用できるカスタムコンポーネントを作成する

はじめに 本記事ではAngularは下記Versionを使用しています。 AngularCLI: 7.3.6 Angular: 7.2.10 ゴール Inputコントロールなんかと同様に formControlName を指定できるような ReactiveFormsで使用できるComponentを作成します。 今回は「ダイアログ表示ボ…

「簡単な」入力状態復帰機能をAngularのReactiveFormsで実装した話

はじめに Angularは下記のバージョンでお送りします。 @angular/cli: 7.3.9 なにがしたかったか 認証にAzure ADを使用している関係で、定期的に(1時間立ち上げっぱなしで1回程度)ページがリフレッシュされる 入力内容が消えちゃうのもアレなので入力状態を保…

KarmaやJestのカバレッジをAzureDevOpsパイプラインで収集してみた

昨日、Azure DevOps Tokyo, Japan 2nd impactに参加しました。 jazug.connpass.com その時にAzure DevOps パイプラインでのカバレッジレポートの収集の話になり 自分が今使っているAngularのプロジェクトでも、カバレッジレポートが収集できるか試してみまし…

AngularでQR/バーコードを使用するInputコントロールを作る

12/1 修正しました。 はじめに 今回のお話は、下記バージョンでお送りします AngularCLI : 7.0.4 ↓みたいなコントロールを作成していきます。 テキストボックスがあり フォーカスが当たった際に、ソフトウェアキーボードではなくQRを読み込むカメラが起動し …

Azure DevOpsでAngularのJestテストのCIをまわせるか試してみた

はじめに Angularは下記Verisonでお届けします。 AngularCli:7.0.3 先日の、bitbank LT NightでみたJestがとても良い感じで使ってみたくなったので 現在使用しているCI環境のAzure DevOps(以降ADOと呼びます)で使用できるか確認してみました。 jestjs.io Azu…

AngularでQRする

はじめに この記事は、下記のVersionでお送りします。 Angular CLI : 7.0.3 どんな風に動作する? こんな感じです。ちょっと見えづらいですが 一番下部で数字をカウントしているのがQRコードの読み取り結果です。 QRは2秒毎に0からカウントアップしていき、…

VSTSでAngularのユニットテスト

はじめに 今回の記事の構成は下記のとおりです。 AngularCLI : 7.0.3 Angular : 7.0.1 Azure DevOpsの略し方が未だにつかめていないので VSTSの名称でお送りいたします。(ADops…?) 今回のゴール AngularのUnitTestをVSTSで実施し 結果をVSTSのテストレポ…

AngularとAzureAD認証でログイン機構を簡単に実現したい

最初に 今回使用した環境は下記の通りです。 @angular/cli : 6.0.8 @angular : 6.0.7 AzureAD認証を支援するJSライブラリ AzureActiveDirectory認証を支援するJSライブラリとして MicrosoftからADALというJSライブラリが提供されています。 github.com マル…

Reactive FormsでオリジナルのComponentを使用する

初めに 今回の記事は、下記構成でお送りします。 Angular: 5.1.1 AngularCli: 1.6.1 Reactive FormsでOriginalのComponentを使いたい 業務系のWebApp作るお仕事してるとReactive Formsを多用します。 Validatorのエラーチェック部分を楽に作れるのが気に入っ…

Angular Materialを自分好みのカラーパレットに変更する

はじめに 下記バージョン構成でお送りします。 Angular : 4.4.4 Angular-cli : 1.4.3 Angular Material:2.0.0-beta.12 Angular Material Angular Material まだβなんですが、主たるコントロールはそろっているので angularでマテリアルデザインのサイトを…

エンプラ脳でAngularのReactiveFormsを使ってみる

AngularのReactiveFormsは素敵なFormModuleだと思います。 自分も実際の作業の際には非常にお世話になりました。 ReactiveFormsについて https://angular.io/docs/ts/latest/guide/reactive-forms.html https://angular.io/docs/ts/latest/cookbook/form-val…

AngularでCSVをAPIからDLするときに色々したお話

業務用のアプリケーション作ってるときに大概あるのがCSV出力ですが WEBでCSV出力するときに、ちょいとはまったのでメモがてらに記事投稿します。 記事投稿時のAngularはV4です。 「IEで」下図のような感じで動くのを作ります エクスポートしたCSVどうやって…

Azureを使ってサクッと動画共有サービスを作る

YouTube等の外部Serviceを使用してもいいですが Privateな環境で動画のアップロードをしたい場合があります (業務利用ぐらいしか思いつきませんが…) AzureのMediaService等を使っても良いかもしれませんが 同じくAzureのBlobStorageServiceを使用し、Azureの…