JavaScript
色々あって面白かったのでメモしておく。 一応全部ブラウザ上の前提。 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開発を勉強してみる ファイルアクセス時…