SwiftUI on WD Terminus

SwiftUI 2-0-1. 2章の目標・進め方・サンプルコード

Tue, 22 Nov 2022 00:00:00 +0000

2章の進め方と目標

SwiftUI入門の2章は、まず1章をご覧いただいた上で進めることをお勧めします。

2章では2つのことを目標にしています。

複数の画面を作成して移動する
データと画面を結びつける

触れていく中で1つずつ理解できるよう工夫しています。1節目から進めていただけると幸いです。

サンプルコード

各ページから

1章と同様サンプルコードが必要になるタイミングで各ページに用意しています。必要に応じて入手してご利用ください。

Githubから

Githubにも公開しています。一括してサンプルコードが欲しい方はこちらから取得してください。

https://github.com/wdkk/ShigeFuji-SwiftUI-swiftpm

1-4-3. Linkを使った外部リンク

Mon, 21 Nov 2022 00:00:00 +0000

今回は用途が限られますが、押すと反応するオブジェクトとして、外部ページに誘導するLinkオブジェクトを紹介します。

前回のコードに続けて書く
外部リンクをつくる Link オブジェクト. Safariが開く
- URLの指定は URL( string: “アクセス先のアドレス” )!
  - ! はOptionalという仕組みの記述。詳細は別途紹介する

※ Xcodeの場合、プレビューではリンク先に飛べないのでシミュレータで動作を確認してください。

コード

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            Button { 
                print( "押しました" )
            } 
            label: {
                Label( "アイコンを含むボタン", systemImage: "plus" )
                .foregroundStyle( .white )
                .padding( .vertical, 10 )
                .padding( .horizontal, 20 )
                .background( .blue )
                .clipShape( RoundedRectangle(cornerRadius: 8) )
            }

            Link( 
                "外部リンク",
                destination: URL( string:"https://wdkk.co.jp/" )!
            )
            .padding( 20 )
        }
    }
}

結果

SwiftUI 1-4-2. Buttonの装飾とLabel

Mon, 21 Nov 2022 00:00:00 +0000

前回紹介したButtonについて今回は見た目の工夫について考えてみます。labelのブロック内にViewオブジェクトを書くとボタンとして押せるようになりますが、Text以外にも色々なオブジェクトを使用可能です。ここではButtonと相性の良いLabelオブジェクトの利用を紹介します。

前回のコードに続けて書く
ButtonのlabelにはTextやImage, VStackなどを使うことができる
今回は Label オブジェクトを使う
- Label( 文字列, systemImage:画像名 ) : ImageとTextを同時に表示

コード

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            Button { 
                print( "押しました" )
            } 
            label: {
                Label( "アイコンを含むボタン", systemImage: "plus" )
                .foregroundStyle( .white )
                .padding( .vertical, 10 )
                .padding( .horizontal, 20 )
                .background( .blue )
                .clipShape( RoundedRectangle(cornerRadius: 8) )
            }
        }
    }
}

結果

SwiftUI 1-4-4. ボタンを押した時テキストを変える - @Stateを使う

Mon, 21 Nov 2022 00:00:00 +0000

前回までにユーザ操作に反応するオブジェクトとしてButtonやLinkを紹介しました。Appはユーザが触れることで状態を変化させていきますが、今のところ状態を保持する方法がありません。そこで今回は状態変化を保持するための 変数(var) と @State を紹介します。

前回のコードに続けて書く
変数 var message をつくる
- 変数: 独立して値を保持できる領域
- messageの初期値は""(空文字)にする
messageの頭に @State をつける
- 詳細は後述
Buttonを押したときの処理に message = “押しました” を追加
- ボタンを押したときに、messageの内容が"“から"押しました"に変化する
TextオブジェクトをButtonの上に追加
- Textの表示内容はmessage変数を設定する

いくつか新しい要素が出てきたので複雑に見えますが、イメージがつかめればシンプルです。まずはコードを書いて結果をみてみましょう。その後、結果の下にある「変数」と「@State」の説明へ進んでください。

コード

import SwiftUI

struct ContentView: View {
    @State var message:String = ""
    
    var body: some View {
        VStack {
            Text( message )
            .frame( width: .infinity, height: 50 )
            
            Button { 
                print( "押しました" )
                message = "押しました"
            }
            label: {
                Label( "アイコンを含むボタン", systemImage: "plus" )
                .foregroundStyle( .white )
                .padding( .vertical, 10 )
                .padding( .horizontal, 20 )
                .background( .blue )
                .clipShape( RoundedRectangle(cornerRadius: 8) )
            }

            Link( 
                "外部リンク",
                destination: URL( string:"https://wdkk.co.jp/" )!
            )
			.padding( 20 )
        }
    }
}

