write ahead log

ロールフォワード用

JavaScript

javascriptでUUIDを作成する方法あれこれ

色々あって面白かったのでメモしておく。 一応全部ブラウザ上の前提。 CryptoAPIを使う 外部パッケージを使う URL: createObjectURLを使う CryptoAPIを使う 使えるなら真っ先に考えるやつ。 MDN - Crypto: randomUUID() メソッド 外部パッケージを使う ここ…

Yupで独自のバリデーションチェックをしたい

ReactとかVueを書くとたまに使うことになるYupというバリデーションライブラリがある。 github.com 大抵の場合は効率よく書けるんだけど、込み入ったバリデーションが必要になると困る。 何か抜け道が用意されているだろうと探すとtestというschemeがあるら…

javascriptでUTCのDateを作りたい

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…

React-Leafletで地図の代わりに画像を使う

さすがにそんな事できないだろと思って調べたらできるらしい。 座標系(CSR)にCRS.Simpleというのがあって、これを指定すると左下がx:0,y:0のシンプルな座標系になるっぽい。 あとはImageOverlayでレイヤーを足せばそれっぽくなる。 というか調べていたらVide…

「Facebookでログイン」を実装する時に苦労したこと

技術的なこともさておき、MetaのDeveloperのアプリ登録でハマってしまった。 技術的なとこ 技術的にはJSのSDKを公式で提供してくれているので、比較的やりやすい気はする。 ウェブ - Facebookログイン - ドキュメンテーション - Meta for Developers 手順は…

JSON.parseしたらエラーになった原因がBOMだった

ちょっと前の話だからうろ覚えだけど, メモが出てきたから書いておく. 絶対またハマるやつ. なんかでた JSON.parse()呼び出したらなんか出た. position 0って1文字目やん.そんなことある? Uncaught SyntaxError: Unexpected token  in JSON at position 0 J…

画像ギャラリーみたいなものの実装にscrollIntoViewが便利だった

画像のギャラリーにサムネイルリストみたいなのがほしいねってなった. 常にユーザーに見えるように自動でスクロールを動かしたいな, ってなった時実装が面倒くさい.移動量を計算してscrollToを使うイメージがあった. ところがググると今は専用のAPIが生えて…

npm scriptで外部パッケージを使わずにcleanしたい

なんかみんな外部パッケージのrimrafを使っていた気がするんだけど, 「わざわざ外部パッケージいるんかい」と好きになれなかった. さすがに今は簡単にできるらしい. nodeは16.16.0で試した. "clean": "node -e 'fs.rmSync(`./dist`, {recursive: true, force…

地理院地図で引いた線(GeoJSON)をReact-Leafletで表示する

国土地理院の地理院地図では線や面を引いたり, ポイントを追加する機能があります. そして, この内容をGISデータとして保存までできます. GeoJSON形式はLeafletも対応しているので, これをReact-Leafletで表示してみます. 地図に作図する 地理院地図の使い方…

React-Leafletでマーカーの上に文字をつけたい

「もうポップアップで良くない?」って言いたくなってもマーカーの上に文字を付けたい時があります.たしかにある方が見やすい. どうやるか とりあえずググるとDivIconを使う例が出てくる. Customizing react-leaflet marker icons by using font awesome - S…

React-Leafletを使って地図の中央位置を変更したい

追記 丁寧に探すと公式にやり方が書いてあった。 react-leaflet.js.org React-Leafletを使って地図を表示することになったが、どうにも地図のCenter位置を変更できない。 地図を出すときに以下のようにcenterは指定できるけど、どうも初期表示時の座標らしい…

ブラウザで動くアウトラインエディタを作った

Vue.jsをもうちょっと触っといた方がいいかな, ぐらいの軽い気持ちで作っていたけどNetlifyだと無料で配信できるし公開しておく. bonsai-outliner.netlify.app どう見たってWorkFlowyとかDynalistを使う方が良いのだが, ショートカットをUnixキーバインドっ…

javascriptで小数の切り捨て・切り上げ・四捨五入を桁数指定で行いたい

ちょこっと使いたい時があるので. 大きな桁数などで精度の問題があるのは承知の上. 雑に書いた割にテストしてないからバグってるかも. /** * 有効桁数を指定して小数点切り捨て処理を行う * val: 切り捨てる値 * digits: 丸めて残す桁数 */ function digitsF…

object SVGSVGElementを文字列に変換する

SVG要素を文字列として得てBlob化したかったんだけど、うまくいかなかった. 以下で出来た. var serializer = new XMLSerializer(); var serialized_svg = serializer.serializeToString(svg); ちなみにChromeアプリでダウンロードするコードは以下. var seri…

chrome拡張を作っていて役に立ったページ

たくさんあったので箇条書きでまとめておく. Oxy Notes - 初めてでも理解できるようになる「Google Chrome機能拡張の開発」 はじめに読むのにちょうど良かった.かなり役立った. kinjouj.github.io - Chrome Extension開発を勉強してみる ファイルアクセス時…