Carpe Diem

備忘録

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

概要

静的Webサイトを用意して、HTTPSでアクセスできるようCloudFrontを前に用意したのですがそこでハマったことをまとめます。

ERR_SSL_VERSION_OR_CIPHER_MISMATCH

問題

SSL証明書を設定したのにERR_SSL_VERSION_OR_CIPHER_MISMATCHというエラーがでてページが見れませんでした。

  1. CloudFrontの設定でSSL証明書を指定
  2. Route53でCloudFrontにCNAMEを設定

としたのにうまく行きません。

続きを読む

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.28.3

なぜこの問題が起きるのか

そもそもURLのパスをルーティングするのはweb server側の仕事であり、Angularで作ったサイトのようにルートにしかindex.htmlがない場合は404エラーになってしまうからです。

続きを読む

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

概要

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

Zapierを使う

ZapierIFTTTと似た、各種Webサービスを連携して便利に使えるようにするハブのようなサービスです。
フリープランは以下の制限があります。

  • 5つまで連携ジョブを作れる
  • 月に100タスクまで実行できる
  • 同時に3以上連携するジョブは作れない

今回作りたいものは

  • Slack -> Slackのシンプルなジョブ
  • 月に100以上新規チャンネルは作られることはない

という条件を満たしている前提で進めます。

続きを読む

AngularでFormのCustom Validation

概要

AngularでのFormのカスタムバリデーションには主に以下の方法があります。

  • Directiveで用意する
  • ビルトインのValidatorsのような関数を用意する

今回は後者の実装例を紹介します。

validationロジック

今回はクレジットカードの簡易チェックをするvalidatorを導入します。
クレジットカードの番号はLuhnアルゴリズムに基づいています。
これによってわざわざサーバ通信を挟む前に、入力ミスなどによる不正な番号を弾くことができます。

環境

  • Angular 2.4.5
  • angular-cli 1.0.0-beta.28.3
続きを読む

golang.tokyo#3でLTしました

概要

golang.tokyo #3でLTをさせていただきました。
今回はパフォーマンスについてのイベントでした。

golangtokyo.connpass.com

スライド

内容は先日ブログに書いたGolangでのstreamの扱い方を学ぶ - Carpe Diemと同じですが、今まで知らなかった人(僕も含め)にとってはすぐに使えて、かつパフォーマンス向上が見込めるのでぜひ導入して欲しい内容だと思います。

余談ですがLT中にアラートが鳴ってしまい会場の皆さんに笑われてしまいました(^q^)

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 Drivenの方を紹介します。

環境

  • angular-cli 1.0.0-beta.25.5
  • Angular 2.4.3

完成品

今回の成果物はこちら

github.com

続きを読む