Help us understand the problem. What is going on with this article?

Bookmarkable Diff - ブックマークできる Diff ツールを作った

URL

https://my-tools.netlify.com/diff

デモ

demo.gif

モチベーション

  • 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 を使っている。
  • 記録内容は、「画面遷移」と「ボタンのクリック」。
  • クエリパラメータは記録していない。
  • プライバシーに関わりうる情報であるクエリパラメータは、送信されないよう細心の注意を払って実装した。
  • 送信内容を確認したい場合は、「Google Analytics Debugger」を使って確認してみてほしい。
  • もし万が一、クエリパラメータを送信してるようなことがあれば、ご連絡いただけると幸いです。

あとどう頑張ってもダサいデザインにしかなりませんでした。助けて下さい。

arx8
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした