「Angular2」の記事 - Crieit

一人もくもく会をCakePHP3のみに変更

2017-03-10T08:49:58+09:00

Angular + CakePHP3 で作成していた

一人もくもく会

だが、Angularを捨ててCakePHPのみに修正した。

お客さんのために作成したサイトでも何でもないのでSEO対策とかどうでも良かったのでAngularを入れて試したのだが、
そもそもGoogleボットがレンダリングした状態を認識すらしてくれなかった。

インデックスもされないし、コンテンツも取得されない。
流石にそれはサイトとして存在させるメリットすらないのでAngularを使うのをやめた。

Fetch as Google

Search ConsoleにFetch as Googleという機能があり、
クローラに実際にどのようにサイトが見えているかを確認できるのだが、
それを実行したところ「Loading...」のみが表示されていた。

原因

原因は不明。
ただ、公開直後はFetch as Googleでちゃんとレンダリングされていた。
途中でAngularのバージョンをあげたのでそのあたりが原因かもしれない。

原因の特定

今回は面倒だったので特定せずにCakePHPのみにした。

JavaScriptを使い、tryでエラーをcatchできるので、それで試してみると良い、とどこかに書かれていた。
結局クローラアクセスの場合だけ出るエラーなどがJavaScript上にある場合、こうなってしまうのかもしれない。
JavaScriptフレームワークでサイトを構築するときに気をつけなければならない点のようだ。

Angular2プロジェクトをwerckerで無料CI

2017-02-22T00:47:33+09:00

Angular2のプロジェクトをwerckerで無料CIした時の設定ログ。

angular-cliのng testを使用。

要件

下記を満たすDockerイメージが必要となる。

node7が入れられる
chromium-browserが入っている

Dockerイメージ

要件を満たすものを探してみたけどうまく見つからなかったので作成した。

https://hub.docker.com/r/dala00/chromium-xvfb-angular-cli/

wercker.yml

多分下記が最小。

box: dala00/chromium-xvfb-angular-cli

build:
  steps:
    - npm-install

    - script:
        name: test start
        code: |
          ng test --single-run

