2018年01月16日

Nuxt.jsでヘッダー情報を設定

nuxt.config.jsには以下のようにheader情報を設定しておき、

module.exports = {
head: {
titleTemplate: '%s - Nuxt.js',
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: 'Meta description' }
]
}
}


pagesディレクトリ配下のページコンポーネントで以下のようにtitleを設定することで、

<template>
<h1>Hello world!!!</h1>
</template>
<script>
export default {
head () {
return {
title: 'ok',
}
}
}
</script>


以下のようなtitle要素が出力される

<title data-n-head="true">ok - Nuxt.js</title>
タグ:Nuxt.js
posted by ねこまんま at 17:59 | Comment(0) | vue.js | 更新情報をチェックする

2017年11月12日

Angularの構造ディレクティブ(Structural directives)でif文を作ってみる

Angularの構造ディレクティブで*ifと同じ機能をもつ *if2を作成(elseとかはなし)

TemplateRefでテンプレート(もとのHTML的なの)を、ViewContainerRefでテンプレートが挿入されていた場所を取得できるのでif2がtrueの場合は挿入、if2がfalseの場合はクリアする。

import {Directive, Input , OnChanges, TemplateRef, ViewContainerRef} from '@angular/core';

@Directive({
selector: '[if2]'
})
export class If2Directive implements OnChanges {

@Input() if2: boolean;
constructor(
private template: TemplateRef,
private container: ViewContainerRef
) {}

ngOnChanges() {
if (this.if2) {
this.container.createEmbeddedView(this.template);
}else {
this.container.clear();
}
}
}

posted by ねこまんま at 00:44 | Comment(0) | Angular | 更新情報をチェックする

AngularのRenderer2でDOMを操作

AngularのRenderer2でDOMを操作できます。

以下のように指定を行うとElementRefで取得したネイティブのDOMにアクセスできます。

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

@Component({
selector: 'app-component',
templateUrl: './app-component.component.html'
})
export class AppComponent implements OnInit {

constructor(
private el: ElementRef,
private renderer: Renderer2
) { }

ngOnInit() {
const target = this.el.nativeElement;
this.renderer.setStyle(target, 'color', 'red');
this.renderer.listen(target, 'click', () => alert('ok'));
}

}

posted by ねこまんま at 00:00 | Comment(0) | Angular | 更新情報をチェックする

2017年11月11日

AngularでネイティブのDOMにアクセス

AngularでネイティブのDOMにアクセスするにはElementRefで参照します。(この場合は<app-component></app-component>)にアクセスされます。

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

@Component({
selector: 'app-component',
templateUrl: './app-component.component.html'
})
export class AppComponent implements OnInit {

constructor(
private el: ElementRef
) { }

ngOnInit() {
this.el.nativeElement.style.color = 'red';
}
}


posted by ねこまんま at 23:52 | Comment(0) | Angular | 更新情報をチェックする

AngularでDirectiveの作成

AngularでDirectiveの作成するには以下のようにします。

import {ElementRef, Directive } from '@angular/core';
@Directive({
selector: '[myDirective]'
})
export class MyDirective {
constructor(
private el: ElementRef
) {
this.el.nativeElement.style.color = 'red';
}
}


こちらを作成しておけば以下のようにDirectiveが利用できます。

<p myDirective>
myDirective works!
</p>


引数を利用したい場合は@Input() を利用します。

import {ElementRef, Directive, Input , OnInit} from '@angular/core';
@Directive({
selector: '[myDirective]'
})
export class MyDirective implements OnInit {
@Input() myDirective;
constructor(
private el: ElementRef
) {}
ngOnInit() {
this.el.nativeElement.style.color = this.myDirective;
}
}


以下のようにDirectiveが利用できます。

<p myDirective="red">
myDirective works!
</p>


引数を複数設定したい場合はディレクティブ名以外の@Inputを増やしていきます。

