GitHubのプログラマーは、リポジトリのプルリクエストにスクリーンショットやアニメーションGIFを追加することがよくあります。これらのテクニックは、何行ものプレーンテキストを読ませるよりも断然人目を引きます。静止画のスクリーンショットを追加することは、インラインで視覚的な変化や写真を挿入したい場合に便利です。プロセスの流れやマウスカーソルの動きを示すには、MP4ビデオやGIFアニメーションを使用するとよいでしょう。次のチュートリアルでは、GitHub のプルリクエストにスクリーンショットと MP4/GIF アニメーションを追加する方法を説明します。

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

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

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

2. リポジトリに好きな名前をつけ、公開・非公開を選択します。READMEのチェックと一緒にこのリポジトリメニューを初期化する」にチェックを入れるのを忘れないようにしましょう。

3. コードの公開形式は、Apache 2.0ライセンス、GNU一般公衆ライセンス、MITライセンス、Eclipse、Mozilla公衆ライセンスなどを選択することができます。他の人にコードを自由に使ってもらいたくない場合は、「なし」を選択してください。 4. 4. 「リポジトリの作成」をクリックすると、あなたのプロファイルのメインブランチの下に、リポジトリが追加されます。

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

6. GitHubにおけるブランチの目的は、開発者がマスターのプロダクションブランチとは別に機能やバグフィックスに取り組むことです。1, 2, 3 などの通し番号をつけると、ブランチのレベルを記憶しやすくなります。

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

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

Windows 10では、「Snip & Sketch」アプリが使用されており、Windows 11のSnipping Toolと非常によく似た動作をしますが、機能は少なくなっています。ただし、画面キャプチャにかかる時間を3秒または10秒のタイマーで設定できます。

3. GitHub 用の動画や GIF アニメーションを作成する

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

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

画面録画アプリを起動し、キャプチャモードを選択します。“フル”、“エリア”、“カメラ”、“音声のみ “のいずれかのキャプチャモードを選択します。2.画面録画の準備ができたら、いつでも “開始 “を押してください。

2. このソフトの良いところは、GIFモードを選択することで、直接GIFを作成することができることです。

3. また、Ezgifなどのオンラインツールを使って、MP4をGIFに簡単に変換することもできます。まず、アップロードリンクを使用してMP4ビデオを追加します。

4. GIFファイルのサイズ、幅、長さの概算が表示されます。GIFファイルのフレームレートを変更することで、指示しやすいように遅くすることができます。

4. GitHub Pull Requests にスクリーンショットやアニメーションを追加する

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

GitHub にスクリーンショットや動画・アニメーションを追加するには、先ほど作成したブランチに戻って “Pull requests” に移動します。あるいは、ブランチをクリックするだけで直接到達できます。

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

3. エディタモードになったら、「choose your files」からスクリーンショット画像とMP4/GIFファイルを添付することができます。GitHubのブランチリポジトリで初めてコミットする場合は、“commit changes “をクリックします。そうでない場合は、“コメントを更新する “を選択します。

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

5. 作成されたスクリーンショット/動画/アニメーションは、GitHubブランチ、ひいてはリポジトリに正常に追加されます。

6. GitHubは、他の開発者とのコラボレーションが重要です。もし彼らがあなたの変更案を気に入れば、上流の自分のリポジトリにマージしてくれるかもしれません。これは、“Able to merge “オプションが表示されていれば、自動的に行われます。

7. マージを終了すると、動画/スクリーンショットがマスターリポジトリの「コミット」として表示されます。

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

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

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

をクリックします。 2. edit file」アイコンをクリックすると、コーディング画面が表示されるので、スクリーンショットやアニメーションGIFのコードを追加してください。画像を表示するには、!を付けてaltテキストを[ ]で囲み、画像のリンクを()で埋め込めば簡単です。

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

1. Readme.md ページの “edit file” をクリックすると、新しいウィンドウが表示されるので、ブランチページに表示するスクリーンショット/GIF を添付してください。

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

よくある質問

GitHub で画像やスクリーンショットを整列させたりサイズを変更するには？

GitHub のページで画像やスクリーンショットの位置を揃えるには、ReadMe.md ファイルで “edit this” をクリックし、画像やスクリーンショットをアップロードして次のコードを追加します。

画像を左寄せ、右寄せ、中央のどれにするかは、コードを修正してください。画像のサイズを変更するには、幅と高さの寸法を変更します。

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

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

それ以上のファイルサイズの画像や動画をアップロードする必要がある場合は、GitHub Large File Storage (LFS) と呼ばれる GitHub プログラムを使用します。このプログラムは、無料/Pro ユーザーの場合、1 ファイルあたり最大 2 GB までとなります。

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

GitHubには現在、チャットや関連ツールを使ってスクリーンショットやGIFのような画像を直接共有する機能はありません。しかし、GitHub のページに “課題” を作成し、そのレビューを受けるために提出することは可能です。これらの課題には、画像を含めることができます。GitHubで相手に通知するには、相手のユーザー名の前に@をつけます。

Image credit: Groot and Octocat at Unsplash All screenshots taken by author.