スト編はここまで

はい、そういうわけでございまして。
「SwiftUI Tutorials」も3回目になりました。

第1回はビューの組み合わせ、第2回はリストとナビゲーション、
そして今回は「Handling User Input」、つまり、ユーザーからの入力を制御しよう、という回になります。

ふーむー。難易度がビュンビュン上がっていきますね。
確かコレはチュートリアルと聞いていたような気がしたのですが、やっぱり気のせいかもしれません。

この辺りから本格的に基礎参考書が必要になってきますので、
ワタシも前回用意した「詳細!SwiftUI iPhoneアプリ開発入門ノート」を見ながら進めることにしましょう。

ではでは、深呼吸をひとつして、今回もスタートです!

SwiftUI Essentials – Handling User Input
https://developer.apple.com/tutorials/swiftui/handling-user-input

前回からの変更内容

このチュートリアルを進めていく上で、ひとつ気付いたことがありまして。

第1回から第3回まで、基本的には同じ土台のアプリに機能を追加していく流れになっているのですが、
どうやら各回の間で、(コッソリ)機能改修が行われているようです。

例えば、第2回では、JSONファイルが用意されていて、データを読み取る機能が追加されていました。
この部分を加えずに、第1回のファイルをそのまま使って第2回を進めていこうとすると、エラーが起こります。

今回も、少し進めたらエラーが発生しました。

エラーログを見ることはできるのですが、んもうサッパリ。

各回、サンプルファイルをダウンロードしてそこからやってね。
ということだとは思うのですが、それではブツ切りになってしまって通しで再現ができません。

ですので、最初に
「今回のサンプルコードと前回作ったのコードを見比べながら差分をチェックする」
という地味な作業をやることになります。

今回の差分はこんな感じ。

・JSONファイルの中身が入れ替わっている(フラグ項目が追加されている)
・画像ファイル名が入れ替わっている(「yukon_charleyrivers.jpg」が「charleyrivers.jpg」に)
・Landmark.swiftの「Category」に「mountains」追加

JSONファイルの中身が入れ替わっているのはなんとなく予想が付いたんですよ。
ユーザーから入力されたデータを保持しておく項目が要るだろうなーと思いましたので。

でもね。

画像ファイル名を地味に変えるのは勘弁していただけると……。
そこは疑わないじゃないッスか……ねえ?変える理由が無いですし……ねえ?

謎の名称変更。コイツを見つけた時、膝から崩れ落ちました。

画面の構成と行った設定

今回出来上がった画面は、

・リスト画面にお気に入りアイコンを追加(LandmarkListビュー)
・お気に入りの行のみ表示する絞り込み機能の追加(LandmarkListビュー)
・詳細画面にお気に入りボタンを追加(LandmarkDetailビュー)

こんな構成になりました。
基本的な要素は前回までのものを使っていて、そこに「お気に入り機能」を追加した形です。

設定的には、

・SF Symbolsを使った星アイコンの設定
・@Stateを付けた値の変更を監視する変数の設定
・一覧画面へのお気に入り表示/全表示切り替え用トグルスイッチの設定
・ObservableObjectと@EnvironmentObjectの設定による複数のビュー間でのデータの共有の設定
・詳細画面でのお気に入りボタンの設定

こんな感じ。

ザッと見ただけで、ヤベー雰囲気がプンプンしますね。
「オブジェクトという言葉が出てきたら、それは退却の合図」そんな格言をどこかで聞いたことがあります。

ざっくり言ってしまえば、

・トグルスイッチを切り替えた時にON/OFFの状態を切り替ること
・一覧画面と詳細画面で同じデータを参照すること

この2つを中心に話が進むのですが、チュートリアルだけで理解するのは相当大変です。
幸い参考書にわかりやすい解説が載っていたので、そちらと並行しながら読むことでなんとか進められました。

ありがたいー。
マジ感謝ッスー。

SF Symbols

ただ、そんな中でも「SF Symbols」というアイコン集はとっても便利そうでした。

SF Symbols
https://developer.apple.com/design/human-interface-guidelines/sf-symbols/overview/

Webサイトを作る方なら「Font Awesome」を想像すればわかりやすいと思います。
コードで設定して、色やサイズの変更までできちゃう。超便利なアイコン集です。

例えば、
「star.fill(中身が埋まった星)」というアイコンを設定して、
「サイズを中サイズ」「色を黄色」と指定すると……

こんな感じに「黄色い星」が表示されます。
いちいち画像を用意しなくていいので、アイコンの設定がものすごく楽になりそうですよ。

今回はココまで!

ふー。

第3回目でもうだいぶお手上げ感が出てきましたが、
幸いなことに、ここで一旦リストとデータ連携については終わりになります。

次は「Drawing Paths and Shapes」、お絵描き編ですね。

座標を指定して線を引いてカタチを作り、
その座標を動かすことでアニメーションっぽい表現を行う……ような感じになるハズです。

画面が動くのは(きっと)楽しいですからね!
不気味なジェイソンや謎のオブジェクトは(きっと)いないはずです!
気分を新たに、頑張っていきましょう。

よーし、やったるで〜〜!(←やる気多少復活)