hajipion.com

UI/UX designer blog & creative portfolio

Webデザイナーが初めてGitを使うときに見ると幸せになれるメモ (2/3)

SourceTreeでGit管理

前回↓
» Webデザイナーが初めてGitを使うときに見ると幸せになれるメモ (1/3)

続きです(´ ▽`)ノ

Gitを使ってみよう(ソースツリー編)

前回はGitで出来ることと、その際に使ういくつかのキーワードについて触れました!

今回は、「ソースツリー」というアプリケーションを使って実際にGitを使ってみようと思います(^^)

「ローカルにあるファイルを編集」「ステージ」「コミット」「プッシュ」という流れでしたね〜。ちょっと最初は小難しいかもしれませんが、せっかくなので、今回全部やっちゃいましょう!

あ、今回の記事はMacに限定させていただきますね…m(__)m

「ソースツリー」のインストール

まずインストールです!

SourceTree

「SourceTree」とぐぐればダウンロードページが出てくるので、ダウンロードして展開しましょう!

↓起動するとこのような画面が出てくるはずなので、名前とメールアドレスを入力して「次へ」。

SourceTree

↓次に出てくる画面はスルーしちゃいましょう( ̄▽ ̄)

SourceTree
SourceTree

これで準備完了です!次は「ローカルリポジトリをつくりましょう〜。

ローカルリポジトリを作成

「ローカルリポジトリ」は↓ここでしたね!

Gitの流れまとめ

覚えてますか?(笑)

リポジトリのタイプを「Git」、リポジトリ保存先は任意なところで構いませんが、ここでは練習用にデスクトップにtest1というローカルリポジトリをつくります。

ローカルリポジトリ作成

そうするとソースツリーのブックマークに「test1」というリポジトリが追加されます。

ローカルリポジトリ作成

masterというのはブランチの名前ですが、この記事ではブランチについてあまり触れないことにします( °ω° ) 次回はちょっと触れるかもしれませんが、まずはGitを使ってみることに専念しましょうね〜

このローカルリポジトリ「test1」をダブルクリックすると、こんな画面がでると思います。

test1メイン画面

これが「test1」のメイン画面ですね。

お待たせしました!

それでは適当なhtmlファイルをつくって、Git管理してみましょう!

htmlファイルをGit管理してみよう

ではまず、以下の様なhtmlファイルをつくります。

コミットしてみる

(エディタは何でもいいですが、Sublime Text 2オススメです)

そして、先ほどつくったデスクトップ上の「test1」フォルダに保存しましょう。

名前はここでは「index.html」にしておきます。

インデックスエリアへステージ

↓この図をもう一度みてみましょう。

Gitの流れまとめ

今「index.html」はワークツリー上にあります。まずはインデックスエリアにステージにしなければなりません。

ソースツリーをみてみると、たしかに「作業ツリーのファイル」の中に「index.html」がありますね。

コミットしてみる

画面の右側は選択している「index.html」のソースコード!ソースツリーはファイルの中身までこのように楽に見れてしまうのです!便利ですね〜( ̄▽ ̄)

さてこのファイルを、上の「indexにステージしたファイル」の中にいれなければなりません。

方法は2つあります。ドラッグ&ドロップするか、右画面の「ファイルをステージへ移動」をクリック!

コミットしてみる

そうすると、狙い通りインデックスエリアに移動したことが確認できると思います。

コミットしてみる

さあ、ステージは終わりました。次は? そう、コミットです。

メッセージをつけてコミット

コミットの仕方は実に簡単、この左上にある「コミット」を押せばいいだけです。

コミットしてみる

ファーストコミット

「コミット」を押すと、このような画面が出てくると思います。

コミットしてみる

コミットメッセージに「First Commit」と書き込み、コミットします。

Git管理では一番最初のコミットに「First Commit」などと書き込む慣習があるようです(^^)

さて、ソースツリーのメイン画面はどうなったでしょうか。

コミットしてみる

ユーザー名や日時、コミットメッセージと共に、作業した証がローカルレポジトリに刻まれました!おめでとうございます!!

じゃあこのファイルを確認してみよう!

「index.html」をSafariで開いて、と…………ん?

修正コミット

文字化け
なんと文字化けしています!

そっか、この一行をいれるのを忘れていました。

修正コミットしてみる

文字コードを指定してあげなきゃでしたね。

一応Safariで確認のためもう一度開いてみて……あ、今度はオーケーオーケー。

それでは修正のコミットをしてみましょう。ソースツリーのメイン画面をみると、自動でこう変わっています。

修正コミットしてみる

「Uncommitted Changes」……つまり、「まだコミットしてないしてない変更があるよ〜」と教えてくれてるのです。お前は親切か!

その親切にありがたくあやかって、左上の「コミット」を押します。

修正コミットしてみる

コミットメッセージに「文字化け修正」と入れて、コミット……あれ?

修正コミットしてみる

ステージされた変更がありません……??

あ!インデックスエリアにステージしてなかった!

基礎的なところを間違えてしまいましたね。さて、では一度キャンセルしてステージをやり直しましょうか……いやストップ!

実はこの画面からでも、ステージは簡単にできるんですね。左下の「作業ツリーのファイル」から左上の「indexにステージしたファイル」に、「index.html」を移動します。

修正コミットしてみる

このヒューマンエラーというか、「ユーザーがステージせずにコミットボタンを押してしまう可能性」を見越してこのUIを設計したソースツリーのデザイナーはとても優秀なことが推し量れます(^^)

それではここまでの復習ということで、もう1コミット、自分でやってみましょう!

1/26(土)と書きましたが、1/26は日曜日でした。

この修正をコミットしてみてください(^^)

コミットできるかな?
コミットできるかな?

できましたか?( °ω° )

次はいよいよ、アップロード、つまりプッシュです!

GitHubのリモートリポジトリにプッシュ

Gitの流れまとめ

いよいよプッシュのときがやってきました!

今回はGitHubのアカウントを使い、そこで自分のリモートリポジトリを作成し、そこにプッシュすることにしましょう。

GitHubアカウントを持っていないかたは、まず登録してくださいね〜

https://github.com/

GitHubアカウント

リモートリポジトリの作成

ログインすると、トップページの右上の「+」に「New repository」というのがあると思います、それをクリック!

New repository
New repository

するとリポジトリの名前や詳細などをきかれますが、練習用なので適当にしてしまって大丈夫です。ただ、リポジトリの名前はリモートとローカルで同じ名前にしましょうね(^^)

そこで変に複雑にする必要は全くないと思うので(笑)

リモートリポジトリは「Public」と「Private」つまり「世界中に公開する」と「特定の人にしか公開しない」が選べますが、後者を選択するにはお金がかかります!

まあ、そんなに怪しいサイトをつくるわけでなければ、「Public」で全く問題ないでしょう( ̄▽ ̄)

New repository

早速リモートリポジトリが作成されました。

この「https://」から始まるURLをコピーしておきましょう!(URL右のボタンをクリックするだけでコピーできます)

リモートリポジトリへプッシュ

ソースツリーの設定

先ほどのURLをコピーしたら、ソースツリーのメイン画面に戻り右上の「設定」を押しましょう。

すると↓このような画面がでてきます。

ローカルリポジトリとリモートリポジトリをつなげる

リモートの名前は「origin」(これも慣習です、覚えましょう)、URLの部分に先ほどコピーしたものをペースト!

ホスティングサービスはGitHubにして、ユーザ名を書いてOKを押します。

これでローカルリポジトリとリモートリポジトリをつなげることができました。

あとはプッシュするだけです!!

プッシュしてみる

上の「プッシュ」を押しましょう。

ローカルにある「master」というブランチを選択し、OK。

プッシュしてみる

そうすると、今まで「master」だけだった最終コミットの場所に「origin/master」が追加されました!

プッシュしてみる

これはそれぞれ、ローカルリポジトリの「master」ブランチの場所と、リモートリポジトリの「master」ブランチの場所を示しており、2つが同じ場所にあるということはプッシュが成功したということですヽ(´▽`)ノ

つまり、サーバーにもうアップロードされている状態なので、誰でもこのソースとコミット内容をみることができます。

試しにダニエルくんが、はじぴょんのGitHubアカウントを辿り、さきほどつくったリモートリポジトリ「test1」をクローン(自分のところへダウンロード)してみます。

違う人からみたリポジトリ

するとごらんください!「index.html」のファイルだけでなく、誰がいつどのブランチでどのようにコミットしたかという内容まで逐一管理されたリポジトリをダニエルは見ることができるようになりました。

違う人からみたリポジトリ

こうしてチームで、ソースだけでなく、どのように開発されていたかというフローまで見ることができるのが、Gitのいいところですね(。・ω・。)

以上が、ソースツリーにおける超基礎的なGit管理の実践でした!

次はあの黒い画面、ターミナルを使ってGit管理してみましょ〜

あの画面には少し苦手意識を感じるデザイナーも多いかと思いますが、実は慣れてしまうと全く難しくないし、むしろターミナルでやった方がGit管理が楽なこともあるんですよ( ̄▽ ̄)

というわけで、次回はいつになるかわかりませんが、お楽しみに!

(後日追記)続き書きました!↓

» Webデザイナーが初めてGitを使うときに見ると幸せになれるメモ (3/3)