Tagbangers Blog

Frontend

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(''))" 準備 ...

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

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

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

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

Chrome 83 安定版について気になった事

みなさんこんにちはこんばんはおはようございます。 最近自宅勤務が板についてきた方の山﨑です。 コロナの影響で Chrome 82 が スキップされた世の中ですが、 5月19日に Chrome 83 がリリースされました。 というわけで今回は 83 で追加された機能から面白そうなものをいくつかピックアップしようと思います。 | 視覚障がいをエミュレート 視覚障がいというと、結構稀なケースに対応したもんだと思われるかもしれません。 でもでも、目薬で有名な参天製薬さんのサイトによると男性の 5% はなにかしらの色覚異常を持っているようです。 20人に1人ぐらいの割合だと、案外無視できない数字かなと思...

簡単な gulp-sass の設定

Read the English article here gulp, gulp-sass のインストール $ npm install gulp gulp-sass -D サンプルのディレクトリ構成 必要なもの:  ソースディレクトリ アウトプットディレクトリ gulpfile.js 今回の場合,  ソースディレクトリとアウトプットディレクトリはそれぞれ、./sass と ./css となる。  gulpfile.js の設定 gulpfile.js を以下のように設定する gulpfile.js const gulp = require('gulp') const sass = requi...