Dockerfileも小さいので別のnodeのバージョンのものが欲しい場合もすぐ作成できると思う。
(今回のも同様にして作った）

CodeshipでAngular2の無料CI

2017-02-20T06:12:40+09:00

CodeshipでAngular2プロジェクトの無料CIの設定方法。

Setup Commands

nvm install 7.0
npm install -g npm@latest
npm install @angular/cli
npm install
npm list --depth=0

Configure Test Pipelines

ng test --single-run

ng testはファイルの変更を検知して永久にテストをしてしまうのでsingle-runオプションが必要。

Angular2のテスト時エラー備忘録

2017-02-19T05:41:26+09:00

Angularでng testを行った時に色々とエラーが出るが、
検索するとだいたい決まりきったわけのわからない解決方法があり、
何度も調べたりすることになるのでメモっておくことにする。

随時更新。

ngModel

ngModelでエラーの場合はFormsModuleをimports。(app.module.ts参照)

No provider for Overlay!

import {OVERLAY_PROVIDERS} from "@angular/material";

providers: [OVERLAY_PROVIDERS],

Error: Error in ./MyComponent class MyComponent - inline template:5:8 caused by: Cannot read property 'subscribe' of undefined

template:5:8は見てみるとa routerLinkのところ。下記のRouterLinkStubDirectiveをdeclarationsに追加すればいい。

https://angular.io/docs/ts/latest/guide/testing.html#!#router-link-stub

もしrouterLinkを動作させるためにRouterTestingModule, RouterModuleやアプリケーションのルーティングモジュールなどをimportsしている場合は外す。

モック

本番と同じ動作をさせられない場合はモックを使う。

Angular2でコンポーネントのユニットテストを書いてみた - アルファブレンドプログラミングチップス

angular-cliでAoTによる高速化

2017-02-17T17:57:57+09:00

Angular2はAoTというものがあり、動作を高速化することができる。

他の記事で色々設定が必要というものを見かけるが、angular-cliを使っている場合は元々機能があるのですぐ有効化することができる。

ng build --prod --aot

で有効化できるし、そもそも最新のangular-cliだとデフォルトで有効化されているため --aot オプションは不要。

Angular2.2から2.4にしてangular-cliも最新にしてみたところ、元々ビルドされたmain.jsが90MBほどあったものが800kBほどに最適化された。
スマホで10秒近くかかっていた初期化も改善された。

古いバージョンを使っている人は早めに最新バージョンに変更した方が良い。

ただ、色々と別のパッケージを使っていると思うが、それらはバージョンが合わないと動作しなかったりする。
自分もng2-tag-input0.8.5だと動かないので0.8.0にしたら動作したし、
ネット上の情報だと他にも同様のエラーがでるパッケージがある。
色々とバージョンの調整は必要。

Angular2アプリケーションを通常のサーバーにデプロイ

2017-02-13T22:31:19+09:00

Angular2アプリケーションをangular-cliでビルドすると公開用のdistフォルダが作成されるので、
基本的にはこれをサーバーにアップすればそのまま動作する。

ただ、jsファイルはハッシュ値がついてファイル名が変わってしまうため、
多少気をつけないといけない。

簡単にデプロイするための方法として下記のような方法があげられる。

distフォルダもignoreせずバージョン管理してしまう

特に支障がなければdistフォルダもcommitしてしまえば良いと思う。

ソースに変更がなければ何度ビルドしてもハッシュ値は変わらない気がするので、
バージョンアップの際だけビルドしてそのままコミットで問題ないと思う。
あとは本番サーバーでpullするだけ。

デプロイ用のプログラムを作成する

何らかの理由でdistフォルダ以外は本番にアップしたくない場合、
上記方法は使えないので自動デプロイ用のプログラムを用意する必要がある。

具体的には下記のような処理のプログラム。

準備用フォルダを作成
準備用フォルダに最新のdist内ファイルを全てアップロード
本番フォルダと準備用フォルダを入れ替え

一人もくもく会用にぱぱっと適当に作成したプログラムのサンプル。

Deploying script with sftp for Angular. 'npm run deploy' or 'npm run deploy rollback' · GitHub

必要に応じて準備用フォルダを事前に削除したり、古い本番フォルダを残してバージョン管理するなり削除するなりが必要かと思われる。

.htaccess

関係ないので補足になるが、ルーティングを使っている場合、トップページ以外からアクセスが来た場合もそのURLのページを表示しなければならないので、
下記のような.htaccessの設定が必要となる。

RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]

Angular2とCakePHP3を共存させる

2017-02-12T05:53:12+09:00

AngularとCakePHPを共存、つまり同じホスト名で動作させたい場合。
例えば下記のように隣同士で並んでいるとする。
Angularはビルドしたdistフォルダのみの公開でその他のソースはアップなどはしない場合。

app
dist

公開フォルダはAngular側のdistフォルダにするが、
AngularもCakePHPもルーティングが必要になるので、distフォルダ内の.htaccessで両方動作するように設定を行う。

CakePHP側は、全てapiというprefix内にプログラムを入れることで振り分けが容易となる。

RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_URI} ^/api/
RewriteRule ^ index.php [L]
RewriteBase /
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]

index.phpはCakePHPのwebrootのもののパス部分の記述だけを修正。下記の2箇所。

require dirname(__DIR__) . '/app/vendor/autoload.php';

$server = new Server(new Application(dirname(__DIR__) . '/app/config'));

index.phpと.htaccessはAngularの開発時のsrcフォルダに入れておき、
angular-cli.jsonのapps.assetsの設定に含めておけば良い。

こういった方法であればホスト名も同じにできるので、SSLを2つ分とったり、などという手間をかける必要がなくなる。

