URL
デモ
モチベーション
- Mac でサクッと diff とりたい
- diff 結果を他人に共有したい
- でも diff 結果を外部に保存したくない
現状
- 過去色々なデスクトップアプリを試したが、どれも肌に合わなかった。
- WinMerge を Wine で起動し html 出力する日々にも疲れてしまった。
- 簡単に diff できる Web サイトはいくつかある。
- しかし、結果を他人に共有したいとなったら、どこもテキストを得体の知れないサーバー側に保存しようとする。
- これはいただけない。
ないなら作ればいいじゃない。
大雑把な仕組みの説明
Diff
-
https://www.npmjs.com/package/diff
- 強い。
- 1 文字入力ごとに diff が実行されても無駄なので、 lodash/throttle で間引いている
- だから、diff の反映が入力から少し遅れて見える。代わりに、入力はスムーズ。
URL を生成する時
- 「Generatoe URL」ボタンをクリックする。
- 左右のテキストと「Diff options」の設定値を json テキスト化し、圧縮する。
- 圧縮テキストをクエリパラメータとして URL と連結。
- それを URL 欄に反映する。
-
?v=～の部分がそれである。 - 以下のサイトで展開を確認できる（Algorithm は lzma）
- 暗号化はしていないため、このクエリパラメータを漏らしたらアウト。
-
URL を開く時
- URL を開く。
- クエリパラメータから圧縮文字列を読み取り、展開する。
- 展開された json テキストの各値を、画面に反映する。
以上、全てクライアントサイド、ブラウザ上の JavaScript の処理で完結する。
完全にストレージレスな diff ツールである。
URL さえブックマークすれば、PC・スマホ、どこでも diff を確認することができる。
Bookmarkable Diff!
Write once, Diff anywhere!!
注意
- 勉強のため Google Analytics を使っている。
- 記録内容は、「画面遷移」と「ボタンのクリック」。
- クエリパラメータは記録していない。
- プライバシーに関わりうる情報であるクエリパラメータは、送信されないよう細心の注意を払って実装した。
- これを守れなかったら、このツールを作った意味がなくなってしまうので・・・
-
個人情報（PII）を送信しないようにする方法 - アナリティクス ヘルプ より
URL、URL パラメータ、タイトルのいずれかに個人情報が含まれている可能性がある場合は、それを削除してください
- 送信内容を確認したい場合は、「Google Analytics Debugger」を使って確認してみてほしい。
- もし万が一、クエリパラメータを送信してるようなことがあれば、ご連絡いただけると幸いです。
あとどう頑張ってもダサいデザインにしかなりませんでした。助けて下さい。