Azure のサービスでクロスサイトオリジンを許可する

Azure のポータルサイトにログインし、次の順でメニューを進みます。

ダッシュボード > サービス名 > ファイアウォール設定

そして、画面に表示されている「クライアント IP アドレス」と識別名を追加し、「保存」ボタンを押します。「保存」ボタンを押さないと設定が反映されないのでご注意ください。

Angular in-memory-web-api を使う

Angular が提供している in memory web api の使い方を紹介します。
アプリケーションを開発する際に、サーバー側で REST API を用意するほどではないモックアップ作成時に便利な簡易 REST API です。

angular/in-memory-web-api
https://github.com/angular/in-memory-web-api

パッケージのインストール

npm i angular-in-memory-web-api

InMemoryDbService 実装クラスの用意

InMemoryDbService 実装クラスで、createDb() メソッド内にデータを実装しておきます。

product.service.ts

import { InMemoryDbService } from 'angular-in-memory-web-api';

export class ProductService implements InMemoryDbService {
  createDb() {
    const products = [
      { id: 1, name: 'orange juice' },
      { id: 2, name: 'green tea' },
      { id: 3, name: 'oolong tea' },
      { id: 4, name: 'tomato juice' }
    ];
    return { products };
  }
}

HttpClientInMemoryWebApiModule のインポート

InMemoryDbService 実装クラスをモジュールに登録します。

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { HttpClientInMemoryWebApiModule } from 'angular-in-memory-web-api';

import { AppComponent } from './app.component';

import { ProductService } from './product.service';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    HttpClientInMemoryWebApiModule.forRoot(ProductService)
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

API の呼び出し

in-memory-web-api への通信は、HttpClient モジュールを通じて行うことができます。(HttpClient の通信を捕まえて、createDb() メソッドに実装しているインメモリデータを返します。)

app.component.ts

import { ProductService } from './product.service';
import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {

  constructor(private http: HttpClient) { }

  title = 'InMemoryDbService';

  async getProducts() {
    const res = await this.http.get('/api/products/').toPromise();
    console.log(res);
  }
}

app.component.html

<button (click)="getProducts()">get products</button>

Angular に関連するトピックは次のページにまとめてあります。

Angular 機能紹介一覧
https://kainobi2.blogspot.com/2019/02/angular.html

IE11 で Angular プロジェクトを実行するための polyfills

よく調べるので備忘録として残しておきます。

/** IE10 and IE11 requires the following for NgClass support on SVG elements */
import 'classlist.js';  // Run `npm install --save classlist.js`.
import 'core-js/es6/symbol';
import 'core-js/es6/object';
import 'core-js/es6/function';
import 'core-js/es6/parse-int';
import 'core-js/es6/parse-float';
import 'core-js/es6/number';
import 'core-js/es6/math';
import 'core-js/es6/string';
import 'core-js/es6/date';
import 'core-js/es6/array';
import 'core-js/es6/regexp';
import 'core-js/es6/map';
import 'core-js/es6/weak-map';
import 'core-js/es6/set';
import 'core-js/es6/reflect';
import 'core-js/es7/reflect';
import 'core-js/es7/object';

Blogger ナレッジベース用テンプレート

Blogger でサイトをナレッジベースとして利用したいと思い、テンプレートを探してみました。2つほど便利なテンプレートを見つけました。

HelpDesk
https://abtemplates.com/2014/04/helpdesk-blogger-template/

Manual - Online
https://www.templateism.com/2015/12/manual-online-docs-responsive-blogger-template.html

Visual Studio Code のタイトルバーの外観変更

Visual Studio Code のタイトルバーの外観を、クラッシックなものに変更することができます。設定画面の Title Bar Style で 'native' を選択し、再起動で OK です。

Azure FTP のユーザー名とパスワードの確認方法

Azure の App Service から、

デプロイ センター > 展開の資格情報 > アプリの資格情報

をたどると確認することができます。

Angular Firebase による Google アカウント認証（ログイン・ログアウト）の実装方法

Angular アプリケーションで、Firebase にログイン・ログアウトの実装方法を紹介します。予め、Firebase が使えるようになっていることが前提になります。

準備として、Firebase の「Authentication」画面で、Google を有効にしておきます。

アプリケーション側では、まずはパッケージとして firebase と angular/fire をインストールします。

npm i firebase @angular/fire

Angular アプリケーションの environment.ts に、Firebase の設定情報を転記します。設定情報は、Firebase の「Project Overview」から取得してきます。

environment.ts

export const environment = {
  production: false,
  firebase: {
    apiKey: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
    authDomain: 'xxxx-xxxx-xxxxx.xxxxxxxxxxx.xxx',
    databaseURL: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
    projectId: 'xxxx-xxxx-xxxxx',
    storageBucket: 'xxxx-xxxx-xxxxx.xxxxxxx.xxx',
    messagingSenderId: 'xxxxxxxxxxxx'
  }
};

AppModule で AngularFireModule と AngularFireAuthModule をインポートします。environment.ts で転記した Firebase の設定情報を、AngularFireModule.initializeApp の引数として渡します。

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { environment } from '../environments/environment';
import { AngularFireModule } from '@angular/fire';
import { AngularFireAuthModule } from '@angular/fire/auth';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AngularFireModule.initializeApp(environment.firebase), // 追加
    AngularFireAuthModule, // 追加
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

