便利!Web上でソースコードやテキストを比較してさくっと差分がわかるDiffサービス「Mergely」

  • あとで読みたい人は…

こんにちは、@cappeeです。

やってしまいました。Wordpressのテーマがアップデートしていて、うっかり更新してしまったんですよね。

そしたら編集したはずのcssやらphpファイルが全部上書きされてしまいました。当たり前ですが。。

前のファイルはローカルに保存されているのでバックアップをとってから新しいファイルをダウンロードしたけれど、新しいファイルと古いファイルのソースコードの差分を目で探すのは一苦労;;

今回のためだけに差分がわかるDiffソフトをインストールするのもイヤですし、Webでソースコードをコピペしてさくっと比較できるサービスがないかなと思って探してみたら、、ありました。

色々と比較してみた中で一番オススメのDiffサービスをご紹介します。

Diffとは

ちなみにソースコードやテキストなど2つのファイルを比較して差分を出力することをDiff(ディフ)といいます。

Difference(ディファレンス)の略だそうですよ。

オススメのDiffサービス「Mergely」

 便利!Web上でソースコードやテキストを比較してさくっと差分がわかるDiffサービス「Mergely」

Mergely

差分を確認する

使い方はとても簡単で、まず比較したいソースコードやテキストをコピーして左右に貼り付けます。

Mergely 1024x516 便利!Web上でソースコードやテキストを比較してさくっと差分がわかるDiffサービス「Mergely」

すると色別でハイライトして差分を教えてくれるのでとてもわかりやすいです。

Mergely2 300x282 便利!Web上でソースコードやテキストを比較してさくっと差分がわかるDiffサービス「Mergely」

右上の設定ボタンを押せば、色の変更もできます。

ここがすごい!マージ機能

Mergely3 300x26 便利!Web上でソースコードやテキストを比較してさくっと差分がわかるDiffサービス「Mergely」

検索ボックスのところにアイコンが並んでますが、地味にすごい「→」アイコンのマージ機能

マージとは簡単に言うと左右のソースコードをガッチャンコしてくれる機能です。とても便利ですが自動なのでかならず元ファイルは残しておいてくださいね。

あとは、左右のコードを入れ替えたり、クリアしたり、ダウンロード、アップロードすることができます。(今の時点でダウンロードとアップロードが動いてないような?)

ここがすごい!共有機能

Mergely4 300x56 便利!Web上でソースコードやテキストを比較してさくっと差分がわかるDiffサービス「Mergely」

一番上の「Save」ボタンを押して「Save for Sharing」をクリックすると、比較したファイルをURLで共有することもできます。

とても便利なDiffサービスですので、いざ!という時は思い出して使ってみてください。

Mergely

 

【13.03.27追加】
「子テーマ」をつくればWordpressのテーマをアップロードしても編集したファイルを子テーマとして残しておくことで上書きされないようにできました!
コメントいただいたDaisuke Takahashiさんありがとうございます!もっと勉強しないとですねっ

さっそく子テーマについて調べてみました。CSSだけの場合は便利ですが、注意が必要なのはfunction.phpファイルの場合は親テーマにある関数を子テーマで使用できないということ。新しく関数をつくるか、親テーマの方で関数を使わなくするなどが必要になります。その他のテンプレート用phpファイルも子テーマで使うことができますが、CSSと違ってphpファイルがまるごと上書きされてしまいますので、テーマのアップロードをした場合でもせっかく改善された箇所が反映されない可能性もあります。テンプレート用phpファイルを子テーマに入れてアップロードした場合は今回ご紹介する「Mergely」を使って念のため差分を確認しておいた方がよさそうです。
【重要】WordPressテンプレートのカスタマイズ前に・・・子テーマをつくってのカスタマイズ方法 -CSS篇-

 

Pocket
article clipper 便利!Web上でソースコードやテキストを比較してさくっと差分がわかるDiffサービス「Mergely」

2 thoughts on “便利!Web上でソースコードやテキストを比較してさくっと差分がわかるDiffサービス「Mergely」

コメントを残す

メールアドレスが公開されることはありません。

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>