GitHubのプルリクエストにスクリーンショットとアニメーションを追加する方法

GitHubのプログラマーは、リポジトリのプルリクエストにスクリーンショットやアニメーションGIFを追加することがよくあります。これらの技術は、単純なテキストを何行も読ませるよりも、確実に目を引きます。静的なスクリーンショットを追加することは、視覚的な変更や写真をインラインで挿入したい場合に役立ちます。プロセスフローやマウスカーソルの動きを示すために、MP4ビデオやGIFアニメーションを使用できます。以下のチュートリアルでは、GitHubのプルリクエストにスクリーンショットとMP4/GIFアニメーションを追加する方法を示します。

目次

• 1. 新しいリポジトリとブランチを追加する
• 2. GitHub用のスクリーンショットを作成する
• 3. GitHub用のビデオとGIFアニメーションを作成する
• 4. GitHubのプルリクエストにスクリーンショットまたはアニメーションを追加する
• 5. GitHubページにスクリーンショットとGIF画像を表示する
• よくある質問

さらに読む: Gitの初心者ガイド

1. 新しいリポジトリとブランチを追加する

GitHubを使ったことがなくても、以下の手順で開発者として始めることができます。現在、GitHubアカウントを作成するにはメールアドレスだけが必要です。これにより、以前よりもGitHubを始めるのがずっと簡単になります。

1. GitHubプロフィールにサインインした後、右上の「+」記号をクリックして新しいリポジトリを作成します。

1. リポジトリに好きな名前を付け、公開または非公開を選択します。「READMEをチェックしながらこのリポジトリメニューを初期化する」オプションにチェックを入れることを忘れないでください。

1. コードをApache 2.0ライセンス、GNU一般公衆ライセンス、MITライセンス、Eclipse、Mozilla公衆ライセンスなどの形式で公開することを選択できます。他の人に自由にコードを使用してほしくない場合は「なし」を選択してください。
2. 「リポジトリを作成」をクリックして、プロフィールのメインブランチにリポジトリの追加を確認します。

1. 次のステージでは、以下のドロップダウンメニューを使用してリポジトリにブランチを追加します。ここでは、「Guten-tag」リポジトリに「Guten-tag-1」というブランチが追加されています。これは、メインリポジトリ「Hola-World」のブランチです。

1. GitHubにおけるブランチの目的は、開発者がマスタープロダクションブランチとは別に機能やバグ修正に取り組むのを助けることです。1、2、3などのシリアル番号を追加することは、ブランチのレベルを記憶するのが簡単な方法です。

2. GitHub用のスクリーンショットを作成する

GitHubにスクリーンショットを追加するには、良いスクリーンキャプチャソフトウェアが必要です。Windows 11では、Snipping Toolがこの目的に最適なMicrosoftアプリです。これに問題がある場合は、トラブルシューティングガイドに従ってください。

ただし、Windows 10では「Snip & Sketch」アプリが使用されており、Windows 11のSnipping Toolと非常に似ていますが、機能は少なくなっています。画面キャプチャの遅延用に3秒または10秒のタイマーがあります。

さらに読む: Windows 11 Snipping Toolが動作しない: 12の可能な修正

3. GitHub用のビデオとGIFアニメーションを作成する

GitHub用のビデオやGIFを追加するには、良いビデオスクリーンキャプチャツールが必要です。以前は、GitHubにMP4をアップロードできませんでしたが、それは変更されました。

Windows 11とWindows 10の両方で、Microsoft Storeのアプリ「Screen recorder & Screen record」を使用できます。Microsoft Storeは、各アプリがWindowsでうまく動作するように設計されているため、スクリーン録画ソフトウェアをダウンロードするための最も安全なソースです。Macで無料で画面を録画する方法については、このガイドを参照してください。

1. スクリーン録画アプリを起動し、キャプチャモードを選択します: 「フル」、「エリア」、「カメラ」、または「オーディオのみ」。録画を開始する準備ができたら「開始」を押します。

1. このソフトウェアの良い点は、GIFモードを選択することで直接GIFを作成できることです。

1. また、Ezgifや他のオンラインツールを使用してMP4をGIFに簡単に変換できます。まず、アップロードリンクを使用してMP4ビデオを追加します。

1. GIFファイルのサイズ、幅、長さの大まかな見積もりが得られます。GIFファイルのフレームレートを変更して、指示をわかりやすくするために遅くすることができます。

