notebook

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

AngularでデスクトップPWAをインストールしてみる

chrome67からデスクトップPWAが使えるようになったのでいくつかのPWAをインストールしてみたのですが良さそうな感じがしました デスクトップPWAを使ってみた – Takeshi Amano – Medium chromeとは別ウィンドウで起動できるのとelectronでやらなくても良くな…

Cloudformationで設定ファイルを分割する

AWSでの新規環境構築時など便利なCloudformation 一度テンプレートを作ってしまえば同じような環境はサクッと作れてとても便利ですね 最初にcloudformationを使ったときは分割できることは知っていたものの納期などの兼ね合いがあってとりあえず1ファイルの…

html2canvasでhtmlからcanvasに変換して画像として保存する

グラフライブラリとかだとcanvasにグラフを描画してそれを画像としてダウンロードさせる、みたいなことができると思うのですが canvasだったりSVGだったりの書き方を覚える必要があるのでサクッと画像ダウンロードさせたいだけなんだけどそれだけのために覚…

angular6でgithub-pagesにアップする

angular6以前はただただnghコマンド叩くだけでリポジトリのページでも問題なく表示できたのですがangular6になってマルチプロジェクトに対応したからか分からないけど成果物のパスが変わったっぽい 以前はdist以下に各種ファイルが生成されていた angular6以…

ブックマークレットに関して

今までブックマークレット?ふーんみたいな感じだったのですが、最近フロント側もやっていて面白くなってきているのと、結構できることあるみたいなのでtipsとして残しておきます 画面での確認 いきなりブックマークレットのコードを書く前にまずは画面でdev…

rxjsのメモ(検索boxの入力値で必要な部分だけ抜き出す)

rxjs使おうとすると毎度ドキュメント見ながら使えそうなオペレータ調べてやるのがつらいですね 後の自分用のメモにサンプル実装を残します 今回は「検索ボックスなどの入力で必要な部分だけ取り出す」です 実行環境 angular: 5.1.2 rxjs: 5.5.6 やりたいこと…

routerLinkActiveでpathだけのマッチを行いたい

よくあるリンクがアクティブかそうじゃないかみたいなのを判断してスタイルを変える機能に関しての備忘録 AngularだとrouterLinkActiveというものがあります 動作環境: Angular5.1 html <a [routerLink]="['/hoge', 'fuga', 'piyo']" routerLinkActive="is-active"> scss a.is-ctive { background-color: #CCC; } これでメニュー中の自</a>…

ag-gridでpivot

前回のrow gorupingに続き今回はpivot 動作環境 Angular: 5.1.3 ag-grid: 16.0.0 pivot テーブル定義に追加する

ag-gridでrow grouping

row groupingを実際にやってみた時のオプションなどのメモ 実際に使ったオプションなどの覚書なので結構雑になってます 全部みたいなら下記にサンプルコード付きで丁寧に乗っているのでこちらをみた方が良さそう Grouping by Row: Core Feature of our Datag…

[angular] ディレクティブについて - カスタム構造ディレクティブを作ってみる

今回は構造ディレクティブについて angularではディレクティブというと構造ディレクティブと属性ディレクティブの二つがあります 属性ディレクティブに関してはカスタムディレクティブ作ったりしやすいかなと個人的には思っていて割と理解しやすいかなと思い…

rubocopのABCについて

仕事でrubocopを入れている サクサク描いてるとABCに引っかかることが多い(現状の閾値はデフォルトの15) さっと調べてみたところそれぞれ a(assignment): 代入の回数 b(blanch): メソッド呼び出しの回数 c(condition): 分岐の回数 で下記の計算で算出してい…

Rails5で複合主キーを扱いたい

Rails5でmigrate時に複合主キーを定義できるようになっていたのでこりゃいいや!とおもって開発してたらupdateできない問題が起きました migrateスクリプトは以下抜粋 create_table :summaries, primary_key: ['id', 'date'] do |t| t.bigint :id, null: fal…

クエリパラメータから初期データを用意する

クエリパラメータをうけとって初期データなどを取得してからレンダリングしたいみたいなパターンの時、もしくは初期データをあらかじめ用意しておきたい場合など コンポーネントのonInitに書いていくと複雑になればなるほどコードが膨れ上がっていってしまい…

ag-gridでflexboxを使う

CSSのキャッチアップ不足ってだけだけどag-gridを使っていてどうにも不便だなと思っていたのが明示的に高さを指定しないと潰れてしまうことがある点だった <ag-grid-angular #reportGrid [gridOptions]="gridOptions" [rowData]="gridRows" class="ag-fresh"> これだけだとこんな感じで潰れてしまう で、どうするかというと愚直に高さを指定するという方法をと</ag-grid-angular>…

rxjsでpollingする

rxjs難しいですね 時間軸を変えたりキャッシュをしたり定期的に何かしたりなど。。。結構な数のオペレータがあるので組み合わせ次第で色々できるでしょう 今回は管理画面上のレポート(csvなど)をダウンロードするときの処理をrxjsでスマート()にしてみたいと…

4から5へバージョンを上げる

やったこと、躓いたこと 環境 angular 4.4.5 -> 5.1.3 node v7.9.0 Update Guideを元に事前にできるものは修正しておく Angular Update Guide - Beta https://angular-update-guide.firebaseapp.com/angular-update-guide.firebaseapp.com packageをインスト…

HttpClientでGetパラメータをセットする

angularのhttpクライアントは5系から@angular/httpではなく@angular/common/httpが推奨されています 既存のシステムが4系だったのでバージョンアップにあたり調査をしていたのですが少し詰まったところがあったのでメモを残しておきます HttpClient 基本的に…

job形式のファイルダウンロードをスクレイピングでやってみる

この記事はクローラー/Webスクレイピング Advent Calendar 2017 - Qiitaの25日目の記事です。 qiita.com 最近仕事でもスクレイピングをすることが多くなってきました 今回はCSVダウンロードをフロント側でポーリングしてるページにスクレイピングでダウンロ…

centos7 + headless chromeでスクレイピング

chromeをスクレイピングで使う必要があったので開発環境から作ってみたときのメモ 特にメモすら必要ないかもしれないくらい環境整ってるなと感じました google chrome install yum install https://dl.google.com/linux/direct/google-chrome-stable_current…

angularでag-gridを使う(導入編)

ag-gridというライブラリがとても便利でお世話になっているので導入から使い方の備忘録を残していく ライセンスを購入すればだいたいなんでもできるというくらい色々機能がある(正直使いこなせていない感はある) JavaScript Grid www.ag-grid.com angularの…

自作コンポーネントを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で変更された値を使って処理をしていたのですが使っ…