Tagbangers Blog

Blog

OAuth2 Authentication in Microservice Web Application

## OAuth2 巨大なシステムをMicroservice化する場合、 開発者は機能の種類と関連性に基づいてサービスを分割する。 もし各サービスに独立な認証機能を持たせると、 利用者に大量のアカウントとパスワードを覚えさせなければならない、 一方で、もし全てのサービスに 共通なアカウントとパスワードでの認証機能を持たせると、 ユーザーの機密認証データが頻繁にネットワーク上に流され、 万が一何らかのシステム脆弱性に関わる原因で漏れた場合、 そのユーザーの認証情報がいつでもどこでも悪用される可能性がある。 それらを避けるため、専用の認証サーバーを設け、 認証結果を共有する中心化認証機能(Sing...

styled-components で作ったコンポーネントのスタイルの上書きができない場合の解決策

styled-components でスタイリングしたコンポーネントがあります const StyledButton = styled.button`   border-radius: 6px;   padding: 16px;   background-color: coral;   color: white;   font-size: 1.5rem;   font-weight: bold; ` export default StyledButton あらかわいい このコンポーネントを styled の引数に入れることでスタイルの上書きができます import Styl...

スクラムマスター研修を受けてきました

スクラムマスター認定のための研修を受けてきました。 社内でもスプリントを回して振り返りを行っていますが、本当にこれでいいのかな?ということや スプリントを回す = スクラム ... ではないよな??? といった基本的なこともあやふやだったので 今回、改めて研修を受けることにしました。 一番の収穫としては、エンジニアだけでなく、色々なバックグラウンドを持った方々(アナリスト、マネージャー、すでにスクラムマスターの方)と一緒にスプリントを回しながら、 お互いの疑問や悩みについて共有できたところです。 理想的なスクラムマスター像や、運用にあたり注意したり、検討していく必要のある点などを学んでいけたの...

Mapbox studio で月を再現してみた

こんにちは、シルベスターです 今回は mapbox で月を再現したいです sky layer で太陽をカスタマイズすることができて、それを月っぽくすればいいのかなーと思います ↓ これが既存のスタイルですが、どんどん変えていきます まず、太陽の中心を変えます(210, 30)→(110, 85) 次は太陽周りの色を青っぽくします #ffffff → #2483ff 月っぽくしたいので intensity を 10 → 2.5 まで落としました 最後に atmosphere color を変えます 月のあるところにそんな変わらないが、少し回転したら違いがわかると思います ↓ before ↓ a...

Mapbox studio - 3D terrain 触ってみました

こんにちは、そして久しぶりです! タグバンガーズのシルベスターです。 今回紹介するのは、mapbox studio の 3d terrain です。 最近追加された 3D 機能少し気になったので少し触ってみました。 せっかくの 3D terrain なので今回は Outdoors テンプレを使いたいと思います。 早速富士山の方へ 3D terrain を enabled にすると 真上から見るそんな変わらないが、pitch を変えてみると… 富士山が3Dに! そして、色のないところもあるんですが、 空を有効化すると、このように空のスタイルを変えることもできました さて、 少しずつスタイルを変え...

Spring REST Docs のデザインをお手軽にオシャンティーにする

おはようございます、BE 側の JK です Spring で REST API を設計した際にドキュメント化する方法として Spring REST Docs があるのをみなさんご存知でしょうか Spring REST Docs 公式のサンプルがいくつかあるので試しに見てみましょう 今回は唯一 Maven を使用したサンプルである "Spring Data REST" プロジェクトを使います(他は Gradle でしたねー) git clone https://github.com/spring-projects/spring-restdocs.git cd spring-restdocs/s...

Deno を使用して RESTful API → CSV 書き出し

こんばんわ、FE 側の JK です 業務で使用するちょっとしたツールを Deno で作ってみたかったので調べてみました Deno とは Deno - A secure runtime for JavaScript and TypeScript Node.js の作者によって作られた新しいランタイム環境で 2020 年にリリースされたばかりです TypeScript がゼロコンフィグで使用できるのが嬉しい点です node の文字を入れ替えると deno になる話は有名だそうです node -e "console.log('node'.split('').sort().join(''))" 準備 ...

Cost Anomaly Detection で検知した異常コストを Slack へ通知するよう設定してみた

Cost Anomaly Detection は、いくつか簡単な設定をするだけで異常なコストが発生していないか監視することができ、任意のしきい値でアラート通知を受け取ることができる機能のようです。 今回は Cost Anomaly Detection を使用し、コストモニターが異常を検出したときにAmazon SNS によって指定した Slack チャンネルへ通知するように設定したところまでを紹介します。 運用した結果については別途ご紹介したいと思っています。 設定してみた 全体の流れは以下の通りです。 Slack API を作成 Lambda 関数を作成 SNS トピックを作成 コストモニタ...

[Mac 版] 開発用ローカル Kubernetes 構築方法2種

Kubernetes 初心者の JK です 今回はローカルで Kubernetes の環境を作成して本番環境と同じようにドメインでアクセスして動作するかを確認する方法をご紹介します なお、DNS の設定は Mac のやり方となるため他の OS では異なる設定が必要になる場合があります サンプルリポジトリ 下記のリポジトリを使用します https://github.com/koyama-tagbangers/k8s-web-app-sample api ディレクトリには node.js の簡易 API サーバプロジェクトを用意しています web ディレクトリには next.js を使用したプロジ...

Figma の auto layout の紹介

こんにちは、久しぶり、シルベスターです。 最近デザインのタスクが多く、Figma しか触っていない日々が結構多かったんですね笑 デザイン、またはワイヤーフレームを作ってる時って画面が増えていくと修正するのも面倒くさくなるのが自分だけじゃないと思います、 だけど Figma は便利な機能がいっぱいあってすごく助かります笑 そして今日紹介したいのは auto layout です! 目次 Auto Layout とは なぜ Auto Layout を使うのか Auto Layout はどうやって作るの? Auto Layout とは アイテムの間のスペースを保ってくれるグループ的な?笑 アイテムの位...