超便利なSubversion(SVN)をMacのCoda+hetemlで使う方法

今回は自分も使っているhetemlにて
Subversionというバージョン管理の仕組みを使う方法をご紹介します。

いざ調べてやってみると途中何度か挫折しかけたのでw
ニッチですがこの記事が役立つ方々がいらっしゃると思います。

Subversionは会社でも使っていますが、
複数人でソースを触ったりする際に非常に役に立ちます。

hetemlはサーバ容量が気がついたら42GBもあるので
ソースコードのバックアップ先の一つと考えて
Subversionが利用できるなら嬉しいですね。

理想を言うと自鯖を固定IPで立てたり、
専用サーバ・VPSなんてあればいいんでしょうけど、
サーバの知識はさわりしか無い自分はとりあえずこれを使いたいと思います。

それではhetemlで使うための手順を説明していきたいと思います。

目次

・バージョン管理システムとは?
・下準備
・hetemlでSSHを有効にする
・.subversionフォルダのconfigを編集する
・SSHでログインしてレポジトリを作る
・Codaでチェックアウトの設定をする
・ファイルを新規作成し、コミットを試してみる
・なんか使えてるけどエラーでるけど・・・ (解決済み)
・あとがき

バージョン管理システムとは?

※SVN使ったことある人はここはSkipしてくださいw

一応説明するとソースコードを管理するのに非常に便利なシステムです。

ソースコードを作成日時・変更・更新・追加・削除といった一連の管理をします。
特に効果がデカイのが

・ソースの差分管理(いつどこが更新されたか分かる)
・複数人での作業がちょー楽!(ファイルロックや軽くマージしてくれたり)

という点。

作業始める際に「更新」をすると更新されたファイルが取得され、最新の環境になります。
「コミット」と言われるファイルのアップロードみたいなものがあるのですが、
もし誰かがすでにファイルを更新しているとちゃんと通知してくれます。

また何か問題が起こった際に、このファイルはいつ誰が更新したかなど
把握しやすく、コミットするごとに「リビジョン」というもので管理されるため、
問題が起こったからこのリビジョンに戻そう!など可能です。

ソースを書いた本人が居なくても、
だいたいSVNクライアントとかに付属または連携できるソースコード比較ツールとかで
古いリビジョンと新しいリビジョンのどこがどう変わったかなどが把握しやすいです。

今まではプログラマーなどが便利に使ってきたものですが、
WEB制作の現場で使われるHTMLやPHP、CSSやJavaScriptなども同じように管理できるため
今後はWEB制作の現場でも主流になっていく一つの管理手法だと思います。

※FlashのActionScriptのライブラリなどはSVNで提供されてるので
チェックアウトだけしたことがある方はFlasherには多いかもしれません。

どっぷり知ってるわけじゃない僕が説明してもあれなので
詳しくはYahoo!のコチラの記事を見ていただくと良いです。

もうファイル管理で困らない! デザイナーのためのSubversion/TortoiseSVN入門 (Yahoo! JAPAN Tech Blog)

ちなみに今回はMacの話ですが、普段会社のWindowsでは定番のTortoiseSVNというSVNクライアントと、
Winmergeというソース比較ソフトを利用しています。

またMacではCoda以外にもVersionsというフリーソフトや、
開発環境のNetBeansなどでもご利用になれます。

下準備

当然ながらhetemlサーバをレンタルされている事と、
MacのCodaがインストールされていることが前提になります。

レンタルサーバー「heteml」 – 大容量・高機能のレンタルサーバー

パニック・ジャパン – Coda – Mac OS X 用 シングルウインドウ Web 構築環境

ちなみに当方の環境はMacOSX Lionです。

とりあえずPC内にチェックアウトするためのフォルダを作成します。
今回は書類の中に「svntest」というフォルダを作りました。

hetemlでSSHを有効にする

恐らくデフォルトの状態ではhetemlでSSHが有効になっていないので有効にしましょう。
ログイン後の右メニューの「SSHアカウント」という項目を選んで下さい。

すると「SSHを利用する」というボタンがあるのでクリックして有効にして下さい。
SSHを有効にするのはこれだけですw

有効になると以下のような画面になります。

参考:
レンタルサーバー「heteml」 – SSH のご利用方法

.subversionフォルダのconfigを編集する

