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の紹介です。 地名、住所などから経度緯度を調べることができます。 Your browser does not support HTML5 video. まずはMapboxのユーザー発行後、Access tokenを取得する必要があります。 今回はpk.〜から始まる物を使います。 https://account.mapbox.com/ ステップを踏んでやり方を教えてくれるのでプロジェクトに合わせてinstall&importしていきます。 この後の細かいところの説明は公式にお任せしまして... https://docs.mapbox.com/mapbox-g...
GeoJSON = JSONベースのGISデータ記述フォーマットで 地球上の緯度・経度のデータと、その配列から点・線・面を表現することができます。 * GISとはGeoJSONのような地理情報データをもとに可視化、分析するシステム Geographic Information System を指します。 地理情報データを座標値（ベクトル）と複数の属性で構成できるので、地球上のある場所（点）、2点間の距離や道路（線）、建物や土地（面）をデータとして表現できます。 点を表現する 以下のような形式で表現します。 { type: 'Feature', properties: { ...
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 82 が スキップされた世の中ですが、 5月19日に Chrome 83 がリリースされました。 というわけで今回は 83 で追加された機能から面白そうなものをいくつかピックアップしようと思います。 | 視覚障がいをエミュレート 視覚障がいというと、結構稀なケースに対応したもんだと思われるかもしれません。 でもでも、目薬で有名な参天製薬さんのサイトによると男性の 5% はなにかしらの色覚異常を持っているようです。 20人に1人ぐらいの割合だと、案外無視できない数字かなと思...
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...
XStateは有限状態機械(= 有限オートマトン）を実装するライブラリです。 まず、どういうものなのか: import { createMachine, interpret } from 'xstate' const toggleMachine = createMachine({ id: 'toggle', initial: 'inactive', states: { inactive: { on: { TOGGLE: 'active' } }, active: { on: { TOGGLE: 'inactive' } }, }, }) ...
こんにちは！夜空に浮かぶお月さまがいつもより大きく見えてキレイダナーと思い目を凝らしてよく見たらどうやら乱視が進行しているっぽい事に気がついてあわあわしています。山﨑です。 みなさん Google Chrome、使ってますか？ 今日はフロントからのリクエストに関する２つのデバッグてくにっくを書いてみようと思います。 Replay XHR フロントからXHRを使って POST でバックエンドにデータを登録しにいく処理、よくありますよね。 大概フォームの入力を伴うので、名前住所生年月日会社名備考欄 etc.... といちいち入力しなきゃならなかったりするので、 何度もテストを行う内に入力するのがだ...
JavaScriptの仕様標準であるECMAScriptはTC39という団体により使用が策定されています。 ProposalはGithubのレポジトリにまとめられています。 Proposalにはstageというものがあり、stage 0から順にstage 4へ上がっていくというプロセスを経て最終的にECMAScriptに採用されます。 Stage 0 - Strawman（たたき台） アイデア段階 Stage 1 - Proposal（提案） 必要性や解決方法についての説明がある 実際にPolyfillやデモが実装される Stage 2 - Draft（下書き） 仕様書の初期案 具体的な構文に...
主にフロントエンド側で使用するドキュメンテーションツールを探していて、 markdown で書く普通のドキュメントも MDX で React コンポーネントのショーケースとしても ということで docz を使ってみることにしました。 インストール v2 から Gatsby がベースになるようなので、 docz@next を使うことにします。 % npm i -D docz@next ドキュメントの mdx ファイルを置いておく docs と 設定ファイルとなる doczrc.js をプロジェクトルートに作ります。 % mkdir docs % touch doczrc.js ドキュメントに含...
