更新日:
【お役立ち情報】 Sketchのバージョン管理が出来るAbstractとは？
Abstractとは、Sketchファイルをバージョン管理する為のサービスです。
Abstractは、1ヶ月無料トライアル付きで月＄10から利用する事が出来ます。Sketchについてよく分からないという方は、こちらの「Sketchの使い方」を参考にしてください。
Abstractの基礎情報
この章では、Abstractの基礎情報について解説します。
バージョン管理とは？
バージョン管理とは、ファイルの変更履歴を記録するシステムの事です。バージョン管理する事で、１度編集したファイルを過去の状態に戻したり、変更内容の差分を表示することが出来ます。
また、変更履歴には「誰が、いつ、どのように」変更したかも含まれるので、複数人で作業する場合に導入する事をお勧めします。
Abstractの特徴
Abstractは、アメリカのElastic Projects, Inc.が提供しているバージョン管理の仕組みを持ったサービスです。現在は、拡張子が「.sketch」のデザインデータに対して変更履歴を記録する事が出来ます。(今後Adobe系対応予定)
エンジニアの方でしたら、デザインのgithub版と捉えてもらった方がわかりやすいかと思います。これから説明させて頂きますが、作成したデザインデータに対してブランチを切って変更をコミット、マージすることが可能です。
Abstractで出来る事は主に下記の通りです。
- コメント機能
- プレビュー機能
- バージョン管理機能
- サービス単位でプロジェクトファイル作成
- サービスのSketchファイル一元管理
Abstractは、変更差分のプレビュー表示機能があるので、どの部分のデザインが変更されたのか一目で確認する事が出来ます。
Abstract以外にもGithubを利用したKactusというツールがありますが、Gitへの知識や用語が必須になりますので、初心者の方でしたらAbstractの方が参入障壁が少ないです。
Abstractをダウンロードしよう！
今回は１ヶ月無料の方でダウンロードしてみましょう。
まずは、Abstractの公式ページにアクセスしてアカウント作成します。
アカウント作成後
アカウント作成後は、下記のページに飛ぶので組織名もしくは会社名を記入しましょう。
組織名を登録すると、Web上でAbstractの画面にページ遷移します。
実際の作業をするには、Macアプリをダウンロードして作業を進めていきます。右上のメニュー、もしくは、Projectsページの「Download Abstract for macOS」ボタンからダウンロードする事が出来ます。
プロジェクト作成 〜 ユーザー招待をしよう！
Abstractは、サービス単位でプロジェクトを作る事が出来ます。
プロジェクトは、設計作業を行う場所になります。
1つの組織(pikawaka)の中にWebやiOSなどのデザインの設計作業を行う事が出来ます。
また、作成したプロジェクト毎に招待するユーザーを制限する事が出来ます。
プロジェクト作成する方法とは？
- サイドバーにある「Projects」を選択します。
- 右上の青い「NEW PROJECTボタン」を押して、プロジェクトを作成します。
- 既にローカルにプロジェクトで使用する.sketchファイルがある場合 作成したProject内で「IMPORT SKETCH FILE」を選択します。
- 新規の.sketchを作成する場合 右側の「CREATE SKETCH FILE」を選択します。
| 用語 | 内容 |
|---|---|
| Make project private | プロジェクトをサービスの中で非公開する時に選択 |
| Automatically generate assets | プロジェクトをexportする際のブランチ選択 |
他のユーザーを招待する流れ
- サイドバーにある「People」を選択します。
- 右上の青い「INVITE PEOPLEボタン」を押してフォームを開きます。
- 開いたフォームで「Contributors」か「Viewers」の権限を選んで下さい。権限は下記を参照して下さい。
- 権限を選択したら、メールでユーザーを招待するかリンクを取得してユーザーに送るか選びます。
| 権限 | 内容 |
|---|---|
| Contributors | すべての機能にアクセス出来る |
| Viewers | 作品をレビュー、コメントや注釈を残す、ファイルをエクスポートする事が出来る |
プロジェクト毎に招待するユーザーを制限する
先ほどの手順は、サービス全体にユーザーを招待していましたが、
プロジェクト毎に招待するユーザーを制限することも出来ます。
- サイドバーの「Projects」より招待するProjectを選択します。
- Project内のサイドバーの「Members」を選択します。 <ここから通常の手順と同じです。>
- 右上の青い「INVITE PEOPLEボタン」を押してフォームを開きます。
- 開いたフォームで「Contributors」か「Viewers」の権限を選んで下さい。
- 権限を選択したら、メールでユーザーを招待するかリンクを取得してユーザーに送るか選びます。
Abstractの使い方
この章では、Abstractの使い方について解説します。補足説明の動画もあるので実際に手を動かしながら進めてみてください。
ブランチの作成方法
プロジェクト作成した際に「CREATE SKETCH FILE」もしくは、「IMPORT SKETCH FILE」で選択したファイルが大元のmasterブランチになります。あるブランチから別のブランチを作成することを「ブランチを切る」と言います。
今回は、masterブランチから自分の作業するブランチを切っていきます。
- サイドバーのMasterを選択します。
- 右上の青い「NEW BRANCH」ボタンを押してブランチ名を入力して作成します。(Masterからブランチを切る)
- ブランチを切ると、ページの右側に「EDIT IN SKETCH」ボタンが表示されるので選択すると、そのブランチでSketchが開いて作業を開始する事が出来ます。
commit(コミット)する
ブランチ切って開いたファイルを編集すると、Abstractのツールバーが表示されます。こちらに変更履歴を残すためにcommit(コミット)を行います。
- 作業ブランチで開いたSketchファイルを編集して保存します。(Command + S)
- 変更内容を保存すると、Abstractのツールバーで「Commit Changes」ボタンが表示されるので選択します。
- モーダルダイアログでコミットのタイトルやメッセージを入力して「COMMIT CHANGES」を選択してCommitします。
- Abstractの作業ブランチのページでコミット内容が表示されます。
ブランチをmerge(マージ)する
作業が完了したブランチを別のブランチに反映させることを「ブランチをmerge(マージ)する」と言います。
作業中のブランチが完了したら、今回はmasterブランチに変更内容を取り込みます。
サイドバーにあるBlanchs配下の作業ブランチのページにある「MERGE BLANCH」と書かれたボタンを選択してmergeします。
merge後に、Masterのページを表示すると作業ブランチで編集した内容が追加されている事が確認出来ます。
コンフリクト解消
mergeする際に、別のブランチで編集した箇所と自分のブランチで編集した箇所が被ってしまう場合(コンフリクト)がしばしばあります。
コンフリクトが起きている状態でmergeしようとすると、編集が被った箇所のどちらのデザインが正しいのか選択するように促されます。
コンフリクトが起きている状態だと「MERGE BLANCH」ではなく、「UPDATE FROM MASTER」のボタンが表示されます。
「UPDATE FROM MASTER」を選択すると、コンフリクトが起きているデザインをプレビューで表示してくれるので、正しい方を「PICK LAYER」を押して反映させます。
コンフリクトが解消されると、「MERGE BLANCH」が表示されてmerge出来るようになります。
過去ファイルの開き方
Abstractは、履歴を辿って簡単に過去ファイルをSketchで開く事が出来ます。
- サイドバーの「Master」ページにある上部の「COMMITS」タブを開きます。
- Masterのファイル履歴があるので、そこから開きたいファイルを選択します。
- ページの右側に「open」ボタンがあるので、開くと過去ファイルをSketchで開く事が出来ます。
Masterまたは、ブランチを以前のコミットに復元する
自分が所有しているブランチなら以前のコミットに復元する事が出来ます。
- サイドバーよりMaster, Blanchを選択します。
- 上部の「COMMITS」タブをクリックします。
- 復元したいコミットを選び、右上のSHAREの横にある時計アイコンをクリックします。
- 以前のコミットに戻す理由を記載して、「RESTORE COMMIT」ボタンを押します。
この復元内容もMasterまたはブランチの履歴に記録されます。
詳細な使い方は、こちらのAbstract公式ページのヘルプセンターを参照してください。
Abstractの注意点
Abstract上でブランチ切ってから「EDIT IN SKETCH」ボタンを押してSketchファイルを開かなければバージョン管理されないので注意しましょう。
ローカルにあるSketchアプリを開いて作業するだけでは、バージョン管理をする事は出来ません。
Sketchを学びたい方におすすめの１冊
Sketchについて学びたい！という方は、以下の書籍で基礎から実践的な内容まで学ぶことができます。
UIデザイナーとタイトルにありますが、内容は初心者向けなので安心して手に取ることができる１冊です。
Sketchの基本的な操作から実践的なノウハウまでを網羅的に解説した入門書！
この記事のまとめ
- Abstractは、Sketchファイルをバージョン管理する為のサービス
- 変更した内容は、プレビュー機能で直接確認する事が出来る
- 1ヶ月無料トライアル付きなので是非導入してみよう！
