Tagbangers Blog

Blog

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 マッ...

mapbox で GeoJson からレイヤーを追加してみる

突然ですが、社内で Mapbox がアツいので何か書こうと思います。 とりあえず Web で地図を作るとするなら、動的な情報が表示できるものでないと、 極論、「じゃあ画像でも貼っとけばいいじゃん!」という話なので、 動きのあるデータを地図上に表示する準備として、まずは レイヤーに格納する情報を動的に取得できるようにしてみようと思います。 (とはいえ、今回は 鎌倉なびマップ の静的なデータを利用したため、動的に更新される事はないのですが) それではやっていきましょう。 Mapbox では、レイヤーに関わる情報を Source と Layer に分けて保持します。 map.addSource で ...

ml5.jsで体験する機械学習

ml5.jsはTensorflow.jsをラップしてブラウザ上で機械学習を使ったWebアプリケーションを簡単に作成できるライブラリです。 以下のような簡単なコードだけで画像のカテゴリー分類などができます。   const classifier = ml5.imageClassifier("MobileNet", () => {     console.log('model ready!')   });   const img = document.querySelector("#myImage");   const prediction = classifier.p...

MapboxGLでGeocoderを使ってみる

MapboxGLで使うGeocoderの紹介です。 地名、住所などから経度緯度を調べることができます。 Your browser does not support HTML5 video. まずはMapboxのユーザー発行後、Access tokenを取得する必要があります。 今回はpk.〜から始まる物を使います。 https://account.mapbox.com/ ステップを踏んでやり方を教えてくれるのでプロジェクトに合わせてinstall&importしていきます。 この後の細かいところの説明は公式にお任せしまして... https://docs.mapbox.com/mapbox-g...

CloudWatch Logs のロググループ名を awscli で取得する

今回は小ネタです。 Elastic Beanstalk の検証作業をする中で、不要な Log groups が大量にできてしまったため、整理していました。 cli で消したくなったので、aws logs delete-log-group で削除しようとしたのですが、--log-group-name を指定するためにロググループ名を特定する必要があります。 logs のオプションを確認するも、ロググループ名の一覧の確認がなさそうだったので?  (あればそっと教えていただきたいです...) describe-log-groups と jq を使用して確認しました。 コマンド less に渡してざっ...

Laravel Container環境内packageの脆弱性をCloud NativeのPrincipleを用いて解決

Introduction PHPのApplication(Laravel)をContainerで動かす際に一般的にはDockerfileを用いると思うが、 dependenciesの脆弱性やpackageのUpdateなので開発者が手動で治す必要が出てくるケースがあります。 Containerで動かすImageは常に最新のpackageを保つ必要があるが、開発者が一つ一つ更新するのはかなり手間がかかるしCloudNativeの観点から見るとあまり好ましくないです。 そこでApplicationをcommandでpackしてimageを作れば毎回最新のimageを使用することができ、開発者のim...

Mapboxで始めるGeoJSON

GeoJSON = JSONベースのGISデータ記述フォーマットで 地球上の緯度・経度のデータと、その配列から点・線・面を表現することができます。  * GISとはGeoJSONのような地理情報データをもとに可視化、分析するシステム Geographic Information System を指します。  地理情報データを座標値(ベクトル)と複数の属性で構成できるので、地球上のある場所(点)、2点間の距離や道路(線)、建物や土地(面)をデータとして表現できます。  点を表現する 以下のような形式で表現します。 {   type: 'Feature',   properties: {  ...

Mapbox Studioの紹介

Mapbox Studioとは? Mapbox Studio is the Mapbox application for managing your geospatial data and designing custom map styles. Use Mapbox Studio to build and design a map to your exact specifications by uploading and editing your own data, utilizing Mapbox-provided tilesets, adding custom fonts and ico...