見出し画像

マジで最初から Swift で iOS アプリ作る(TextView)

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

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

プロジェクトの作成

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

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

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

スクリーンショット 2020-02-03 18.36.55

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

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

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

スクリーンショット 2020-02-03 18.42.29

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

スクリーンショット 2020-02-03 18.45.33

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

スクリーンショット 2020-02-03 18.51.06

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

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

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

スクリーンショット 2020-02-03 18.57.38

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

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

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

スクリーンショット 2020-02-03 19.30.07

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

スクリーンショット 2020-02-03 19.36.03

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

スクリーンショット 2020-02-03 19.41.26

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

スクリーンショット 2020-02-03 19.38.45

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

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

スクリーンショット 2020-02-03 20.00.02

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

スクリーンショット 2020-02-03 20.00.21

`.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 

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

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

スクリーンショット 2020-02-03 20.15.34

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

プロジェクトリポジトリ

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

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

シグナル・コンポーズでは音楽制作、Max/Max for Liveデバイス制作など、各種テクニカルなコンサルティングやディレクション、R&D、プロトタイピング、制作などお受けしています。何かあればお気軽に `info[at]signalcompose.com` にお問い合わせください。よろしくお願いします。会社概要等は以下のサイトをご覧ください。

leico の興味関心、個人的な調査結果などをまとめたページはこちらです

また、昨年はこんなアルバムのリリースもしています。

次のM3(3月)にも参加の予定です。音楽系のポートフォリオも以下で纏めてありますので、ぜひご覧ください。音楽制作は広くやっていきますのでお気軽にご連絡ください。


この記事が気に入ったらサポートをしてみませんか?