Skip to content

Latest commit

 

History

History
286 lines (180 loc) · 33.7 KB

File metadata and controls

286 lines (180 loc) · 33.7 KB

image info

Tweet

Discord

GitHub forks GitHub stars GitHub watchers

お知らせ:

このプロジェクトのメンテナになって、プロジェクトの継続を支援しませんか? もし興味があれば、メンテナガイドを確認してTwitterにてDMを送ってください。

はじめに

このチュートリアルは、初めてコントリビュートする人に向けて、シンプルで簡単なプロジェクトに参加できるようにするためのものです。

目的

  • オープンソースプロジェクトにコントリビュートしよう。
  • GitHubの使い方をより快適にしよう。

誰のため?

  • このプロジェクトは全くの初心者向けです。アンカータグ<a href="" target=""></a>の書き方や編集の仕方がわかっていれば、できるでしょう。
  • また、少し経験はあるけれども初めてオープンソースにコントリビュートしたい方やコントリビュートすることで経験や自信をつける方にもおすすめです。
なぜコントリビュートするのか

Web開発者であれば、意欲的だろうと経験豊富だろうと、Gitを使う必要があり、GitHubは誰もが使う最も人気のあるGitホスティングサービスです。また、オープンソースコミュニティの中心地でもあります。GitHubを使いこなすことは必須スキルです。プロジェクトに貢献することで自身がつき、GitHubのプロフィールに記載できるようになります。
もしあなたがデベロッパーなりたてで、GitとGitHubを学ぶ必要性があるのかどうかを迷っているのであれば、これを見てください: You Should've Learned Git Yesterday

なにをコントリビュートするのか?

Contributor Card

このプロジェクトのウェブページに、このようなカードをコントリビュートしてもらいます。カードの中身には、あなたの名前、Twitterのハンドルネーム、簡単な説明、そしてあなたがおすすめするウェブ開発者向けのリンクを3つ掲載します。

HTMLファイルの中に、カードのテンプレートのコピーを作り、自分の情報に置き換えます。

目次

Contribute:

セットアップ! :)

まず作業をするためのセットアップをしましょう。

  1. あなたのGitHubアカウントでログインしてください。もし持っていない場合はアカウントを作りましょうGitHub Hello World tutorialをやってからこのセットアップを続けることをおすすめします。
  2. GitHub Desktopをダウンロード。
    • もしVS Codeを使っているのであれば、VS Code内で統合されているエディタからGitの操作を行うことができます。
    • しかしながら、このチュートリアルに従う最もシンプルで簡単な方法はGitHub Desktopを使うことです。

コントリビュート

10個の簡単な手順でオープンソースコントリビューターになりましょう。

所要時間: 30分以内

1. このリポジトリをフォーク
  • ここでの目的は、このプロジェクトのコピーを自身のアカウントに置くことです。
  • リポジトリ(リポ)とは、GitHub上のプロジェクトの呼び方で、フォークとはそれをコピーするという意味です。
  • メインページにいることを確認してください。
  • Fork ボタンをクリックしてください
Fork
  • これでこのプロジェクトの完全なコピーがあなたのアカウントにあることを確認できるでしょう。

2. リポジトリをクローン
  • ここでの目的は、プロジェクトのローカルコピーを作成していくことです。これは自分のPCにコピーを作るという意味です。
  • GitHub Desktopを開いてください。 そのアプリで
  • File をクリックし、 Clone repository クリック
Clone
  • あなたのGitHubにあるプロジェクトとフォークされたプロジェクトが見れるでしょう。
  • <あなたのGitHubユーザ名>/Contribute-To-This-Projectを選択してください。
  • Clone をクリックしてください。
Clone project
  • フォークされたプロジェクトは、左側にフォークのアイコンが表示されます。
  • フォークにはあなたのGitHubユーザ名がつきます。
your fork
  • プロジェクトがハードディスクにコピーされるため、しばらく時間がかかるでしょう。デフォルトのパスは..\Documents\GitHubのままにしておくことをおすすめします。
  • これでプロジェクトのローカルコピーができました。

3. 新しいブランチを作る
  • リポジトリをクローンして、GitHub Desktopでそれを開いたら、新しいブランチを作成しましょう。
  • ブランチとは、masterと呼ばれるプロジェクトのメインブランチから自分の変更したものを切り離しておくための方法です。例えば、何かしらの変更を別のブランチで行っていて、変更に満足できなかったときはそのブランチを削除するだけで、メインプロジェクト(master)に影響を与えることはありません。
  • Current branch をクリック
  • そして New をクリック
Create branch
  • ブランチに名前をつけましょう
  • Create branchをクリック
Name branch
  • ブランチには好きな名前をつけることができますが、ここでの目的は自分の名前のカードを追加するためのブランチなので、あなたの名前-cardと呼ぶと、このブランチの意図が明確になり、よい練習になるでしょう。
  • 新しいブランチをGitHubに公開する
Name branch
  • これで、masterとは別の新しいブランチを作成することができました。
  • 次のステップでは、このブランチで作業していることを確認してください。GitHub Desktopの中央上部にある Current branch に現在のブランチの名前が表示されています。