import {ElementRef, Directive, Input , OnInit} from '@angular/core';
@Directive({
selector: '[myDirective]'
})
export class MyDirective implements OnInit {
@Input() myDirective;
@Input() myDirectiveBg;
constructor(
private el: ElementRef
) {}
ngOnInit() {
this.el.nativeElement.style.color = this.myDirectiveBg;
this.el.nativeElement.style.backgroundColor = this.myDirectiveBg;
}
}


以下のようにDirectiveが利用できます。

<p myDirective="red" myDirectiveBg="blue">
myDirective works!
</p>


@HostListenerをを利用すればイベントを制御することも可能です。HostListenerの引数にイベントを設定して、実行したいメッソッドを後ろに指定します。

import {ElementRef, Directive, Input , OnInit, HostListener} from '@angular/core';

@Directive({
selector: '[myDirective]'
})
export class MyDirective implements OnInit {

@Input() myDirective = 'blue';
@Input() myDirectiveBg = 'blue';

constructor(
private el: ElementRef
) {}

ngOnInit() {
this.el.nativeElement.style.color = this.myDirective;
}
@HostListener('click') changeBg() {
this.el.nativeElement.style.backgroundColor = this.myDirectiveBg;
}
}


@HostListenerは第2引数に配列でメソッドで利用できる引数が設定できます、'$event'と指定をするとイベントオブジェクトを利用することができます。(以下のサンプルではevent.targetをHTMLElement型にキャストしています。)

import {ElementRef, Directive, Input , OnInit, HostListener} from '@angular/core';

@Directive({
selector: '[myDirective]'
})
export class MyDirective implements OnInit {

@Input() myDirective = 'blue';
@Input() myDirectiveBg = 'blue';

constructor(
private el: ElementRef
) {}

ngOnInit() {
this.el.nativeElement.style.color = this.myDirective;
}
@HostListener('click', ['$event']) changeBg(event: MouseEvent) {
(<HTMLElement>event.target).style.backgroundColor = this.myDirectiveBg;
}
}

タグ:Directive
posted by ねこまんま at 22:54 | Comment(0) | Angular | 更新情報をチェックする

2017年10月24日

ConnectableObservableをColdに変換

Observable.forkJoin()で並列でObservableを購読しようとしたら上手く動かなかった。

調べていくと片方のObservableがBehaviorSubjectより発行されたConnectableObservableだった為、Completeを発行せずにObservable.forkJoin()がしないようです。

ColdなObservableをHotに変換するのにはpublish()などがあるけど逆は調べてもあまり見つからず。

調べていくとtake(1)を利用するとBehaviorSubjectの最新の値を取ってきてCompleteが発行されるのでObservable.forkJoin()で制御できるようなります。
posted by ねこまんま at 11:52 | Comment(0) | RxJS | 更新情報をチェックする

2017年10月23日

Angularでカスタムパイプを作る

./pipe/ellipsis.pipe.ts として省略用のパイプを作成します。PipeTransformで対象の文字列や引数(ex :foo :bar)が取得できますので変換してリターンで返すだけです。
以下のサンプルではN文字(初期値は50)以上の場合は...と省略されるパイプを作成しています。

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
name: 'ellipsis'
})

export class Ellipsis implements PipeTransform {
transform(value: string, length: number = 50 , ommission: string = '...'): any {
if ( value.length < length) {
return value;
} else {
return value.substring(0 , length) + ommission;
}
}
}


作成したパイプはapp.module.tsで登録しておきます。

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

import { AppComponent } from './app.component';
import { Ellipsis } from './pipe/ellipsis.pipe';

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


これで以下のように利用することができます。