一人もくもく会というサービスを作成

2017-02-11T01:22:31+09:00

一人もくもく会というサービスを作成して公開した。

一人もくもく会

概要

世の中誰でも夜暇な時に適当にプログラミングをあれこれ試す時があると思うが、
そういった時のログを投稿できるサービス。

Qiitaやブログのようにきっちりプログラムや記事を完成させなくても、
適当にどんどんその日毎のログを残すためのもの。

フレームワーク

Angular
CakePHP3

デザインはとりあえずAngular MaterialやMaterial Design Liteをごちゃごちゃに使っている。
できればAngular Materialのみでやりたかったが、こちらは現在betaで開発中のため色々足りない。
他のあちらこちらから色々使えるパーツを探してきて使う必要がある。

現状

とりあえず必要最低限以下の機能を作成しただけなので、αバージョン。
誰でもすぐGithubアカウントかTwitterアカウントでログインできるので、
気が向いた方は使っていただける状態。
0円でSSLもつけているので。

今後

作成は進めていくが、せっかくなのでその開発ログも実際にサービス上に残していく予定。
誰にも利用されなくてもデータが増えていくというのは一石二鳥だ。

その他補足色々

マークダウン

投稿はmarkdownで可能。
Github色のシンタックスハイライトも入れてある。

SPA

Angularを使っているのでSPAとなっている。
面倒なのでサーバーサイドレンダリングはしていない。
とりあえずGoogleのクローラに全部お任せ。
きっとそのうちAngular自体がデフォルトでUniversal対応してくれるだろう。

Google Analytics

SPA用にAutotrackというのがあるのでそれを使った。動いているかは不明。

ソーシャルシェア、ブックマーク

投稿データにシェア、ブックマークボタンをいくつか入れてみた。
SPA用に調整してあるので多分動くと思うがまだ記事が0なので本番では未確認。
うまく動かなかったら投稿しつつ修正していく。

ソース管理

非公開なのでBitBucket。CakePHP3のCIはCodeship。
Angularは元々テストでエラーが出まくってしまうのでエラーを取り切ってから対応予定。

デプロイ

distフォルダ毎サーバーにアップすれば良いのだが、
それだけでも毎回面倒なのでデプロイ用のプログラムを作る必要がある。

ただ、各ファイルのハッシュ値はソースを変更しなければ毎回同じっぽいので、
dist毎pushしてしまえばサーバー側はpullだけでもいいかもしれない。

ちなみに、distディレクトリにCakePHP用のindex.phpが入っていて、.htaccessでCakePHP側とAngular側を振り分けている。
またこの詳細は別記事に書く。

Angular2でコンポーネントのユニットテストを書いてみた

2017-02-03T18:52:13+09:00

Angularのコンポーネントのユニットテストを書いてみた。
TestBedを使用しているパターン。

angular-cliでファイルを作成しつつ、
アプリケーションをある程度書いてng testしてみると大量にエラーが出るので、
それらをいくつかエラーが出ないように修正してみた。

エラーが出る原因

基本的には、htmlで使用されているコンポーネントや、
ts内で使用されているサービスなどの依存関係が満たされていないため。

アプリケーション実行時はmoduleの設定などで満たされているが、
テストは各テストで別途設定してあげなければならない。

テストは別途設定にすることで、各サービスなどはmockを使用できるようになっている。

テスト例

ユーザー情報を取得して表示するだけのページのコンポーネント例。
コンポーネント側ではActivatedRouteからidを取得し、
UserServiceでそのidからhttpでユーザー情報であるUserを取得し、
Userをコンポーネント上で表示するだけの例。

/* tslint:disable:no-unused-variable */
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import { DebugElement } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

import { ActivatedRouteStub } from '../../../../testing/router-stubs';
import { UserServiceStub } from '../../../../testing/user-service-stub';
import { UserDetailComponent } from './user-detail.component';
import { UserService } from '../../../services/user.service';
import { User } from '../../../models/user';

