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

概要

AngularなどのSPAをS3+CloudFrontで表示する方法についてです。

要件

1. SSL/TLSを使いたい
2. https://example.com/hoge のようなサブディレクトリのようなパスで403にならないようにしたい
3. ↑のようなパスでもOGPがきちんと表示される
4. リロードしても404にならない
5. S3バケットのファイルには直接アクセスできないようにしたい

B TreeとB+ Treeの違い

概要

インデックスに対してMongoDBはB Treeを採用し、MySQLのInnoDBはB+ Treeを採用しています。
どうして採用しているアルゴリズムが違うのだろう？と思って調べてみました。

主な違い

B+ TreeはほとんどB Treeと同じですが、以下の点が異なります。

• リーフノードとリーフノードを結ぶポインタがある
• データはリーフノードのみに保持する

具体例

言葉だけだと分かりにくいので、Visualizeするツールを使って具体例を表示します。
[1, 2, 3, 4, 5, 6, 8, 10, 15, 18]という数列に対し、Order: 3で作ってみます。
Orderは１ノードから出る枝の数のことです。

B Tree

B-Tree Visualization

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

概要

Angularを使ってWebフロントを実装しているのですが、その過程で便利だったChrome extensionを紹介します。

Chrome extension

Page Ruler

chrome.google.com

画面上でのピクセルを測るのに使う。デザイナーさんからPNGだけ頂いた時など。

ColorZilla

chrome.google.com

カラーピッカー。デザイナーさんからPNGだけ頂いた時など。
ただ opacity は区別できないので、それはPSDで確認が必要。

署名と暗号強度について

概要

署名ロジックを選ぶ際に、どのアルゴリズムにするか、どれくらいの鍵長が適切なのかが分からなかったので調べてまとめました。

対象

共通鍵暗号（対称暗号）

• AES

公開鍵暗号

• RSA
• ECC

Goで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.3.0
• Kibana 5.3.0

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

概要

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

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

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

github.com

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