notebook

都内でWEB系エンジニアやってます。

自作コンポーネントをnpmに公開する

angularのコンポーネントをnpmに公開したいと思ったので色々調べてみたところ ng-packagrというものがあるようでそれを使って実際に公開したところまでのメモ 今回は ngx-table-input というものを公開したのでそれを公開した時の流れを追っていきます バー…

独自コンポーネントでフォーム用の部品を作る(ngModelを使えるようにする)

独自のコンポーネントでもngModelを使ってデータバインディングをしたい ngModelを使うことでvalidationなども他のinputなどと同様に扱いたい ということで公式のドキュメントにも乗っているのでやってみます angular4で実装してます Angular - ControlValue…

moment-rangeを使いたい

単純にmomentとmoment-rangeをimportしただけだとコンパイルが通らず使えないので対応する必要がありました stackoverflowなどでこうしたらいいよって書いてあったのでやってみたがコンパイルエラーで通らない 使えるようになるまでにやったことのメモ versi…

templateで再帰的なデータを表示させる

親子関係を持った入れ子のデータなどを表示したいといった用件があったときのメモ angularのバージョンは4を使っています データは下記のような感じ stats = [ { id: 1, name: 'A001', depth: 0, children: [ { id: 2, name: 'A002', depth: 1, children:[ {…

angularでvalidation(template driven)

今回はtemplate drivenでのフォーム作成、validationまでやってみます angular4系で動作させてます template driven form とりあえずテキストフィールド一つ作ります app.component.ts import { Component, OnInit } from '@angular/core'; @Component({ sel…

多段sshが必要な環境でローカルからRDSへ接続する

社内のしがらみ?とかでRDSへ接続するのに2つ踏み台を経由しないといけなくなってしまったので困っていたのですがぽろっと愚痴ったら先輩方に出来るじゃねーか!と教えていただいたのでメモ 踏み台一つであればソフトによっては対応していて踏み台の設定を入…

windowsでscala開発のためにやったこと

ちょっと前のメモだけど掘り出してきました まずコンソールが微妙だと話にならないので下記と同じようにいろいろインストールする 僕が思う最強のWindowsコマンドプロンプト - 猫にWeb gow clink git conemu activator activatorのインストール Build Reacti…

angularでフォーカスが外れたらフォーマットに沿った表示にする

フォームの金額入力とかで、入力時は1000000でフォーカスが外れたら1,000,000といったようにすることで大きい値でも判断しやすくなり入力ミスを減らしたい….. 今回は上記のような要望がちょろっと上がったので実際に試してみました フォーカスが外れたら3桁…

angular getのクエリパラメータを取得する

angularでクエリパラメータを扱う時のメモ 特定の結果を共有したいときとか、もともとgetのパラメータでやりとりしていればURLを共有するだけですが そうじゃない場合、意図的にURLにパラメータをつけてあげることで共有できるようにする必要があります レポ…

angularでコンポーネント間のデータ変更検知 親 -> 子

angularで親コンポーネントから子コンポーネントへのやりとりは@Inputを使います @Inputで受け取った値の変更を検知して何か処理をする場合などはngOnChangesのライフサイクルフックを使います ngOnChangesで変更された値を使って処理をしていたのですが使っ…

rundeck のログをS3へ

古いメモが出てきたのでとりあえず上げておきます rundeckの実行ログをS3へ送るように設定します 特に難しいことも無いのですが一応メモ jarファイルの取得 $RUNDECK_BASE/libext以下にjarファイルを置きます curl -L https://github.com/rundeck-plugins/ru…

cloudformationを使ってみる

1からインフラを構築する機会があったのでどうせなら次やるときも楽できるようにある程度定義ファイルを用意することにしました terraformと迷ったのですがterraformは以前個人的に使ったことがあったので今回はcloudformationを使うことにしました yaml対応…

javascriptでdefined的な判定をする

先日webstormでangularのコードを書いていた時に、この方がシンプルに書けるよ!みたいな誘導をされたので調べてみた話 書いてたコードは const isSetKey1 = (!params['key1']) ? true : false; 指摘された書き方は const isSetKey1 = !!params['key1']; こ…

Angularでページ遷移後に処理をする[NavigationEnd]

angularのrouterで取得できるイベントにNavigationEndというものがあるようです ページ遷移後のイベントを扱うことができるようなので使ってみます app.component.ts import {Router,NavigationEnd} from "@angular/router"; constructor( private _router: …

条件によってテンプレートを使い分ける

よくあるパターンで何らかの条件によって別のテンプレートを読み込みたい、みたいな時 ngSwitchを使うことで条件によって表示やテンプレートを出し分ける、みたいなことができるようです ngSwitchで判定する値を指定 ngSwitchCaseで値ごとにタグを指定 ngSwi…

angular2でサービスを使ってデータのやりとりをする

親子関係のコンポーネントでのデータのやりとりなら@Output,@Inputでいいですが、親子関係じゃない場合(遠い親子関係、横の関係)のパターン Serviceを使ってデータのやりとりをし、イベントを起こさせるところまでやってみます Observable,Subjectに関しては…

angular2でサンプルアプリを作ってみる

とりあえず起動させてみるのとbootstrapを使えるようにします インストール npm install -g angular-cli ng --help Cannot find module 'rxjs/symbol/observable' Error: Cannot find module 'rxjs/symbol/observable' 依存モジュールをインストール npm ins…

elasticsearch5を試してみる(on Docker)

手元の環境でdocker使って試してみた CentOS7.2にdockerを立ててその中にelasticsearchを立ち上げた感じです 単純にDockerfileのバージョン指定を5に上げただけでは動きませんでした。 そもそもkopfとかHQとか入れていたのですが、そういうプラグインは別の…

railsアプリのログ(複数行)を整理する

なんでもかんでもRailsのLoggerに投げているといろんなログが一つのファイルにまとまってしまって調査、分析が時間がかかったりストレスになっていたので内容によって出力するファイルを分類するようにした時のメモ 集約したログをいったんファイルに保存し…

grep,awk,nkf,jq,perlでバッファしないようにする

grep,awk,nkf,jq,perlでバッファしないようにする ログをtailして整形して流す際にどっかで出力をバッファしてしまって本来流れている部分全てが表示されずに困ってしまうことがあったので調べてみました grep おなじみgrep grep --line-buffered hoge awk …

pecoを使った便利な設定などのまとめ

pecoを使って色々フィルタリングして便利なターミナル生活を過ごすためのメモ 調べればたくさん出てくるのであえてまとめる必要もないかもしれないけど、ある程度自分が使うように微修正したりしたのでまとめて残してみます gitのブランチをフィルタリング …

16進数でフラグを管理する

最近かかわったプロジェクトですごいなと思ったので残しておく 1週間のスケジュールを曜日ごと、さらに時間ごと,24時間でフラグを持たせて動作を変えたい時などに使う感じ 月水金曜日の13時にフラグをセット!みたいなことができる DB上の一つのカラムにフラ…

botkitでサーバに対して任意のコマンドを実行できるようにする

出先でサーバに対してコマンド打てないのがストレスだったのでslackから本番サーバにコマンド打てるようにしました 今回はbotkitを使っています hubotは有名ですが今更cofeescriptを覚える気にならなかったので他のものを探していたところちょうど手頃な感じ…

json serverでAPIモックを自由自在に操る

jsonファイルを用意するだけでAPIとして機能させることが出来る mock用のREST APIを簡単に立ち上げることが出来ます フロントエンド開発時やアプリ開発時にバックエンドの実装を待たずに開発に入ったりなんて事ができそうですね typicode/json-server 実際に…

複数configサーバで動かしてみる

「configサーバも複数あるべき」みたいな話だったのでレプリカセットを組んでみました mongoDBのクラスタ環境をいじってみる - notebook swfz.hatenablog.com レプリカセットを試す - notebook swfz.hatenablog.com シャーディング + レプリカセット - noteb…

シャーディング + レプリカセット

ここら辺を参考に試してみる mongoDBでシャーディング+レプリカセットしてみる - Qiita qiita.com シャーディングとレプリカセットを組み合わせて構築する 構成 レプリカセットの構築 rs1,rs2を作っていく # rs1 sudo mongod --port 27041 --dbpath /data/m…

レプリカセットを試す

全てmongodで起動する どのサーバがPRIMARYか決めるのはreplicaset内で投票して決める 全サーバのうち過半数を超えたサーバがPRIMARYになる 一般的にはPRIMARY,SECONDARY,ARBITER(データを持たない投票のためだけのサーバ、調整用)の最小構成になる 今回はPR…

mongoDBのクラスタ環境をいじってみる

今回は業務で扱う必要が出てきてしまったため急場しのぎですがmongoDBをやっていきます いきなりシャーディング+レプリカセットとかいろんな概念が一気に入ってくるとわからなくなってしまいそうなので一つづつ理解していくようにしていく また、各種ノード…

CLIからEC2を起動する

aws

terraformとか使いたかったけど急いでたのと、インスタンスの数的にGUIぽちぽちがつらくなりそうだったのである程度固定してコマンド一発で起動できるようにする CLI経由だとjsonを直接かけるがファイルを読み込ませてAPIを叩くのが良さそう スケルトンの生…

proxyサーバを立ててみる

概念自体は知っていたけど実際にやってみたことがなかったのでとりあえずやってみる 記事上ではIPは適当な値に書き換えています あらかじめ適当なサーバを立て(52.111.111.111)、nginxを起動させておく アクセスログのフォーマット とくにデフォルトのままい…