結果

SwiftUI 1-4-5. ユーザが入力できるTextField - 値のBinding

Mon, 21 Nov 2022 00:00:00 +0000

前回、SwiftUIの重要なしくみである @State を紹介しました。@Stateを用いることで扱えるオブジェクトも増えます。今回紹介する TextField もその1つです。

前回のコードに続けて書く
@State var input_text:String = “あいうえお” を追加
ユーザが入力できる TextField オブジェクトを追加
- TextField( “空文字時の表示”, text: つなぐ文字列変数 )
- TextFieldへのユーザ入力によって値の変化が発生する
- 値の変化を受け入れるため、TextFieldに@Stateの文字列変数を紐づける
  - 値を渡すとき $ をつける
    - 変数input_textが つなぎ先 であることを示す
Text( input_text ) を追加
- input_textの変化を画面に反映する

@Stateの変数をつなぐことでTextFieldが動作します。まずコードを書き動かしてみましょう。次に結果の下にある説明を読んでください。

コード

import SwiftUI

struct ContentView: View {
    @State var message:String = ""
    @State var input_text:String = "あいうえお"
    
    var body: some View {
        VStack {
            Text( message )
            .frame( width: .infinity, height: 50 )
            
            Button { 
                print( "押しました" )
                message = "押しました"
            }
            label: {
                Label( "アイコンを含むボタン", systemImage: "plus" )
                .foregroundStyle( .white )
                .padding( .vertical, 10 )
                .padding( .horizontal, 20 )
                .background( .blue )
                .clipShape( RoundedRectangle(cornerRadius: 8) )
            }

            Link( 
                "外部リンク",
                destination: URL( string:"https://wdkk.co.jp/" )!
            )
			.padding( 20 )

            TextField( "プレイスホルダー", text: $input_text )
            .padding( 10 )
            .border( .gray, width: 1.0 )
            .padding( 20 )
            
            Text( input_text )
            .padding( 20 )
            .frame( width: .infinity, height: 50 )
        }
    }
}

結果

SwiftUI 1-4-6. オブジェクトのタップを捉えるonTapGesture

Mon, 21 Nov 2022 00:00:00 +0000

SwiftUIでは動作を捉えて反応する基本的なオブジェクトは用意されていますが、その他のオブジェクトに反応をつけたい場合があります。オブジェクトに .onTapGesture　を追加します。

前回のコードに続けて書く
@State var tap_text = “タップ前” を追加
VStackの一番下に **Text( tap_text )**を作成
上記のオブジェクトに .onTapGesture { … } を追加
- タップ時の処理として tap_text = “タップしました” を記述

.onTapGestureはそのオブジェクトをタップしたときの反応を書くことができます。ただしButtonやLinkに触れたときのような見た目の変化はありません。.onTapGestureを用いる場合、良いインタラクションのために見た目の変化なども書く必要がありますので注意してください。

コード

import SwiftUI

struct ContentView: View {
    @State var message:String = ""
    @State var input_text:String = "あいうえお"
    @State var tap_text:String = "タップ前"    

    var body: some View {
        VStack {
            Text( message )
            .frame( width: .infinity, height: 50 )
            
            Button { 
                print( "押しました" )
                message = "押しました"
            }
            label: {
                Label( "アイコンを含むボタン", systemImage: "plus" )
                .foregroundStyle( .white )
                .padding( .vertical, 10 )
                .padding( .horizontal, 20 )
                .background( .blue )
                .clipShape( RoundedRectangle(cornerRadius: 8) )
            }

            Link( 
                "外部リンク",
                destination: URL( string:"https://wdkk.co.jp/" )!
            )
			.padding( 20 )

            TextField( "プレイスホルダー", text: $input_text )
            .padding( 10 )
            .border( .gray, width: 1.0 )
            .padding( 20 )
            
            Text( input_text )
            .padding( 20 )
            .frame( width: .infinity, height: 50 )

            Text( tap_text )
            .padding( 20 )
            .frame( width: .infinity, height: 50 )
            .onTapGesture {
                tap_text = "タップしました"
            }
        }
    }
}

結果