describe('UserDetailComponent', () => {
  let component: UserDetailComponent;
  let fixture: ComponentFixture;
  let activatedRoute = new ActivatedRouteStub();
  let userService = new UserServiceStub();
  let user = new User();

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ UserDetailComponent ],
      providers: [
        {provide: ActivatedRoute, useValue: activatedRoute},
        {provide: UserService, useValue: userService}
      ],
    })
    .compileComponents();

    activatedRoute.testParams = {id: 1};
    userService.user = user;
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(UserDetailComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });

  it('user set', () => {
    expect(component.user && component.user == user).toBeTruthy();
  });
});

declarations

html上に表示するコンポーネントはここで設定。
他のコンポーネントを使っている場合はここに追記。

providers

サービスなどの設定。provideで実際のクラスを指定し、useValueでモックを指定できる。

モック

router-stubs.tsは下記で書かれたものを改造したりして使用。

Angular Docs

Observableを使用しているのでクラスにまとめた方が使いまわしやすい、ということ。
providersではそれらのモックを使用し、compileComponentでコンポーネントが構築された後、

    activatedRoute.testParams = {id: 1};
    userService.user = user;

で返すべき値をセットしている。
上記はgetメソッドになっているので、セットされるとコールバックが起動されて処理が進んでいく。
あとは自由にitで確認していくだけ。

適当にぱぱっとエラーを消して処理を追加しただけなので全体的に正しいかどうかは不明。

Angular2でマークダウンエディタを使うディレクティブ

2017-01-27T22:54:55+09:00

Angular2で下記のシンプルなマークダウンエディタを動作させるためのディレクティブを作ってみた。

GitHub - nextstepwebs/simplemde-markdown-editor

シンプルとはいえ、プレビューや、全画面表示によるプレビューを見ながらの編集、
ツールバーにカスタムボタンを追加など、結構機能が充実していると思う。
Fork数なども多い。

import { Directive, ElementRef } from '@angular/core';
const SimpleMDE: any = require('simplemde');

@Directive({
  selector: '[appSimplemde]'
})
export class SimplemdeDirective {

  mde: any;

  constructor(private el: ElementRef) { }

  ngAfterViewInit() {
    this.mde = new SimpleMDE({
      element: this.el.nativeElement,
      renderingConfig: {
        codeSyntaxHighlighting: true,
      },
    });
  }
}

ちなみに、下記のngModelを使う方法がディレクティブでも可能なよう。

Angularで自作コンポーネントのngModel双方向バインディング - アルファブレンドプログラミングチップス

上記実装後、下記の行を加えておけば呼び出し元の値が連動する。

    this.mde.codemirror.on('change', () => {
      this.propagateChange(this.mde.value());
    });

既存データの編集機能も必要ならwriteValueも実装したり等。

Angular2で共通データの管理(Shared Data)

2017-01-24T06:43:08+09:00

※古い記事のため主にRxJSの説明になっています。共通データを管理したい場合はstoreを使いましょう。

Angularにて、アプリケーション全体で共通のデータを利用したいことなどがある。
例えばログインしているユーザーの情報など。

ダメな例

そこで共通データを管理するSharedDataService等を作る場合、
何も考えないと下記のようになると思う。

export class SharedDataService {
  data: any;

  constructor() {
    data = {};
  }

  set(key: string, value: any) {
    this.data[key] = value;
  }

  get(key: string) {
    return this.data[key];
  }
}

各コンポーネントからは下記のようにデータを取得。

const user = this.sharedDataService.get('user');

しかしこれはうまくいかない。

なぜかというと、だいたいログイン情報のようなものは非同期で取得して来ると思う。
その際にsetで値を保存すると思うが、その時はすでに各コンポーネントのonNgInit等も完了してしまっているし、
コンポーネントのプロパティに値を渡しているわけでもないので全体的に再描画はされない。

