Carpe Diem

備忘録。https://github.com/jun06t

AngularのInjectorとProviderとDependencyの関係

概要 過去の記事で christina04.hatenablog.com を書いた時に、AngularのInjectorとProviderとDependencyの関係を理解していないとよく分からないと思ったので追記的にまとめます。 環境 Angular 4.3.5 覚え方 結論から言うと、以下のように考えるとすっきり…

Scratch imageでtime: missing Location

概要 以前以下の記事でscratch imageの作成方法を紹介しました。 christina04.hatenablog.com しかしgolangのコードによっては以下のpanicが起きることがあります。 panic: time: missing Location in call to Time.In 今回はその対応方法です。 環境 golang…

BehaviorSubjectでAPIの結果をキャッシュ

概要 クライアントからのAPIコールは可能であれば避けた方がサーバの負荷も下がり、ユーザの体感速度も上がります。 1度取得すればほぼ変わらないデータなどは、最初にAPIコールした後はできれば避けたいです。 一方でcookieやlocalstorageで管理するほどで…

ScratchイメージでGolangアプリの超軽量イメージをビルド

概要 Alpineベースのイメージが軽量イメージとして認知されていますが、golangの場合は単一バイナリで動くのでイメージ内にgolangが入っている必要はありません。 なので最も軽量と言われているScratch imageを利用することで、dockerイメージを軽量化するこ…

AngularのHttpClientModuleの使い方

概要 Angular 4.3からこれまでのHttpModuleに代わってより軽量かつ使いやすいHttpClientModuleと言うものが出てきました。 今回はその移行作業を書きます。 環境 Angular 4.3.1 angular-cli 1.2.3 成果物 今回の成果物は以下です。 github.com

delveでGolangのデバッグ

Go

概要 Golangでデバッグをする際にdelveというツールがオススメです。 環境 golang v1.8.3 delve 1.0.0-rc.1 インストール brewでもインストールできますが、単体テストの実行の際に上手く動かないことがあったのでgo getの方をオススメします。 $ xcode-sele…

Non-Blocking I/O, I/O Multiplexing, Asynchronous I/Oの区別

概要 各言語がC10K問題をどう解決してきたかを調べてみたところ、Non-Blocking I/O, I/O Multiplexing, Asynchronous I/Oの区別がよく分からなかったので調べてみました。 正直なところ人によってちょこちょこ定義が異なるのではっきりとした答えはなさそう…

GolangでMockを書く時のTips

Go

概要 「GolangはDuck TypeだからMock用意するの大変だよね」とよく言われますが、そんなことはないですよ、という話。 環境 golang 1.8.3 1. interface自体埋め込めば実装済みと解釈してくれる 例えば以下のような複数のメソッドを持つinterfacedoEverything…

CloudFrontのキャッシュでハマった話

概要 ブラウザのキャッシュ - Carpe Diem を検証している時に期待した挙動をしなくてハマったので、CloudFrontのキャッシュの動作と注意点をまとめます。 CloudFrontのキャッシュ動作 レスポンスヘッダのx-cacheを見ると以下の3つに区別できます。 x-cache …

ブラウザのキャッシュ

概要 Webフロントのパフォーマンス診断 - Carpe Diem で指摘されたブラウザキャッシュの対応をするため調べてみました。 大きく分けて強いキャッシュと弱いキャッシュの2種類のキャッシュがあります。 強いキャッシュ ブラウザ側でリソースを保持し、期限が…

Webフロントのパフォーマンス診断

概要 Webフロントのパフォーマンスをチェックする診断ツールの紹介です。 なんだかもっさりした挙動だけどどこから手を付けたら良いか分からない、といった時に問題点を洗い出すのに便利です。 Audits Chrome DevToolsに標準で付いています。 ページを開いた…

GolangでBigQueryにデータを追加する

概要 GolangでのBigQueryの使い方です。 認証周りが以前と変わっており、JWTを使ってゴニョゴニョしてた部分をライブラリ側で吸収してくれるようになったのか使う側は簡単になりました。 環境 go 1.8.3 サービスアカウントキーの作成 API Console Credentials…

Golangのnilについて

Go

