Tagbangers Blog

Blog

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 とは アイテムの間のスペースを保ってくれるグループ的な?笑 アイテムの位...

Spring + React の Web アプリを Kotlin のみで作成する

先月から Tagbangers にジョインした生粋のハマっ子こと JK です(元インターン生) 私の好きなプログラミング言語の1つは Kotlin です Kotlin は JetBrains 社が開発した言語で主に Android アプリ開発で使用できる言語として有名です JK ≒ JetBrains Kotlin 今回はそんな Kotlin を用いて簡単な Web アプリを1から作成していこうと思います! GitHub 今回作成するプロジェクトの完成形は下記のリポジトリにプッシュしています koyama-tagbangers/kotlin-react-spring-sample What's...

Jira Software でスプリント権限をつけているのにスプリントを開始できないときの対応

細かすぎるのですが Jira の仕様の小ネタです。 Agile な開発をする際に使える Jira Software のスプリントですが、今回はある1プロジェクトのチケットをエピックリンクでフィルタしただけのスプリントで、 かつ、プロジェクトの権限はすでについているのに警告表示されてしまう場合です。 フィルタを元にスプリントを作っていると時々こんな状態になります。 ちなみにこのスプリントで指定したフィルタはこんな感じです "エピック リンク" = ABC-1111 ORDER BY ランク ASC 警告文は「すべてのプロジェクトにて「スプリントの管理」権限が必要」と書いてありますね さて、これを...

Keycloak と Spring Boot アプリケーションで OpenID Connect の Authorization Code Flow を確認する

はじめに 本日は、以下のようなシーケンスで OpenID Connect の Authorization Code Flow を確認していこうと思います。 開発済みのプロジェクトのいくつかで Keycloak,OpenID Connect, Spring Cloud Gateway が使われており順に理解していく必要を感じたため、今回は基本的な構成から学んでいきたいと思います。 UserInfo Endpoint(Spring Boot) および IdP(docker container として起動) のサンプルコードは以下のリポジトリに用意しました! https://github.com/k...

AWS Elasticsearch ServiceのCustom Packageの導入方法と通常版 Elasticsearchとの違い

この記事について AWS ManagedのElasticsearchでCustom PackageやUser Dictionaryが使用したかったので、試してみると通常のElasticsearchとの差異があったので気になり何が実行可能でなにが実行かのうでないのかをはっきさせたく検証を行いました。 ターゲット層はDocker等でElasticsearchを使用していてAWS ManagedのElasticsearchにMigrationしたいかたやまたあたらしくElasticsearchを使う方にも有益な情報だと思います。 Elasticsearchの準備 Elasticsearchを作成する...

React map gl と styled component で custom marker を作ってみました

こんにちは、フロントエンドチームのシルベスターです。 React で custom marker を作りたいなーと思っていろいろ調べた結果、 uber の react-map-gl と styled-components を使うと簡単に作れるねってことがわかりました なぜかと言うと、react component として import できて、必要な props を渡すだけでできるから?笑 早速やってみましょう Getting Started React-map-gl npm i react-map-gl Styled-components npm i styled-components マッ...