Mac内にある.subversionにあるconfigファイルを編集します。
僕ははじめからファイルが合ったので基本的には入っているものだと思います。

まず.subversionフォルダは不可視フォルダなので、表示させる必要があります。
不可視ファイルをFinderで表示するためには 「ターミナル」を起動し、
以下のコマンドを入力します。(コピペでいけるはず)

defaults write com.apple.finder AppleShowAllFiles true

次にこの機能を有効にするためにはFinderを再起動させる必要があるため
以下のコマンドを実行します。

killall Finder

実行すると、Finderが再起動します。
※ちなみに戻す場合は先ほどのコマンドの末尾のパラメータをfalseにして killall Finderを実行する

するとFinderから自分のフォルダにアクセスすると不可視フォルダ/ファイルが
表示されてるのが分かると思います。その中に.subversionフォルダがあります。

この中にあるconfigファイルを編集します。(僕はmiで編集しました)

参考:
MACのFinderで不可視ファイル(.htaccess等)を見えるようにする方法

hetemlの公式サイトには以下のように書かれています。

しかしここは何も聞かず以下を書いて下さい。

ssh2222 = /usr/bin/ssh -p 2222 -q

※-qについてはhetemlには記載が無いのですが、理由は後述してます。

configを開くと63行目付近に[tunnels]がありました。
内容はよくわからないのでとりあえず末尾に記述を加えます。

書き加えたら上書きします。
不可視ファイルを非表示にさせたい場合は
先ほどと同じように

defaults write com.apple.finder AppleShowAllFiles false

※最後がfalseになってます

を実行し、同じようにFinderを以下のコマンドで再起動させます。

killall Finder

これでconfigファイルの編集は完了です。

SSHでログインしてレポジトリを作る

それではいよいよhetemlサーバにSSHでログインします。

そして以下のコードを必要な部分を書き換えてターミナルにコピペしてください。

ssh hoge@ssh*.heteml.jp -p 2222

※マークは自分のサーバ番号
※hogeは自分のアカウント名(恐らくログインID)

するとログインできると以下のような画面になります。

文字でhetemlってでてきましたw
パスワードを聞かれるのでアカウントのログインパスワードを入力しログインします。

無事ログインできましたか?

svn –version

と入力すると、svnのバージョン情報などでてくることが確認できると思います。
今回フォルダ名は「svntest」を利用していますが、
任意でつけることができます。それでは以下のコマンドを実行してフォルダを作りましょう。

mkdir -p repos/svntest

次にレポジトリの初期化を行いますので
以下のコマンドを実行して下さい。

svnadmin create repos/svntest

この辺実行しても返答がないのでできてるか不安ですよね?(-_-;)
もし上記でレポジトリが作成されていれば以下のコマンドが通るはずです。

・・・が、ここが一番僕が躓いたので焦らずやってください。

SVNの決まり文句的な感じでtrunk,branches,tagsというフォルダを作成します。
hetemlには以下のような感じで書かれています。

URL長いな・・・・

ここで注意すべきは「h/o/g」「hoge」など入っているのでそのまま入力しないように。

自分のパスは以下で確認できます。


※クリックで拡大

自分のパスをしっかりと確認した上でコマンドを書きましょう。

svn mkdir file:///home/sites/heteml/users/*/*/*/*/repos/svntest/trunk -m “create trunk.”

※*部分は自分のパスやアカウント名
※基本的にはアカウント名の頭から三文字が羅列されてる?(例:hoge → h/o/g )

下記では仮にアカウント名「kashi」とすると…

svn mkdir file:///home/sites/heteml/users/k/a/s/kashi/repos/svntest/trunk -m “create trunk.”
svn mkdir file:///home/sites/heteml/users/k/a/s/kashi/repos/svntest/branches -m “create branches.”
svn mkdir file:///home/sites/heteml/users/k/a/s/kashi/repos/svntest/tags -m “create tags.”

といった感じでしょうか。参考までに。

無事作成に成功するとリビジョンが表示されます。

一番最初なので「1」ですね。同じように 「branches」「tags」を作成して下さい。

ここでつまづく場合は何か間違えてる可能性が高いので
登録情報の確認や文字の入力ミスなど 疑ってみてください。

ここまで問題なくできた方は「logout」コマンドでSSHをログアウトし、ターミナルを終了させてください。

Codaでチェックアウトの設定をする