masterブランチでは作業しないでください


4. index.htmlを開く
  • これから編集するファイルをお好みのコードエディタで開いてください。
  • あなたのPCにコピーされたプロジェクトがあるフォルダを探してください。デフォルトだとあなたのPC > Documents > GitHub > Contribute-To-This-Projectにあるでしょう。
  • index.htmlContribute-To-This-Projectフォルダ直下にあります。
  • あなたの好きなコードエディタ(Sublime, VS Code, Atom..etc)を開き、ファイルを開くコマンドを使い、index.htmlファイルを開いてください。
  • または、ハードディスクにあるファイルを右クリックし、エディタで開くこともできます。
Open index file
  • これで編集するファイルをエディタで開き、更新する準備ができました。

5. カードのテンプレートをコピー
  • カードのテンプレートをコピーして、作業を開始します。
  • htmlファイルの先頭の<head><header>セクションの下に== TEMPLATE ==というラベルのついたセクションを見つけることができます。
  • 画像の赤い四角の中にある、Contributor card STARTのコメントからContributor card ENDのコメントまでの全てをコピーします
Copy card template
  • Paste YOUR CARD directly BELOW this lineコメントの直下にコピーした内容を貼り付けます。
  • 貼り付けたカードの最初の上と最後の下に1行のスペースがあることを確認してください。コードをできる限り分かりやすくすることはいい練習です。
  • リンターやフォーマッターは絶対に使用しないでください。このプロジェクトではPrettierの設定がされています。
Paste card template
  • このカードはあなたが編集するためのものです。

6. 変更を適用する
  • これからhtmlの編集を行い、カードのカスタマイズ可能なフィールドを変更していきます。
  • 'Name'をあなたの名前に変更しましょう
  • 重要: class="name"は変更しないでください
Change name
  • あなたのTwitterアカウントのURLを入れましょうhref="Insert URL here"
  • あなたのハンドルをテキストフィールドに入れてください
Change contact
  • Twitter以外を使う場合は、Twitterアイコン<i class="fa fa-twitter"></i>を別のものに置き換えましょう。Font Awesome Iconsで置き換えるものを検索して、fa-twitterを別のものに置き換えてください。例えばfacebookの場合は、fa-facebookです。その後上記と同じ手順を踏んでください。
  • あなたについて教えてください
  • 短くまとめてください。ブログの記事というより、つぶやきのように考えてください。
Change about
  • Web制作に役立つようなリソースへのリンクを3つ選んでください。
  • これはなんでもいいです。動画、トーク、ポッドキャスト、記事、参考文献、ツールなど。
  • あなたが初心者でも安心してください。基礎的なことでも、知っていることを教えてください。御毒ほど多くの人が恩恵を受けることでしょう。
Change resources
  • リンク: href="here"に、#を置き換えて入力してください
  • タイトル: title="here"に簡単なタイトルを書いてください
  • 名前: >here</a>にリソースの名前をテキストフィールドに入力してください
  • 変更内容をすべて保存したことを確認してください。
  • 変更内容をテストしてください。 これは特に重要です!htmlファイルをブラウザで開き(ダブルクリックで開けます)、あなたのカードがどのように見えるかを確認してください。ページ全体を見て何も壊れていないことと、あなたのリンクがクリックしてちゃんと動作していることを確認します。コンソールを開き(Ctrl + Shift + J (Windows / Linux) または Cmd + Opt + J (Mac))、エラーメッセージがないことを確認します。
  • さて、これでコードの編集が完了しました!次は変更をコミットし、メインプロジェクトにマージするためにGitHubへ変更内容を送信します。

7. 変更をコミット
  • GitHub Desktopに戻ります。
  • あなたが変更したファイルがステージングエリアに追加されていることを確認できるでしょう。
  • これはGitがすべての変更点を記録していることを意味します。
  • アプリに反映されているのがわかると思います。追加したものは緑色で表示され、削除したものは赤色で表示されます。
  • 次は Commit というものを行います
  • この意味は大まかにいうと、変更を確認する、という意味です
Commit changes
  • GitHub Desktopのヘッダーはこのようになっているでしょう
  • Current Repositoryのプロジェクト名の横にあるフォークのアイコンに注目してください
  • あなたのCurrent branchが手順3で行ったブランチ名になっていることを確認できるでしょう
Commit changes
  • Commit するには Summary フィールドを埋める必要があります
  • これはあなたが何を変更したかを説明するコミットメッセージです
  • ここでは"Add my card information"(私のカード情報を追加)が分かりやすいでしょう
  • 任意でより細かい 説明 を追加することができます
  • Commit ボタンをクリックしてください。ボタンがCommit to "あなたのブランチ名"となっているでしょう。
Write commit message and commit

8. GitHubにあなたの変更内容を送信
  • これで変更内容が保存され、コミットされました。しかしこれらはローカルのみに保存されています。つまりあなたのPCだけにしかありません。
  • ローカルの変更をGitHubにあるリポジトリと同期させる操作のことを Push といいます。ローカルリポジトリの変更をGitHub上のリモートリポジトリに「プッシュ」しているのです。
  • Push ボタンをクリックしてください
