Supernova Studioで Flutter爆速開発の夢を見れるか？ / Supernova Studio and Flutter Ultra Speed Development

モバイルアプリ開発ツールのSupernova Studioについての共有です。
SketchやXDといったデザインソフトで作成したファイルをSupernova Studioにインポートし、iOS(Swift)、Android(Java,Kotlin)、React Native、Flutterの各プラットフォーム向けにコードやアセットをエクスポートする機能を提供します。
2019.12.4にリリースされたV8でFlutter向けに多くの機能がアップデートされました。
Supernova Studioを使ってFlutterの開発を爆速にできるのか、調べてみました。
https://supernova.io/
#fultter #flutter_meetup_tokyo #SupernovaStudio

Transcript

1. Supernova Studioで Flutter爆速開発の夢を見れるか？ Flutter Meetup Tokyo #13 2019.12.10
2. 片岡　基 KATAOKA Motoi データスタジアム株式会社 フットボール事業部所属 テクノロジーとサッカーを愛するエンジニア 言語はJava、PHP、Javascript、Python、Dart!! モバイルアプリはTitanium Mobile、Flutter!! クラウドはAWS、特にLambdaとMedia Services サッカーは浦和レッズ (個人アプリ出してます) Flutter歴２ヶ月 (アプリリニューアル中)
3. https://supernova.io/
4. Sketch、XDの デザインファイル Supernova Studio (Macアプリ) 各種プラットフォーム用 コードを自動生成！！ Swift React Native インポート エクスポート Java, Kotlin Flutter Supernova Studioとは
5. 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エクスポートが すごい良くなったよ！
6. 特徴 ✅ Sketch、Adobe XDからのデザインの1：1変換 ✅ 完全にネイティブな設計コンポーネント ✅ ナビゲーションチェーンとユーザーフローの作成 ✅ レスポンシブレイアウトの自動作成 ✅ 自動リソース検出およびエクスポート（スライスは不要） ✅ 30の言語への自動ローカライズ （Google利用。有料） ✅ デザイン解像度の自動処理 ✅ 本格的なマルチプラットフォームアニメーションエンジン ✅ iOS、Android、React Native、Flutterに必要なコード、アセット、プロジェクト、 　 フォント等をエクスポート ✅ Supernova Cloud — 比類のないコラボレーションプラットフォーム https://blog.prototypr.io/introducing-s upernova-studio-35335de5044c
7. 何がうれしいのか 一定以上の規模のモバイルアプリ開発の流れ アプリの企画 デザイナーがSketchや XDでUIデザイン作成 アプリエンジニアが デザインを見ながら レイアウトやアニメーショ ンをコーディング サーバサイドエンジニアが APIを開発 両方のエンジニアが アプリとAPIを結合 時間がかかっているのが 大幅に短縮される‼
8. インストール＆サインアップ →TOPページの青いボタンからzipをダウンロード、 　解凍して「アプリケーション」フォルダに入れるだけ。 　Macのみ対応。 →名前やメールアドレス入れるか、 　Googleアカウントでサインアップ。
9. SketchまたはXDファイルのインポート ここからSketchかXDの ファイル選択 インポート実行！ Flutter! MacにSketch、XDがインス トールされてなくてもOK
10. インポート完了 ストラクチャ インスペクタ デザインエディタ プレビュー プロパティ インスペクタ https://dribbble.com/shots/6150423-Surfing-App-Freebie
11. Flutterコード コードプレビューへ Flutterコード！ デザインエディタで 何か変更すると 即座にコードに反映！
12. Viewコンポーネント ボタンに見えるものも Viewとして読み込まれる
13. 画面遷移の設定方法 Step1 リンクをつけたいコンポーネントを 右クリックして(ここではImage) Convert to Component → Button でImageをButton化する
14. 画面遷移の設定方法 Step2 リンクをつけたいButtonを 右クリックして Create Interaction → Push → 任意の画面 で画面遷移が設定できる
15. ナビゲーションエディタ ここを押すと ナビゲーションエディタへ 画面遷移もコードに即反映
16. Flutterエクスポート Flutterエクスポート
17. Flutterエクスポート dartファイル、画像、 フォント、pubspec.yml等 プロジェクト一式が生成される エクスポートしたフォルダを VSCodeで開く
18. いざ起動！
19. エラー・・ レイアウト崩れ 真っ白
20. 公式サンプルのSpacebookでもエラー エクスポート後はSupernovaへの依存はないので Dartコードを自分で修正すれば解消するはず エラー 表示されるべきものが 表示されない
21. Swiftエクスポートからの起動はうまくいった Flutter Developerを募集してるので いい人がJOINすれば一気に改善するかも？ https://jobs.supernova.io/
22. 課題 古いSketch、XDで作ったデザインファイルはインポート不可 　　→ 最新版で開いて保存し直すとインポートできる インポート時、たまに読み込まれない画像がある 　　→ 対策不明 Flutterエクスポートすると、Textクラスの所でエラー 　　→ alignment: TextAlign を textAlign: TextAlign に置換で解消 インポートした時にレイアウトが崩れる場合がある 　　→ 調整がんばる。慣れればいけそう
23. 朗報(今朝のことです) 今日(12/10)か明日リリースするV8.1で Flutterのエクスポート、コード生成に 関する大量の修正(a ton of fixes)を行ったよ！
24. 価格 https://supernova.io/pricing CODEプラン 年契約の場合20ドル/月 月契約の場合25ドル/月 無料プランでも コードプレビューは見れる
25. 結論 Supernova Studioで Flutter爆速開発の夢を見れるか？ 2019.12.10現在ではまだ本格利用は難しいが、 開発が非常に活発なので近い将来期待はできそう。 うまくいけばデザイナーとエンジニアの 理想的な連携が実現するはず！
26. Thank You! データスタジアムではエンジニア積極採用中！ スポーツ好きなエンジニアは是非！ https://www.datastadium.co.jp/
27. 参考リンク 公式サイト 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/
28. 参考) Sketch、XDファイル入手 https://dribbble.com/shots/following/mobile?ti meframe=ever&source_file=.sketch https://www.sketchappsources.com/category/mobile.html