SwiftUI 1-4-1. ボタンを押す

Sat, 19 Nov 2022 00:00:00 +0000

前節で簡単にSwiftUIの画面作りに触れました。今節では作成したオブジェクトに触れたときの動作、つまり オブジェクトのインタラクション を扱っていきます。今回は Button です。その名の通り押せるボタンを作れます。

SFSwiftUI01-4.swiftpm を開く (サンプルコード)
押して反応するButtonオブジェクトをつくる
- 1つめのブロックに押した時の処理を書く
  - print( “押しました” ) を追加
    - print( 値 ) : デバッグコンソールに値を出力
- 2つめのlabelブロックにボタンの見た目を書く
  - 今回は見た目にTextをつかう

コード

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            Button { 
                print( "押しました" )
            } 
            label: {
                Text( "ボタン" )
            }
        }
    }
}

結果

SwiftUI 1-3-2. 画像を表示するImageとアセット

Fri, 18 Nov 2022 00:00:00 +0000

SwiftUIで画像を扱いたい時は、Image を用います。前回のTextオブジェクトに並べて画像を表示してみます。

前回のコードに続けて書く
画像を表示する Image オブジェクト. 指定した画像を表示する
- “CC0_01” を指定する (詳細は後述)
まずは画像の大きさがそのまま表示される。サイズ調整のため以下を追加する
- .resizable() : 大きさの変更を認める
- .scaledToFit() : 領域の大きさにフィットするサイズに自動調整する

Imageオブジェクトは画像データをそのまま表示しようとしますが、.resizable()をつけることで表示サイズの変更ができるようになります。その上で.scaledToFit()を追加すると画面に収まるように大きさを変えてくれます。

コード

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            Text( "あいうえお" )
            .font( .title )
            
            Image( "CC0_01" )
            .resizable()
            .scaledToFit()
        }
    }
}

結果

SwiftUI 1-3-3. 縦並びレイアウトVStackの応用

Fri, 18 Nov 2022 00:00:00 +0000

すでに紹介したオブジェクトとして VStack があります。VStackは { … } の中に含まれるオブジェクトを縦に並べるオブジェクトになりますが、このようなオブジェクトにも調整を行うことができます。ここではVStackに適切な余白をつけてみます。

前回のコードに続けて書く
縦並びのレイアウトを作る VStack オブジェクト
VStackに .padding を追加する
- .padding( .horizontal, 20.0 ) : VStackの左右に20ptの余白

コード

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            Text( "あいうえお" )
            .font( .title )
            
            Image( "CC0_01" )
            .resizable()
            .scaledToFit()
        }
        .padding( .horizontal, 20.0 )
    }
}

結果

SwiftUI 1-3-4. 分割線Divider

Fri, 18 Nov 2022 00:00:00 +0000

コンテンツに分割線を入れると見やすくなることがあります。 SwiftUIで分割線を表示するときは Divider を使います。

前回のコードに続けて書く
Text( “あいうえお” )と Image( “CC0_01” ) の間に Divider() を追加する
Divider()に .padding を追加、分割線の上下の余白を調整する
- .padding( .vertical, 20.0 ) : オブジェクトの上下に20ptの余白
.background を設定する
- Dividerの線の色は背景色で指定する

コード

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            Text( "あいうえお" )
            .font( .title )
            
            Divider()
            .background( .gray )
            .padding( .vertical, 20.0 )
            
            Image( "CC0_01" )
            .resizable()
            .scaledToFit()
        }
        .padding( .horizontal, 20.0 )
    }
}

結果

SwiftUI 1-3-5. 横並びレイアウトHStack

Fri, 18 Nov 2022 00:00:00 +0000

縦に並べるVStackと同様に、すでに紹介した HStack は横方向にオブジェクトを並べます。

前回のコードに続けて書く
Text( “あいうえお” )を包む形で HStack を追加する
- 見た目は前回と変わらない
- HStackの中にオブジェクトを追加すると横に並ぶようになる

ここでは見た目は変わりませんが、次回HStack内にオブジェクトを追加して横並びの効果を確認します。

コード

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            HStack {
                Text( "あいうえお" )
                .font( .title )
            }
            
            Divider()
            .background( .gray )
            .padding( .vertical, 20.0 )
            
            Image( "CC0_01" )
            .resizable()
            .scaledToFit()
        }
        .padding( .horizontal, 20.0 )
    }
}

結果

