この記事を書いた人
machida

ついさっき、

Dreamweaver

Dreamweaver

Twitter / @jishiha: @machida と思ってお知らせしました。そして僕 ...

ということがありましたので、早速「GitHub for Mac」を使ってみました。@jishihaさんの言うことは正しいので、GitHub for Mac がいいものであることは確かです。

結論を先に言いますが、もし、僕がエンジニアでデザイナーに仕事を依頼するときは、Gitを知らないデザイナーでも、とりあえずMacを使ってるデザイナーに依頼したいと思いました。なぜなら「Github for Mac」があればすぐにGitを使うことが出来るようになるから。ではでは、以下「Github for Mac」のレポートをどうぞ。

GitHub for Macとは

まずは「git」とは?の復習

プログラマーが開発をするときは大体バージョン管理を行うのですが、「git」はそれをするためのバージョン管理システムの一つです。
バージョン管理システムとは、コンピュータ上で作成、編集されるファイルの変更履歴を管理するためのシステムのこと。MacのTime Machineみたいに、プロジェクトを前の状態に戻したりとかをするためのものです。
もしかしたら、この記事を読んでいるデザイナーの中にはSubversionというバージョン管理システムを触ったことがある人もいるかもしれません。まぁ、プログラマーに怒られそうですが、それと同じようなやつです。ただ、gitを使ってる人のほとんどが曰く、「gitの方がいいもの」だそうです(僕もgitに関する知識はこれくらいなので、今のところはここまで)。ちなみにgitの作者はLinuxの作者であるリーナス・トーバルズさんです。

@jishihaさんからgitのわかりやすいメリットの説明をこの記事のコメントでいただきましたので転載。

git と svn の違いは、git の方が格段にブランチが作りやすいなどいろいろあるのですけれど、基本的な使い方だけしていてもわかりやすいメリットは git は .git フォルダひとつだけでレポジトリを管理しているのに対し、svn は .svn は各フォルダごとに作られて散らばっていてうざいというのがあります。
svn 使っていてありがちなのがフォルダを移動してしまうことで、.svn も移動してしまい、おかしなことになってしまい修復するのが面倒というのがあります。git ならレポジトリで管理している一番元となるフォルダ以下の .git さえ触らなければ何の問題もありません。 これひとつだけでも、svn より git を使ったほうが良い理由になると思っています。

「github」とは?の復習も

gitのプロジェクトを置いておくホスティングサービス。プロジェクトのソースコードやそこに使われてる画像ファイルなどを置いておく倉庫のようなものです。webデザイナーなら一度は必ず訪れたことがある「SourceForge.JP」と同じようなものですね。

githubが面白いのは、単なる倉庫として使うだけでなく、githubのユーザーそれぞれが個別のページを持っていて、この人は何を開発しているのかが見れたりすることが出来ます。また、githubに置いてあるプロジェクトを自分のところに持ってきて、元のプロジェクトに手を加えて自分が手を加えたバージョンとして分岐させることも出来たり、その分岐したものを作者に送りつけることも出来ます。

リポジトリの復習も。

バージョン管理をしながらプロジェクトの開発を進めていくにあたって、その内容には実際に作ってるもののファイルの他に、その更新情報も保管する必要があります。例えば、「2月21日にmachidaが画像を追加した」、という情報、「2月23日にkomagataさんがDBの構造を変更した」という情報、「2月24日にmachidaがcssを追加した」という情報、などです。このような更新情報(バージョンと呼びます)をソースコードと一緒に保管することによって、2月24日にmachidaがcssをいじったらサイトのレイアウトが崩れてしまったので、その前のバージョンである、2月23日の状態に戻そう、ということができます。Macをバックアップするアプリ「Time Machine」と同じようなものですね。そのプロジェクトのファイルと更新情報を保管している場所をリポジトリと言います。

…以上、復習でした。

GitHub for Mac は GUI の Git クライアントアプリで、今までさんざんこのKUROIGAMENでやってきた黒い画面(ターミナル)で git コマンドを打つっていうのをターミナルを使わずに、その名の通りボタンをクリックなどをするだけで出来るっていうアプリです。しかも、Github純正で無料。そうそう、 Mac でしか使えません。そこもその名の通り。

