sideAuthor:jollyjoesterこんにちは。ゆかいな仲間たちがお届けします。SwiftUIが発表されました。この記事はSwiftUIの学習のために、以前開発したFlutter製のアプリをSwiftUIで書き換え、OSSとして公開したお話です。2018(以下MTC2018)にて、私たちはメルカリグループ内で有志を募ってFlutter製のカンファレンス専用アプリ1を開発しました。(やっていく気持ち?)を温めていたのですが、WWDC2019直後に実施したチービルランチでは当然SwiftUIの話で盛り上がり、突発的に「SwiftUIでMTC2018アプリをリライトするぞ」プロジェクトが発足しました。チービルランチ直後の勢い余ったSlackポストきっかけは「SwiftUI出たけどProductで使うのはまだ先だね〜でもキャッチアップしたいね。アレ?MTC2018アプリ使えるんじゃね?」という流れだったと記憶しています。アプリとしての規模もほどほどで、仕様やデザインなどはすでに決まっているので実装の部分だけ置き換えれば良いという、うってつけな対象でした。その当時のやっていきあふれる社内Wikiの一部を下記に転記します。これは何か?意識高いチービルにより生まれた有志プロジェクト。近年、技術の進歩のスピードが上がっており、日々新しい技術が発表されている。SwiftUIもその一つ。Productですぐ利用するにはハードルが高い。技術をキャッチアップするにはモノを作るのが一番。外部エンジニアがすぐに触って試せる成果物になるのでアウトプットを多くのエンジニアに触ってもらいやすいこうしてMTCアプリをSwiftUIで書き換えるプロジェクトが始まりました。(@masamichi)こんにちは。去年のMTC2018のアプリはFlutterで開発しましたが、今回SwiftUIで書き換えました。WWDCで突然SwiftUIが発表され何か作りたいなーと思っていたところ、上記のようにMTCアプリを書き換えようという話になりました。MTCアプリは新しいフレームワークを試すのにちょうどいい規模と仕様で毎回楽しく開発ができます。SwiftUIそれぞれに特徴があるので、完全に同じデザイン、仕様で書き換えた訳ではありませんが、主な機能は移植できています。オリジナルのアプリはFlutterで作っていたので、WidgetをだいたいそのままSwiftUIのViewに置き換えていきました。展示ブース一覧画面のそれぞれのカードはFlutterでは以下のようなWidgetを作っていました。Colors.black))))],)));}SwiftUIではこんな感じです。SwiftUIアーキテクチャはMVVMを採用しています。Redux版も作りたいですね。さんが公開しているSwiftUIのサンプルを参考にしています。github.com開発は7月から少しずつ始めていました。Beta3だったと思います。そこからXcodeの新しいBetaバージョンがリリースされるたびに更新していきました。Changeが結構入っていて追従しなければなりませんでした。ナビゲーションに使用していたAPIがdeprecatedになってしまい他の方法を考えたりしました。PageViewなどはUIKitを使わなければいけませんでした。ポップ時にクラッシュしてしまうという問題があります。タイムテーブル一覧画面のように、1つのRowからセッションの詳細画面またはスピーカーの詳細画面と、複数の画面に遷移する方法を実現するのにとても苦労しました。私がとった方法は、ListではなくScrollViewを使って手動でリストを作成するという方法です。ScrollViewであれば1つのRowの中に複数のNavigationLinkを置いても正常に遷移できるのですが、Listを使うと画面遷移がおかしくなってしまいました。{Text("NavigationLink2")}Divider()}}}}}}ScrollViewと複数のNavigationLinkを使った場合せっかくSwiftUIで作るのでDarkModeにも対応しようということで、DarkModeにも対応しています!とはいえ、テキストや背景色はシステム標準のものを使用しておけば特に対応する必要はありません。特別に対応が必要なのは、画像やカスタムカラーの部分です。画像はそれぞれLightMode、DarkMode用の画像を用意しました。DarkModeのそれぞれの色を設定することができます。Symbolsを使っています。Symbolsで間に合う気がします。今回SwiftUIで開発しましたが、ReactやFlutterのようなComponent指向、宣言型シンタックスがついに公式でサポートされたのがやっぱり嬉しいですね!ノウハウが必要な部分もありましたが、全体を通してやっぱり作りやすかったです。SwiftUIはまだバージョン1で、足りないコンポーネントもありますが、今後はFlutterのように、たくさんのコンポーネントをサポートしていって欲しいです。(@kagemiku)こんにちは。@kagemikuです。今年のWWDCはSwiftUIやCombineの発表と、Framework面でかなり盛り上がる内容でしたね。今年は自分もチケットが当たり、弊社のiOSエンジニアの方々と共に現地参加してきました。mercanWWDCから帰国後もその熱は冷めず、試行錯誤しながらSwiftUIと格闘する日々を送っていました。そんなある日、techconfのアプリに関するチャンネルを社内Slack内でたまたま見つけ、SwiftUIでやっていきしたいよねと会話している様子を目にしました。postこれに参加しない手は無いなと思い早速参加表明し、前述のチービルランチ(WWDC19直後に実施されたもの)にも参加後、晴れてわいわいすることになりました。@masamichiさんも書かれていますが、その頃のXcodeはBetaもBetaで、新しいBetaが公開されるたびにビルドが通らなくなって苦労した思い出があります。その度に@masamichiさんがシュッと修正しておりました。Appleの機能を実装しました。元々のMTC2018アプリにはそのような機能はありませんが、とりあえず勢いです。AppleのButtonはSwiftUIで直接記述できないため、UIViewControllerRepresentableに適合したViewControllerを作成し、それをSwiftUI内で表示するという流れで実装しました。Buttonとして実装していました。Betaのバージョンアップの度に壊れることも。Buttonとして生きています。(@masamichiさん本当にありがとうございました。)サードパーティのライブラリを一切使わず、純粋なSwiftUIとCombineだけで実装しましたが、どちらも公式のFrameworkということもありその親和性は非常に良かったです。🥰まとめいろいろあって(jollyjoesterがサボっていて)SwiftUIの正式リリース直後の公開とはなりませんでしたが、成果物を下記のリポジトリに公開することができました。ある方はどなたでもContributeしていただけます。それでは引き続きお楽しみください。