前回でgithubを使う準備は整いましたので（アカウント登録、鍵の作成、gitコマンドを使うためにgitをHomebrewでインストール）、今回は実際にgitコマンドをバシバシ使って、gihubのサービスを利用してみたいと思います。
「リポジトリ」を作成。
バージョン管理システムを使う場合、「リポジトリ」という言葉がしょっちゅう出てきます。まずはリポジトリという言葉の意味を調べてみましょう。
リポジトリとは？
バージョン管理をしながらプロジェクトの開発を進めていくにあたって、その内容には実際に作ってるもののファイルの他に、その更新情報も保管する必要があります。例えば、「2月21日にmachidaが画像を追加した」、という情報、「2月23日にkomagataさんがDBの構造を変更した」という情報、「2月24日にmachidaがcssを追加した」という情報、などです。このような更新情報（バージョンと呼びます）をソースコードと一緒に保管することによって、2月24日にmachidaがcssをいじったらサイトのレイアウトが崩れてしまったので、その前のバージョンである、2月23日の状態に戻そう、ということができます。Macをバックアップするアプリ「Time Machine」と同じようなものですね。そのプロジェクトのファイルと更新情報を保管している場所をリポジトリと言います。
githubにリポジトリを作ってみる
では早速、githubにリポジトリを作ってみましょう。
まずは、githubに行って前回作ったアカウントでログインをします。
「新しいリポジトリ」ボタンをクリック。
「プロジェクト名」、「説明」、「ホームページのURL」を入力します（「説明」、「ホームページのURL」はオプションなので入力しなくてもOK）。今回は、「KUROIGAMEN-msessage-board」という素のHTMLファイル一枚だけのプロジェクトを作成する予定です。入力が終わったら「リポジトリを作る」ボタンをクリック。
すると、次に行う手順が表示されます。
ここにも表示された手順をコピペしておきます。
全体設定
ダウンロードおよびインストール Git
git config --global user.name "Your Name"
git config --global user.email machidanohimitsu@gmail.com
次の手順:
mkdir KUROIGAMEN-massage-board
cd KUROIGAMEN-massage-board
git init
touch README
git add README
git commit -m 'first commit'
git remote add origin git@github.com:machidanohimitsu/KUROIGAMEN-massage-board.git
git push origin master
この後に出てくる、「すでにGitが…」と、「Subversionのリポジトリを…」は今回は関係ないのでカットしました。
「全体設定」のはじめにある、「ダウンロードおよびインストール Git」は前回Homebrewでgitをインストールしてるので大丈夫ですね。
「git cofig」
続いて、「git」というコマンドに「config」という引数を付けたコマンドが二回続きますが、こちらは個人の識別情報を登録するコマンドです。このコマンドであなたの名前とメアドを登録することによって、今後のgitを使って更新を行う際、この更新はあなたが行った更新、ということが更新内容とともに記録され、リポジトリに蓄積されていきます。
ちなみに、「~/.gitconfig」を覗いてみると、「git config」で設定した内容が書きこまれているのを確認することができます。今回は「open」コマンドを使って確認してみましょう。
open ~/.gitconfig
出た！ちゃんと書いてある。
「mkdir」
「次の手順」はなんかたくさんコマンドが出てますが、一つ一つそのまま打っていくだけで手順が完了します。でも、せっかくのgithubを触った最初のこの機会なので一つ一つのコマンドを見ていきましょう。
mkdir KUROIGAMEN-massage-board
「mkdir」はずっと前にやったので問題なしですね。一応、「KUROIGAMEN-massage-board」というフォルダを作るという意味。
「cd」
cd KUROIGAMEN-massage-board
「cd」もずっと前にやりました。ディレクトリ「KUROIGAMEN-massage-board」に移動するという意味
「git init」
git init
またもや「git」コマンドが出てきました。これは「gitリポジトリを作成する」というコマンドです。初めてここで「git init」コマンドを打ったことによって、「KUROIGAMEN-massage-board」というディレクトリの中身は、「git」で管理されたプロジェクトのリポジトリになったのです。これは今後も覚えておいたほうがよさそうなコマンド。
「touch」
touch README
「touch」、これも前にやりましたね。「README」という空ファイルを作る、というコマンドです。
git add README
またまた「git」コマンドの登場。さっきやった「git init」というコマンドを打っても、実はまだリポジトリにファイルもフォルダも登録してない状態です。ここで「git add」というコマンドを使い、gitのリポジトリにファイルやフォルダを追加させます。「add」は「足す」という意味なので、リポジトリに「README」ファイルを足す、というコマンドです。これで、「KUROIGAMEN-massage-board」リポジトリに「README」ファイルが追加されました。このコマンドはこれから何回も使います。
「git commit」
git commit -m 'first commit'
また「git」コマンド。今度は「git commit」です。
バージョン管理システムには「コミット」という言葉が必ず出てくるのですが、今使っている「git」の場合はローカルのリポジトリを更新する、今のリポジトリの状態をバージョンとして保存する、という意味です（これが別のバージョン管理システムの「Subversion」だとまた意味が変わってきますが、それはカットで）。ここは後で説明する「push」と合わせて見たほうがわかりやすいので、「push」のときにもう一度一緒に確認しましょう。
コマンドのあとに「-m」オプションが付いてますね。このオプションはメッセージを添える、というオプションです。今のリポジトリを保存する、という意味の「git commit」ですが、その保存をするときに「何をしたのか」、というメッセージを書いておくと、あとでバージョンを戻すときなんかに、このバージョンまで戻すとどうなるか、というのがわかりやすくなります。今回の場合は「first commit」、「最初のコミットですよ」というメッセージを添えてコミットされてますが、今後デザイナーは「added images」とか「fixed reset.css」なんていうコミットメッセージを書いていくことになります（別に日本語でもいいのですが、英語だと格好いい）。
で、一応「git commit -m 'first commit'」をまとめると、「git add」で「README」というファイルをリポジトリに追加しましたが、空だったリポジトリから「README」を追加したその状態のバージョンを「first commit」というメッセージを添えて作成した、というコマンドになります。
「git remote add origin」
git remote add origin git@github.com:machidanohimitsu/KUROIGAMEN-massage-board.git
はい、また「git」コマンドです。「git」はとても高機能なものらしくて、プログラマーさんでも全ての「git」の機能を把握している人は少ないってくらいだそうです。全てを知らなくても使っていけるものなので怖がらなくて大丈夫。
「remote」とは、物理的に離れててネットワークなどで繋がっている別のコンピューター（環境）という意味で、オリジン弁当でお馴染みの「origin」は言葉、「源」、「元」という意味です。「add」は「足す」ですね。「git@github.com:machidanohimitsu/KUROIGAMEN-massage-board.git」はgithub上に用意されたこのリポジトリを置く場所です。
「git」で作業をしていくときは、ローカルリポジトリを更新して、これでOKという状態になったら、外の場所（今回はgithub）に置かれたリポジトリに、更新されたローカルリポジトリの状態を反映させます。つまり、外に置かれたリポジトリがプロジェクトの「源」になっている訳で、それをローカルに持ってきて、ローカルでいじって、また源に戻す、という作業の繰り返しです。
「remote」ローカルの外にある「git@github.com:machidanohimitsu/KUROIGAMEN-massage-board.git」をプロジェクトの「origin」源として「add」登録（追加）します、というコマンドになります。このコマンドを打つことによって、次に説明する「git push」というコマンドを打ってローカルリポジトリの状態を外に反映させる先が「git@github.com:machidanohimitsu/KUROIGAMEN-massage-board.git」になる、と設定されます。
「git push」
git push origin master
最後のコマンドもgitコマンド。先程ちょこっと触れた「git push」の登場です。「git push」は、ローカルリポジトリの更新された状態を外に反映させる、というコマンドです。「git push」で「orign master」にローカルリポジトリの内容を反映させる、という意味。先程、「git@github.com:machidanohimitsu/KUROIGAMEN-massage-board.git」
を「orign master」として登録しましたから、「git@github.com:machidanohimitsu/KUROIGAMEN-massage-board.git」に、空だったリポジトリから「README」ファイルを追加したローカルリポジトリの状態を反映する、というコマンドになります。
これで無事にgithubに自分のプロジェクトのリポジトリを作ることが出来ました。では、実際にgituhubを使って具体的にどのように作業を進めるかについて説明しておきたいと思います。
- githubにリポジトリを作る
- READMEファイルを作ったものcommitしてpushする（さっきまでやってた作業）。
- ローカルリポジトリをいじる（HTMLをいじったり、cssを変えたり、画像を追加したりなど）
- きりのいいところでローカルリポジトリを更新する（commit）
- 3~4の作業をループする。
- そろそろ第三者に見られてもいいかなぁ、という状態になったら、githubにpushする
…という感じです。
では、「KUROIGAMEN-massage-board」というgithubに登録したリポジトリを更新してみます。
フォルダ「KUROIGAMEN-massage-board」内にindex.htmlというHTMLファイルを作りました。
この状態から…
index.htmlを追加！
フォルダにファイルを追加しても、まだ「index.html」はバージョン管理の中には追加されていません。ファイル「index.html」を「git add」して、gitのバージョン管理に追加します。
git add index.html
これで「index.html」もバージョン管理の中に追加されました。
次に、この状態（index.htmlが追加された状態）をcommitします。「added index.html」というメッセージも添えておきましょう。それと、これが大事なのですが、commitをする際に「-a」というオプションを付けます。これを付けることによって、前回のcommitから変更されたファイルを勝手に探して、その変更部分もcommitしてくれます。
git commit -a -m 'added index.html'
githubにpushします。
git push origin master
これでgithub上のリポジトリが更新されました。
今回はただのHTMLファイルを置いただけだったので、「だから何？」って思ったかもしれませんが、自作のwordpressのthemeをgithubで公開して、自分のブログで自作テーマのダウンロードはこちら、なんていうリンクを置いたりなど、デザイナーもgithubで自作のものを置いてみんなに「ここにあるよ」って教えると、もっと自作をする楽しみは増えるんじゃないかなぁ、と思います。僕は自分以外のデザイナーがどんなものを作ってるのか見たくて仕方ないです。なので、何かを作ってgithubにpushしたら教えてくださいね。
READMEファイルの編集
さて、githubをうろうろしてあなたの作ったリポジトリにたどり着いた人が、「このリポジトリはなんなのか」をわかりやすくしておかないと、人も使ってくれないです。でも、リポジトリを作成したときに登録をした情報は、「リポジトリ名」と「説明（一行の）」と「URL」だけ。これじゃどんなものが置いてあるリポジトリだかよくわかないですよね。とそこでそういったものを書きこむのが「README」ファイルです。
html5-media-chaptersというリポジトリを見てみましょう。
リポジトリページのトップの下の方に「README」ファイルの中身が表示されてます。これはgithubの便利機能で、READMEファイルの中身が自動的にこのように表示されるようになってます。しかも、READMEファイルにHTMLも使えて、ちゃんとgithubのここに表示される際にはデザインが入ります。これは、デザイナーとしては、ここの部分もちゃんと書いて綺麗に見せたいところですよね。
ただし、READMEでHTMLを使うにはちょっとだけ手間がかかるので、その方法も紹介しておきたいと思います。
READMEファイルでHTMLを使う
まずは、READMEファイルをエディタで開きます。そのときに、「UTF-8」で保存しないと文字化けしてしまうため、ちゃんとそれを指定できるエディタで編集してください。今回は「CotEditor」を使ってみます。
さて、開いた全くの白紙の状態です。ここにHTMLを使って説明を書き入れていきますが、ここで書くHTMLが普通のHTMLではなくて、Markdown記法というものを使って書きます。他にもRDocというものを使っているのもたくさん見るのですが、今回はMarkdownの方で。
html5-media-chaptersというリポジトリのREADMEファイルを見てみましょう。
# HTML5 Media Chapters [http://tonycamp.com/html5-media-chapters/](http://tonycamp.com/html5-media-chapters/)
(Currently only working in Chrome browser)
## Summary:
The beginnings of a jQuery plugin that will allow you to time stamp an element, attach an event handler to it which will load an audio file, and jump to the specified time stamp.
I chose to use the yayQuery podcasts as a demo because they taught me so much. Learn, and share. Thanks Rebecca Murphey, Adam Sontag, Alex Slexton, Paul Irish. Follow these people on github and twitter. You will learn a ton.
## How To Use
Give the element that will handle the click event a data-filname attribute which will serve as the filename to load into the audio player. For this attribute, you don't include the file extension. The extension defaults to .mp3, but can be changed. For example:
<span class="episode_title" data-filename="yayquery_0">Episode 0</span>
Now that you have your click handler and file to load, you need to add a chapter to the audio file. For that you need to add a data-timestamp attribute to the click handler for the chapter. For example:
<a href="#" class="loader" data-timestamp="2:45">_js Library</a>
This example would jump the yayquery_0.mp3 file to the 2 minute 45 second mark and start playing from there.
Next you need to call the new plugin on the click handler. It can be basic like so (uses default values for file type, directory and element classes):
$('.episode_title').mediaChapter();
By default, the plugin will look for HTML5 audio players with a class of "audio", this can be overwritten by specifying a class of your choice like so:
$('.episode_title').mediaChapter({
audioElement: $('.myaudio') // this is your audio class, name it whatever you like
});
Here are some more customizable variables you can use to suit your needs:
audioElement: $('.audio'), // Audio player that will load the audio file
audioChapter: $('.loader'), // Element that will have the data-timestamp for the chapter
audioDirectory: 'mp3' // Directory where audio files live
## Changelog:
### v.1.0 : January 3rd, 2011
#### General
* Very first commit. Still rough, but eff it.
全然HTMLのかけらもないように見えますが、これがMarkdownという記法で書かれたHTMLです。HTMLの書き方を変えただけなので、何も難しいことはありません。ここによく使うHTMLのタグを書いておきます。あとはこちらを見るともっと詳しく色々書いてあります。
見出し（h1〜h6）
# This is an H1
## This is an H2
###### This is an H6
段落（p）
空白行に囲まれた複数行の文章(一行の場合も含む)がまとめて一つの段落として扱われます。スペースやタブだけの行も空白行に含まれます。) 通常段落の行頭にスペースやタブがあってはいけません。
改行（br）
その行の末尾を二つ以上のスペースを記述してから改行する。
引用（blockqute）
> This is a blockquote with two paragraphs. Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus.
Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.
> Donec sit amet nisl. Aliquam semper ipsum sit amet velit. Suspendisse
id sem consectetuer libero luctus adipiscing.
リスト（ul li）
* Red
* Green
* Blue
番号付きリスト（ol li）
1. Bird
2. McHale
3. Parish
ソースコードを表現（pre code）
単純に各行の冒頭に4つ以上のスペースもしくは1つ以上のタブを挿入。
This is a code block.
リンク（a）
This is [an example](http://example.com/ "Title") inline link.
[This link](http://example.net/) has no title attribute.
↓ こうなる。
<p>This is <a href="http://example.com/" title="Title">
an example</a> inline link.</p>
<p><a href="http://example.net/">This link</a> has no
title attribute.</p>
blog::2310より一部を抜粋
ただ、htmlを置き換えるだけなので、全然難しくないですね。メールのような感じでHTMLが書けるので、慣れればHTMLを書くより早く書けるかも。では、実際に「KUROIGAMEN-massage-board」のREADMEを書いてみたいとおもいます。
# KUROIGAMEN message board
## これ何？
これはhttp://kuroigamen.comを読んだ人が好きにメッセージを書いていくものです。
いまのところHTML一枚だけです。
## 書き込む手順
1. KUROIGAMEN-message-boardをフォークする
2. 手を加える
3. pull requestを送る
## 作った人
町田哲平（KUROIGAMEN FJORD,LLC）
Copyright (c) 2011 KUROIGAMEN.
こんな感じで書きました（おもいっきり日本語で）。次に、READMEファイルが今のところ何も拡張子がない状態ですが、それに「.md」もしくは「.markdown」を付けます。これで、「これはMarkdownで書かれたファイルですよ」というのがgithubにも伝わるので、github上の「KUROIGAMEN-massage-board」のリポジトリのページにHTMLが適用されたREADMEが表示されるはず。
gitでは、拡張子を変えたり、ファイル名、ディレクトリ名を変えると別なファイルとして認識するので、「README.md」をaddします。
git add README.md
では、commitしてpushしましょう。
git commit -a -m 'added README.md'
git push origin master
では、githubに反映されているか確認。
githubに反映された！
では、今回はこれで終わり。デザイナーの皆さんもガシガシgithubにリポジトリを置いて、置いたら僕に教えてくださいね！