<p>{{'あいうとおあいうとおあいうとおあいうとおあいうとおあいうとお' | ellipsis}}</p>
<p>{{'あいうとおあいうとおあいうとおあいうとおあいうとおあいうとお' | ellipsis : 20}}</p>
<p>{{'あいうとおあいうとおあいうとおあいうとおあいうとおあいうとおあいうとおあいうとおあいうとおあいうとお' | ellipsis}}</p>
<p>{{'あいうとおあいうとおあいうとおあいうとおあいうとおあいうとおあいうとおあいうとおあいうとおあいうとお' | ellipsis : 50 : '〜'}}</p>
<p [innerHTML] = "'あいうとおあいうとおあいうとおあいうとおあいうとおあいうとおあいうとおあいうとおあいうとおあいうとお' | ellipsis"></p>
posted by ねこまんま at 10:31 | Comment(0) | Angular | 更新情報をチェックする

2017年10月17日

AngularでURLのパラメーターを取得する

AngularでURLのパラメーターを取得する。ルーティングでは以下のように設定している

{path: 'list/:page', component: ListComponent}


呼び出したいコンポーネントでActivatedRouteのsnapshot.paramsからパラメーターが取得できる

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

@Component({
selector: 'list',
template: ' <h1 class="friend">Friend ID is {{friendId}}</h1>',
})
export class FriendComponent {
pageNo: string

constructor(route: ActivatedRoute) {
this.pageNo = route.snapshot.params.page
}
}
posted by ねこまんま at 16:55 | Comment(0) | Angular | 更新情報をチェックする

AngularでN文字以上をトリミング

AngularでN文字以上をトリミングしたい場合はtsファイル内で以下のように文字数を定義しておき

  /**
* 文のトリミング文字数
*/
public maxTextLength = 255;


HTML側ではN文字を超えたる文字はトリミングしておき文字数をみて...を付ける

<p>{{text|slice:0:maxTextLength}}<span *ngIf="ttext?.length>maxTextLength">…</p>
タグ:Angular
posted by ねこまんま at 15:21 | Comment(0) | Angular | 更新情報をチェックする

はじめてのReactNative

はじめてReactNativeでアプリっぽいものと作る勉強をするのでメモ。

オフィシャルサイトをベースに進めていきます。

まずはcreate-react-native-appをグローバルにインストール

npm install -g create-react-native-app


適当なディレクトリでcreate-react-native-appでプロジェクトを作成

create-react-native-app MyApp


プロジェクトディレクトリで「yarn start」 もしくは「 npm start」

cd MyApp
yarn start


環境によるかもしれないけど以下のようなエラーが出ました。解決用のコマンドも提示されてる親切さ。
2つのコマンドを入力したら問題なく開始できました。

12:41:08: Unable to start server
See https://git.io/v5vcn for more information, either install watchman or run the following snippet:
sudo sysctl -w kern.maxfiles=5242880
sudo sysctl -w kern.maxfilesperproc=524288


デカデカと開発環境用のQRコードが表示されます。

スクリーンショット 2017-10-17 12.50.04.png

アプリをスマホで確認する場合にはExpoというアプリをインストールして、そのアプリでこのQRコードを読み取ります。

MyApp/App.jsを立ち上げてエディタで以下のように変更。

import React, { Component } from 'react';
import { Text } from 'react-native';

export default class HelloWorldApp extends Component {
render() {
return (
<Text>Hello world!</Text>
);
}
}


スマホの表示が「Hello world!」に切り替わったのが確認できます。

これで準備はOK
タグ:ReactNative
posted by ねこまんま at 13:01 | Comment(0) | React | 更新情報をチェックする

2017年10月16日

AngularでBehaviorSubjectでloadingを表示

BehaviorSubjectでは初期値を指定しなくては行けないため値があるかないかの判定が難しいです。

そのため表示用のオブジェクトにはnullを指定しておき

export Todo {
title: string;
description: string;
}
public todo: BehaviorSubject<Todo|null> = new BehaviorSubject(null);


nullの場合はloading表示、値が入って初めてからオブジェクトの内容を表示するようにします。

