Carpe Diem

備忘録

docker-compose で Kibana 5.x を使う

Elasticsearch Kibana Docker

概要

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

環境

  • docker 17.03.1-ce
  • docker-compose 1.11.2
  • Elasticsearch 5.3.0
  • Kibana 5.3.0
続きを読む

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

フォント

概要

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

5〜10MBほどあるフォントが大体数十KB程度になるので初期ロード時間が劇的に改善されます。

サブセットフォント生成ツール

github.com

このfontminというツールを使用します。

続きを読む

RxJSのfinallyの挙動

Rx Angular Observable

概要

Angularにはリクエストのクエリパラメータを取得する方法として、

@Component({...})
export class MyComponent implements OnInit {
  constructor(private activatedRoute: ActivatedRoute) {}

  ngOnInit() {
    this.activatedRoute.params.subscribe((params: Params) => {
        let userId = params['userId'];
        console.log(userId);
      });
  }
}

というようにActivatedRouteがあるのですが、今回はその中でAPI側コールし、もしかしたらエラーが発生する可能性もあるのでfinallyで後処理を必ずさせたい、という状況でした。

そこで

    this.activatedRoute.params
      .finally(() => {
        // 後処理
      })
      .subscribe((params: Params) => {
        let userId = params['userId'];

        // エラーが起きるかもしれないAPIコール
      });

としてみたところ、finallyの処理が実行されませんでした。何故でしょうか？

続きを読む

Tasks(Macrotasks), Microtasksについて

Angular Node.js JavaScript

概要

Angularで出てきたfakeAsyncやwhenStableを使う時に、microtasksの話が出たのでちゃんと理解しようと調べてみました。

実験

以下のjsのログ順はどうなるでしょうか？

console.log('script start');

setTimeout(function() {
  console.log('setTimeout');
}, 0);

Promise.resolve().then(function() {
  console.log('promise1');
}).then(function() {
  console.log('promise2');
});

console.log('script end');

MicroTask1

続きを読む

AngularでAsync pipeを使う

Angular Observable

概要

AngularのPipeの中にはAync PipeというPromiseやObservableな非同期オブジェクトをそのままtemplateで表示できるPipeがあります。 今回はその使い方を紹介します。

環境

  • angular 2.4.8
  • rxjs 5.2.0

async pipeのメリット

主なメリットは以下の２つです。

フロントではメモリ管理が大切なので、特に後者は嬉しいメリットですね。

続きを読む

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

Docker

概要

dockerを扱う上で、dev, stg, prdの環境で動かす際の分け方について考えてみました。

環境

  • docker 1.13.1
  • docker-compose 1.11.1

主な分け方

思いつくのは以下の５つです。　

  1. imageを分ける
  2. 全環境のconfigファイルをimageに保持させ、RUN時に指定
  3. templateを埋め込んでおいて、envsubstで環境変数使って書き換える
  4. data volumeでconfigをマウントして使用する
  5. 環境変数で設定できるように実装し、envを指定する
続きを読む

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

Elasticsearch

概要

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

今回は前方一致を考える上で何が良いかを調べてみました。

環境

  • Elasticsearch 5.2.1

Prefix Query

メリット

  • 文字通り前方一致のクエリであることが分かる

デメリット

  • search analyzerは指定できないので、index時にnormalizeで小文字などにしてしまうと、大文字による検索でヒットしない
  • 内部的にはregexpによる一致なので短いと重い
続きを読む