daikiojm’s diary

ブログを書くときがやってきたどん!

AngularCLIで単一ファイルコンポーネント

AngluarCLIでComponentを作成する際にVue.jsの単一ファイルコンポーネントっぽく、1Component1ファイルとする方法を紹介します。

やってみる

コマンド実行時のオプションで指定

コンポーネント作成(デフォルト)

$ ng g c <コンポーネント名>

コンポーネント作成(単一ファイルコンポーネント)

$ ng g c --inline-style --inline-template <コンポーネント名>

--inline-style --inline-templateオプションを付けて実行することでcss、htmlの内容がtsファイルにインラインで記述されます。

※ gはgenerateのエイリアス
※ cはcomponentのエイリアス

.angular-cli.jsonに設定を記述

事前にプロジェクトの設定ファイルに記述しておく方法です。

.angular-cli.json(デフォルト)

...
  "defaults": {
    "styleExt": "css",
    "class": {
      "spec": false
    },
    "component": {}
  }
}

.angular-cli.json(単一ファイルコンポーネント)

...
  "defaults": {
    "styleExt": "css",
    "class": {
      "spec": false
    },
    "component": {
      "inlineStyle": true,
      "inlineTemplate": true
    }
  }
}

以上です。

確認

オプション指定、もしくは.angular-cli.jsonに設定を記述した状態でComponentを作成してみます。

f:id:daikiojm:20171202140127p:plain

作成されたコンポーネントを確認すると、一つのtsファイルにstyleとテンプレートがまとまっているのが分かるかと思います。

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-one-file',
  template: `
    <p>
      one-file works!
    </p>
  `,
  styles: []
})
export class OneFileComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

参考

https://github.com/angular/angular-cli/wiki/generate-component

VSCodeでnode_modules以下を素早く覗ける「Search node_modules」が便利

JavaScriptでフロントエンドの開発やNode.jsでの開発をしている時、npm パッケージの中を覗きたいことがあると思います。
そんな時、Visual Studio Codeのプラグイン Search node_modulesを入れておくと素早くnpmパッケージ内のファイルにアクセスすることができて便利だったので紹介します。

VisualStudioCodeでは、プロジェクトの.gitignoreに登録されているファイル、ディレクトリは検索や移動の対象にならないようになっています。 その為、node_modules以下のファイルにアクセスしたい場合、サイドパネルのエクスプローラーを開いてnode_modules以下に移動して...という作業が発生しがちでした。

Search node_modulesを使う

Visual Studio Code内の「拡張機能」メニューからか、Search node_modulesからインストールしておきます。

Cmd + Shift + Pでコマンドパレットを表示して、「Search node_modules」を選択

f:id:daikiojm:20171201015027p:plain

node_modulesを検索できるようになるので、module名を入力するか候補から選択することでパッケージ内のファイルにアクセすることができます。

f:id:daikiojm:20171201015336p:plain

終わりに

このように、エクスプローラーを開いてnode_modules以下に移動して...という作業を減らすことができます。
Node.jsでの開発が捗りますね💪

Angularでプレビュー画像を自動回転する

Angularで画像プレビューを行う際に、画像のExif(Orientation)情報を見て自動で向きを回転させる方法です。

JavaScript-Load-Imageという便利なライブラリと、Reactでの使い方を紹介したありがたいブログ記事があったので、かなり簡単に実装することができました。 早速、実装していきたいと思います。

JavaScript-Load-Imageの導入

javascript exifとかでググるexif-jsというライブラリが真っ先にヒットするが、JavaScript-Load-Imageの方が断然使いやすいAPIが用意されている印象でした。

まずは、Angularプロジェクトにインストール

$ npm i --save blueimp-load-image

画像プレビュー&回転を行いたいコンポーネントに次のようにしてインポート(モジュール全体をまとめてインポートする必要あり)

import * as loadImage from 'blueimp-load-image';

Exifを見て自動で回転するプレビューを実装

まずは、テンプレート側

<!-- 画像を選択 -->
<input type="file" accept="image/*" (change)="onInputChange($event)"/>

<!-- 選択した画像を表示 -->
<img [src]="image" style="margin-top: 24px">

画像を選択させるinput要素のchangのイベントをイベントハンドラonInputChangeで受けています。

次に、クラス側

...
export class RotateComponent {
  public image: any = '';

