【前編】Sketchからノンプログラミングでネイティブアプリを作れちゃう！？「Supernova」を使ってみた。

こんにちは！
社長室で新規サービスのデザインを担当しています田村（@wowr_t)です。

さっそくですが、皆さんは普段どのようなワークフローでアプリを開発されていますか？
Nagisaでは、デザイナーがSketchでUIを作成しInVisionでモックを作る→エンジニアがそれらを元にUIを実装するというのが大まかな流れです。

InVisionのInspect機能やZeplinの登場によって、デザイナーとエンジニアのより良い連携が可能になったと思います。しかしながら、自分は両者間のワークフローにおいて課題がまだまだあるように感じています。

特に課題感を多く持っていると感じるのは、「SketchでUIを作成してから、そのUIをもう一度コードで作成する」という二度手間のようなフローです。

「Sketchで作ったUIが、そっくりそのままネイティブアプリになればよいのに・・・！」
そう思っていたところ、Supernovaというツールのβ版が新しくリリースされましたのでご紹介します。

Supernovaとは

簡単に言うと「Sketchをベースにアプリプラットフォームに合わせたプロジェクトファイルを書き出してくれるツール」です。Mac OSに対応しています。

これまでにもSketchからコードを生成してくれるツールやプラグインはありましたが、あくまでUIを構成するコードの一部だけの生成でありました。

Supernovaの特徴は、各アプリプラットフォームに合わせたプロジェクトファイル、コード、アセットをエクスポートしてくれるところにあります。

2017年7月31日時点ではiOSまたはAndroidプロジェクトへのエクスポートが可能で、Swift, Java, Kotlin, Reactへのコードの変換に対応しています。

大まかな機能は以下になります。

・Sketchのレイヤーをコンポーネントへ変換
・コンポーネントのスタイリング
・画面遷移/トランジションの設定
・アニメーションの設定
・レイアウトの自動設定
・プロジェクトファイル、コード、アセット、フォントのエクスポート

使い方

Supernovaのインストール

まずは公式サイトからMacアプリをインストールしていきます。

Supernova Studio

プロジェクトの立ち上げ

アプリを立ち上げるとこのような画面が出てきます。

「New Project from Sketch Design…」からSketchファイルを読み込むことで新規プロジェクトを立てることができます。
この記事では公式で用意されているサンプルファイルを使用します。
「Open example Sketch files」をクリックしてプロジェクトを開きます。

また、保存したプロジェクトは「.snproject」の拡張子で保存されます。

編集画面

編集画面の構成は以下になります。

中央のパネル・・・画面のプレビューやモードの変更
左側のパネル・・・各スクリーン、コンポーネント、アニメーション、遷移の選択や確認
右側のパネル・・・コンポーネントの編集やスタイルの設定、レイアウトの設定

UIはSketchと親和性が高く、日頃からSketchを使いこなしている方はすんなりと操作できるのではないでしょうか。

コンポーネントの作成

編集画面の確認ができたら実際に作り込んでいきたいたいと思います。

まずはコンポーネントの作成から始めます。
コンポーネントはSketchのレイヤーに当たるものです。コンポーネントに変換することでそれぞれの要素に役割を持たせます。

試しに「SIGN IN」を “Button” というコンポーネントに変換してみましょう。

1.Editモードの状態で、左のパネルで「SIGN IN」を選択します。

2.右側のパネルの「View」から「Button」を選択します。

非常に簡単にコンポーネント化することができたと思います。
また、それぞれのコンポーネントが扱うことができるプロパティなどは公式ドキュメントに掲載されているのでそちらを参考にしてください。

レイアウトの設定

Supernovaには「Starlight」というレイアウトの制約を自動で設定してくれる機能があります。
早速レイアウトの変化を確認してみましょう。
Intaractiveモードの状態で中央下のデバイスアイコンから任意のデバイスサイズを選択します。

するとこのようにある程度はデバイスに合わせてレイアウトされていると思います。

また、レイアウトが気になる部分にだけ個別に制約を設定することができます。
右側のパネルの「Layout」から設定し、Interactiveモードの状態で「Simulate autolayout」にチェックを入れると設定した制約の状態で確認することができます。

アニメーションの作成

Supernovaでは基本的なテンプレートアニメーションが用意されています。
任意のコンポーネントを右クリックし、設定したいアニメーションを選択します。

すると中央下からタイムラインが表示されるので、ここで再生時間の設定やタイミングの調整を行います。

右側のパネルではスケールの値などを調整できます。
また、アニメーショングループを設定することでアニメーションを実行するアクションやイベントを設定することができます。

画面遷移/トランジションの設定

画面遷移とトランジションの設定はNavigationモードで行います。
中央下の「Navigation」をクリックしてNavigation Mapを開きましょう。

そして起点となる画面を右クリックで選択し、繋げたい画面までctrl+ドラッグします。
すると、トランジションとトリガーとなるコンポーネントを選択することができます。
（2017年7月31日現在では2種類のトランジションしか選択できませんが、今後種類が増えていくようです。）

プロジェクトのエクスポート

最後に作成したSupernovaプロジェクトをアプリプラットフォーム用のプロジェクトにエクスポートしましょう！
ファイル > Exportから任意のプラットフォームを選択します。
今回はiOSプロジェクトを選択します。

無事エクスポートされると、XcodeプロジェクトやStoryBoard、イメージアセットなどが揃っているのが確認できると思います。
さっそくXcodeプロジェクトを開いてみます。

無事にプロジェクトが開けました。。！
StoryBoardを見てみると、Supernovaで設定した画面遷移がきちんと反映されています。