読者です 読者をやめる 読者になる 読者になる

Carpe Diem

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

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

概要

確認用ダイアログなど、モーダルが必要になるシーンは多々あると思います。
今回はAngular2で実装する方法を紹介します。

環境

  • angular 2.4.7
  • angular-cli 1.0.0-beta.32.3

要件

今回満たしているのは以下の項目です。

  • serviceとしてどこからでも呼べる
  • 中身を好きなcomponentで作ることができる

また今回満たしていない要件は以下です。これは次回にやり方を紹介します。

  • モーダルの中に外から(呼び出しているComponentなどから)何かしらパラメータを渡す
続きを読む

Papertrailでエラーログ監視

概要

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

Papertrail - cloud-hosted log management, live in seconds

がありましたので設定方法などを紹介します。

フリープランだと以下の条件で機能が使えます。

  • 検索可能な期間は直近48時間
  • 7日間ログを保持
  • アラート可
  • 1月あたりの転送量の上限は100MB

注意として転送量上限を超えると新しいログが破棄されるので、無駄なログを送らないようにしてください。

環境

  • remote_syslog2 0.19
  • Ubuntu 14.04
  • Nginx 1.4.6
続きを読む

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^)