SwiftUI 1-3-6. アイコンを表示するImageとHStackの利用

Fri, 18 Nov 2022 00:00:00 +0000

前回の続きでHStackの中に、別のオブジェクトを追加して横並びの効果を見てみます。追加するものは Image オブジェクトですが、標準で用意されているアイコンの表示を試してみます。

前回のコードに続けて書く
Imageオブジェクトをつかってアイコンを作る. HStackの中、Textの後に記述する
- Image( systemName:”gearshape” ) と書く
- HStackの効果でTextの右側に並ぶ

Image( systemName:アイコンの名前 ) とsystemName:ラベルを使うと、SF Symbols を使うことができます。iOSにマッチした色々なアイコンを簡単に使うことができるため、便利です。

コード

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            HStack {
                Text( "あいうえお" )
                .font( .title )
                
                Image( systemName:"gearshape" )
                .foregroundStyle( .blue )
                .font( .title2 )
            }
            
            Divider()
            .background( .gray )
            .padding( .vertical, 20.0 )
            
            Image( "CC0_01" )
            .resizable()
            .scaledToFit()
        }
        .padding( .horizontal, 20.0 )
    }
}

結果

SwiftUI 1-3-7. 隙間を充填するSpacer

Fri, 18 Nov 2022 00:00:00 +0000

前回の続きでHStackの中に、Spacer オブジェクトを追加します。これも既に紹介しているものですがオブジェクトの間に隙間をつくってくれます。

前回のコードに続けて書く
Spacer を HStack内のTextとImageの間に追加する
- Textは左端に、Imageは右端に寄る
- Spacerも.frameなどを使えばサイズを指定することができる

コード

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            HStack {
                Text( "あいうえお" )
                .font( .title )
                
                Spacer()
                
                Image( systemName:"gearshape" )
                .foregroundStyle( .blue )
                .font( .title2 )
            }
            
            Divider()
            .background( .gray )
            .padding( .vertical, 20.0 )
            
            Image( "CC0_01" )
            .resizable()
            .scaledToFit()
        }
        .padding( .horizontal, 20.0 )
    }
}

結果

SwiftUI 1-3-8. スクロールを実現するScrollView

Fri, 18 Nov 2022 00:00:00 +0000

本項の締めくくりとして、スクロールできるオブジェクトを導入したいと思います。スクロールができると画面に収まらない要素を閲覧できるようになります。包んだ要素をスクロールできるようにする ScrollView を紹介します。

前回のコードに続けて書く
Image( “CC0_01” )を ScrollView で包む
ScrollViewの中のImageを4つに増やす

ScrollViewは標準で画面めいっぱいになるように調整されます。その結果、ScrollViewより前に記述してあるHStackやDividerは画面上に寄ります。プレビューを実行状態にすると並んだ画像をスクロールできます。

コード

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            HStack {
                Text( "あいうえお" )
                .font( .title )
                
                Spacer()
                
                Image( systemName:"gearshape" )
                .foregroundStyle( .blue )
                .font( .title2 )
            }
            
            Divider()
            .background( .gray )
            .padding( .vertical, 20.0 )
            
            ScrollView {
                Image( "CC0_01" )
                .resizable()
                .scaledToFit()
            
                Image( "CC0_02" )
                .resizable()
                .scaledToFit()
                
                Image( "CC0_03" )
                .resizable()
                .scaledToFit()
                
                Image( "CC0_04" )
                .resizable()
                .scaledToFit()
			}
        }
        .padding( .horizontal, 20.0 )
    }
}

結果

SwiftUI 1-3-1. 文字を表示するText

Thu, 17 Nov 2022 00:00:00 +0000

前節でSwiftUIでオブジェクトを装飾して部品作りに触れました。今節では基本的なオブジェクトの紹介をしつつ、簡易なApp画面を構築していこうと思います。まずはこれまでも使ってきた Text の紹介です。

SFSwiftUI01-3.swiftpm を開く (サンプルコード)
文字を表示するTextオブジェクトを追加する
Textオブジェクトに.fontを追加し、 .title を指定
- タイトル用の大きな文字サイズになる

コード

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            Text( "あいうえお" )
            .font( .title )
        }
    }
}

結果

SwiftUI 1-0-4. 1章の目標・進め方・サンプルコード

Wed, 09 Nov 2022 00:00:00 +0000

準備( Mac, iPad )を進めて、コードが実行できるようになりましたでしょうか。このSwiftUI入門の進め方について説明します。