成功例

RxJSを使ってSharedDataService内のデータが変わったことを通知する仕組みにする必要がある。

export class SharedDataService {
  data: any;
  updateSources: any;
  syncs: any;

  constructor() {
    data = {};
    updateSources = {};
    syncs = {};
  }

  set(key: string, value: any) {
    this.data[key] = value;
    if (this.updateSources[key]) {
      this.updateSources[key].next(value);
    }
  }

  sync(key: string, callback: (data: any)=>void) {
    if (!this.syncs[key]) {
      const updateSource = new Subject();
      this.updateSources[key] = updateSource;
      this.syncs[key] = updateSource.asObservable();
    }
    this.syncs[key].subscribe(result => callback(result));
    if (this.data[key] !== undefined) {
      callback(this.data[key]);
    }
  }
}

データを取得する各コンポーネント側では下記のようにする。

this.sharedDataService.sync('user', user => this.user = user);

これでどこかで値がsetされる度に各コンポーネントの値が更新されて再描画されていく。

応用例

この仕組みを利用するとtitleタグなどの書き換えも簡単にできる。
setTitleはどうもAppComponent上でしか動作しないようなので、まずAppComponentにて

this.sharedDataService.sync('title', this.titleService.setTitle(title));

ルーティングの各コンポーネントで

this.sharedDataService.set('title', article.title);

そしてtitleをsetしていないページではtitleが元に戻るように、AppComponentにて

this.router.events.subscribe((event) => {
  if (event instanceof NavigationStart) {
    this.data.set('title', null);
  }
});

これで指定したページでだけtitleが書き換えられる負担の少ない処理が可能となる。

補足

ざっと作ったのでもしかするともうちょっと一般的なやり方があるかもしれないし、
構文も間違っている箇所があるかもしれない。

syncはコールバックの利用でなくObservableをそのままreturnした方が良いのかもしれない。
ただ、元々データが存在した場合はすぐ値がほしいので、
それを考慮するとコールバック形式である必要があるかもしれないしObservableでちゃんとしたやり方があるかもしれない。

Angularで自作コンポーネントのngModel双方向バインディング

2017-01-03T08:34:03+09:00

Angularはinputタグ等のform用タグにて[(ngModel)]属性を使用すると双方向バインディングになる便利な機能がある。

これを自作した独自のコンポーネントで実現する方法。

簡単に言えば下記の解説通り。

Custom Form Controls in Angular by thoughtram

ざっと説明すると下記の通り。

ControlValueAccessorインターフェイスを使用する

コンポーネントにControlValueAccessorをimplementする。

registerOnChange, registerOnTouched

changeとtouchedのコールバック関数が渡されるので、
それを保存しておいてコンポーネントの呼び出し元に返したい時に結果を返す。

providers

Angularにきちんと認識させるためにNG_VALUE_ACCESSORのprovidersを設定しているらしい。

まとめ

上記のような感じでできる。
共通設定などを一切汚さずコンポーネントのみで解決できるところが良い。

Angular2のuniversal-starterでangular/material2が使えない

2016-11-28T22:45:33+09:00

Angular2はuniversal-starterから始めることで簡単にサーバー再度レンダリングができるが、
angular/material2を入れてみようとしたところ、
どうもエラーが出てうまく動かない。

検索してみると、どうも今はちゃんと動かないようだ。(2016-11-28現在)
githubのissuesをみるとみんなで解決しようとしている途中だった。

(そもそもangular/material2はアルファバージョンだった)

適当にアプリケーションを作ろうと思ったが、周辺環境がもうちょっと整うまでは様子見しようと思う。

Angular2アプリを全部無料で公開してみる-Django編

2016-11-26T02:25:46+09:00

Angular2で開発したアプリケーションを完全に無料で公開できる方法を考えてみた。

要件

上から順に重要度が高い。

Angular2
Angular2のサーバーサイドレンダリング対応
そこそこのDB容量
なるべく無料枠が大きいところ
開発しやすさ