  onInputChange(event: any) {
    const file = event.target.files[0];
    loadImage.parseMetaData(file, (data) => {
      const options = {
        orientation: null,
        canvas: true
      };
      if (data.exif) {
        options.orientation = data.exif.get('Orientation');
      }
      this.getDataUrl(file, options)
      .then(result => {
        this.image = result;
      });
    });
  }

  getDataUrl(blobImage: Blob, options: Object): Promise<any> {
    return new Promise((resolve) => {
      loadImage(blobImage, (canvas) => {
        resolve(canvas.toDataURL(blobImage.type));
      }, options);
    });
  }
}

イベントハンドラの引数から取得したfileをloadImageのparseMetaDataメソッドに渡し、Exif情報の取得を行った後、getDataUrlメソッドでは、loadImageで得られるcanvasをimgタグで表示できるData URL形式に変換しています。

試してみる

試しに、Exif(Orientation)情報が含まれる画像をアップロードしてみます。 ※ 右はJavaScript-Load-Imageを使わすにimgタグにプレビューした画像

f:id:daikiojm:20171123222415p:plain

参考

JavaScript(ES2015&React)で画像を扱う:リサイズとプレビュー表示

ServerlessのTypeScript公式テンプレートを使ってみる

Serverlessをしばらく触ってこなかったので、気づかなかったのですが、v1.21.0からsls createの際に指定する公式テンプレートにaws-nodejs-typescriptと言うものが追加されたようです。(結構前ですね...)

f:id:daikiojm:20171105164504p:plain

以前から、プラグインとして、serverless-webpackというものがあり、デプロイコマンド実行時にwebpackを使ってTypeScript→JavaScriptへのビルドタスクを実行するという方法がありましたが、公式テンプレートでもserverless-webpackを使う際の一連のセットアップなどが済んだテンプレートを提供しているようです。

使ってみる

テンプレートからプロジェクトを作成して、とりあえずデプロイしてみます。

プロジェクトの作成

まずは、serverlessのインストールから。 インストールしたバージョンは、現時点での最新版1.24.0になります。

$ npm i -g serverless

createコマンドでテンプレートからプロジェクトを作成してみます。

$ sls create -t aws-nodejs-typescript -p sls-ts

作成したプロジェクトの内容を確認ると、次のファイルが作成されていました。

./sls-ts/
├── handler.ts
├── package.json
├── serverless.yml
├── tsconfig.json
└── webpack.config.js

aws-nodejsのテンプレートで作成した際に作成される、ファイルに加え、package.json、tsconfig.json、webpack.config.jsが作成されるようです。 それぞれのファイルの内容を見ていきます。

package.json

プラグインであるserverless-webpack、webpackで使うTypeScriptのローダーなどがインストールされているようです。

{
  "name": "aws-nodejs-typescript",
  "version": "1.0.0",
  "description": "Serverless webpack example using Typescript",
  "main": "handler.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "devDependencies": {
    "serverless-webpack": "^3.0.0",
    "ts-loader": "^2.3.7",
    "typescript": "^2.5.2",
    "webpack": "^3.6.0"
  },
  "author": "The serverless webpack authors (https://github.com/elastic-coders/serverless-webpack)",
  "license": "MIT"
}

serverless.yml

pluginsにserverless-webpackが設定されています。

service:
  name: aws-nodejs-typescript

# Add the serverless-webpack plugin
plugins:
  - serverless-webpack

provider:
  name: aws
  runtime: nodejs6.10

functions:
  hello:
    handler: handler.hello
    events:
      - http:
          method: get
          path: hello

webpack.config.js

entry にslsw.lib.entriesが指定されていますが、これはserverless-webpack側でエントリポイントを自動で解決してくれているらしいです。(./handler.tsを指定したい気分ですが、どんな動きになっているかは後々調べてみよう...) ts-loaderの設定もされた状態ですね。

const path = require('path');
const slsw = require('serverless-webpack');

module.exports = {
  entry: slsw.lib.entries,
  resolve: {
    extensions: [
      '.js',
      '.jsx',
      '.json',
      '.ts',
      '.tsx'
    ]
  },
  output: {
    libraryTarget: 'commonjs',
    path: path.join(__dirname, '.webpack'),
    filename: '[name].js',
  },
  target: 'node',
  module: {
    loaders: [
      { test: /\.ts(x?)$/, loader: 'ts-loader' },
    ],
  },
};

その他のファイルに関しては、割愛します。

とりあえずデプロイしてみる

