このプロジェクトのメンテナになって、プロジェクトの継続を支援しませんか？ もし興味があれば、メンテナガイドを確認してTwitterにてDMを送ってください。
このチュートリアルは、初めてコントリビュートする人に向けて、シンプルで簡単なプロジェクトに参加できるようにするためのものです。
- オープンソースプロジェクトにコントリビュートしよう。
- GitHubの使い方をより快適にしよう。
- このプロジェクトは全くの初心者向けです。アンカータグ
<a href="" target=""></a>の書き方や編集の仕方がわかっていれば、できるでしょう。 - また、少し経験はあるけれども初めてオープンソースにコントリビュートしたい方やコントリビュートすることで経験や自信をつける方にもおすすめです。
Web開発者であれば、意欲的だろうと経験豊富だろうと、Gitを使う必要があり、GitHubは誰もが使う最も人気のあるGitホスティングサービスです。また、オープンソースコミュニティの中心地でもあります。GitHubを使いこなすことは必須スキルです。プロジェクトに貢献することで自身がつき、GitHubのプロフィールに記載できるようになります。
もしあなたがデベロッパーなりたてで、GitとGitHubを学ぶ必要性があるのかどうかを迷っているのであれば、これを見てください: You Should've Learned Git Yesterday
このプロジェクトのウェブページに、このようなカードをコントリビュートしてもらいます。カードの中身には、あなたの名前、Twitterのハンドルネーム、簡単な説明、そしてあなたがおすすめするウェブ開発者向けのリンクを3つ掲載します。
HTMLファイルの中に、カードのテンプレートのコピーを作り、自分の情報に置き換えます。
| Contribute: |
|---|
まず作業をするためのセットアップをしましょう。
- あなたのGitHubアカウントでログインしてください。もし持っていない場合はアカウントを作りましょう。 GitHub Hello World tutorialをやってからこのセットアップを続けることをおすすめします。
- GitHub Desktopをダウンロード。
- もしVS Codeを使っているのであれば、VS Code内で統合されているエディタからGitの操作を行うことができます。
- しかしながら、このチュートリアルに従う最もシンプルで簡単な方法はGitHub Desktopを使うことです。
10個の簡単な手順でオープンソースコントリビューターになりましょう。
所要時間: 30分以内
- ここでの目的は、このプロジェクトのコピーを自身のアカウントに置くことです。
- リポジトリ(リポ)とは、GitHub上のプロジェクトの呼び方で、フォークとはそれをコピーするという意味です。
- メインページにいることを確認してください。
|
 |
|---|
- これでこのプロジェクトの完全なコピーがあなたのアカウントにあることを確認できるでしょう。
- ここでの目的は、プロジェクトのローカルコピーを作成していくことです。これは自分のPCにコピーを作るという意味です。
- GitHub Desktopを開いてください。 そのアプリで
|
 |
|---|
|
 |
|---|---|
|
 |
- プロジェクトがハードディスクにコピーされるため、しばらく時間がかかるでしょう。デフォルトのパスは
..\Documents\GitHubのままにしておくことをおすすめします。 - これでプロジェクトのローカルコピーができました。
- リポジトリをクローンして、GitHub Desktopでそれを開いたら、新しいブランチを作成しましょう。
- ブランチとは、
masterと呼ばれるプロジェクトのメインブランチから自分の変更したものを切り離しておくための方法です。例えば、何かしらの変更を別のブランチで行っていて、変更に満足できなかったときはそのブランチを削除するだけで、メインプロジェクト(master)に影響を与えることはありません。
|
 |
|---|
|
 |
|---|
- ブランチには好きな名前をつけることができますが、ここでの目的は自分の名前のカードを追加するためのブランチなので、
あなたの名前-cardと呼ぶと、このブランチの意図が明確になり、よい練習になるでしょう。
|
 |
|---|
- これで、
masterとは別の新しいブランチを作成することができました。 - 次のステップでは、このブランチで作業していることを確認してください。GitHub Desktopの中央上部にある Current branch に現在のブランチの名前が表示されています。
masterブランチでは作業しないでください
- これから編集するファイルをお好みのコードエディタで開いてください。
- あなたのPCにコピーされたプロジェクトがあるフォルダを探してください。デフォルトだと
あなたのPC > Documents > GitHub > Contribute-To-This-Projectにあるでしょう。 index.htmlはContribute-To-This-Projectフォルダ直下にあります。
|
 |
|---|
- これで編集するファイルをエディタで開き、更新する準備ができました。
- カードのテンプレートをコピーして、作業を開始します。
|
|---|
 |
|
|---|
 |
- このカードはあなたが編集するためのものです。
- これからhtmlの編集を行い、カードのカスタマイズ可能なフィールドを変更していきます。
|
 |
|---|
|
|---|
 |
- Twitter以外を使う場合は、Twitterアイコン
<i class="fa fa-twitter"></i>を別のものに置き換えましょう。Font Awesome Iconsで置き換えるものを検索して、fa-twitterを別のものに置き換えてください。例えばfacebookの場合は、fa-facebookです。その後上記と同じ手順を踏んでください。
|
 |
|---|
|
|---|
 |
