【カンタン入門】SourceTreeで簡単にGitHubを使ってみる!

【カンタン入門】SourceTreeで簡単にGitHubを使ってみる!

GitHubが公式に配布しているGitHub Desktopをダウンロードして使ってみたものの、Windows10で日本語ユーザ名の場合に使えないことが判明したので、GitHub Desktopと同様にWindowsからGUIでGitHubが利用可能なSourceTreeを導入し、使ってみようと思う。
例の通り図を多用し、詳細に解説する。

今さらながらGitとGitHubとは?

Git(ギット)とは分散型のバージョン管理システムで、主にプログラムのソースコードを管理するメジャーなOSSのひとつだ。ファイルのバージョンを管理するシステムなので、プログラムのソースコードをプロジェクトチームで管理するのに向いているほか、一般企業での社内文書の管理はモチロン、文筆家や翻訳家が共著者や編集者とやり取りしながら本の執筆が可能だし、イラスト(画像)等も含め全て管理できる。
この場合の管理とは、誰が・いつ・何を(どこを)変更したのか、すべて履歴で管理出来るほか、ファイルを以前の状態に戻すことが可能であるため、組織内でファイルを管理するだけでなく、個人がファイルを管理するのでも便利に使えるだろう。
昔のパソコンでの開発ではマイクロソフトのVisual SourceSafeを使ったものだが、その後はOSSSubversion(サブバージョン:SVN)といった集中型のバージョン管理システムが使われるようになった。
プロジェクト規模や目的、構成員のスキル等で適宜使うツールは変更すれば良いが、集中型のバージョン管理システムだと、誰かがチェックアウトしたファイルを変更してチェックインすることが出来ないため、色々と不都合なことがある。そこでGitのような分散型のバージョン管理システムが、現在では事実上標準のようになっている。
Gitでの作業としては(非常に簡単に言えば)、サーバの元フォルダ(リモートリポジトリ)のコピーを手元に置いて(ローカルリポジトリにCloneまたはPull)自由に編集し、作業が終了したら(作業のまとまりをCommit)サーバの元フォルダに反映(リモートリポジトリにPush)すれば良い。

GitHub(ギットハブ)はGitのリモートリポジトリを管理するウェブサービスで、一番メジャーである。英語サイトだが無料で使えるし、仕事で使う場合でも有料プランがある。
私の場合はPukiWiki用にライブラリやプラグインを独自で開発しているので、GUIのGitツールであるSourceTree(ソースツリー)を使ってGitHubにプログラムを公開し、管理しようと思う。

GitHubのアカウントとリポジトリを用意する

GitHubのアカウントがないと先に進めないので、まだアカウントを持ってない場合はアカウントの作成をしておこう。

図のように、ユーザ名・メールアドレス・パスワードだけでアカウントが無料で作れる。
が、パスワードには英数記号の組み合わせで、英字は大文字・小文字が混在していないとダメなので、要注意

アカウントを作成すると(多少画面は違うかも知れないが)このような画面になるので、赤枠のリンク「Create a repository」をクリックしてリポジトリを作成してみよう。

リポジトリ名を入力する(ここでは「pukiwiki-lib-spam_filter」)
公開レベルを「Public」にする(今年の1月から無料で「Private」リポジトリの作成も可能になった)
READMEファイルを作成する(自動でREADME.mdが作成される)
最後にボタンをクリックしてリポジトリを作成する

リポジトリを作成すると図のような画面になり、先ほどで作成を指定していたREADME.mdが作成される。サイトは英語だが、このように日本語のDescription(説明)を含んだファイルが作成可能だし、GitHubで管理するファイルに日本語があっても問題なく管理が出来る。

SourceTreeのインストールと設定

次にGitHubをGUIでお手軽に使うため、SourceTreeをダウンロードする。

Windows版をダウンロードするので、画面の赤枠をクリックする。

図のようなダイアログが出るので、ライセンス契約およびプライバシーポリシーに同意してダウンロードする。

インストーラーを起動すると、「Bitbucket Server」か「Bitbucket」のどちらかにログインしないと進めない(コレがあるからアトラシアンSourceTreeをインストールするのがイヤだった)。「Bitbucket」とはアトラシアン社が運営しているGitHubのようなサービスで、ここでは図の赤枠の「Bitbucket」をクリックする(アトラシアンのアカウントを持っている場合は飛んだ先のブラウザでログインするか、アカウントがない場合もやはり飛んだ先のブラウザでアカウントを作成する必要がある)。

私の場合はBitbucketのアカウントは作成していないが、何年か前にアトラシアンのアカウントは作っていたので、メールアドレスを入力して赤枠の「続ける」をクリック。

面倒だが、パスワードを入力して赤枠の「ログイン」をクリック。

相変わらず中途半端に日本語化されたサイトなのでイラつくが、アトラシアンのアカウントはあるものの、Bitbucketのアカウントが無いので赤枠の「Bitbucket」をクリックする。

そもそもGitHubを使いたいのでアトラシアンBitbucketにアカウントを作る気はサラサラないものの、SourceTreeのインストールのため、赤枠の「Get started for free」をクリックする。

アトラシアンのアカウントと同じメールアドレスを入力して赤枠の「続行」をクリック。

またログインかーい!
アトラシアンは万事がこの調子なのでウンザリするのだが、パスワードを入力して赤枠の「ログイン」をクリック。

Bitbucketのユーザ名を作成する必要があるので、ユーザ名を入力し、赤枠の「続行」をクリック。

これもホントに無駄だと思うが、これがアトラシアンスタイル。別にBitbucketを使う気はないが、適当に答えて赤枠の「送信」をクリック。

