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

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

VisualStudioからAzure KeyVaultにアクセスするときにえらいハマった話

はじめに 今回の記事は下記の環境で検証を行っています。 記事を参照されるタイミングによっては画面構成や設定などが変わる可能性がありますのでご留意ください。 Visual Studio Enterprise: 16.7.2 ※以降Visual StudioはVSと記載しています 発生した問題 …

msal.js v2.0.1 をAngularで使用する

はじめに 今回の記事で使用するコードは下記の構成で実装しています。 記事を参照されるタイミングによっては動作しない可能性がありますのでご留意ください。 @angular/cli:10.0.5 @azure/msal-browser:2.0.1 msal.js v2.0.0がリリース 先月の末頃(2020年…

AngularのRouterでuseHashをtrueにしているときにmsalで`Error: Cannot match any routes. URL Segment: 'access_token'`が出るときの対処

はじめに 2020年7月時点の記事となります。 msal.jsのv2が出たのですが、書きかけだった記事の供養となります。。ご留意ください。 Angular・msal.js・@azure/msal-angularは下記のバージョンとなっています。 Angular: 10.0.1 msal.js: 1.3.2 @azure/msal-a…

Microsoft Graphのpresenceについて

修正 2020/7/19 : presenceのβ公開時期を2020年6月から2019年12月に修正しました。 (@karamem0さんご指摘ありがとうございました!) 2020/8/2:presenceのSubscriptionのドキュメントが公開されたので反映しました。 はじめに 2020年7月時点のMicrosoft Grap…

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

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

Microsoft MVPを初受賞しました

タイトルの通りMicrosoft MVPを初受賞しました。 カテゴリはOffice Developmentとなります。 登壇の機会を多くくださった.NETラボの皆様 セッションを聞いてくださった皆様 フィードバックをくださった皆様 個人の活動であるにも関わらず会社でぼくの活動を…

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 先日、…

Azure AD(v2.0)の認証をWPF(.NET Core)とASP.NET Core WebAPIで使用しようとしてハマった話

はじめに 下記の構成で構築しています。 .NET Core : 3.1 Microsoft.Identity.Client : 4.13.0 Microsoft.Identity.Web : 0.1.1-preview 一部Previewを使用していることもあり 参照されるタイミングによっては掲載するソースコードで動作しない可能性があり…

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

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

フロントエンドのMicrosoft Graphことはじめ

はじめに 使用するライブラリは下記バージョンとなります。 typescript: 3.5.3 msal.js : 1.1.3 @microsoft/microsoft-graph-client : 1.7.0 @microsoft/microsoft-graph-types: 1.10.0 また、Graph使用部分はAngularになるべく依存しない形で構成しています…

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

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

Azure Front Doorを使ってみる

はじめに 2019/6/2時点のAzureを使用しています。 記事をご覧頂いているタイミングによっては 記事内に出てくる画像、設定内容などが変更されている可能性があることをご留意くださいませ。 あらまし 先日のde:code19でデプロイ王子のアンプラグドイベントに…

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

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

NLogを.Net Standard/Coreで使用する

はじめに .Net Core等は下記バージョンでお送りします。 netstandard: 2.0 netcoreapp: 2.2 AspNetCore: 2.2.0 NLog: 4.6.3 あらまし NLogを使うとかは今更ではあるのですが .Net CoreのExeアプリケーションからASP.net WebAPIアプリケーションで NLogを使用…

「簡単な」入力状態復帰機能を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とBlob StorageでClickOnceアプリケーションのCI/CDできるか「雑に」試してみた

はじめに れがしぃなWindowsFormsなプロジェクトをAzure DevOps(ADO)でCI/CDできるか「雑に」試してみました。 exeをどこかに吐き出すだけでは面白くないので Azure Blob Storage上にClickOnceアプリケーションをデリバリして Web Apps上のリンクからそのア…

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のテストレポ…

Azure WebAppsのHybridConnectionでドハマりしたとき試したこと

Azure WebAppsのHybridConnectionとは、Azure上のVPNなどの閉域網を構成しなくても 社内閉域網サーバー内のデータにアクセスできるツールです。 エンプラ系の課題にリーチしそうですね。 こと、Cloud移行したいんだけど一気には無理・・・なんて要求に対応し…

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

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

Desktop PWAs 体験してみた

最近話題になったこと 最近、WindowsのDesktopでPWAが動くぜー!と話題になっていました。 https://blogs.windows.com/msedgedev/2018/02/06/welcoming-progressive-web-apps-edge-windows-10/#o1UfZRcqAE1SGUem.97 英語力が低いので誤解しているかもしれな…

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

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

Xamarin.AndroidでNfc機能の技術検証した話

この記事は [初心者さん・学生さん大歓迎!] Xamarin その1 Advent Calendar 2017 13日目の記事となります。Advent Calendar初挑戦です。よろしくお願いします! 初めに Xamarin.Formsはずいぶん前からちょこちょこ触ってましたが 本業はWebの方のお仕事中心…

AzureのVMと自社サーバーをVPNでつなげて(かんたんな)Deployをしてみる

実験的要素モリモリでございます。 ビルドサーバーのVirtualMachineはAzure上にある。 でも、検証環境は自社の閉域ネットワーク内のどこそこにある。といった場合に。 (きわめてレアだとは思いますが!) ちなみに使用するGatewayとか高めのお値段なので 自前…

Azureハイブリッド接続でAzureWebAppsとオンプレミスのDBをつなげよう

AzureにWebAppsを置いてもいいけど他アプリケーションとの連携の関係で SQLDatabaseはオンプレミスサーバーに置いときたい!なんて事が合った場合に。 ちと手順が複雑で日本語の最新資料も見当たらなかったのでメモ書き程度に。 参考文献 少し古いですが、At…

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

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