JavaScript
世の中はAI一色なので、入門記事を読んで配管通すくらいはやってみることにした。 以下を読んだ。 zenn - MCP 入門 とてもよい記事でありがたかった。いくつか詰まった箇所だけメモっておく。 ローカルのnode環境が壊れていたので作り直した いきなり関係な…
permanent指定で常時ツールチップを表示すると、他と被るので困る。 mouseoverイベントで拾って「bringToFront()」を呼び出すとそれっぽくなった。 <Marker eventHandlers={{ mouseover: (e) => { if (e.target._tooltip) { e.target._tooltip.bringToFront() } } }} > <Tooltip permanent></Tooltip> </Marker> 基本的にLeafletのドキュメント…
riseOnHoverプロパティを設定すると浮上する。 Leaflet本体のドキュメントを読む方がよい。 Leaflet - marker-riseonhover riseOffsetプロパティなどもあるので合わせて使えそう。 <Marker riseOnHover={true}>...</Marker>
Tooltipにinteractiveを設定すればよいらしい。たぶんtrueなしでも動く。 permanentで出しっぱなしにしておくと便利だと思う。 Making Leaflet tooltip clickable - Stackoverflow <Tooltip direction="bottom" permanent interactive={true}></tooltip>
昔調べて書いたつもりだったけどなかった。 たまにしか使わないから忘れて困る。 React-Leaflet v3なのでこれを使った。v4以降は違うのでハマる。 React-leaflet - Events ライブラリをimportする useMapEventsをインポートする。 import { useMapEvents } f…
よくある話なのでググればいくらでも出てくるんだけど、ちょっと欲しいのと違ったので。 探すとkeydownを使ったりするのがたくさん見つかるんだけど、beforeinputを使ってみた。 MDN - beforeinput jQueryの例。 $('#myInput').on('beforeinput', function(e…
ブックマークが膨れ上がったからここに置いとく。 試したけど仕事で使うのはやめといた。 subscriptionの有効期限の更新方法とかが微妙にわからん。 そもそもPWA自体が利用者側になじみがないので、toCでなくてもちょっと説明がムズイ。 どのサイトもありが…
必要に駆られて仕方なしに下調べした時のメモ。 Laravel11 Vue3 Vuetify3 あたりを使う。 TODOアプリ作ろうかと思ったけど、設定以降は目新しい事もなく単調なのでjsonplaceholder使った。 フレームワークを追うのは疲れる。 Laravel Sailの導入 環境構築が…
色々あって面白かったのでメモしておく。 一応全部ブラウザ上の前提。 CryptoAPIを使う 外部パッケージを使う URL: createObjectURLを使う CryptoAPIを使う 使えるなら真っ先に考えるやつ。 MDN - Crypto: randomUUID() メソッド 外部パッケージを使う ここ…
ReactとかVueを書くとたまに使うことになるYupというバリデーションライブラリがある。 github.com 大抵の場合は効率よく書けるんだけど、込み入ったバリデーションが必要になると困る。 何か抜け道が用意されているだろうと探すとtestというschemeがあるら…
API先がUTCで「あー」ってなってたら便利なメソッドがあった。 こんなのいつからあったのかなぁ。便利や。 developer.mozilla.org こんな風に書ける const utcDate = new Date(Date.UTC(2018, 11, 1, 0, 0, 0)); console.log(utcDate); > Sat Dec 01 2018 09…
さすがにそんな事できないだろと思って調べたらできるらしい。 座標系(CSR)にCRS.Simpleというのがあって、これを指定すると左下がx:0,y:0のシンプルな座標系になるっぽい。 あとはImageOverlayでレイヤーを足せばそれっぽくなる。 というか調べていたらVide…
技術的なこともさておき、MetaのDeveloperのアプリ登録でハマってしまった。 技術的なとこ 技術的にはJSのSDKを公式で提供してくれているので、比較的やりやすい気はする。 ウェブ - Facebookログイン - ドキュメンテーション - Meta for Developers 手順は…
ちょっと前の話だからうろ覚えだけど, メモが出てきたから書いておく. 絶対またハマるやつ. なんかでた JSON.parse()呼び出したらなんか出た. position 0って1文字目やん.そんなことある? Uncaught SyntaxError: Unexpected token in JSON at position 0 J…
画像のギャラリーにサムネイルリストみたいなのがほしいねってなった. 常にユーザーに見えるように自動でスクロールを動かしたいな, ってなった時実装が面倒くさい.移動量を計算してscrollToを使うイメージがあった. ところがググると今は専用のAPIが生えて…
なんかみんな外部パッケージのrimrafを使っていた気がするんだけど, 「わざわざ外部パッケージいるんかい」と好きになれなかった. さすがに今は簡単にできるらしい. nodeは16.16.0で試した. "clean": "node -e 'fs.rmSync(`./dist`, {recursive: true, force…
国土地理院の地理院地図では線や面を引いたり, ポイントを追加する機能があります. そして, この内容をGISデータとして保存までできます. GeoJSON形式はLeafletも対応しているので, これをReact-Leafletで表示してみます. 地図に作図する 地理院地図の使い方…
「もうポップアップで良くない？」って言いたくなってもマーカーの上に文字を付けたい時があります.たしかにある方が見やすい. どうやるか とりあえずググるとDivIconを使う例が出てくる. Customizing react-leaflet marker icons by using font awesome - S…
追記 丁寧に探すと公式にやり方が書いてあった。 react-leaflet.js.org React-Leafletを使って地図を表示することになったが、どうにも地図のCenter位置を変更できない。 地図を出すときに以下のようにcenterは指定できるけど、どうも初期表示時の座標らしい…
Vue.jsをもうちょっと触っといた方がいいかな, ぐらいの軽い気持ちで作っていたけどNetlifyだと無料で配信できるし公開しておく. bonsai-outliner.netlify.app どう見たってWorkFlowyとかDynalistを使う方が良いのだが, ショートカットをUnixキーバインドっ…
ちょこっと使いたい時があるので. 大きな桁数などで精度の問題があるのは承知の上. 雑に書いた割にテストしてないからバグってるかも. /** * 有効桁数を指定して小数点切り捨て処理を行う * val: 切り捨てる値 * digits: 丸めて残す桁数 */ function digitsF…
SVG要素を文字列として得てBlob化したかったんだけど、うまくいかなかった. 以下で出来た. var serializer = new XMLSerializer(); var serialized_svg = serializer.serializeToString(svg); ちなみにChromeアプリでダウンロードするコードは以下. var seri…
たくさんあったので箇条書きでまとめておく. Oxy Notes - 初めてでも理解できるようになる「Google Chrome機能拡張の開発」 はじめに読むのにちょうど良かった.かなり役立った. kinjouj.github.io - Chrome Extension開発を勉強してみる ファイルアクセス時…