各章と節について

重富士SwiftUI入門は、テーマごとに章と節を区切っています。

節ごとにスタート地点となるサンプルコードを用意しています。そして節は前の項目から続いていく形になっています。まず節の頭から順番に読み進めることをおすすめします。

1章の進め方

肩の力を抜いて、まず動かしてみるところから始めます。SwiftUIを覚える！といった緊張はひとまず忘れて、コードに触れてみましょう。コードに触れたときの感覚、生まれるイメージも大切にしていきたいです。

1章の一応の目標は、コードを打つと画面が変わる・自分が思い描く画面をコードで作っていけるんだ、という感覚をもっていただくことです。なにより楽しんでいただければと思います。

サンプルコード

各ページから

サンプルコードが必要になるタイミングで、各ページに用意しています。必要に応じて入手してご利用ください。

Githubから

Githubにも公開しています。一括してサンプルコードが欲しい方はこちらから取得してください。

https://github.com/wdkk/ShigeFuji-SwiftUI-swiftpm

SwiftUI 1-2-3. paddingでオブジェクト間の余白を作る

Wed, 09 Nov 2022 00:00:00 +0000

前回はpaddingを使って、オブジェクト内に余白をつけました。今度は.paddingを使って２つのオブジェクトの間に余白を作ってみます。

前回のコードに続けて書く
Text( “こんばんわ” ) を追加する
- こんにちわの下にこんばんわが増える
Text( “こんにちわ” )の.backgroundの後 に .padding( .bottom, 50.0 ) を追加

コード

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            Text( "こんにちわ" )
            .padding()
            .background( .indigo )
            .padding( .bottom, 50.0 )
            
            Text( "こんばんわ" )
            .padding()
            .background( .purple )
        }
    }
}

結果

SwiftUI 1-2-1. 背景を設定するbackground

Tue, 08 Nov 2022 00:00:00 +0000

前節でSwiftUIの画面レイアウトの基本に触れました。その中でオブジェクトを自然と使ってきましたが、この節ではオブジェクト１つずつに注目して、オブジェクトをカスタマイズしていきましょう。ここではTextオブジェクトに背景をつけてみます。オブジェクトに .background() を追加します。

SFSwiftUI01-2.swiftpm を開く (サンプルコード)
Text( “こんにちわ” ) に .background( .indigo ) を追加

.indigoは色を指定しています。backgroundは色以外に画像や図形を指定することもできます。

色を指定 : .background( Color.indigo )
画像を指定 : .background( Image(…) )
図形を指定 : .background( ShapeStyle(…) )

コード

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            Text( "こんにちわ" )
            .background( .indigo )
        }
    }
}

結果

SwiftUI 1-2-2. paddingでオブジェクト内の余白を作る

Tue, 08 Nov 2022 00:00:00 +0000

前回はオブジェクトのカスタマイズとして背景の設定を行いました。今回はpaddingを用いてオブジェクトの余白を操作してみます。

前回のコードに続けて書く
色をつけたTextの.backgroundの前に.paddingを追加
- 色がついた余白領域が増える
- メソッドを呼ぶ順番で意味が変わる
  - .padding() -> .background() : 余白を作り、全部塗る
  - .background() -> .padding() : 塗ったあと、透明の余白を作る

コード

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            Text( "こんにちわ" )
            .padding()
            .background( .indigo )
        }
    }
}

結果

SwiftUI 1-1-4. 自動的に隙間を作るSpacer

Mon, 07 Nov 2022 00:00:00 +0000

Spacerは画面の隙間を埋めるオブジェクトです。例えばオブジェクトAとオブジェクトBの間に入れると、AとBを両端に寄せて、その合間に画面めいっぱい大きな隙間を作ってくれます。

以下の手順で隙間を作ってみます。

ImageとTextの間に Spacer を追加する
バランスを取るため、 Imageにも.paddingをつける
地球マークが画面上、こんにちわが画面下に移動したことを確認
Spacer は同じグループのオブジェクト全体を満たす隙間をつくる
今回はVStackを目一杯に満たす大きさになる

コード

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            Image(systemName: "globe")
            .imageScale(.large)
            .foregroundColor(.accentColor)
            .padding()
            
            Spacer()
            
            Text( "こんにちわ" )
            .padding()
        }
    }
}

結果

SwiftUI 1-1-5. 縦方向に並べるVStack

