» 【GitHubDesktop】デザイナーでもコレを使えばできちゃうGitHub!|ホームページ制作・運営からWEBデザイン、ウェブサイト企画作成を行っている名古屋市のホームページ制作会社「ABABAI」

【GitHubDesktop】デザイナーでもコレを使えばできちゃうGitHub!

スタッフブログ

  • 2018.02.21

    【GitHubDesktop】デザイナーでもコレを使えばできちゃうGitHub!

    顔アイコン

    こんにちは、渡辺です。

    いきなりですが… 先延ばしにのばし、避けてさけて、どうにかここまできたものの、

    どうにもこれ以上「GitHub」から逃げられなくなった、そこのデザイナーさん!!

     

     

     

     

    大丈夫です、思ったほど手強くないです、GitHub。

    コマンドなんか覚えなくてもできるんです、GitHub。

    さぁ、怖がらずに今こそ向き合いましょう、Let’s GitHub。

     

     

     

    ということで、今日はGitHubについて書きます。

    さて…

     

     

     

     

    ■Gitとは

    ・プログラムのソースコードのバージョン管理を行うツール

    ・複数の人で同時に開発を進めるための管理ツール

    ・リモートリポジトリとローカルリポジトリというものがある

     

    ■GitHubとは

    ・Gitのリモートリポジトリをweb上に公開できるサービス

    ・ソースを公開すれば、全世界の人と一緒に開発できる

     

     

     

     

     

    ということですが…

    今回は「GitHub Desktop」を説明したいので…

    すみませんが、基礎の基礎知識はこちらのサイトで勉強してください。

     

    「サルでもわかるGit入門」

     

    とりあえず、専門用語だけ最短の言葉で説明しておきます。

     

     

     

     

    ■リポジトリ(repository)

    プロジェクトのデータを保存しておく場所。

     

    ■リモートリポジトリ

    GitHub上のリポジトリ。

     

    ■ローカルリポジトリ

    自分のPC内のリポジトリ。

     

    ■プル(pull)

    ローカルリポジトリをリモートリポジトリと同期させること。

     

    ■コミット(commit)

    ファイルの追加や変更の履歴をリポジトリに登録すること。

     

    ■プッシュ(push)

    ファイルの追加や変更の履歴をリモートリポジトリに送信・反映すること。

     

    ■ブランチ(branch)

    作業を細かく枝分かれさせて、それぞれで開発を進めていくためのもの。

     

    ■プルリクエスト(pull request)

    ローカルリポジトリの変更を他の人に確認してもらうこと。

     

    ■マージ(marge)

    枝分かれしたブランチを統合させること。

     

     

     

    例えば、とあるリモートリポジトリ、ローカルリポジトリがすでにあるとして、

    とある開発の流れを専門用語を交えてごく簡単に言うと…

     

     

     

    リモートリポジトリからローカルリポジトリへプルする。

    ースを編集してコミットする。

    コミットしたやつをリモートリポジトリへプッシュ。 あるバグが見つかったので、修正のためのブランチを作る。

    バグ修正のソースをローカルリポジトリにコミット。

    そいつをリモートリポジトリへプルリクエスト。

    他の開発者とやりとりがあり、ソースがフィクス。

    masterブランチにマージしてもらい、バグ修正完了。

     

     

     

    なんのこっちゃ??

    デザイナーには辛い…ほんとに。

    …しかし、これは専門用語に慣れるしかないですね。

     

     

     

    ということで、やってみなきゃ始まらない!

    深く考えずGitHubしてみましょう♪

     

     

     

    まずは、GitHubにアカウントを作ります。

     

     

     

    【1】GitHubにアカウントを作る

     

    00

     

     

     

    https://github.com/

    ここにアクセスしサインアップします。

     

     

     

    01

     

     

     

    どうせ英語だろうからガイドはすっとばしStart!

    プロジェクトを作ってみましょう。

     

     

     

    02

     

     

     

    非公開は有料なので、惜しげもな公開しちゃいます。

    readmeはライセンスなどの記述をしておくものです。

    入ったはいいけど、いきなり壁にぶちあたります。

     

     

     

    03

     

     

    さて、この画面からどうしたもんか…。

     

     

     

    ここで!!!

    「GitHubDesktop」の登場です。

    とりあえず、何も考えずダウンロードしてみてください。

     

     

     

    04

     

    https://desktop.github.com/

     

     

     

    簡単に言うと、

    GitHubDesktopとは

     

     

     

    ・コマンド打てない(打つのが面倒な)人がGitHubを簡単に使える

    ・Mac/Windows用あり

    ・GitHub公式クライアント

     

     

    というものです。

     

     

     

    【2】GitHubDesktopを起動

     

    ダウンロードしたGitHubDesktopを開いてみます。

     

     

    【3】ローカルリポジトリの設定

     

    先ほどGitHub上で作ったプロジェクトにつないでみます。

    ローカルリポジトリを設定します。

     

    メニュー > File > Clone Rpository

     

    を開き、GitHub上の「clone or download」ボタンを開いたときに表示されるURLペーストします。

     

     

     

    05

     

    ローカルの場所も指定して、「clone」ボタンを押す。

     

     

     

    06

     

     

     

    これでローカルとリモートがつながれました。

     

     

     

    07

     

     

    【4】ローカルリポジトリにコミット

    ファイル(binbou.html)を作ってローカルリポジトリに加えてみます。

    SummaryとDecriptionを入力してコミットします。

     

     

     

    09

     

     

     

    Historyを開くと、きちんと履歴がのこされています。

     

     

     

    10

     

     

    【5】リモートリポジトリにプッシュ

    ローカルリポジトリにコミットしたやつをリモートリポジトリにプッシュしてみます。

    「Push orugin」を押すだけ。

     

     

     

    11

     

     

     

     

    リモートリポジトリを確認してみると、ファイルが追加されています。

     

     

     

    12

     

     

     

    ボタンひとつでナント簡単!

     

     

     

    では、調子に乗って次に行ってみます。

     

    【6】ブランチを作る

    ローカルリポジトリにブランチを作ってみます。

     

    Branch > New branch

     

    を開くき、ブランチ名を入力。

     

     

     

    13

     

     

    【7】ローカルリポジトリにコミット

    binbou.htmlに修正を加えコミットし、Publish branchします。(上の流れと同じ)

     

     

     

    14

     

     

     

    Github上でも新しいブランチが確認できました。

     

     

     

    15

     

    【8】リモートリポジトリにプルリクエスト

    初めてのプルリクエスト♪…ドキドキドキドキ

    (今回は自作自演ですけど)

    「New pull request」をクリック。

     

     

     

    16

     

     

     

    コメントを入力して、「Create pull request」

     

     

     

    17

     

     

    【9】GitHubでプルリクエストを確認

    プルリクエストがあるか確認できます。

    せっかくなんでコメントしてみましょう。

    (今回は自作自演ですけど)

     

     

     

    18

     

    【10】マージ

    修正がOKになったので、masterブランチにマージします。

    「marge pull request」をクリックし、「Confirm marge」をクリック。

     

     

     

    20

     

     

     

    「Pull request successfully merged and closed You’re all set—the add-pokkun branch can be safely deleted.」

    とのメッセージがでてくるので、マージ大成功!ブランチ完了♪

     

     

     

     

    今回は大丈夫でしたが、このマージの際に競合(コンフリクト)が起こる事があります。

     

    競合とは、 開発途中で同じ箇所に修正が入ってしまった場合のことです。

    Gitではコンフリクトが起きたときは以下のようにソースに書かれます。

    どちらの修正を生かすのかは手動で修正しなければいけません。

     

     

     

    21

     

     

     

    という感じで、開発は進んでいきます。

    「GitHubDesktop」を使えば、何とかデザイナーでもGitHubに参加することができました!

    コマンド一文字も打ってません!!

    デザイナーのみなさん、どうでした? 多少でもGitHubのハードルが下がったら幸いです♪♪♪

    フェイスブックシェアボタン

名古屋で1番真面目なウェブ会社!! ABABAI お電話でのお問い合わせはこちら

メールでのお問い合わせ リンクボタン

資料請求 リンクボタン

カレンダー

2018年12月
« 11月    
 12
3456789
10111213141516
17181920212223
24252627282930
31  

MENU

求人情報本社・広島オフィス

お問い合わせ

資料請求

ページの先頭へ

お問い合わせ

  • メールでのお問合せ リンクボタン
  • 資料請求 リンクボタン

閉じる

アババイめちゃ凄いこと

建築会社に選ばれる5.5の理由

制作実績

お客様の声

スタッフ紹介

代表挨拶

新着情報

会社概要&アクセス