Japan EQ Locator
操作方法 ドラッグ/上下左右矢印キー: 移動 マウスホイール/+-キー: ズーム 右マウス/Ctrl + ドラッグ: 方角/傾き 2本指ピンチ: 方角/ズーム 2本指ドラッグ: 傾き Shift + 左右矢印キー: 方角 Shift + 上下矢印キー: 傾き このデータビジュアライゼーションは 草薙 昭彦 により作成されました。本アプリケーションが利用する地震データは、気象庁の 地震情報 および 地震月報(カタログ編) において提供されるものです。 ソースコードは GitHub リポジトリ にて公開されています。
気象庁が発表しているデータをもとに、2000年以降に発生したマグニチュード2.0以上の地震約60万件以上の震源を3Dマップ上にプロットした「Japan EQ Locator」が公開されています。 Japan EQ Locator https://nagix.github.io/japan-eq-locator/ アクセスすると震源がプロットされた地図が表示されます。震源は深さによって色分けされており、赤色に近いほど浅く、青色に近いほど深くなります。各震源をクリックすると詳細な位置を表示可能で、たとえば東京湾のこの震源は深さ57.34km。 福島県沖のオレンジ色の震源は106.76km。 紀伊半島南東沖の緑色の震源は384.37km。 震源を示す点は立体的にプロットされているので、地図を動かすと「プレート境界がこのあたりにあるのか」というのが浮かび上がります。
import { createSelectorGenerator, toLocator } from "@mizchi/selector-generator"; const generateSelector = createSelectorGenerator(window); const selected = generateSelector(document.querySelector("div")); 与えられたDOM要素が、レイアウト上どのようなパスでたどり着けるかを解析して、その要素を Playwirght が選択するための locator コードを生成します。 生成されるコードの例。 page.locator('html') page.getByText('Click on the links above to') page.getByText('xxx') page.getBy
UNIQLO Store Locator
ブラウザで任意の要素をクリックするだけでIDEを起動して該当のコードに移動してくれる拡張機能・「Locator.js」 - かちびと.net
Locator.jsはブラウザで任意の要素をクリックするだけでIDEを起動して該当のコードに移動してくれるブラウザ拡張機能です。Chrome、Edge、Brave、Opera、Firefoxなど主要ブラウザは概ねサポートされています。 オープンソースとなっており、拡張のインストールに抵抗がある方向けにライブラリも用意されています。表題通りで、ユーザーが使用するIDEと連動し、WebサイトのUIコンポーネントをクリックするだけで該当するコードに飛んでくれる、というもの。 無駄なく問題個所まで最短でアクセスできるので開発スピードを上げられる、というのが狙いみたいですね。なかなか面白い試みだと思います。確かに慣れれば速くなるかも。下記のライブラリ紹介ページで動作テストできるのでお試しになってみては如何でしょうか。ライセンスはMITとの事です。 Locator.js
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
地震約60万件の震源の位置をマップ上に示す「Japan EQ Locator」
クリックしたDOM要素の Playwright Locator を生成する