Supernova Studioで Flutter爆速開発の夢を見れるか？ Flutter Meetup Tokyo #13 2019.12.10

片岡　基 KATAOKA Motoi データスタジアム株式会社 フットボール事業部所属 テクノロジーとサッカーを愛するエンジニア 言語はJava、PHP、Javascript、Python、Dart!! モバイルアプリはTitanium Mobile、Flutter!! クラウドはAWS、特にLambdaとMedia Services サッカーは浦和レッズ (個人アプリ出してます) Flutter歴２ヶ月 (アプリリニューアル中)

https://supernova.io/

Sketch、XDの デザインファイル Supernova Studio (Macアプリ) 各種プラットフォーム用 コードを自動生成！！ Swift React Native インポート エクスポート Java, Kotlin Flutter Supernova Studioとは

Supernova Studioとは ・macOS用アプリケーション (2018年3月にV1.0リリース) ・2019年3月にV6.0でFlutterエクスポートに正式対応 ・2019年12月4日にリリースされたV8.0ではFlutterにかなり力を入れている FlutterだけHot Reload 対応したよ！ https://supernova.io/updates Flutterエクスポートが すごい良くなったよ！

特徴 ✅ Sketch、Adobe XDからのデザインの1：1変換 ✅ 完全にネイティブな設計コンポーネント ✅ ナビゲーションチェーンとユーザーフローの作成 ✅ レスポンシブレイアウトの自動作成 ✅ 自動リソース検出およびエクスポート（スライスは不要） ✅ 30の言語への自動ローカライズ （Google利用。有料） ✅ デザイン解像度の自動処理 ✅ 本格的なマルチプラットフォームアニメーションエンジン ✅ iOS、Android、React Native、Flutterに必要なコード、アセット、プロジェクト、 　 フォント等をエクスポート ✅ Supernova Cloud — 比類のないコラボレーションプラットフォーム https://blog.prototypr.io/introducing-s upernova-studio-35335de5044c

何がうれしいのか 一定以上の規模のモバイルアプリ開発の流れ アプリの企画 デザイナーがSketchや XDでUIデザイン作成 アプリエンジニアが デザインを見ながら レイアウトやアニメーショ ンをコーディング サーバサイドエンジニアが APIを開発 両方のエンジニアが アプリとAPIを結合 時間がかかっているのが 大幅に短縮される‼

インストール＆サインアップ →TOPページの青いボタンからzipをダウンロード、 　解凍して「アプリケーション」フォルダに入れるだけ。 　Macのみ対応。 →名前やメールアドレス入れるか、 　Googleアカウントでサインアップ。

SketchまたはXDファイルのインポート ここからSketchかXDの ファイル選択 インポート実行！ Flutter! MacにSketch、XDがインス トールされてなくてもOK

インポート完了 ストラクチャ インスペクタ デザインエディタ プレビュー プロパティ インスペクタ https://dribbble.com/shots/6150423-Surfing-App-Freebie

Flutterコード コードプレビューへ Flutterコード！ デザインエディタで 何か変更すると 即座にコードに反映！

Viewコンポーネント ボタンに見えるものも Viewとして読み込まれる

画面遷移の設定方法 Step1 リンクをつけたいコンポーネントを 右クリックして(ここではImage) Convert to Component → Button でImageをButton化する

画面遷移の設定方法 Step2 リンクをつけたいButtonを 右クリックして Create Interaction → Push → 任意の画面 で画面遷移が設定できる

ナビゲーションエディタ ここを押すと ナビゲーションエディタへ 画面遷移もコードに即反映

Flutterエクスポート Flutterエクスポート

Flutterエクスポート dartファイル、画像、 フォント、pubspec.yml等 プロジェクト一式が生成される エクスポートしたフォルダを VSCodeで開く

いざ起動！

エラー・・ レイアウト崩れ 真っ白

公式サンプルのSpacebookでもエラー エクスポート後はSupernovaへの依存はないので Dartコードを自分で修正すれば解消するはず エラー 表示されるべきものが 表示されない

Swiftエクスポートからの起動はうまくいった Flutter Developerを募集してるので いい人がJOINすれば一気に改善するかも？ https://jobs.supernova.io/

課題 古いSketch、XDで作ったデザインファイルはインポート不可 　　→ 最新版で開いて保存し直すとインポートできる インポート時、たまに読み込まれない画像がある 　　→ 対策不明 Flutterエクスポートすると、Textクラスの所でエラー 　　→ alignment: TextAlign を textAlign: TextAlign に置換で解消 インポートした時にレイアウトが崩れる場合がある 　　→ 調整がんばる。慣れればいけそう

朗報(今朝のことです) 今日(12/10)か明日リリースするV8.1で Flutterのエクスポート、コード生成に 関する大量の修正(a ton of fixes)を行ったよ！

価格 https://supernova.io/pricing CODEプラン 年契約の場合20ドル/月 月契約の場合25ドル/月 無料プランでも コードプレビューは見れる

結論 Supernova Studioで Flutter爆速開発の夢を見れるか？ 2019.12.10現在ではまだ本格利用は難しいが、 開発が非常に活発なので近い将来期待はできそう。 うまくいけばデザイナーとエンジニアの 理想的な連携が実現するはず！

Thank You! データスタジアムではエンジニア積極採用中！ スポーツ好きなエンジニアは是非！ https://www.datastadium.co.jp/

参考リンク 公式サイト https://supernova.io/ ドキュメント https://help.supernova.io/docs Twitter https://twitter.com/AppSupernova ブログ https://blog.prototypr.io/@appsupernova Issue Tracker https://github.com/Supernova-Studio/public-issue-tracker/issues YouTube https://www.youtube.com/channel/UC8yAiDHVuCDPwdpnVruq-MA Slack Community https://supernova-community.now.sh/

参考) Sketch、XDファイル入手 https://dribbble.com/shots/following/mobile?ti meframe=ever&source_file=.sketch https://www.sketchappsources.com/category/mobile.html