デザイナーだからこそSVNを使いたい「Assembla」
- Category: Knowledge | Web Design | Web Service
【注意】当エントリで書かれているSVNでの管理を実際に行うには、当エントリで解説しているウェブサービス”Assembla”の導入以外に、SVNクライアントが必要になります。Windows用のSVNクライアント”TortoiseSVN”を利用したSVN管理に関するエントリを作りましたので、併せてご覧ください。
【注意2】Assemblaは有料登録しないと、プロジェクトが公開状態に設定されるようになりました。つまり、無料では非公開にできないようになったようですので、ご利用の際には十分にお気をつけください。当記事を書いたものの、このせいで私はプロジェクトをすべて消しました。
私が勤めている会社は、社内の開発陣と力を合わせてひとつのサイトを作ることが多いため、大抵の場合はSVN(Subversion)によるバージョン管理を行っています。
バージョン管理とは、作成されたファイルにバージョン番号を割り当て、このバージョン番号をリポジトリと呼ばれる貯蔵庫に管理させることで、ファイルの変更に関するさまざまな情報や状態が得られるようになるシステムであるというのが大筋だと思いますが、”誰が”、”いつ”、”どのように”変更したかがわかるだけでなく、グループで利用する場合には、「AさんとBさんのファイルは互いにこのような場所が違っているので、とりあえず合成します」(マージ)ということも可能です。この場合マージ部分にはちょっとした目印が付きます。
また、「この変更必要なかったな……」といった場合には、指定の時点までファイルの状態を戻すことも可能です。
開発の場面では、多くの人間が一つのプロジェクトに関わり、タスクによっては同じファイルを同時に扱うこともあるでしょう。そういう際に「ここ変更した?」「どう変更した?」「まずオレからいじっていい?」というような確認が極力必要なくなり、互いの変更を一斉に行った上で、合成することができる点は結構大きいかと。
しかし、このSubversionは「デザイナーが」「一人で」使う際にも十分力を発揮すると思うのです。
例えば、ある画像ファイルを管理させ、「昨日の状態から”黄色い線を付け足した”」という状態を送ることで、「黄色い線がある状態」を保存しておくばかりでなく、やはり必要がなかった場合に「黄色い線がない状態」にすぐ戻すことも可能です。例えが簡単すぎて、そんなものは画像編集ソフトで線消せばいい話じゃないかという話ですが、もっと大きな変更があった場合には、戻すのも萎えることです。Subversionを使うようになると「まさか”ほにゃらら_20080327.jpg”みたいなファイル名のバックアップファイルを増やしたりしないよね?」という考え方に至ることもままあります。
バージョン管理を行うには、それなりにPCとサーバを立てる知識がないとできないわけですが、“Assembla“というウェブサービスを使うと、非商用プロジェクトに対して無料で500MBまでの開発環境を用意してもらえます(2008年3月現在)(2008年11月現在、無料では非公開にすることができませんのでご注意ください)。Assemblaは元々開発者が多人数で使うことを念頭に作られているだけあって、「複数ユーザのログイン」、「Wikiによるドキュメント管理」、「SVNやTracを用いたバージョンやバグの管理」、「プロジェクトに興味のある人間を自発的に参加させる情報開示機能」、「チャットによる遠隔地との連絡」、「マイルストーンによるプロジェクト管理」などができるようです。私はSubversionのためだけに使っています。
Assemblaウェブサイト
導入はとても簡単。トップページから[Register]を選択(下図)

Register(登録画面)
登録画面”Register”では、以下の項目を入力しましょう。なお、*がついているのは入力必須ですので、必ず入力しましょう。
- Login ID *
- 希望するログインIDを入力
- Password *
- 希望するパスワードを入力
- Confirm Password *
- 上と同じパスワードを入力
- E-mail *
- サービスを利用するのに使うメールアドレスを入力
- Time zone
- 住んでいる地域のタイムゾーンを設定。日本はGMT+09:00のところにあります。
[Register]ボタンをクリックで完了
メールの確認
Registerにて入力したメールアドレスに「[Assembla] Welcome to Assembla!」というタイトルの確認用メールが届きますので、このメールに記載されているURLにジャンプ。
My start page
Assemblaのサイトに戻ってくる思われます。まずはプロジェクトを決めましょう。ヘッダにある[Spaces]をクリック(下図)

My Spaces
[Create a new space]ボタンをクリックします。
Create a new space – Name and Description
- Space name
- これから作るプロジェクトの名前を入力します。
- Setup this space for:
- ひとまず”Graphic Designers”を選んでおきましょう。ここでの選択は、”Assemblaの持つたくさんの機能の中から、職種に適したツールをピックアップ”するためのものですが、あとからツールの追加や削除をすることはできますので、とりあえずはたくさんの不要な機能を省いた”Graphic Designers”を選択しておきます。
[Next>>]ボタンで次へ
Create a new space – Security
ここはデフォルトのままで大丈夫なので、そのまま[Next>>]ボタンで次へ。
Create a new space – Team
ここもそのままなので、[Next>>]ボタンで次へ。
Create a new space – Wiki Settings
これもそのまま[Next>>]ボタンで次へ。
Appearance
プロジェクトごとの管理画面の見た目の設定です。私は”New Flexible, right sidebar”を選んでます。[Next>>]ボタンで次へ。
Welcome to your new space. Please edit the home page.
これでプロジェクトの作成が完了しました。このままでは、SVNが利用できる設定にはなっていませんので、追加しましょう。
ヘッダにある[Admin]をクリック(下図)

Admin
[Tools]を選択します(下図)

Tools
- Tools available
- “Add Subversion & Trac”をクリック。
これで、このプロジェクトはSVNによるバージョン管理が可能となりました。ヘッダにも”Trac/SVN”という項目が増えています。
Trac/SVN
SVNではリポジトリと呼ばれる貯蔵庫にファイルを預けることによって、バージョン管理が行えるようになるのですが、そのリポジトリのアドレスは、ヘッダの[Trac/SVN]をクリックした先の画面の”SVN”にあります(下図)

……で
SVNサーバの準備はこれで整いましたが、SVNでの管理を行うには”SVNクライアント”が必要です。Windows並びにMacOSXのSVNクライアント導入手順はまた他のエントリで書こうと思います。
……にしてもまとめるの下手ですいません εー(’_`)
関連 : WindowsでSVNを利用「TortoiseSVN」
2008-4-17追記
冒頭の【注意】を追加しました。
2008-11-22追加
冒頭の【注意2】を追加しました。

psdをそのままアップして管理するのですか(´・ω・`)?
jpgデータ?
まめこさん。コメントありがとうございます。
管理されるファイルの形式自体はなんでもOKです。JPG形式であれば、コミットごとの時点に戻ることはできますが、一枚絵ですのでそこからの編集が大変かもしれません。
PSDやAI形式などの作業用データが含まれたフォルダも一緒に管理しておけば、それぞれのソフトのヒストリがなくても、コミットした時点のファイル内容に戻ることが可能ですし、それぞれのファイル内のレイヤーや効果もそのまま復元することができます。