ngOnInit で、AngularFireAuth の authState を変数で参照します。ログイン時に呼び出す login メソッドでは、AngularFireAuth の auth.signInWithRedirect メソッドを利用します。ログアウト時に呼び出す logout メソッドでは、auth.signOut メソッドを利用します。

app.component.ts

import { Component, OnInit } from '@angular/core';
import * as firebase from 'firebase';
import { AngularFireAuth } from '@angular/fire/auth';
import { Observable } from 'rxjs';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'auth-test';
  user$: Observable<firebase.User>;

  constructor(private afAuth: AngularFireAuth) { }

  ngOnInit() {
    this.user$ = this.afAuth.authState;
  }

  login() {
    const provider = new firebase.auth.GoogleAuthProvider();
    this.afAuth.auth.signInWithRedirect(provider);
  }

  logout() {
    this.afAuth.auth.signOut();
  }
}

ユーザーがログインしていれば、ユーザー名を表示し、ログインしていなければ、ログイン用のボタンを表示します。ログインボタンを押すと、Google アカウントでのログイン画面が表示されるので、ログインします。すると、ログインしたユーザー名が画面に表示されます。

app.component.html

<ng-template #loginButton>
  <button (click)="login()">Login with Google</button>
</ng-template>
<div *ngIf="user$ | async as user; else loginButton">
  ユーザー : {{user.displayName}}
  <button (click)="logout()">Logout</button>
</div>

以上、Google アカウントによるログイン認証の方法でした。


Angular に関連するトピックは次のページにまとめてあります。

Angular 機能紹介一覧
https://kainobi2.blogspot.com/2019/02/angular.html

Angular モジュールの lazy loading (遅延読み込み)

Angular ではルーティング時に呼び出すモジュールを、アプリケーション起動時ではなく、初回ルーティング時に読み込む仕組み(lazy loading, 遅延読み込み)が提供されています。

今回は lazy loading の設定方法を紹介します。

アプリケーション作成

まずはアプリケーションを作成します。Angular CLI を利用すると、ルーティング機能を追加するか聞かれるので、y(es) とします。

ng new routing-test
? Would you like to add Angular routing? (y/N) y

そうすると、ルーティング機能が追加されたアプリケーションが出来上がります。app-routing.module.ts があること、app.module.ts に AppRoutingModule がインポートされていることを確認することができます。

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

モジュールとコンポーネントの追加

次に、ルーティング対象のモジュールと、そのモジュール配下にコンポーネントを作成します。

ng g m dashboard --routing
ng g c dashboard/list

dashboard.module.ts に ListComponent が登録されていることを確認します。

ルーティングモジュールの編集

app-routing.module.ts の routes プロパティに、次のルーティング情報を指定します。dashboard という URL (path)が呼ばれたときに、dashboard フォルダ配下の dashboard.module.ts ファイルの DashboardModule クラスを呼び出す、という指定を行っています。loadChildren に DashboardModule の参照を指定することで、lazy loading (遅延読み込み)とすることができます。

app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [
  {
    path: 'dashboard',
    loadChildren: './dashboard/dashboard.module#DashboardModule'
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

続いて、Dashboard モジュールの表示コンポーネントの指定をします。「アプリケーションルート/dashboard」が呼び出された時に ListComponent を表示するよう指定を行っています。

dashboard-routing.module.ts

import { ListComponent } from './list/list.component';
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [
  {
    path: '',
    component: ListComponent
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class DashboardRoutingModule { }

routerLink の設定

appcomponent.html に、dashboard へのリンクを追加します。dashboard のリンクをクリックすると、<router-outlet> タグに、dashboard モジュールの list コンポーネントが表示されます。

app.component.html

<p>ルーティングテスト</p>
<a routerLink="">top</a>
<br>
<a routerLink="/dashboard">dashboard</a>

<router-outlet></router-outlet>

アプリケーションの実行と、lazy loading の確認

dashboard にアクセスすると、dashboard モジュールが初めて読み込まれることを確認することができます。

以上、Angular の lazy loading (遅延読み込み)の紹介でした。

Angular に関連するトピックは次のページにまとめてあります。

Angular 機能紹介一覧
https://kainobi2.blogspot.com/2019/02/angular.html

Angular 開発環境の構築

Angular での開発を始めるにあたり、次の３つをインストールする必要があります。

１．Node.js
２．npm
３．IDE

１．Node.js

Node.js は次のサイトからダウンロードします。

https://nodejs.org/ja/



「推奨版」をインストールします。

２．npm

npm は Node.js に含まれてくるので、npm 自体のインストール作業はありません。

３．IDE

IDE に関しては、好みによって変わってくると思いますが、Visual Studio Code がおすすめです。Angular 開発に利用できる拡張機能が充実していることや、ユーザーの絶対数が多いので情報も見つかりやすいためです。

Visual Studio Code は次のサイトからダウンロードします。
https://code.visualstudio.com/



Angular に関連するトピックは次のページにまとめてあります。

Angular 機能紹介一覧
https://kainobi2.blogspot.com/2019/02/angular.html