はてなブックマーク

はじめに SQLiteの正式なWebAssembly版「SQLite3 WASM/JS」が登場 － Publickey SQLite3をWebAssembly化した「SQLite3 WASM/JS」が気になっていたので、React上で動作するサンプルを作成してみました。 (Web標準になれなかったWeb SQL Databaseの代わりに利用できればと) SQLite Wasmの実行方法は3つあります。今回は一番単純な「メインスレッドで実行」パターンを試しました ラップされたWorkerをメインスレッドで実行(推奨) Web Workerで実行 メインスレッドで実行 サンプルプログラムの動作確認はこちらをクリック React環境はViteで作成しています localStorageに保存しているため、ブラウザを閉じても永続化されます(最大10MB) 作成したソースはこちら https://g

はじめに 前記事に続き、今回は標高を求めてみます。 地理院タイルが取得できることを前提に、標高タイルを読み込み、指定した地点の標高を算出します。 標高の取得 標高タイルについて 標高タイルは画素の色情報から、標高を計算できる特別なタイルです。 https://cyberjapandata.gsi.go.jp/xyz/dem5a_png/10/906/404.png dem5aは0.3m以内という高い精度を持ちますが、データが存在しない場合があります(富士山右上の茶色の部分) 仕様について標高タイルのデータ仕様から引用 24ビットカラーのPNG形式で、一つのタイルの大きさは256ピクセル×256ピクセルです。テキスト形式の標高タイルより、データサイズが小さいという特徴があります。 ピクセルの画素値（RGB値）から、当該ピクセル座標の標高値が算出できます。 画素値（RGB値）から算出される標高

はじめに Leafletなど、地図を表示するJavaScriptライブラリを用いると簡単に表示できますが、仕組みを理解するためあえて自力で計算してタイルを表示します。 探してみると、計算方法は見つかるのですが、数学が苦手な僕にはちょっと難しい・・・ので、できるだけ分かりやすい式で作りました。 最後に計算結果の確認をするため、富士山山頂の座標(35.36072, 138.72743)をもとに、タイル画像を表示してみます。 参考ページ Zenn:メルカトルとは何かを計算式から見る Qiita:メルカトル図法 wikipedia:メルカトル図法 国土地理院タイルの特徴 タイルはメルカトル図法 地図画像は縦横256pixcelの正方形 ズームレベル0は全世界を1枚(256×256)で表示する 緯度85度まで(256pxに収まる範囲。発散してしまうので) 左上を原点とする座標系(西経180度北緯85

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

変更履歴 2021/06/19: エディタで開いている(アクティブな).tsファイルをデバッグするように変更(デバッグ設定ファイルを書き換える必要がなくなりました) できること ts-nodeを使い、開いている.tsファイルを コンパイルすことなく デバッグする もしくは、ts-nodeで実行中のスクリプトにアタッチしてデバッグする 経緯 ts-nodeを利用した場合のデバッグ方法がよくわからなかったため、調べた結果をまとめました。 ※typescriptをtscでトランスパイルしてからデバッグする場合tsconfig.jsonでmapファイルの設定が必要です(.ts, .jsで互いの行位置を認識しないとブレークポイントを張ったり、行ステップ実行ができない。) 一方、ts-nodeはtsconfig.jsonでmapファイルの指定をしない(デフォルトのまま)でもデバッグできるようです(公式

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

1:目的と概要 目的 ローカルで完結するSAML-IdP認証サンプルプログラムが見つからなかったため作成しました。 とりあえず動くことを目的としてます。 ※SAML認証とは？参考リンク SAML認証に関する自分なりのまとめ SAML2.0でのシングルサインオン実装と戦うあなたに(.NET編) 更新履歴 2023/03/06 「Passport.js v0.6.0」にするとsessionの仕様変更により動かなくなるという情報をいただいたので、各ライブラリを最新にして動くように変更しました（@kino15さん、ありがとうございます） ライブラリ変更点（最新版に入れ替え） "dependencies": { - "cookie-parser": "~1.4.4", - "debug": "~2.6.9", - "ejs": "~2.6.1", - "express": "~4.16.1", -

テストページ 目的 似たようなスクリプトは探せば結構あるのですが、問題が多いので1から作りました。 button上でenter押下時も移動するようにしていますが、実際のアプリに組み込んで動作確認したら動作を変えるかもしれません。 enterキー押下時に次項目へ移動するjavascript(jQuery利用) フォーカス移動概要 tabindex順に移動します(tabindex1以上⇒画面内tabindex最大⇒tabindex未指定(dom順)の順) tabindexがマイナスの項目へは移動しません tabindexがマイナスの項目から移動する場合は、直近前後の項目へ移動します。 通常移動しない項目にtabindexを付けると移動可能になることを考慮 上記に関連して、フォーカス移動可能な項目が入れ子になっていても移動できる Tabの動作に合わせない仕様 anchorは移動対象から外していま

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?