さらに読む: Macで無料で画面を録画する方法

4. GitHubのプルリクエストにスクリーンショットまたはアニメーションを追加する

スクリーンショットやビデオを作成したら、それらをGitHubのプルリクエストに簡単に追加できます。

1. GitHubにスクリーンショットやビデオ/アニメーションを追加するには、以前に作成したブランチに戻り、「プルリクエスト」に移動します。あるいは、ブランチをクリックするだけで直接アクセスできます。

1. MP4やGIFなどの新しいファイルを追加するには、ファイルを利用可能にしたいブランチで「ファイルをアップロード」を選択します。

1. エディターモードに入ると、「ファイルを選択」オプションからスクリーンショット画像とMP4/GIFファイルを添付できます。GitHubブランチリポジトリで初めてコミットする場合は「変更をコミット」をクリックします。そうでない場合は「コメントを更新」を選択します。

1. スクリーンショットまたはアニメーションファイルがリポジトリブランチに追加されるまで数秒待ちます。

1. 作成したスクリーンショット/ビデオ/アニメーションがGitHubブランチに正常に追加され、結果としてリポジトリにも追加されます。

1. GitHubは他の開発者とのコラボレーションに関するものです。彼らがあなたの提案した変更を気に入った場合、彼らはそれを自分のリポジトリにマージするかもしれません。「マージ可能」オプションが見える場合は、自動的に行われます。

1. マージが完了すると、ビデオ/スクリーンショットはマスタリポジトリの「コミット」として表示されます。

さらに読む: Gitキャッシュをクリアする方法

5. GitHubページにスクリーンショットとGIF画像を表示する

プルリクエストリポジトリ内でスクリーンショットやGIFファイルを別々にアップロードする代わりに、GitHubページに表示することもできます。

1. コツは、任意のブランチに表示されている「ReadMe.md」ファイルをクリックすることです。開くと、「ソースblobを表示」というアイコンをクリックします。このブランチは、画像、スクリーンショット、GIFなどを表示するために編集できます。

1. 「ファイルを編集」アイコンをクリックすると、スクリーンショットやアニメーションGIFコードを追加できるコーディング画面に移動します。画像を表示するのは簡単で、!を追加し、altテキストを[ ]で囲み、画像のリンクを()内に埋め込むだけです。

コーディングしたくない場合は、リポジトリページにスクリーンショット/GIFを直接追加する簡単な方法があります。

1. Readme.mdページで「ファイルを編集」をクリックすると、ブランチページに表示するスクリーンショット/GIFを添付できる新しいウィンドウが開きます。

1. GitHubブランチに変更をコミットする前に、画像、スクリーンショット、またはGIFを簡単にプレビューできます。

さらに読む: WindowsにGitとGit Bashをインストールする方法

よくある質問

GitHubで画像やスクリーンショットを整列またはサイズ変更するにはどうすればよいですか？

GitHubページで画像やスクリーンショットを整列させるには、ReadMe.mdファイルで「これを編集」をクリックし、画像やスクリーンショットをアップロードして、以下のコードを追加します:

画像を左揃え、右揃え、または中央揃えにしたい場合は、コードを修正します。画像のサイズを変更するには、幅と高さの寸法を修正します。

GitHubのGIFおよびビデオファイルにサイズ制限はありますか？

はい。個々のGIFまたはMP4ファイルの最大ファイルサイズは50MBです。「GitHub Blocks」と呼ばれる隠れたGitHub機能を使用すると、各ファイルのサイズを100MBに押し上げることができます。GitHubリポジトリ（メインブランチ）は5GB未満に保つ必要があります。

より大きなファイルサイズの画像やビデオをアップロードする必要がある場合は、GitHub Large File Storage（LFS）というプログラムを使用してください。これは、無料/プロユーザー向けにファイルごとに最大2GBの制限があります。

GitHubで画像を共有するにはどうすればよいですか？

GitHubには、スクリーンショットやGIFなどの画像をチャットや関連ツールを使用して直接共有する機能は現在ありません。ただし、GitHubページで「イシュー」を作成し、レビューのために提出することができます。これらのイシューには画像を含めることができます。GitHubのユーザーに通知するには、ユーザー名の前に@を使用します。

画像クレジット: GrootとOctocat at Unsplash すべてのスクリーンショットは著者によって撮影されました。