やっと、インストーラーにアクセス許可を出す画面になった。赤枠の「アクセスを許可する」をクリック。

うるせーよ!コッチは望んでねーんだよ。
まぁ、赤枠の「次へ」をクリック。

使いたいのは「Git」だけなので「Mercurial」のチェックを外し、「詳細オプション」クリックして「改行の自動処理を設定する」をチェックしておく。Windowsから使うしね。
赤枠の「次へ」をクリック。

分かったから、報告はせんでエエ。赤枠の「次へ」をクリック。

ユーザ名とメールアドレスを確認して赤枠の「次へ」をクリック。

別にBitbucketを使う気もないし、SSHでログインする気もないので、赤枠の「いいえ」をクリック。

やーっとインストールが完了したが、GitHubを使いたいので赤枠の「アカウントを追加」をクリック。

図のようなダイアログが開くので、「GitHub」と「HTTPS」、認証に「Basic」を選択し、赤枠の「パスワードを再読み込み」をクリックする(そもそもBitbucketGitHubではパスワードの厳格さが違う)。

画面のようにユーザ名は引き継がれるので、GitHubアカウントのパスワードを入力し、赤枠の「OK」をクリックする。

画面の通り「認証に成功」しているので、赤枠の「OK」をクリック。

GitHubのユーザが追加されたので、GitHubのリポジトリが表示される。そこでGitHubで作成した「pukiwiki-lib-spam_filter」をクリックし、その中にある赤枠の「Clone」をクリックする。

デフォルトだと「ドキュメント」フォルダ直下にリモートリポジトリをコピーしようとするので、私の場合は「SourceTree」フォルダを作成し、その直下にクローン(ローカルリポジトリを作成してコピー)するように指定した。
赤枠の「クローン」をクリック。

私は先日GitHub Desktopのテストで当該リポジトリにPush済みなので、こんな画面になる。

実際にローカルリポジトリがどうなっているか見てみると、画面のようにファイルがコピーされている。このファイルを自分の好きなツールで編集し、SourceTreeでCommitしてリモートリポジトリにPushしてやれば良い。

README.mdを編集してCommitし、Pushする

プログラム自体を修正する必要がないので編集しないが、README.mdはデフォルトで作成されたままなので、コイツを編集する必要がある。
README.mdを含め、GitHubのドキュメントはマークダウン記法で記述するのが一般的のようだ。

README.mdの編集例

# pukiwiki-lib-spam_filter
PukiWiki1.5.2用スパムフィルタ(ライブラリ)spam_filter.php一式です
- 暫定公開版です([Akismet](https://akismet.com/development/)と[reCAPTCHA](https://ja.wikipedia.org/wiki/ReCAPTCHA)以外は十分にテストが出来ていません)
- 設置と設定に関しては本サイトの記事「[PukiWiki1.5.2にスパム対策メールフォームを設置!Googleアドセンスに備える!](https://dajya-ranger.com/pukiwiki/setting-mail-form/)」および「[PukiWiki1.5.2用スパムフィルタをreCAPTCHAに対応!メールフォームをさらに強化!](https://dajya-ranger.com/pukiwiki/setting-mail-form-recaptcha/)」を参照して下さい
- spam_filter.phpの機能の詳細やその設定方法等は[本家](http://miasa.info/index.php?TopPage)「[美麻Wikiでシステム的に修正している点](http://miasa.info/index.php?%C8%FE%CB%E3Wiki%A4%C7%A5%B7%A5%B9%A5%C6%A5%E0%C5%AA%A4%CB%BD%A4%C0%B5%A4%B7%A4%C6%A4%A4%A4%EB%C5%C0#ofa18e88)」ページを参照して下さい

README.mdを編集して保存すると、SourceTreeではこのような画面になる。変更されたファイルとその内容が表示されるので、どのファイルに何を変更したのかが一目瞭然だ。
そこでまず、画面の赤枠のどれをクリックしても良いので、編集したREADME.mdをインデックスに追加する(「Hunkをステージへ移動」は、変更した塊(Hunk)をインデックスに追加するといった意味だろう)。

変更を確定するため、画面左上にある赤枠の「コミット」をクリックする。

画面のようにコミットコメントを入力し、すぐにPushするため赤枠の「変更をすぐにorigin/masterにプッシュする」をチェックし、「コミット」ボタンをクリックする。

CommitとPushが完了するので履歴を見てみると、画面のように結果を確認することができる。GitHubを確認するため、画面右上にある赤枠の「リモート」をクリックする。

ブラウザでGitHub(のCommitしてPushしたリポジトリ)に飛ぶので、図のように編集したREADME.mdが変更されたのが分かる。

おわりに

SourceTreeアトラシアンのアカウントを作成した上に、Bitbucketでもアカウントを作成しなくてはインストールが出来ないが(しかもアカウントを作成するのが分かりにくくてちょっと手間だ)、日本語化されているし使いやすいツールだと思う。
使い方としては、GitHubでリポジトリを作成し、SourceTreeでCloneして当該フォルダにファイルやフォルダを追加して作業し、CommitしてPushするのが良いだろう。SourceTreeでもリポジトリの作成は出来るが、GitHubでリポジトリを作成してから作業する方が楽だ。
このように、ネットでは無料で高度なサービスやソフトの恩恵に与れるので、昔に比べると驚くべき時代になった。私もPukiWikiを通して受けた恩を万分の一でも返そうと思うが、単なるソフト屋は淘汰される時代だなぁと思う。そもそもソフトウェアはノウハウの塊なので、ノウハウを売るビジネスではあるのだが。

 

 

この記事が気に入ったら
いいね ! をお願いします


ソフトウェアカテゴリの最新記事