<div *ngIf="!todo.value">
ローディング
</div>
<div *ngIf="todo | async">
TODOリスト
</div>
posted by ねこまんま at 23:43 | Comment(0) | Angular | 更新情報をチェックする

2017年10月13日

Angularで「WARNING .. 'Interface' was not found」と警告がでた

Angularで「WARNING .. 'Interface' was not found」と警告がでて色々と試した

WARNING in ./xxx.component.ts
39:82-90 "export 'MyInterface' was not found in './xxx.service


xxx.service.tsでは以下のようにMyInterfaceを定義し

export interface MyInterface {
foo?: string;
}


xxx.component.tsでは以下のようにMyInterfaceを読み込み

import { MyInterface } from './xxx.service';


のように定義している。

調べていくと、@inputの型定義を以下のようにしていると警告が出るようです。

@Input() myInterface: MyInterface;


以下のようにして値未定義を許可すると警告が消えました。

@Input() myInterface = <MyInterface>null;
タグ:TypeScript
posted by ねこまんま at 17:35 | Comment(0) | Angular | 更新情報をチェックする

2017年10月10日

RxJSの購読管理

RxJSでは Rx.Subscription() で購読情報を管理することができるオブジェクトを作成できる。
subscribe()の返り値をこのオブジェクトにadd()していくと、あとでまとめてunsubscribe()することができます。

import Rx from 'rxjs/Rx';
const subscription = new Rx.Subscription();
const s1 = Rx.Observable.interval(1000).subscribe(x => console.log(1,x));
subscription.add(s1);
const s2 = Rx.Observable.interval(300).subscribe(x => console.log(2,x));
subscription.add(s2);
document.body.addEventListener('click', () => {
subscription.unsubscribe();
});
posted by ねこまんま at 16:55 | Comment(0) | RxJS | 更新情報をチェックする

2017年09月27日

RxJSのオペレーター



.map(e => e.text) // ストリームを加工する
.delay(200) // ストリームを送れて配信
.throttleTime(200) // ストリームを間引く
.debounceTime(200) // 短い期間で実行されたストリームを間引く
.take(3) // n回だけストリームを流す
.takeUntil(myObserbal) // ストリーム(myObserbal)を受け取るまでストリームを流す
.pluck('target', 'value') //ストリームのオブジェクト( strem.target.vlaue)を流す
.pairwise() // 前回と今回のストリームを配列で流す
.distinct() // 重複するストリームを流さない
.distinctUntilChanged() // 連続するストリームが同じ値の場合はストリームを流さない
.scan(beforeValue => beforeValue + 1, defaultVAlue) // 前回のストリームを流す




タグ:RxJS
posted by ねこまんま at 21:50 | Comment(0) | RxJS | 更新情報をチェックする

2017年07月11日

react-router v4を試してみる

最近Angular三昧だったのでリハビリをかねて、サイトのReactのバージョンアップをしています。

はまったのがreact-router、もともとはreact-routerという名前のモジュールだったのですがreact-router v4
からはWeb用とNative用にわかれており、Web用はreact-router-domという名前のモジュールを利用します。

以下のyarnコマンドでモジュールの入れ替えを行います。

yarn remove react-router
yarn add react-router-dom


npmを利用している場合は以下のコマンドでモジュールの入れ替えを行うことができます。

npm uninstall react-router --save 
npm install react-router-dom



import  React , { Component } from 'react';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom'

const Home = ()=>{
return <div>Home</div>
}

const Page1 = ()=>{
return <div>Page1</div>
}

const Page2 = ()=>{
return <div>Page2</div>
}

const Page3 = ()=>{
return <div>Page3</div>
}

class App extends Component {
render() {
return (
<Router>
<div>
<ul>
<li><Link to='/'>Home</Link></li>
<li><Link to='/page1'>Page1</Link></li>
<li><Link to='/page2'>Page2</Link></li>
<li><Link to='/page3'>Page3</Link></li>
</ul>

<hr />
<div>
<Route exact path='/' component={Home} />
<Route path='/page1' component={Page1} />
<Route path='/page2' component={Page2} />
<Route path='/page3' component={Page3} />
</div>
</div>
</Router>
);
}
}