Push to GitHub
  • 数秒後に操作が完了し、このブランチのコピーがローカルとGitHub上に存在することになります。

9. PRを作成(プルリクエスト)
  • いよいよです。プルリクエスト を作成しましょう。
  • 現時点ではあなたが行ったすべての作業は、あなたのGitHubにあるフォークで行われています。
  • さて、いよいよメインプロジェクトに変更を送り、マージしてもらいましょう。
  • この操作のことを プルリクエスト といいます。なぜなら、あなたはメインプロジェクトのメンテナに、あなたの変更を彼らのプロジェクトへ「取り込む」ように依頼するからです。
  • あなたがフォークしたプロジェクトのページに行ってください。(フォークのアイコンとあなたの名前が上部に表示されているでしょう)
  • リポジトリの上部にハイライトされたプルリクエストのメッセージと緑色のボタンが表示されています。
  • Compare and pull requestをクリックしてください
Submit a Pull Request
  • Open a pull requestページはこのように表示されているでしょう。
  • 確認してください このブランチはフォークのmasterブランチに対してではなく、元のプロジェクトに対してマージしようとしています
  • 以下の画像はプルリクエストのヘッダーです。
  • 左側が元のプロジェクトのmasterブランチで、右側はあなたのフォークであり、あなたのブランチです。
Open a Pull Request
  • プルリクエストを作成してください。
  • タイトルを入力してください
  • 任意の情報を概要欄に入力してください
  • Create pull requestをクリックしてください
Submit a Pull Request
  • やることの多さに混乱せずとも大丈夫です。とりあえずこの3つをやっておけば大丈夫です。
  • Allow edits from maintainersはチェックを入れたままにしてください。
  • これでプロジェクトのメンテナに プルリクエスト が送られました。レビューされて承認されると、あなたの変更がプロジェクトのウェブページに表示されます。

10. おめでとう!!

完了です。おめでとうございます! これでGitHubのオープンソースにコントリビュートできました。

あなたのコードがウェブページに追加されました: https://syknapse.github.io/Contribute-To-This-Project

あなたの変更は即時に反映はされません。まず初めにレビューされ、許可、マージの順番でプロジェクトのメンテナによって行われます。マージされるとあなたのカードがウェブページ上で確認できるでしょう。

レビュアーがプルリクエストに変更を求めるのはごく普通のことです。いずれ自身の身に降りかかるでしょうし、いい練習になると考えてください。コメントや要求された変更には目を通してください。要求された変更を行ったら(ブランチに戻ったら)、あとはコミットして変更をプッシュするだけです。PRは自動的に新しい変更を検知して更新してくれます。

私はできる限り早くレビューとマージを行うことを約束しますが、空いている時間で行うため、数日の遅れが発生するかもしれません。



次にすること

  • しばらくしたら、マージされたプルリクエストを確認しに来てください。
  • あなたの変更が許可、変更が要求、または最終的にマージされてあなたのカードが追加されたとき、GitHubからメールが来るでしょう。
  • もしこのプロジェクトが役に立つと思われたら、ぜひ評価をお願いします。プロジェクトの上部にある:star: star :star:またはツイートして世界中に広めてください Tweet
  • 私をTwitterフォローまたはそれ以外でお気軽にお問い合わせください
  • このプロジェクトはオープンソースプロジェクトなので、カードを追加するだけではなく、バグの修正や改善、新機能の追加にコントリビュートすることが歓迎されています。issueを作成するか、新しいpull requestを作成してください。
  • コミュニティをより良くするために、GitHubのDiscussionsを確認してください。プルリクエストの隣にあるタブです。ここでは自己紹介やオープンソースプロジェクトに関する深い議論、プロジェクトのメンテナーとのコミュニケーションの場です。この機能を作り上げて私たちのコミュニティを強化することに協力していただけませんか?
  • このプロジェクトにコントリビュートしていただき、ありがとうございます。これで他のプロジェクトにコントリビュートできるようになりました。Good First Issueで初心者歓迎でコントリビュートできるものを探してみてください。
  • また、PRのレビューやマージに手を貸してくれる協力者も募集しています。もし、もっと高度なGitの練習をしたいのであれば、Twitterで私にDMを送って、メンテナガイドを読んでください。

謝辞

このプロジェクトは、Roshan Jossey'sの優れたチュートリアルを持つfirst-contributionsに強く影響を受けています。

また、特に#GoogleUdacityScholarsを取り巻く素晴らしいコミュニティに触発されています。The Google Challenge Scholarship: Front-End Web Dev, class of 2017 Europe.

プロジェクト情報

Licence Badge

Hibi-Ciento Project Maintenance GitHub issues

プルリクエスト情報:

Repo PR's Open PR's Close PR's Merged PR's

Repo Stat

メンテナ達

Repo Contributors

GitHub Contributors Image

トップへ戻る ↑