さーいよいよCodaの出番ですね。
Codaを起動し、[サイト]→[サイトの追加]を選択します。

次にサイトの情報を設定します。
「名前」と「ローカルルート」を設定してください。
ローカルルートは先程作ったSVNのレポジトリのファイルを「コミット」したり
サーバから「更新」(ダウンロード)したりするためのフォルダです。

設定したら「ソースをチェックアウト」というボタンをクリックします。
上から「レポジトリURL」「ログインID」「パスワード」とあります。

レポジトリURLには以下を入力して下さい。

svn+ssh2222://hoge@ssh*.heteml.jp/home/sites/heteml/users/h/o/g/hoge/repos/svntest/trunk

ここまで読んだ方なら大丈夫と思いますが、
前からhogeはアカウント名、*はサーバの数字、h/o/g/hogeはご自分のパスになります。

さー!やっと念願の「チェックアウト」を押して試してみて下さい。
これでSVNと連携できるようになりました!

もしサイト設定でソース管理が有効になっていない場合は有効にしてください。

もし「Killed by signal 15.」と言われた場合は
とりあえず動いているので無視して進んで下さい。後述します。

ファイルを新規作成し、コミットを試してみる

まず「ソース管理ステータス」ウインドウをとりあえず開きます。

この状態で、Codaの画面左パネルに新規ファイルを作成してみましょう。
作成しようとするとこんな感じで聞かれました。

「追加」をクリックすると、ローカルにファイルが作られ、
横にマークがついているのと、先ほどのソース管理ステータスウインドウに
新規ファイルが表示されたことが確認できたと思います。

これで後は「コミット」「すべてコミット」などすると
ファイルをサーバにコミットしてアップすることができます。

コミットの際はコメントを設定できます。
好きなコメントを入れてください。

これで無事SVNが使えるようになりました!

なんか使えてるけどエラーでるけど・・・

※エラーは.subversion/config記述の際の「-q」で解決

よーしコミット完了と思ったらなんか言われた。

Killed by signal 15.」でぐぐったらなんか設定したほうがいいって
書かれてたのでまたもや.subversion/configを開く・・・

色々と見たところ「ssh -qで解決!」と書かれてました。

参考(コメント欄)
http://d.hatena.ne.jp/sxhxtxa/comment?date=20091116

「-q」の意味を調べてみると

「警告メッセージの出力を抑止する。」

・・・いいのかこれ・・・(・・?

というわけでhetemlでは「-q」の記載はなかったのですが、
本記事で紹介した先ほどのサンプルでは「-q」を加えています。

あとがき

とこんな感じで思ったよりも長い記事になってしまいました(滝汗
思っていたよりも道のりが長かったので途中苦戦しましたが、
この記事が同じ事をやろうとしてる人に役立つことを祈ってます。
(もうちょっとhetemlさん解説してくださいよ!)

でもこれ複数人で使おうと思ったら
ユーザって追加できないと意味ないよね?

もし追加出来なかったらアカウント一つだけでメリットがダウンしちゃいますね。
また時間があれば調べてみたいと思いますーてかSSH詳しい人試してみて><

2011/09/20追記
試してくださった方が情報くださいました。
ユーザの追加ができるそうです。詳しくはコメント欄を参照下さい。

というわけで僕の初ターミナル&SSHデビューでした(ぇ

今回SVNが使えたレンタルサーバ hetemlはコチラ

この記事を書いた人

カッシー(樫本祐輝)

カッシー(樫本祐輝)

株式会社クリエイティブユニバース代表取締役。
クリエイターはもっと幸せになってもいいんだ!と「クリエイティブな人に幸せを」を理念に活動。

2017年に法人化。現在は事業戦略クリエイティブ・プロデューサーとしてコンサルや、クリエイター・フリーランスギルド「TheCreative」を主宰。大阪東京合わせて80人を超える。フリーランスカレッジ、クリエイター200人祭りなど主催。

twitterにて「#カッシーのフリーランス講座」というハッシュタグでフリーランス向けのノウハウ・お役立ち情報発信してます。クリエイター・フリーランス支援の独自の統計をもっていることを強みに発信しています。イベント・セミナー情報もTwitterが一番早いのでぜひフォローください!

クリエイターで独立・副業を目指す人へ

長年のフリーランス支援の知識を元にフリーランス向けのメディア「次世代フリーランス研究所(通称フリラボ)」を立ち上げました。