インストール

ではでは、早速インストールしてみます。まずはGitHub for Mac へ。

GitHub for Mac

「Download GitHub for Mac」をクリック。

Github

解凍して現れたアイコンをアプリケーションフォルダへ。

Dreamweaver

ちょっと話がそれますが、アイコンを拡大してみると、なんか目が光ってていつもの奥とキャットと違う感じ。

Github

ちなみに、こちらがいつものオクトキャット。こっちのほうが可愛い!

octocat.png (480×480)

セッティング

では、早速起動してみます。まずは、Preferences。

スクリーンショット(2011-07-31 0.38.28).png @ 100% (RGB/8*)

Githubの登録情報を入力。

Preferences

自分のGithubに置いてるプロジェクトが表示されました。

GitHub

これで設定は完了。IDとPASSWORDだけで公開鍵と秘密鍵は不要。なんて楽チン!

リポジトリを作ってみる

まずは、右下の「New Repositry」ボタンを試したいと思います。

GitHub

クリックすると、

  • 「Name」…プロジェクトの名前
  • 「Description」…プロジェクトの説明
  • 「Local Path」…自分のMac内のプロジェクトのファイルが置いてある場所

を入力する画面が表示されました。

GitHub

入力完了。今回は「test-github4mac」というリポジトリを作りました。「test-github4mac」という名前のディレクトリは作りましたが、中身はまだ空です。

「Keep this code private」は、このプロジェクトを他人が見られないようにする場合チェックを入れるのですが、その機能を使うにはGithubの有料プランに加入していないと使えません。今回は別に隠す必要はないのでチェックは外します。

「Local Path」はデフォルトでは「github」というディレクトリを指定されてますが、僕の場合は「Sites」というディレクトリに開発するプロジェクトを入れているので、今回もそこを指定しました(今回のパスは「/Users/machida/Sites/test-github4mac」)。

GitHub

※ ↑ このキャプチャ、ミスってパスが「/Users/machida/Sites/test-github4mac/test-github4mac」になってしまいましたが、ここはスルーしてください

Githubのサイトに行ってみると…

Dreamweaver

「test-github4mac」というリポジトリが作られてました!

Githubにpush

入力後、右下の「Create Repositry」ボタンをクリックすると、「test-github4mac」が出現。

GitHub

「test-github4mac」の右にある矢印をクリックしてみます。

GitHub

「test-github4mac」まだ空だし、まだ一回もコミットをしていないので「No Commits」と表示されてます。

では、空の「test-github4mac」ディレクトリに「index.html」というファイルを置いてみます。

test-github4mac

Github for Mac に戻って、「Changes」タブを開いてみます。すると、「index.html」を追加したことが表示されました。

Dreamweaver

「Collapse All」ボタンをクリックすると、ファイルの内容が確認出来ます。便利!

Dreamweaver

この画面の「Commit summary」の部分に、今回の変更した内容(今回は「index.html」を追加、という変更を行った)を書き入れて、もっと詳しい説明は、「Extended description」に入力。入力が完了したら「Commit Changes」ボタンをクリック。

Dreamweaver

こうなりました。

Dreamweaver

これでコミットは完了。ローカルリポジトリ(自分のMac上のリポジトリ)が更新されました。では、続いてpushしてGithubにあるリモートリポジトリを更新します。

「Github for Mac」の「Branches」タブをクリック。「Publish」ボタンをクリックします。

GitHub

これでpush完了。では、またGithubのサイトに行ってみます。

Dreamweaver

変更が反映されてる!

これはすごく簡単。黒い画面を使わずにちゃんとGitが使えました。Github for Macすごい!

今度はすでにあるリポジトリをクローン、フォーク、別ブランチ作成などに挑戦していきたいと思います。

最新の実績

  • Remember The Wordpress
  • happy1000days
  • happy1000days
  • happy1000days

こちらも合わせてどうぞ

  • webデザイナーの為の「本当は怖くない」“黒い画面”入門

アフィリエイト