考察

まず、Angular2をサーバーサイドレンダリングしようと思うと、node.jsでサーバーを動作させることが必要となる。
これは色々調べてみると、恐らく速度や無料枠を比較するとherokuがベストかと思う。
2016年現在は無料で停止なしで稼働できる。

上記は確定っぽいのでDB側を考えてみる。

容量の無料枠で一番大きいのは恐らくAmazon DynamoDBの25GB。

様々な言語のSDKがあるのでどのサーバーでも行けると思う。
Angular2からも直接行けるが接続情報が筒抜けになるし、直接DB接続だと複数の処理を1リクエストにまとめたりができないので、
費用が発生する可能性が高くなる。
やはり一度サーバーを経由したいところ。

Angular2 → Amazon lambda → Amazon DynamoDB

というのもなかなか良さそう。
ただし認証によってアクセスできる処理をきっちり整理する必要がある。
こちらはまた今後確認してみたい。

（追記）
調べてみたらcognito + lambda + DynamoDBを使用する必要がありそう。
ちょっとこれはめんどそうだしcognitoは未認証ユーザーという概念があるが、
もしそれも課金計算に含めるなら費用が発生する可能性は高くなりそう。

構成

今回は総合的なバランスを考えて下記を試してみた。

Angular2 → GAE (Python + Django) + Datastore

直接APIサーバーにアクセスするだけなのでサーバーを分けない場合とアクセス時間が変わらない。
Datastoreが1GB(?)無料なのでそこそこ。
Djangaeを使うとDjangoのモデルそのままでDatastoreにアクセスできるので、
この環境用の特別なプログラムで開発をする必要がない。
pythonはpython, python3, pip, pip3と分けてインストールされたり切り替えたりができたりするので、
python2しか使えないGAEでもローカルの開発環境を汚さずに開発しやすい。
pythonはリモートで本番のDjango用のコマンドを実行できるのでマイグレーションなども簡単。

Angular2側

GitHub - angular/universal-starter: Angular 2 Universal starter kit by @AngularClass

ng newしないで、上記をそのままcloneして改造していくのがいい。
デフォルトのコマンドでherokuでそのまま動くし、
Visual Studio Codeでもデバッグできる。

必要であればangular-cliで新規作成したプロジェクトから必要なファイルだけコピーしてくると良いと思う。

GAE側

GitHub - ottoyiu/django-cors-headers: Django app for handling the server headers required for Cross-Origin Resource Sharing (CORS)

別サーバーなのでこれをいれておけば動く。
いちいち全部のResponseにヘッダーを指定する必要はない。

接続や設定などはGAEの特別な仕様などがあり最初はつまずくが、
解決すればあとは普通と同じように開発ができる。

チュートリアルで操作させられるが、どうもGithubと連携できる開発環境みたいなのもあるようだ。

まとめ

たいしてアクセスやデータ量の無いアプリケーションは、こんな感じで無料でなるべく開発しやすい環境を模索すると面白そうだ。

APIサーバー側は、さくらレンタルなど安いサーバーを別途持っていればそれをそのまま使うのも簡単だ。

Angular2のフルスクリーンloading表示コンポーネント

2016-06-04T00:14:50+09:00

Angular2用で何か処理をする間に
オーバーレイでloadingを表示するコンポーネントの作成。

[https://gist.github.com/02517becac0c18215c71753773b74e07:embed#Angular2 fullscreen loading component](https://gist.github.com/02517becac0c18215c71753773b74e07:embed#Angular2 fullscreen loading component)

Angular2 fullscreen loading component

使い方

読み込む

import { LoadingComponent } from "./loading.component";

ディレクティブ指定

directives: [LoadingComponent]

テンプレート内

プロパティ

isLoading: boolean = false;

表示、非表示

// 表示
this.isLoading = true;
// 非表示
this.isLoading = false;