概要 先日の golang.tokyo #6 - connpass で独自のエラー型でnilにハマった点に触れられていて、自分でもふわっとしか覚えてなかったのでまとめ。 覚えること 以下を覚えておけばとりあえず大丈夫です。 nilは型を持つ interfaceの場合のみ、型もnilでないと…

Docker Imageのバージョン管理について

概要 development, staging, productionといった環境に分けてdocker imageを利用する場合のバージョン管理について考えてみました。 環境 AWS ECS AWS ECR Docker 17.03.1 要件 今回対応する時に考慮した要件は以下。 gitのtagと連動 ただし最新のimageのTAG…

macOS Sierraでulimitを変更する方法

Mac

概要 SierraのPCに変更した際、.bash_profileを過去のPCから引き継いだところulimitのところで設定が変わっていたのでメモ。 デフォルトの確認 $ ulimit -a core file size (blocks, -c) 0 data seg size (kbytes, -d) unlimited file size (blocks, -f) unl…

SPAを S3+CloudFront で表示する方法

概要 AngularなどのSPAをS3+CloudFrontで表示する方法についてです。 要件 SSL/TLSを使いたい https://example.com/hoge のようなサブディレクトリのようなパスで403にならないようにしたい ↑のようなパスでもOGPがきちんと表示される リロードしても404にな…

B TreeとB+ Treeの違い

概要 インデックスに対してMongoDBはB Treeを採用し、MySQLのInnoDBはB+ Treeを採用しています。 どうして採用しているアルゴリズムが違うのだろう?と思って調べてみました。 主な違い B+ TreeはほとんどB Treeと同じですが、以下の点が異なります。 リーフ…

Webフロントの実装で利用したChrome extension

概要 Angularを使ってWebフロントを実装しているのですが、その過程で便利だったChrome extensionを紹介します。 Chrome extension Page Ruler chrome.google.com 画面上でのピクセルを測るのに使う。デザイナーさんからPNGだけ頂いた時など。 ColorZilla ch…

署名と暗号強度について

概要 署名ロジックを選ぶ際に、どのアルゴリズムにするか、どれくらいの鍵長が適切なのかが分からなかったので調べてまとめました。 対象 共通鍵暗号(対称暗号) AES 公開鍵暗号 RSA ECC

GolangでJWTの具体的な実装

概要 以前JWTを認証用トークンに使う時に調べたこと - Carpe Diemで紹介した内容の具体的な実装の紹介です。 環境 golang 1.8.1 署名アルゴリズムと鍵長は以下とします。 署名アルゴリズム 鍵長 RSA-SHA256 4096bit 成果物 今回の完成形はこちら github.com

docker-compose で Kibana 5.x を使う

概要 Kibanaを5.xにメジャーアップデートする際、Elastic社公式のdocker imageも用意されたのでdocker-composeでまとめて作ることにしました。 その際調べたこと、ハマったことをまとめます。 環境 docker 17.03.1-ce docker-compose 1.11.2 Elasticsearch 5…

Webフォントのファイルサイズを小さくする

概要 Webフォントを当てると途端にサイトが良く見えるようになりますが、一方でフォントファイルに入っている文字数が多いため、必然的にファイルサイズが大きくなってしまいます。 そこでフォントのサブセット化と呼ばれる、使用する文字だけをフォントから…

RxJSのfinallyの挙動

