はじめに
皆さんはGit（GitHub）でバージョン管理をしていて、『コミット前後で画像を比較したい！』と感じたことはありませんか？
テキストデータばかり触っている私には、そのような経験はまだありません。
しかし、GitHubのテキストを読んでいて非常に便利な機能を知ったので、備忘録と紹介を兼ねて記事にします。
どう便利なのか？
**"どう操作するのか"の前に、"どう便利なのか"**をまず紹介します。
次の3種類の方式でコミット前後を確認できます。
- 左右に画像を表示する
- 「ツマミ（スライダー）」を操作して、1枚の画像でコミット前後の状態を部分的に表示する
- コミット前後の画像を層として重ね、層の透明度で表現する
...頑張って言語化してみましたが正直ワカランと思います。
こういったものは文字に起こすよりも画像で提示したほうが分かりやすいかと思います。すみません！
下記の3つの画像をごらんください。
詳しい内容は後述しますが、このように3種類の方式でコミット前後を確認することができます。
どう使うのか？（操作方法の紹介）
GitHubのページは頻繁に変更されるため、どこにあるかというよりも、どういった機能があるかを理解しておくことのほうが重要です。
Web制作者のためのGitHubの教科書
上記引用から、投稿からしばらく経つとUIが変わってしまうことは容易に想像できますが、わずかな期間でもなるべく情報量の多い記事にしたいので、具体的な遷移方法も記します。
次の画像のような操作で、コミット前後の確認ができるページに移動します。
画像内で赤く囲った部分をクリックして移動します。
コミットメッセージのリンクをクリックする
紙のアイコンをクリックする
アイコンのクリックにより、コミットの前後が確認可能になった状態
コミット前後の確認方式は3種類ある
冒頭でも紹介しましたが、3種類の方法でコミットの前後を確認できます。
それぞれに2up, Swipe, Onion Skinという名前がつけられています。
順に説明していきます。
2up
コミット前後の画像を左右にそれぞれ配置して確認する方式です。
Swipe
ツマミ（スライダー）を操作して、1枚の画像でコミット前後の状態を部分的に確認できます。
Onion Skin
オニオンスキンとはフレームアニメーションの配置や編集がしやすいように、一度に複数のフレームをステージ上に表示する機能です。複数のコマを重ねて表示してくれるため、連続したアニメーションの編集や確認に便利です。
MITSUE-LINKS
2枚が重なって表示され、プレビュー下部にあるスライダーを左右に動かすことで、変更前後の透明度を切り替えながら見比べることができます。
Web制作者のためのGitHubの教科書