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

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 ﬁxes)を行ったよ！

価格 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

Supernova Studioで Flutter爆速開発の夢を見れるか？ / Superno...

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

Motoi Kataoka

More Decks by Motoi Kataoka

Other Decks in Programming

Featured

Transcript