概要 Angularにはリクエストのクエリパラメータを取得する方法として、 @Component({...}) export class MyComponent implements OnInit { constructor(private activatedRoute: ActivatedRoute) {} ngOnInit() { this.activatedRoute.params.subscribe((par…

Tasks(Macrotasks), Microtasksについて

概要 Angularで出てきたfakeAsyncやwhenStableを使う時に、microtasksの話が出たのでちゃんと理解しようと調べてみました。 実験 以下のjsのログ順はどうなるでしょうか? console.log('script start'); setTimeout(function() { console.log('setTimeout');…

AngularでAsync pipeを使う

概要 AngularのPipeの中にはAync PipeというPromiseやObservableな非同期オブジェクトをそのままtemplateで表示できるPipeがあります。 今回はその使い方を紹介します。 環境 angular 2.4.8 rxjs 5.2.0 async pipeのメリット 主なメリットは以下の2つです。…

Dockerでのdev, stg, prd環境分け

概要 dockerを扱う上で、dev, stg, prdの環境で動かす際の分け方について考えてみました。 環境 docker 1.13.1 docker-compose 1.11.1 主な分け方 思いつくのは以下の5つです。 imageを分ける 全環境のconfigファイルをimageに保持させ、RUN時に指定 templa…

Elasticsearchの前方一致について考える

概要 以前Prefix Query の注意 - Carpe Diemで述べたように、PrefixQueryはsearch queryがnot_analyzedになるので意図しない結果になることがあります。 一方で前方一致は検索の利便性を向上させる上でメリットが大きいので、入れておきたい要素でもあります…

Cold Observable と Hot Observable

概要 Observableを学ぶ上でCold ObservableとHot Observableの違いを理解していた方が良いと聞いたので調べてみました。 環境 rxjs 5.1.0 ざっくり表 Cold Observable Hot Observable イメージ オンデマンド再生のような、選んだら再生。再生するシーンは開…

RxのflatMapの使い方

概要 AngularでHttpModuleを連続して使う必要が出た時に、「毎回subscribeでネストが深くなるのが嫌だなぁ」と思ってぐぐったところ、「flatMapを使うと良いよ!」という記事を見つけて使ってみようとしたのがきっかけです。 他のmapやfilterなどと違ってパ…

Angularで中身を動的に変えられるModalを作る【応用編】

概要 前回の続きです。 前回の要件に加え、今回対応したいのは以下です。 開く時にパラメータを渡して、Modal内のComponentで利用したい 例えばエラーメッセージを渡して上部に通知バーを表示するなどを作る時にこういった仕組みが必要になると思います。 今…

Angularで中身を動的に変えられるModalを作る【基本編】

概要 確認用ダイアログなど、モーダルが必要になるシーンは多々あると思います。 今回はAngular2で実装する方法を紹介します。 環境 angular 2.4.7 angular-cli 1.0.0-beta.32.3 要件 今回満たしているのは以下の項目です。 serviceとしてどこからでも呼べる…

Papertrailでエラーログ監視

概要 以前Logentriesでエラー監視 - Carpe Diemでエラーログの監視方法を紹介しました。 ところがこのLogentriesで利用できていたアラート機能が有料プランのみになってしまったため、なにか無料で使えるサービスはないかと探したところ、この Papertrail - …

S3 + CloudFrontにした時にハマったこと

概要 静的Webサイトを用意して、HTTPSでアクセスできるようCloudFrontを前に用意したのですがそこでハマったことをまとめます。 ERR_SSL_VERSION_OR_CIPHER_MISMATCH 問題 SSL証明書を設定したのにERR_SSL_VERSION_OR_CIPHER_MISMATCHというエラーがでてペー…

Angularで作ったサイトでリロードすると404エラー

概要 Angular2で作ったサイトをS3のstatic website hostingで動かし、 https://www.mysite.com/login というURLにいる状態でリロードしたところ、Not Foundエラーが出てしまったのでその対応方法をまとめます。 環境 angular 2.4.7 angular-cli 1.0.0-beta.2…

Slackで新規チャンネルが作られたら通知する

概要 チームの人数が増えるとSlackのチャンネルも個々人が作っていつの間にかどんどん増えていきます。 知らずに同じようなチャンネルを作ったりしないよう、新規チャンネルが作成された時に#generalに自動で通知されたら便利だと思い設定してみました。 Zap…

AngularでFormのCustom Validation

概要 AngularでのFormのカスタムバリデーションには主に以下の方法があります。 Directiveで用意する ビルトインのValidatorsのような関数を用意する 今回は後者の実装例を紹介します。 validationロジック 今回はクレジットカードの簡易チェックをするvalid…

golang.tokyo#3でLTしました

Go

概要 golang.tokyo #3でLTをさせていただきました。 今回はパフォーマンスについてのイベントでした。 golangtokyo.connpass.com スライド 内容は先日ブログに書いたGolangでのstreamの扱い方を学ぶ - Carpe Diemと同じですが、今まで知らなかった人(僕も含…

Angular2でのForm 〜Model Driven編〜

概要 前回はTemaplate Drivenなフォームの作り方を紹介しました。 今回はModel Drivenなフォームの作り方を紹介します。 環境 angular-cli 1.0.0-beta.25.5 Angular 2.4.3 完成形 成果物はこちら github.com

Angular2でのForm 〜Template Driven編〜

概要 AngularのFormの書き方は主に2つあります。 1つはTemplate Drivenなやり方。 もう1つはModel Driven(Reactive Form)なやり方。 フォームの作り方を調べた時にどっちがどっちの情報なのか分からず混乱したのでまとめてみました。 今回はTemplate Dr…

Angular2でComponentをまたがったデータのやり取り

概要 Angular2でComponent間でデータをやり取りしたい状況が出てくると思います。 例えば「このボタンを押したら外部APIを叩いて状態を更新したい。その状態を他のComponentでも使っているので更新を反映したい」ときなどです。 今回はServiceにデータを保持…

Homebrewで過去のバージョンを使いたい

Mac

概要 新しいMacBookを使い始めたところ以前利用していた古いバージョンのツールを使う必要が出てきたのですが、意外と手間だったので忘れないようにまとめ。 環境 OSX El Capitan 10.11.6 Homebrew 1.1.6 旧バージョンをインストールしたことがある場合 brew…

Golangでのstreamの扱い方を学ぶ

Go

概要 結論から言うと、Streamで扱っているものはStreamのまま扱うです。 具体的にはio.Readerを毎回ioutil.ReadAllで[]byteに変換せずにそのまま使いましょうです。 なぜStreamを使うべきか Node.jsの例ですが、こちらで非常に分かりやすく説明されています…

負荷が低いのにアクセスを捌けきれない時の対応

概要 MongoDBでCPU使用率やロードアベレージが高くないのに処理が詰まっている現象が起きました。 その時間にbatchが動いていてアクセスが急に増えることが原因と言うのは分かっているのですが、負荷的には十分余裕があり不思議な状態でした。 そこでdstatで…

sync.Poolを使って省コスト&高速化

Go

概要 golangにはsync.PoolというFreeListの仕組みがあります。 役割としては既に割り当てられたメモリが不要になった時、解放する代わりにListにとして保持しておいて、メモリが必要になったらそこから取るというものです。なのでGCコストやメモリのallocati…

うるう秒対応

概要 2017/01/01 09:00:00(JST)にうるう秒が挿入されますが、ちゃんと問題点や対応方法を理解してなかったのでまとめ。 うるう秒発生でどうなるか ntpを入れているか、tzdataが更新されているかによって動作が異なります。 JST ntp(stepモード) tzdata 未対…

Packerでソースに使う公式AMIの場所

概要 Packerでsource_amiとして使用する公式のAMIが探しにくいので、利用するものだけまとめました。 Ubuntu Ubuntu Amazon EC2 AMI Finder こちらで検索します。Searchのところに16.04などバージョンを入れれば出てきます。 その中でInstance Typeがややこ…

サーバサイドのCORS対応

概要 No 'Access-Control-Allow-Origin' header is present on the requested resource.というエラーが出た際に外部API(サーバ側)でどう対応すべきかをまとめました。 CORSでググると幸せになれます。 環境 go 1.7.4 gin 1.1.4 CORSが必要になるのはどんな…

ldflagsを使おうとしてハマったこと

Go

概要 golangではbuild時にldflagsというオプションをつけると、変数に値を埋め込んだ状態でバイナリを生成することができます。 よく使われるのはビルド時のgitのcommitのハッシュを埋め込んで、そのバイナリがどのcommitで作成されたのかを明らかにして「想…

angular-cliで手軽にAngular2を始める

概要 Angular2のチュートリアルを終えた後で「いざ作ってみよう」となると 「package.jsonやtsconfigとかどうしよう」 「system.jsよりwebpackがいいって聞くけどどうなんだろ」 「テストフレームワークは何がいいんだろう」 みたいなことで悩んでなかなか進…

Elasticsearchでスコアに重み付けを行う

概要 SEO対策という言葉があるように、Googleの検索結果は単なる文字列の一致率ではなくホームページ自体にスコアが付けられており、それを元に検索の順位が決まります。 今回はElasticsearchでそのようなスコア順に並べる方法を説明します。 環境 Elasticse…