AWS CLIで必要なcredentが設定されている前提で、デプロイをしてみます。

$ sls deploy

デプロイ中のコンソールを眺めていると、まずwebpack(ts-loader)でTypeScriptが実行され、終わったタイミングでServerlessの実行結果が流れ始めるのがわかります。 ※ グローバルにTypeScriptがインストールされた環境で実行した場合は、そちらが使われるようです。

また、デプロイが完了後に.serverlessディレクトリ以下に生成されている.zipファイルの内容を確認してみると、JavaScriptにビルド済みのhandler.jsが確認できるかと思います。

作成されたAPI Gatewayのエンドポイントを叩いてみると...

f:id:daikiojm:20171105164532p:plain

動いてますね。

所感

webpackの設定なしに、気軽にTypeScriptが使えるようになってて最高です。

Angularでテキストファイルを読み込む

Angularでブラウザから読み込んだローカルのテキストファイルを表示する方法です。
HTML5のFile APIの基本的な使い方が分かれば簡単な内容ですが、メモ程度に残しておきます。

早速、実装していきたいと思います。
以下で紹介する内容は、angluar-cling newしたプロジェクトのapp.componentにべた書きしているので、試しに動かす際はコピペすれば動くはずです。

環境

この記事で紹介する内容は、以下の環境で試しています。

$ ng -v
@angular/cli: 1.4.1
node: 8.1.3

実装例

まずは、テンプレート側です。
テキストファイルを読み込むための<input>と、読み込んだテキストの内容を表示するための<p>タグを配置しました。

<!-- テキストファイルを選択するinput -->
<input type="file" (change)="onChangeInput($event)">

<!-- テキストファイルの内容を表示するエリア -->
<p>{{readText}}</p>

次に、クラス側です。 まず、inputのchangeイベントにバインドされたonChangeInput()メソッド内で、fileオブジェクトをfileToText()メソッドに渡しています。
fileToText()メソッドは、FileReaderの結果をPromiseで返します。
※ここではエンコーディング未指定なので、デフォルトのUTF-8 で解釈されます。

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  public readText: string = null;

  onChangeInput(evt) {
    const file = evt.target.files[0];
    this.fileToText(file)
      .then(text => {
        this.readText = text;
      })
      .catch(err => console.log(err));
  }

  fileToText(file): Promise<string> {
    const reader = new FileReader();
    reader.readAsText(file);
    return new Promise((resolve, reject) => {
      reader.onload = () => {
        resolve(reader.result);
      };
      reader.onerror = () => {
        reject(reader.error);
      };
    });
  }
}

読み込んだテキストが正しく改行されるように、cssも修正しておきます。

p {
  white-space: pre-wrap;
}

試してみる

試しに、次のようなファイルをアップロードしてみます。

用意したテキストファイル

f:id:daikiojm:20171128235722p:plain

inputから用意したテキストファイルを選択した結果

f:id:daikiojm:20171129000712p:plain

以上です。

参考

FileReader -MDN web docs
white-space -HTMLクイックリファレンス

Angularで画像読み込みに失敗した際の代替えイメージを指定するimgディレクティブを作成

画像読み込みに失敗(404エラーなど)した場合に代替えイメージを表示する方法です。

コンポーネント内で対応する方法

簡単な方法としては、次のような方法があります。

VIew

<img src="imageUrl" (error)="onImageLoadingError">

ViewModel

export class TestComponent {

  imageUrl = 'https://www.gstatic.com/webp/gallery3/2.png';
  defImageUrl = '../assets/images/default.png';
  constructor() { }

  onImageLoadingError() {
    this.imageUrl = this.defImageUrl;
  }

}

上記の方法では、imgタグの errorイベントを受けてコンポーネント側で保持している、イメージURLを代替えイメージのURLで置き換えるという方法です。
今回は、imgタグに属性ディレクティブを追加する形で代替えイメージの指定を行ってみます。 

imgディレクティブを作成して対応する方法

Angularのディレクティブの作成はangular-cli を使えば、app.moduleへの登録を含め簡単に行うことが出来ます。
次のコマンドでベースとなるディレクティブを作成します。 

ng g d directives/defaultImage

コマンド実行後には、app/directives ディレクトリ以下に次のファイルが作成され、app.moduleへの登録も自動で行われています。

  • default-image.directive.ts
  • default-image.directive.spec.ts

default-image.directive.ts