|
- 変更内容をすべて保存したことを確認してください。
- 変更内容をテストしてください。 これは特に重要です！htmlファイルをブラウザで開き(ダブルクリックで開けます)、あなたのカードがどのように見えるかを確認してください。ページ全体を見て何も壊れていないことと、あなたのリンクがクリックしてちゃんと動作していることを確認します。コンソールを開き(Ctrl + Shift + J (Windows / Linux) または Cmd + Opt + J (Mac))、エラーメッセージがないことを確認します。
- さて、これでコードの編集が完了しました！次は変更をコミットし、メインプロジェクトにマージするためにGitHubへ変更内容を送信します。
- GitHub Desktopに戻ります。
- あなたが変更したファイルがステージングエリアに追加されていることを確認できるでしょう。
- これはGitがすべての変更点を記録していることを意味します。
- アプリに反映されているのがわかると思います。追加したものは緑色で表示され、削除したものは赤色で表示されます。
|
 |
|---|
|
|---|
 |
|
 |
|---|
- これで変更内容が保存され、コミットされました。しかしこれらはローカルのみに保存されています。つまりあなたのPCだけにしかありません。
- ローカルの変更をGitHubにあるリポジトリと同期させる操作のことを Push といいます。ローカルリポジトリの変更をGitHub上のリモートリポジトリに「プッシュ」しているのです。
|
 |
|---|
- 数秒後に操作が完了し、このブランチのコピーがローカルとGitHub上に存在することになります。
- いよいよです。プルリクエスト を作成しましょう。
- 現時点ではあなたが行ったすべての作業は、あなたのGitHubにあるフォークで行われています。
- さて、いよいよメインプロジェクトに変更を送り、マージしてもらいましょう。
- この操作のことを プルリクエスト といいます。なぜなら、あなたはメインプロジェクトのメンテナに、あなたの変更を彼らのプロジェクトへ「取り込む」ように依頼するからです。
- あなたがフォークしたプロジェクトのページに行ってください。(フォークのアイコンとあなたの名前が上部に表示されているでしょう)
- リポジトリの上部にハイライトされたプルリクエストのメッセージと緑色のボタンが表示されています。
|
 |
|---|
|
|---|
 |
|
 |
|---|
- やることの多さに混乱せずとも大丈夫です。とりあえずこの3つをやっておけば大丈夫です。
Allow edits from maintainersはチェックを入れたままにしてください。- これでプロジェクトのメンテナに プルリクエスト が送られました。レビューされて承認されると、あなたの変更がプロジェクトのウェブページに表示されます。
完了です。おめでとうございます！ これでGitHubのオープンソースにコントリビュートできました。
あなたのコードがウェブページに追加されました: https://syknapse.github.io/Contribute-To-This-Project
あなたの変更は即時に反映はされません。まず初めにレビューされ、許可、マージの順番でプロジェクトのメンテナによって行われます。マージされるとあなたのカードがウェブページ上で確認できるでしょう。
レビュアーがプルリクエストに変更を求めるのはごく普通のことです。いずれ自身の身に降りかかるでしょうし、いい練習になると考えてください。コメントや要求された変更には目を通してください。要求された変更を行ったら(ブランチに戻ったら)、あとはコミットして変更をプッシュするだけです。PRは自動的に新しい変更を検知して更新してくれます。
私はできる限り早くレビューとマージを行うことを約束しますが、空いている時間で行うため、数日の遅れが発生するかもしれません。
- しばらくしたら、マージされたプルリクエストを確認しに来てください。
- あなたの変更が許可、変更が要求、または最終的にマージされてあなたのカードが追加されたとき、GitHubからメールが来るでしょう。
- もしこのプロジェクトが役に立つと思われたら、ぜひ評価をお願いします。プロジェクトの上部にある:star: star :star:またはツイートして世界中に広めてください
- 私をTwitterでフォローまたはそれ以外でお気軽にお問い合わせください
- このプロジェクトはオープンソースプロジェクトなので、カードを追加するだけではなく、バグの修正や改善、新機能の追加にコントリビュートすることが歓迎されています。issueを作成するか、新しいpull requestを作成してください。
- コミュニティをより良くするために、GitHubのDiscussionsを確認してください。プルリクエストの隣にあるタブです。ここでは自己紹介やオープンソースプロジェクトに関する深い議論、プロジェクトのメンテナーとのコミュニケーションの場です。この機能を作り上げて私たちのコミュニティを強化することに協力していただけませんか？
- このプロジェクトにコントリビュートしていただき、ありがとうございます。これで他のプロジェクトにコントリビュートできるようになりました。
で初心者歓迎でコントリビュートできるものを探してみてください。 - また、PRのレビューやマージに手を貸してくれる協力者も募集しています。もし、もっと高度なGitの練習をしたいのであれば、Twitterで私にDMを送って、メンテナガイドを読んでください。
このプロジェクトは、Roshan Jossey'sの優れたチュートリアルを持つfirst-contributionsに強く影響を受けています。
また、特に#GoogleUdacityScholarsを取り巻く素晴らしいコミュニティに触発されています。The Google Challenge Scholarship: Front-End Web Dev, class of 2017 Europe.