Mon, 07 Nov 2022 00:00:00 +0000

VStackは複数のオブジェクトを包んで縦方向に並べます。

前回からコードの変更はない
VStack { … } のカッコ内にオブジェクトを並べる
- 今回は以下の順に並んでいる
  - Image
  - Spacer
  - Text
オブジェクトが縦方向に並んだことを確認する

コード

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            Image(systemName: "globe")
            .imageScale(.large)
            .foregroundColor(.accentColor)
            .padding()
            
            Spacer()
            
            Text( "こんにちわ" )
            .padding()
        }
    }
}

結果

SwiftUI 1-1-6. 横方向に並べるHStack

Mon, 07 Nov 2022 00:00:00 +0000

VStackがオブジェクトを縦に並べたように、横に並べるためのオブジェクトが HStack です。前回のコードを以下の手順で書き換えます。

VStackの中に、HStackを追加、さらに以下のようにコードを書く
- 既存のImage( systemName:“globe” ) をHStackの中に入れる
- Spacer(), Image( systemName:”info.circle” )を追加する

コード

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            HStack {
                Image( systemName:"globe" )
                .imageScale(.large)
                .foregroundColor(.accentColor)
                .padding()
            
                Spacer()
                
                Image( systemName:"info.circle" )
                .imageScale(.large)
                .foregroundColor( .blue )
                .padding()
            }
            
            Spacer()
            
            Text( "こんにちわ" )
            .padding()
        }
    }
}

結果

SwiftUI 1-1-7. 重ねていくZStack

Mon, 07 Nov 2022 00:00:00 +0000

VStackで縦方向, HStackで横方向に並べてみました。次は上に重ねていくZStackを紹介します。以下のように前回のコードに追加していきます。

VStackをZStackで包む
次にColor()を追加。Colorは色オブジェクトで背景の色を塗ってくれる
Colorに続いて前回のVStack{ … }を置く

コード

import SwiftUI

struct ContentView: View {
    var body: some View {
        ZStack {
            Color( .sRGB, red:0.2, green:0.3, blue:0.2, opacity:1.0 ) 
           
            VStack {
                HStack {
                    Image( systemName:"globe" )
                    .imageScale(.large)
                    .foregroundColor(.accentColor)
                    .padding()
                
                    Spacer()
                    
                    Image( systemName:"info.circle" )
                    .imageScale(.large)
                    .foregroundColor( .blue )
                    .padding()
                }
                
                Spacer()
                
                Text( "こんにちわ" )
                .padding()
            }
        }
    }
}

結果

SwiftUI 1-0-3. プレビューの使い方

Sun, 06 Nov 2022 00:00:00 +0000

プログラムの動作を確認するにはいくつか方法があります。

ビルド(App化)して実行
プレビューで実行
プレビューで見た目変更の自動確認

それぞれ用途が異なりますが、ここではまず手軽なプレビューで実行する方法を紹介します。

1. Mac(Xcode)のプレビュー

Xcodeでswiftpmのプロジェクトを利用している場合、SwiftUIのプレビューは基本的に自動で実行されます。

ただし大きな変更など、自動認識できなくなることがあります。

その場合、プレビュー右上に出てくるResumeを押すと、更新を再開できます。

2. iPadのプレビュー

iPadのプレビューも同様に基本は自動で実行されます。

ただMac同様に必要な時は自動で更新を実行できます。

Appのプレビューというタイトルを押す
メニューが出てくるので必要な項目をタップ
プレビューが再構築される

SwiftUI 1-1-1. Textの文字を変える

Sun, 06 Nov 2022 00:00:00 +0000

では今回から、SwiftUIでのプログラムをはじめていきましょう。初回はもっとも基本的なオブジェクトの1つ、Textを使ってみます。

作成したswiftpmのAppプロジェクト(Mac, iPad)を開く
- サンプルコードを利用してもOK
あるいはSFSwiftUI01-1.swiftpm を開く (サンプルコード)

プロジェクトは、はじめからいくつかのファイルがつくられます。この中の ContentView を開きます。ContentViewはAppを起動した時にはじめに表示される画面です。

この中身を書き換えて、変更がプレビューに反映されるか確認してみます。

ContentView をひらく
Text(“Hello, world!”) の Hello, world! を こんにちわ に変更
プレビューで こんにちわ に変わっていることを確認

