はじめに
はじめまして、Yahoo!検索のデザイナー担当の竹内美帆と申します。
今Yahoo! JAPANでは、プロジェクト毎にバージョン管理システムを使い分けていますが、Subversionを使用しコードを管理しているプロジェクトもあります。2011年1月～3月には、デザイナーが所属する部署でもデザイナーが作成するHTML・CSS・JavaScriptファイルなどをバージョン管理システムであるSubversion（サブバージョン）で管理しようという動きがありました。
デザイナーにとってはとっつきにくい印象がある「バージョン管理」ですが、うまく利用すれば「あのファイルどこいった？（汗）」「いつこのファイル書きかえたっけ？（汗）」「急いで対応しないといけないファイルが、今日休みの○○君のパソコンにしかない（泣）」という事態を避けられます。
私も以前このような状況に大変困った時期もありましたが、現在は「バージョン管理」を取り入れることでそういうことはなくなりました。この記事では「バージョン管理っていったい何？」という疑問を解決し、広く利用されているSubversionの簡単な利用方法を下記の流れでわかりやすく説明できればと思います。
目次
- バージョン管理システムとは
- バージョン管理システムのメリット
- バージョン管理システムの基本用語と構成
- ソフトウエア「TortoiseSVN（トータスSVN）」のインストールから基本操作
この記事では、はじめてバージョン管理をする人向けに作成しているため、実際作業をしている方にとっては物足りないものとなってしまうと思いますがご了承ください。また、記事が長くなりすぎてしまうので、今回はTortoiseSVNの基本操作までといたしました。 次回以降で便利な機能や導入事例などを、紹介できればと思います。
バージョン管理システムとは
文書やプログラムのコードなどのファイルの作成や編集をしていると、どこか一部を誤って消してしまったり、自分が更新した場所を忘れたり、さらには以前のものを保存せず誤って上書きしたり、なにかと問題が起きます。これらの問題を防止するために、特定のタイミングでファイルのコピーを残し、バックアップをとる方もいます。
例えば、「sample.html」というファイルを編集する場合、変更を加えるタイミングで、「sample_110422.html」「sample_110423」などのようにバックアップをとる日付を後ろにつけたりと。これも立派なバージョン管理と言えますが、バージョン管理システムというものを利用するともっと簡単にバージョンを管理できます。
簡単にどのような機能があるか紹介します。
- ファイルの作成日時、変更日時、変更点などの履歴を保管 何度も変更を加えたファイルであっても、過去の状態や変更内容を確認したり、変更前の状態を復元することが容易です。
- 複数人でのファイル編集の管理 ファイルの最新状態の確認や同じファイルの同じ行を変更があるかどうかの確認を実行、あった場合は自動で解消が可能です。また、ファイルへのアクセス制限の機能による同じ部分へ変更を回避をすることもできます。
他にもいろいろ機能はありますが、長くなってしまうのでここでの説明はここまでにします。もっと詳細まで知りたいという方は、記事の終わりに用意した参考文献をご覧になってみてください。
バージョン管理システムのメリット
ご紹介した機能からもわかるように、バージョン管理システムの機能は複数人での作業に非常に有効です。
Yahoo! JAPANに限らず、多くの制作会社のデザイナーの方も複数人での作業は避けては通れないものです。1つの案件で複数の人が同じファイルを触ることがあり、運用をしていくと担当者も変わります。どのファイルをいつだれがどのように変更したかをいつでも確認でき、同じファイルを触っていたとしても間違って上書きすることなく、競合を知らせてくれるバージョン管理はデザイナーも取り入れて損はないものです。
HTML・CSS・JavaScriptなどのファイル以外のパワーポイント、エクセル、PSD、PNG、JPGなどのバイナリファイルも管理可能です。ただし、バイナリファイルでは変更内容の確認などができないなど制限はありますが、元に戻したりすることはできます。
現在デザイナーが参加するセミナーで取り上げられたり、Adobeソフトウエアの連携機能が追加されたり、以前よりは取り入れやすい環境になってきました。バージョン管理に興味はあるがなかなか導入できなかった、そういうものがあるのを知らなかったという方はこの機会にぜひ試してみてください。
バージョン管理システムの基本用語と構成
バージョン管理システムを利用する上でよく耳にする用語があります。ここではその中でも利用頻度が高い用語を説明します。
- リポジトリ バージョン管理したいフォルダーやファイルの履歴が格納される場所です。一般的には、複数人で作業することを想定し、サーバー上に置きます。
- 作業コピー バージョン管理したいフォルダーやファイルはリポジトリに格納されていますが、直接リポジトリ内を編集はしません。作業を行う場合は、リポジトリ内のフォルダーやファイルをパソコンにダウンロードして作業をします。このパソコンにダウンロードフォルダー、ファイルのことを作業コピーと呼びます。
- チェックアウト リポジトリ内のどのフォルダーから作業コピーを作成するか、場所を指定しパソコンにダウンロードすることをチェックアウトと呼びます。
- コミット 作業コピーに対して行われた変更を、リポジトリへ反映することをコミットといいます。
- アップデート アップデートとは、他者がコミットを行った変更を自分の作業コピーへ取り込むことです。これをすることで常にフォルダーやファイルを最新の状態に保ち、競合が起きにくい状態にします。
- インポート 管理したいフォルダーやファイルがすでに自身のパソコンにある場合は、インポートをすることでリポジトリに登録することが可能です。
バージョン管理したいデータが格納される場所がリポジトリですが、作業者ととの構成は次のようなイメージになります。デザイナーが作業をする場合は、リポジトリを操作する専用のソフトウエアを利用します。 作業者は自分のパソコンでソフトウエアを利用し、リポジトリのデータを作業コピーとしてパソコンへダウンロードして編集を行います。編集後、変更点のリポジトリへの反映もソフトウエアを利用して行います。
ソフトウエア「TortoiseSVN」のインストールから基本操作
バージョン管理システムには、いろいろ種類がありますが多く使われているのがSubversionです。私たちのチームでもSubversionを利用しており、デザイナーはソフトウエアの「TortoiseSVN（トータスエスブイエヌ）」を使って作業を行っています。 ここでは「TortoiseSVN」のインストールから基本操作までを簡単に説明していきます。
公式のサポートドキュメントは、TortoiseSVN Supportからご覧いただけますが、ここでは基本的な操作をかいつまんで説明します。最新の情報は公式ドキュメントを参照ください。 他バージョン管理を利用する上で便利な機能はありますが、ご紹介する操作は記事が長くなってしまうので最低限作業に必要なものとしています。
Macの方は下記のソフトウエアが存在しますので、こちらを利用してみてください。
TortoiseSVNの必要なシステム
Windows 2000 SP2, WinXP 以上（Version 1.6.16の場合）
インストール、設定
１． TortoiseSVN Downloadsからインストーラをダウンロードします。
32bitの場合「LanguagePack_1.6.16.21511-win32-ja.msi」というファイルが保存されます。
※32bitと64bitでダウンロードするインストーラーが異なります。
２． 日本語化して使用したい場合は、上記ページの「Language packs」から「Japanese」をダウンロードしてください。
32bitの場合「LanguagePack_1.6.16.21511-win32-ja.msi」というファイルが保存されます。
※32bitと64bitでダウンロードするインストーラーが異なります。
３． インストーラを立ち上げて設定する項目は、すべてそのままで「next」を押してインストールを完了させ、Windowsを再起動してください。
４． デスクトップなどで右クリックし、「TortoiseSVN」という項目が存在していればインストール完了です。
５． 日本語化する場合は、Language packsをインストールしてください。
６． デスクトップや任意のフォルダーで右クリックし、「TortoiseSVN」から「設定」をクリック、左メニューの「一般」を選択し、「言語」を日本語に設定してください。
0.リポジトリの作成
バージョン管理したいフォルダーやファイルの履歴が格納するリポジトリがない場合は、パソコンに作成するか、リポジトリを置かせてもらえるサービスを利用します。
パソコンにリポジトリを作成
自身のパソコンに作成されるので、他人のパソコンとのやり取りはできません。とりあえず一人でもいいから試してみたいというときなどは、この方法で試してみましょう。もちろん自分だけでバージョン管理したいという方も手軽にできます。
１．リポジトリにしたいフォルダーを作成し、任意の名称をつけます。（例では「svn_repo」とします）
２．「svn_repo」を選択した状態で右クリックし、「TortoiseSVN」から「ここにリポジトリを作成」をクリックします。 「リポジトリの作成に成功しました。」というダイアログが表示されます。
Subversionサーバーを借りてリポジトリを作成
無料、有料でレンタルしてくれるサーバーが存在します。 調べたら下記のサービスが存在しました。
サービスを比較している記事があったので参考にしてください。
1.チェックアウト
リポジトリ内のフォルダーやファイルをパソコンにダウンロードして作業するために、チェックアウトを行います。
１． 作業コピーを置きたいフォルダーを作成し、任意の名称をつけます。（例では「svn_work」とします）
２．「svn_work」を右クリックし、「SVNチェックアウト」をクリックします。チェックアウトの作業ウィンドウが開きます。
３．リポジトリのURLを入力し「OK」をクリックします。
※サーバー上にリポジトリがある場合は管理者にURLを聞いてください。
※自身のパソコンのフォルダーを指定する場合、通常利用しているフォルダーのアドレスとは少し書き方が違うので注意してください。
下記のように「file:///」で始まるURLになります。
| WindowsXPでCドライブのユーザー名の中にリポジトリを作った場合の例： file:///C:/Documents and Settings/［ユーザー名］/svn_repo/ |
チェックアウト済みのフォルダー「svn_work」にはアイコンオーバーレイ機能により下記のようなアイコンがつきます。このアイコンは通常時ですが、他にも編集済み・追加済み・削除済み・ロック・衝突のアイコンが存在します。
2.コミット
変更をリポジトリへ反映するためにコミットを行います。
１． 編集したファイル、フォルダーを右クリック、「SVNコミット」をクリックします。
２．「メッセージ」に何を変更したのかコメントを記載します。
３．「変更した項目」からコミットするファイルにチェックが入っているか確認し「OK」をクリックします。
3.アップデート
他者がコミットを行った変更を自分のパソコンに取り込みます。
１．最新の状態に更新したいファイル、フォルダーを右クリックし「SVN更新」をクリックします。 更新の状況が表示されるウィンドウが開きます。
２．更新の内容を確認し、「OK」をクリックします。
4.ファイル、フォルダーの追加
新規作成したファイル、フォルダーは追加をするまでリポジトリへ登録されません。 TortoiseSVNで追加をした状態でコミットを行うことでリポジトリへ反映されます。
１．新しく作成したファイル、フォルダーを右クリック、「TortoiseSVN」から「追加」をクリックします。
完了したら、追加済みのアイコンが表示されます。
２．リポジトリに反映するためにコミットを行います。
5.ファイル、フォルダーの削除
通常はファイルやフォルダーを右クリックで「削除」クリックしますが、追加同様にリポジトリからは削除されません。 TortoiseSVNで削除した状態でコミットを行うことでリポジトリへ反映されます。
１．削除したいフォルダー、ファイルを右クリック、「TortoiseSVN」から「削除」をクリックします。 完了したら、フォルダーから削除されますがまだリポジトリには反映されていません。
２．リポジトリに反映するためにコミットを行います。
6.ファイル、フォルダーの名称変更
名称変更も追加、削除と同様です。TortoiseSVNから名前の変更を連絡する必要があります。
１．名称を変更したいファイル、フォルダーを右クリック、「TortoiseSVN」から「名前を変更」をクリックします。 「名前を変更」という作業ウィンドウが開きます。
２．「新しい名前」に変更後の名称を入れ、「OK」をクリックします。
３．リポジトリへ反映するためにコミットを行います。
7.インポート
既存の作業ファイルがリポジトリ上で管理されていないが、このままリポジトリへ反映したい場合にこの操作を行います。リポジトリに反映したいファイル、フォルダーを追加しコミットしても同じ結果になります。
１．リポジトリへ登録したいパソコンのフォルダーを右クリック、「TortoiseSVN」から「インポート」をクリックします。
「インポート」という作業ウィンドウが開きます。
※例では「import」フォルダーを「svn_repo > svn_import」フォルダーへインポートしています。
「svn_import」はリポジトリへの追加とコミットは済んでいます。
２．登録したい「リポジトリのURL」と「インポートメッセージ」を入力し「OK」をクリックします。
「svn_repo > svn_import」フォルダーに「import」ディレクリに存在したファイルが反映されます。
※インポート先の「svn_import」ですが、もともと何かファイルが置いてあった場合
すべてインポート元のファイルとすり替わってしまうのでご注意を。
さいごに
デザイナー向けのバージョン管理を分かりやすくまとめたサイトがあまりないなと感じていました。私が実際使ってみて、バージョン管理は「超便利なのにもったいない！ デザイナーの方もぜひ使ってほしい！」と思ったのでこの記事を書かせていただきました。より多くのデザイナーの方がこの記事を見てバージョン管理に興味を持っていただいて、業務に生かしてくださることを願っています。
今後はTortoiseSVNの一歩踏み込んだ便利な機能やサービスへの導入事例などを紹介していければと思っていますのでお楽しみに！
参考文献
こちらの記事のご感想を聞かせください。
- 学びがある
- わかりやすい
- 新しい視点
ご感想ありがとうございました
