jQuery - window オブジェクトに登録されているイベントを取得する方法

次の実装で、window オブジェクトに登録されているイベントを取得することができます。

$._data(window, 'events')

WordPress Cocoon テンプレートカスタマイズ：ヘッダーに任意の画像を挿入する

該当ファイル
lib > html-forms.php > generate_the_site_logo_tag

変更前
$logo_before_tag = '<'.$tag.' class="logo'.$class.'"><a href="'.esc_url(get_home_url()).'" class="site-name site-name-text-link" itemprop="url"><span class="site-name-text" itemprop="name about">';

変更後（赤字部分を追記）
  $logo_before_tag = '<'.$tag.' class="logo'.$class.'"><a href="'.esc_url(get_home_url()).'" class="site-name site-name-text-link" itemprop="url" style="display: flex; flex-direction: column;"><img class="page-sub-header-image" style="width: 5em; margin: auto;" src="画像のファイルパス"><span class="site-name-text" itemprop="name about">';

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