import { Directive, Input, HostListener, HostBinding } from '@angular/core';
// Input, HostListener, HostBindingを追加

@Directive({
  selector: 'img[default]',
})
export class DefaultImageDirective {
  @Input() default: string;

  @HostBinding('attr.src') @Input() src;
  @HostListener('error') updateSrc() {
    this.src = this.default;
  }
}

あとは、次のように使うだけです。

View

<img src="http://img.tiqav.com/ah.th.gifhttp://img.tiqav.com/ah.th.gif" default="../assets/images/default.png">

Angular MaterialでRouterと連携するTabを実装

Angular Materialで次のようなTabsを使ったUIを実装する方法です。
今回実現したのは👇こんな感じの動きです。

f:id:daikiojm:20170910191112g:plain

動きを見て分かるように、URLの変化に合わせてアクティブなtabと内容が変更されます。

以下のStackOverflowにあるサンプルコードを参考に、routerとmd-tab-nav-barの連携を行いましたが、これだけでは、URLが直接変更された場合に対応できていなかったため、別途修正を加えました。

stackoverflow.com

環境

$ ng --version
@angular/cli: 1.3.0
node: 8.1.3
os: darwin x64
"@angular/material": "^2.0.0-beta.10",
"@angular/router": "^4.2.4",

構成

今回作成したプロジェクトの構成は👇

./app
├── ./app/app-routing.module.ts
├── ./app/app.component.css
├── ./app/app.component.html
├── ./app/app.component.ts
├── ./app/app.module.ts
└── ./app/container
    ├── ./app/container/newest
    │   ├── ./app/container/newest/newest.component.css
    │   ├── ./app/container/newest/newest.component.html
    │   └── ./app/container/newest/newest.component.ts
    ├── ./app/container/random
    │   ├── ./app/container/random/random.component.css
    │   ├── ./app/container/random/random.component.html
    │   └── ./app/container/random/random.component.ts
    └── ./app/container/search
        ├── ./app/container/search/search.component.css
        ├── ./app/container/search/search.component.html
        └── ./app/container/search/search.component.ts

app.componentに<router-outlet>を配置して、Tabの内容はそれぞれsearch、newest、randomを切り替えます。

サンプル

まずは、routingの設定 (app-routing.module.ts)

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

import { SearchComponent } from './container/search/search.component';
import { NewestComponent } from './container/newest/newest.component';
import { RandomComponent } from './container/random/random.component';

const routes: Routes = [
  { path: '', redirectTo: 'search', pathMatch: 'full' },
  {
    path: 'search',
    component: SearchComponent
  },
  {
    path: 'newest',
    component: NewestComponent
  },
  {
    path: 'random',
    component: RandomComponent
  }
];

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

メインのcomponent (app.component.html, app.component.ts)

<app-header></app-header>
<div class="main-area-container">
<nav md-tab-nav-bar>
  <a md-tab-link
      *ngFor="let routeLink of routeLinks; let i = index"
        [routerLink]="routeLink.link"
        [active]="activeLinkIndex === i"
        (click)="activeLinkIndex = i">
        {{routeLink.label}}
    </a>
</nav>
<router-outlet></router-outlet>
</div>
<app-footer></app-footer>
import { Component } from '@angular/core';
import { Router, ActivatedRoute, NavigationEnd } from '@angular/router';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';
  private routeLinks: any[];
  private activeLinkIndex = 0;
  private currentRoute = '';

  constructor(
    private router: Router,
    private activatedRoute: ActivatedRoute
  ) {
    this.routeLinks = [
      { label: 'Search', link: 'search' },
      { label: 'Newest', link: 'newest' },
      { label: 'Random', link: 'random' }
    ];
    router.events.subscribe(event => {
      if (event instanceof NavigationEnd) {
        this.currentRoute = event.url.slice(1);
        console.log(this.currentRoute);
        this.routeLinks.forEach((elm, index) => {
          if (elm.link === this.currentRoute) {
            this.activeLinkIndex = index;
          }
        });
      }
    });
  }
}

ActivatedRouteを使って、コンストラクタ内で現在のパスをsubscribeしています。 routingが変更されるたびに、activeLinkIndexも更新されviewに反映されるようになっています。

その他のrouterで読み込んでいるsearch、newest、randomに関しては省略します。

参考

Angular Material

angular - Angular2 material design mdtabs with router - Stack Overflow

typescript - Angular 2 Get current route - Stack Overflow