コード

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            Image(systemName: "globe")
            .imageScale(.large)
            .foregroundColor(.accentColor)
            
            Text( "こんにちわ" )
        }
    }
}

結果

SwiftUI 1-1-2. ダークモードに切り替える

Sun, 06 Nov 2022 00:00:00 +0000

iOSにはライトモードとダークモードがあります。

基本的にユーザがOSの設定で決めるものなのでプログラム側で何かすることはありません。ただ作成するAppのコンセプトによってはダークモードに固定したいといったリクエストもあると思います（※ 夜がテーマのAppならダークモードに固定したくなるとおもいます）。

今回はプレビューでの見え方を統一するためにコードでモードの切り替えを行います。モードの切り替えはContentViewに対して設定します。

MyAppを開く
ContentView() に .preferredColorScheme(.dark) を追加する
ContentView() がダークモードになることをプレビューで確認
- .darkを.lightとすればライトモードになります

コード

import SwiftUI

@main
struct MyApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
            .preferredColorScheme(.dark)
        }
    }
}

結果

SwiftUI 1-1-3. オブジェクトに余白をつくるpadding

Sun, 06 Nov 2022 00:00:00 +0000

前回、SwiftUIのオブジェクトの編集をはじめることができました。ここからはオブジェクトにいろいろな性格を持たせて見た目を変えていきましょう。今回は padding です。オブジェクトに余白を持たせます。

ContentViewを開く
Text( “こんにちわ” )に.padding()を追加して余白をつくる
- .padding() は幅や方向を指定することも可能
  - .padding( 50.0 ) : 上下左右に50.0ptの余白
  - .padding( .top, 80.0 ) : 上に80.0ptの余白

コード

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            Image(systemName: "globe")
            .imageScale(.large)
            .foregroundColor(.accentColor)
            
            Text( "こんにちわ" )
            .padding()
        }
    }
}

結果

SwiftUI 1-0-2. iPadでswiftpmを作成する

Sat, 05 Nov 2022 00:00:00 +0000

2022年から、iPadをつかってiOS App開発ができるようになりました。

1. Swift Playgroundsをインストールする

iPadでは、Swift Playgroundsを使ってAppを開発します。

App StoreからSwift Playgroundsをインストールしてください。

2. プロジェクトの作成

Swift Playgroundsをタップして起動します。

画面左下のAppを選択

3. プロジェクトを開く

Appを作成するとマイプレイグラウンドに**マイApp*が追加されます。これがApp作成に必要なものを詰めたパッケージです。プロジェクトと呼びます。これを開いてみましょう。

マイAppをタップ

4. 準備完了

マイAppを開いて以下のような画面がでてくれば準備完了です。

SwiftUI 1-0-1. Macでswiftpmを作成する

Fri, 04 Nov 2022 00:00:00 +0000

MacをつかってiOS App開発をはじめてみます。

1. Xcodeをインストールする

MacではXcodeを用いてAppをつくります。

App StoreからXcodeをインストールしてください。

2. プロジェクトの作成

Xcodeを立ち上げると以下のようなウインドウがでてきます。

Appを作成するために必要な材料を管理する仕組みをプロジェクトと呼びます。今回は新規のプロジェクトを作成します。

Create a new Xcode projectを押す
メニューのFile > New > Projectでも可

3. Swift Playground Appプロジェクトの選択

プロジェクトにはいろいろな種類があり、様々なAppを作成することができます。

今回は2022年からApp開発に使えるようになったSwift Playground Appのプロジェクト(swiftpm)を選択します。

PlatformでiOSを選択
Swift Playgrounds Appを選択

4. プロジェクトの初期設定

プロジェクトの名前をつけてください。

App Name (名前)
- 自由な名前でOK
Team (開発アカウント)
- NoneでOK
- 開発者アカウントがあればそれを選択
Organization Identifier (組織ID)
- com.sampleと入力
- 自分のドメインがあれば入力(sample.netの場合, net.sample.appnameのようにすることが多い)

Nextを押すとプロジェクトの保存先を聞かれるので適当な場所に保存してください。

指定した場所にApp Nameのswiftpmファイルができていますので確認してください。

5. 準備完了

プロジェクト作成が終わるとXcodeのエディタが開きます。

画像のような状態が表示できたら準備完了です。

6. MacとSwift Playground App

ここまでXcodeでの準備を説明しましたが、MacでもiPadと同じようにSwift Playgrounds Appを用いて開発をすることも可能になりました。