Tagbangers Blog

Blog

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

EKS クラスターのバージョンアップに失敗した(1.15 → 1.17)

はじめに Kubernetes はおよそ 3 か月ごとにリリースされており、各マイナーバージョンは最初にリリースされてから約 9 か月間サポートされます。 また、現在(2020/08/13) Amazon EKS で新しいクラスターで利用する際には以下のバージョンで作成できます。 1.17.6 1.16.8 1.15.11 AWSとしても、クラスターをタイムリーに更新することをお勧めしているのでバージョンアップしようと思います。 Kubernetes 1.16 にアップグレードにするための前提条件 を確認し特に問題なさそうなので、1.15 → 1.17 でバージョンアップします。(といっても飛...

Amazon Aurora MySQL でのフェイルオーバーを利用したインスタンスの切り替え

こんにちは!山﨑です! Amazon Aurora MySQL を利用されている場合に、自発的にフェイルオーバーを行う事で、 RDSに接続できない時間を抑えつつインスタンスの切り替えをする方法を試したのでメモです! まずは、インスタンスではなくクラスター側の DB 識別子 を選択し、「アクション」→「リーダーの追加」 追加する リードレプリカの仕様を入力していきます。 リードレプリカが作成されたら、プライマリに設定されているインスタンスを選択し、 「アクション」→「フェイルオーバー」を選択すると、「ステータス」欄が「Failing-over」という青字表記になります。 今回は、体感で 20 秒...