2017年10月17日

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
posted by ねこまんま at 20:41 | Comment(0) | TrackBack(0) | Angular | 更新情報をチェックする

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 | 更新情報をチェックする

2017年04月06日

Angular2でformControl' since it isn't a known property of 'input'とエラーが出た

Angular2でformControlを利用しようとすると「formControl' since it isn't a known property of 'input'」とエラーが出た。

ReactiveFormsModuleモジュールを読み込んでないと使えないらしい。

import {ReactiveFormsModule} from '@angular/forms';

@NgModule({
imports : [
..
ReactiveFormsModule,
...
],
...
})
posted by ねこまんま at 14:07 | Comment(0) | TrackBack(0) | Angular | 更新情報をチェックする

2017年03月07日

Angular2のloadChildrenでモジュールの遅延読み込みを行う

Angular2のloadChildrenを利用するとモジュールの遅延読み込みが可能になる。たまにしか読み込まれないモジュールなどは遅延読み込みの対象にしておこう続きを読む
posted by ねこまんま at 14:22 | Comment(0) | TrackBack(0) | Angular | 更新情報をチェックする

2017年01月22日

ElementRef - @angular/core - Angular2

ElementRefを利用すると要素内のHTMLにアクセスできます。続きを読む
posted by ねこまんま at 22:08 | Comment(0) | TrackBack(0) | Angular | 更新情報をチェックする

2017年01月15日

Angular 2のng2-dragulaでドラッグアンドドロップ

Angular 2のng2-dragulaでドラッグアンドドロップする。ng2-draguladragulaというドラッグアンドドロップ制御表のライブラリのOfficial Angular2 wrapper 。続きを読む
タグ:Angular 2
posted by ねこまんま at 21:25 | Comment(0) | TrackBack(0) | Angular | 更新情報をチェックする

2017年01月14日

Angular 2のDatePipe

Angular 2のdateパイプで日付のフォーマットを整理でき、DatePipeの引数に言語を指定すればその言語に対応した変換方式がりようできる。

import { Component } from '@angular/core';
import {DatePipe} from '@angular/common';
@Component({
selector: 'app-root',
template: `
<p>{{now}}</p>
<p>{{now| date: 'y/MM/dd (EE) HH:mm'}}</p>
<p>{{ngDatePipeJp.transform(now, 'yMMdd (EEE) HHmm')}}</p>
`,
styleUrls: ['./app.component.css']
})
export class AppComponent {
now = new Date();
ngDatePipeJp = new DatePipe('ja-JP');
}


これだと面倒くさいので独自のパイプdateJPを作成してみる。

date-jp.pipe.ts

import { Pipe } from '@angular/core';
import { DatePipe } from '@angular/common';

@Pipe({name: 'dateJP'})
export class DateJpPipe {
private dateJpPipe: DatePipe;
constructor() {
this.dateJpPipe = new DatePipe('ja-JP');
}
transform(date, format) {
return this.dateJpPipe.transform(date, format);
}
}


app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import {DateJpPipe} from './date-jp.pipe';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent,
DateJpPipe
],
imports: [
BrowserModule,
FormsModule,
HttpModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }


app.component.ts

import { Component } from '@angular/core';
import {DatePipe} from '@angular/common';
@Component({
selector: 'app-root',
template: `
<p>{{now}}</p>
<p>{{now| date: 'y/MM/dd (EE) HH:mm'}}</p>
<p>{{now| dateJP: 'yMMdd (EE) HHmm分'}}</p>
`
})
export class AppComponent {
now = new Date();
}


変換フォーマットが正直微妙なので下記のサイトを参考に曜日だけ日本語にするのがよいかと思う。

参考:DatePipe - ts - API - 公式リファレンス
参考:【Angular2】DatePipeの曜日だけ日本語にする【LiveDemoあり】 | Bucket.GIFT
タグ:Angular 2
posted by ねこまんま at 19:14 | Comment(0) | TrackBack(0) | Angular | 更新情報をチェックする

2017年01月09日

TypeScriptの基本

TypeScriptの環境作成方法。続きを読む
タグ:TypeScript
posted by ねこまんま at 16:55 | Comment(0) | TrackBack(0) | TypeScript | 更新情報をチェックする

TypeScriptのas

TypeScriptのasオペレーターというのがあってハマった。このググラビリティの低いワードどうかにかして欲しい。続きを読む
タグ:as TypeScript
posted by ねこまんま at 14:56 | Comment(0) | TrackBack(0) | TypeScript | 更新情報をチェックする

2017年01月08日

Angular2のRouting2

Angular2のRoutingで基本的なルーティングの解説をしたけどもう少し高度なルーティング続きを読む
タグ:Angular2
posted by ねこまんま at 17:42 | Comment(0) | TrackBack(0) | Angular | 更新情報をチェックする