SwiftUIで画像・地図差し替え・リスト表示機能のコーディング

二日目午前中は、一日目に行った「Building Lists and Navigation」の続きから。前回同様、増井雄一郎さんのライブコーディングと解説に従い、画像を差し替えるコーディングにチャレンジしました。

続いて、緯度・経度の位置情報から地図が表示されるmapViewsで、地図を差し替えるコードを書いていきます。

次のステップは、観光地をクリックすると、詳細なリストが表示されるワーク。

iPhoneなどの実機につなぎ、アプリが実際に表示されるかの確認や、 iPadなど様々なデバイスで表示されるプレビュー画面が確認できるようにする機能も試してみます。一度に確認しながらプログラミングできるのは、SwiftUIのメリットの一つだといいます。

二日目午前は、Handling User Input機能をコーディング

ここまではデータをもとに表示するアプリを作ってきました。次のチュートリアル「Handling User Input（ユーザー入力の処理）」では、ユーザーが自分で情報を入力することができたり、お気に入りをチェックしたり、お気に入りの情報だけを表示させるフィルタリング機能を作っていきます。

最初に、お気に入りのランドマークを示す星を表示する機能を作ります。

さらに、トグルボタンを追加し、リストをフィルターしてお気に入りのみを表示する機能も作ります。「SwiftUIは変数に応じて自動的に画面が変わったり、アニメーションもつけてくれる便利な機能があり、コーディングがとても楽になった」と、増井さん。丁寧にコードの書き方を解説していきます。

午前中のハンズオン後は、事務局で用意したお弁当とお茶でランチ休憩。テーブル同士でコミュニケーションを深めたり、ハンズオンの続きに取り組む人、講師に熱心に質問する人も見られました。

ランドマークにお気に入りボタンを作成する

午後はユーザーがお気に入りを付けたり消したりできるようにするボタンを作成しました。

さらに、アニメーションをプログラミングで描いたり、

AppleWatchなどの画面サイズが違うデバイスでも表示できるようにするチュートリアルについて、説明されました。

また、SwiftUIではUIKit（iOSのUIコンポーネント）でできることが、まだすべてできるわけではないため、UIKitのコンポーネントをSwiftUIでも使えるようにツールが提供されています。過去の資産・部品をどう使って作るかがとても重要だと増井さんは言います。

二日間で学んだ知識を活かし、SwiftUIでToDoリストを作ってみよう

予定より早くSwiftUIチュートリアルのハンズオンが進んだため、急遽増井さんから、SwiftUIでデータ定義、リスト表示などを作りながら復習できる「ToDoリスト」アプリを作成する課題が提供されました。

最後に、増井さんから「SwiftUIを使うと、これまで以上に簡単にユーザーインターフェースが作れるようになるので、勉強するなら今。まだ世の中にまとまった情報やノウハウがあまり出ていないので、皆さんからどんどん発信していってほしい」とメッセージが贈られ、午後のハンズオンは終了となりました。

参加者の皆さんの感想は？

ハンズオン後、参加者の皆さんにはそれぞれ感想を語っていただきましたので、ご紹介させていただきます。

「スマートフォンアプリの開発には敷居が高いイメージがありましたが、今回のハンズオンで自分にもやれそうというイメージを持つことができました」

「iPhoneアプリの開発自体はあまりやったことがなかったが、SwiftUIで簡単に作ることができることがわかった。まだ始まったばかりだということなので、これからどんどん試してみたいと思った」

「今日勉強したことを会社にも持ち帰り、仕事でもうまく活用して繋げていきたいと思います」

「私にはとても難しかったので、ここをコピペしてというのを忠実に守ってやってみました。今回参加してみて、すごく面白いと思ったのは、目で見て出来上がってるのがわかること。もっと基本に立ち戻り、イチからプログラミングの勉強をしてみたいと思いました」

「私は自営業なので、普段はなかなか新しい技術を学んだり、プログラミングをするなど、重い腰を上げるタイミングがないので、いい機会でした」

「プログラマではないのでついていくのが大変だったのですが、講師やチューターの皆さんが親切に教えてくれたおかげで作ることができ、自信をつけることができました」

「僕は大学生で、授業で少しプログラミングするくらいしか経験がなかったのですが、すごくわかりやすくて、アプリを作ってみたくなりました。とても貴重な体験だったので、学校で友だちとも勉強会とかできたらいいなと思いました」

「初めてSwiftUIを触ってみて、昔Swiftを少し触ってときは面倒くさかったのが、簡単に配置できたり、作れるようになってたので、もう一回頑張ってみようかなと思いました」

「今回SwiftUIをやってみたらすごく楽しくて、自分にスキルにしたいなと思いました。二日間楽しかったです」

「SwiftUIのチュートリアルには載っていましたが、改めてハンズオンで手を動かすことで深く学べることができました」

「iPhoneアプリをSwiftを使って作るのは初めてでしたが、思った以上に簡単にきれいなUIで作ることができてうれしかったです」

「11年ぶりにプログラミングをやりましたが、iPhoneアプリはいつも使っているので、アプリ開発には興味がありました。業界を離れて10年経ちますが、できることも増えているし、またやってみたいと思いました」

「こんなアプリができるんだと思ったのですが、バグが出て悔しいので最後にきれいにしてから帰ります」

最後に、今回の主催者である仙台市の荒木田さんから、「参加者の皆さんからの感想を聞いて、とてもうれしく感じています。今後もこのような場をどんどん用意していきたい」と、挨拶と今後の抱負が述べられました。

仙台市では、今後もこうしたハンズオンや勉強会を開催していく予定です。参加してみたいと思った方は、ぜひ、仙台市のグループをチェックしてみてください。

また、Google Cloud Platform（GCP）のユーザーグループでは、GCPUG仙台を立ち上げました。GoやKotlinのコミュニティや勉強会なども随時開催予定ですので、こちらもぜひチェックしてくださいね！

▶︎イベントレポートの前編はこちら！ 【前編】Swiftで「iPhoneアプリ作り体験」ハンズオン！

▶︎仙台市主催のイベント
【2019年11月7日(土)～11月8日(日)】KotlinでWebアプリケーションを開発してみようハンズオン
【2019年12月7日(土)～12月8日(日)】SwiftでiPhoneアプリ作り体験！
【2020年1月18日(土)～1月19日(日)】アプリUIデザイン実践ハンズオン
【2020年2月7日(土)～2月8日(日)】デザインシンキング体験講座
【2020年2月29日(土)～3月1日(日)】ビジネスプラン構築ワークショップ