export default App;
posted by ねこまんま at 10:28 | Comment(0) | TrackBack(0) | React | 更新情報をチェックする

2017年07月10日

"-bash: create-react-app: command not found"

create-react-appをインストールして実行した所以下のエラーが出てしまいました。

"-bash: create-react-app: command not found"


おそらくndenvでインストールしたのでパスが通ってなかったようなので以下のコマンドでパスを通す事ができまいした。

export PATH=$PATH:`npm bin -g`
posted by ねこまんま at 02:35 | Comment(0) | TrackBack(0) | node.js | 更新情報をチェックする

2017年07月09日

yarnでローカルパッケージのアップデート

yarnでローカルパッケージのアップデートする方法

インストールできる最新バージョンは以下のコマンドで確認

npm outdated


以下のコマンドで各ローカルのパッケージを最新バージョンにすることができる

yarn upgrade
タグ:NPM Yarn
posted by ねこまんま at 23:34 | Comment(0) | TrackBack(0) | node.js | 更新情報をチェックする

2017年05月03日

RxJSのSubject

RxJSのSubjectの使い方メモ
続きを読む
posted by ねこまんま at 15:52 | Comment(0) | TrackBack(0) | RxJS | 更新情報をチェックする

2017年04月23日

angularでdebounce

以下のようにnew Subjectでオブジェクトを作成しておいて、debounceTimeを設定するとデバウンスができる

import { Component,HostListener } from '@angular/core';
import {Subject} from 'rxjs/Subject'
import 'rxjs/Rx'

@Component({
selector: 'app-root',
template: `
<input (input)="subject.next($event.target.value)">
`,
})

export class AppComponent {
subject = new Subject();
constructor() {
this.subject.debounceTime(1000).subscribe((v) => {
console.log(v);
})
}
}


ただ、このままだとChange Detectionのdebounceができないので以下のように調整する

@Directive({
selector: 'input[debounceInput]'
})
export class DebounceInput {
@Output() onInput = new EventEmitter();

constructor(
private _elementRef: ElementRef,
private _zone: NgZone,
) {
this._zone.runOutsideAngular(() => {
Observable
.fromEvent(this._elementRef.nativeElement, 'input')
.debounceTime(1000)
.subscribe((ev:any) => {
this._zone.run(() => this.onInput.emit(ev));
});
});
}
}


参考:Angularでイベントから無駄にChange Detectionを走らせないためにすべきこと - Qiita
タグ:RxJS
posted by ねこまんま at 20:41 | Comment(0) | TrackBack(0) | Ajax | 更新情報をチェックする

angular cliで作ったプロジェクトでJSエラーが出る

Angular CLIでつくったプロジェクトを表示すると以下のようなエラーがでた。

Uncaught TypeError: Cannot read property 'apply' of undefined
at XMLHttpRequest.desc.get [as ontimeout] (zone.js:1265)
at XHRLocalObject.AbstractXHRObject._cleanup (abstract-xhr.js:149)
at XMLHttpRequest.xhr.onreadystatechange (abstract-xhr.js:125)
at XMLHttpRequest.wrapFn (zone.js:1230)
at ZoneDelegate.invokeTask (zone.js:398)
at Zone.runTask (zone.js:165)
at XMLHttpRequest.ZoneTask.invoke (zone.js:460)


以下のコマンドでzone.js@0.8.5をインストールしておけばよいです

npm install zone.js@0.8.5 --save


参考:html - Angular 2 - TypeError: Cannot read property 'apply' of undefined - Stack Overflow
posted by ねこまんま at 19:29 | Comment(0) | TrackBack(0) | Angular | 更新情報をチェックする