こんにちは。 signal compose の leico です。
前回は数文字ですが、ソースコードを書き換えてプログラムに反映させる小さくて大きな一歩を踏み出しました。

マジで最初から Swift で iOS アプリ作る (Hello SwiftUI!)：
https://si-partners.net/blog/swift-ios-02.html

今回は、前回最後に有効にした Canvas を活用しながら、ソースコードを書き換え(？)て行きたいと思います。
引き続き、Swift UIに慣れるために Apple の Tutorial を参考に進めます。

プロジェクトの作成

今回もまずプロジェクトを作成するところから行きましょう。そうですね。 03_TextView などはいかがでしょうか。
作成したら前回と同様、 ContentView.swift を開きましょう。

インスペクタからソースコードを書き換える

Canvas を有効にすることで、ContentView.swift の右側にほぼリアルタイムのプレビューが表示されるようになったと思います。

右側にプレビューが表示されていない方は、前回の後半を読み直して見てください。

表示がされたら、今日も Hello, World! の書き換えからやっていきます。
ただ、前回と異なるのは、右側のプレビューから書き換えます。

iPhone画面上の Hello, World! を コマンド(⌘)キー を押しながらクリックしてみましょう。
青枠で囲まれて吹き出しが表示されます。

ここは公式のチュートリアルから少し変更されている箇所です。
吹き出しの中から Show SwiftUI Inspector... を選択すると、吹き出しが以下のように変化します。

吹き出しトップ、 Text の区画に Hello, World! 、表示されているものがそのまま入力されていますね。
これ、変更したら変化しそうに思えますよね？変えてみましょうか。
チュートリアルに沿って Turtle Rock にします。

Turtle Rock と入力して Enter を押したら画面上のテキストが予想通り変化しましたね。
しかしそれだけではなく左側に注目してください。ソースコード側も自動で変更されています。

インスペクタで属性を変化させる

インスペクタ Text 区画の下方、いろいろなメニューが並んでいます。他にもいろいろできそうです。
Font 区画の Font メニューを変更してみます。 Inherited から Title へ変更してみます。

文字が大きくなりました。同時に、左側ソースコード `Text()` の下に `.font(.title)` が追加されているのがわかります。

ソースコードからインスペクタを操作する

同じことがソースコード側からも行えます。
`Text()` を コマンド(⌘)キーを押しながらクリックすると異なる吹き出しが出ます。

異なる吹き出しですが、こちらにも Show SwiftUI Inspector... が存在します。
選択すると同じ項目を編集できることがわかります。

Font 区画の Color を Inherited から Orange に変更してみましょう。

するともちろん、 Canvas 側 iPhone の文字色がオレンジ色に変化します。
同時に、ソースコード側に `.foregroundColor(Color.orange)` が追加されています。

Swift UI の `foregroundColor` について検索したところ、Color の仕様ページにたどり着きました。

Color SwiftUI | Apple Developer Documentation：
https://developer.apple.com/documentation/swiftui/color#topics

なにやら primary やら secondary やらメニュー一覧にない色がありますね。試してみましょう。
今回初めて直接ソースコードを変更します。

現状で `.primary` は黒ですね。

`.secondary` はグレーになりました。

これらの色はどういうことなのでしょうか。

Use the system-provided label colors for labels. The primary, secondary, tertiary, and quaternary label colors adapt automatically to light and dark appearances. For related guidance, see Typography.

swift - What are the `.primary` and `.secondary` colors in SwiftUI? - Stack Overflow　

ライトモード、ダークモード等、状況に合わせて色合いを変化させてくれるようです。便利ですね。

最後に、トップ画のものを作ってみます。画像のようにソースコードを変更してみましょう。

インスペクタからでも、直接入力でもかまいません。直接入力の場合は構文エラーやスペルミスに気をつけましょう。

プロジェクトリポジトリ

ここまでの更新を反映したリポジトリはこちら

signalcompose/Swift_UI_Tutorial：
https://github.com/signalcompose/Swift_UI_Tutorial

ご依頼／相談／お問い合わせ

シグナル・コンポーズでは音楽制作、Max／Max for Liveデバイス制作など、各種テクニカルなコンサルティングやディレクション、R&D、プロトタイピング、制作などお受けしています。何かあればお気軽にお問い合わせください。お待ちしております。

執筆：大石桂誉