Tagbangers Blog

Blog

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

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 に渡してざっ...