iOSで簡易コーポレートサイト（アプリ）を作成する #1 -TOP画面とContact画面編-

# プロジェクト作成
XCodeでプロジェクトを作成します。
<img width="914" alt="000001.jpg" src="https://dl.dropbox.com/s/51e0jd7acs3t8uq/000001.jpg">
Appを選択してNextをクリックします。
<img width="1512" alt="000010.jpg" src="https://dl.dropbox.com/s/wx7dlmnwstwveif/000010.jpg">
プロジェクト名をios-websiteとして作成しました。
InterfaceをSwiftUI、LangageをSwiftにしてNextをクリックします。
<img width="1512" alt="000020.jpg" src="https://dl.dropbox.com/s/y0nokyf27t0a16d/000020.jpg">
作成場所を任意の場所に指定してCreateをします。

すると初期画面イメージが表示されます。
<img width="1594" alt="000030.jpg" src="https://dl.dropbox.com/s/3h26hh8b840hkvj/000030.jpg">



# Tab作成
Tabを作成していきます。
TabViewを配置して作成したい項目にtabItem修飾子をつけます。
使い方は、+ボタンからTabViewを検索すると出てきます。
<img width="1667" alt="000040.jpg" src="https://dl.dropbox.com/s/2v6m1sr57dj0qdh/000040.jpg">

ConteantView.swiftに下記のように記述してみます。

```diff_swift:ContentView.swift
	//
	//  ContentView.swift
	//  ios-website
	//
	//  Created by eriko on 2022/10/07.
	//

	import SwiftUI

	struct ContentView: View {
	    var body: some View {
-	        VStack {
-	            Image(systemName: "globe")
-	                .imageScale(.large)
-	                .foregroundColor(.accentColor)
-	            Text("Hello, world!")
-	        }
-	        .padding()
+	        TabView {
+	            Text("TOP")
+	                .tabItem {
+	                    Image(systemName: "house.fill")
+	                    Text("TOP")
+	                }
+	            Text("お問合せ")
+	                .tabItem {
+	                    Image(systemName: "envelope.fill")
+	                    Text("お問合せ")
+	                }
+	        }
	    }
	}

	struct ContentView_Previews: PreviewProvider {
	    static var previews: some View {
	        ContentView()
	    }
	}

```

```swift:コピペ用
TabView {
    Text("TOP")
        .tabItem {
            Image(systemName: "house.fill")
            Text("TOP")
        }
    Text("お問合せ")
        .tabItem {
            Image(systemName: "envelope.fill")
            Text("お問合せ")
        }
}

```
記述できると、右のイメージにも反映されます。
<img width="1594" alt="000050.jpg" src="https://dl.dropbox.com/s/20vqgeuao0vqgwh/000050.jpg">

「お問合せ」をクリックすると、メッセージも「お問合せ」に変化します。
<img width="1594" alt="000050.jpg" src="https://dl.dropbox.com/s/zx5ff4gy7mafsvi/000060.jpg">


>確認画面・エミュレーターのバージョン選択
上部ボタンから確認したい端末のバージョンを変更できます。<img width="1594" alt="000070.jpg" src="https://dl.dropbox.com/s/6qtcbuysewe9z2c/000070.jpg">



# Home画面作成
ヘッダーメニューから「File > New > FIie..」でSwiftUI Viewを新規作成します。ファイル名は「TopView」とします。
<img width="1594" alt="000080.jpg" src="https://dl.dropbox.com/s/gcdidsrhj1jl8sb/000080.jpg">
作成できると、左側にTopViewが追加されます。
<img width="1594" alt="スクリーンショット 2022-07-05 14.46.25.png" <img width="1594" alt="000080.jpg" src="https://dl.dropbox.com/s/px6cuj5kn8jdt8b/000090.jpg">
TopViewを選択して下記のように記述します。
VStackは、VStack内のコンテンツを縦に並べてくれます。

```TopView.swift
import SwiftUI

struct TopView: View {
    var body: some View {
        VStack{
            Text("TOP").font(.title)
            VStack{
                Text("Bluecode,lifestyle development").font(.title).foregroundColor(.white)
            }.frame(maxWidth:.infinity).frame(height:200)
                .background(.blue)
            VStack{
                Text("websiteの最新情報")
                    .font(.title2)
                    .padding(.bottom, 50.0)
                Text("最新情報をご案内します。")
            }.frame(height:400)
        }
        
    }
}

struct TView_Previews: PreviewProvider {
    static var previews: some View {
        TopView()
    }
}
```
Viewが自動で最新に反映されるので確認します。（少し時間がかかる場合があります）
<img width="1594" alt="000100.jpg" src="https://dl.dropbox.com/s/um8vpbds4390047/000100.jpg">


## ContentView反映
これを、ContentViewに反映させます。

```diff_swift:ContentView.swift
	import SwiftUI

	struct ContentView: View {
	    var body: some View {
	        TabView {
-	            Text("TOP")
+	            TopView()
	                .tabItem {
	                    Image(systemName: "house.fill")
	                    Text("TOP")
	                }
	            Text("お問合せ")
	                .tabItem {
	                    Image(systemName: "envelope.fill")
	                    Text("お問合せ")
	                }
	        }
	    }
	}

	struct ContentView_Previews: PreviewProvider {
	    static var previews: some View {
	        ContentView()
	    }
	}

```
イメージを確認すると、TopViewの内容がTopタブをクリックしたときに表示されます。
<img width="1594" alt="000110.jpg" src="https://dl.dropbox.com/s/egnw24m7a4h57yc/000110.jpg">



# Contactフォーム画面作成
同様に「ContactFormView.swift」というファイルを作成します。
ヘッダーメニューから「File > New > FIie..」でSwiftUI Viewを新規作成します。ファイル名は「ContactFormView」とします。
まずは見た目を整えます。

```ContactFormView.swift
import SwiftUI

struct ContactFormView: View {
    
    @State var name = ""
    @State var email = ""
    @State var contactBody = ""
    
    var body: some View {
        VStack{
            Text("Contact").font(.title)
                            
            VStack{
                Text("お問合わせフォーム").font(.headline).foregroundColor(.white)
            }
            .frame(maxWidth:.infinity)
            .frame(height:100)
            .background(.blue)
            
            VStack{
                Text("お問合わせ内容を入力してください。").padding()
                Group{
                    TextField("お名前",text:$name)
                        .keyboardType(.default)
                        .textFieldStyle(RoundedBorderTextFieldStyle())
                        .frame(maxWidth: .infinity)
                        
                    Text("お名前は必須です。")
                        .multilineTextAlignment(.leading)
                        .frame(maxWidth:.infinity,alignment: .leading)
                        .padding(.leading, 10.0)
                        .foregroundColor(.red)
                        .font(.caption2)
                    
                }.padding(.bottom, 10.0)
                
                Group{
                    TextField("email",text:$email)
                        .keyboardType(.emailAddress)
                        .textInputAutocapitalization(.never)
                        .textFieldStyle(RoundedBorderTextFieldStyle())
                        .frame(maxWidth: .infinity)
                      
                    Text("emailは必須かつemailの形式で入力してください。")
                        .multilineTextAlignment(.leading)
                        .frame(maxWidth:.infinity,alignment: .leading)
                        .padding(.leading, 10.0)
                        .foregroundColor(.red)
                        .font(.caption2)
                }.padding(.bottom, 10.0)
                
                Group{
                    TextField("問合わせ内容",text:$contactBody)
                        .keyboardType(.emailAddress)
                        .textFieldStyle(RoundedBorderTextFieldStyle())
                        .frame(maxWidth: .infinity)
                      
                    Text("問合せ内容は必須かつ1文字以上10文字以内で入力して下さい。")
                        .multilineTextAlignment(.leading)
                        .frame(maxWidth:.infinity,alignment: .leading)
                        .padding(.leading, 10.0)
                        .foregroundColor(.red)
                        .font(.caption2)
                }.padding(.bottom, 10.0)
                
                Button(action:{
                      
                }){
                    Text("送信")
                        .frame(minWidth: 160)
                        .foregroundColor(.white)
                        .padding(12)
                        .background(Color.accentColor)
                        .cornerRadius(8)
                }

                Spacer()
                    
            }.frame(maxWidth:.infinity).frame(height:500)
                            
        }
    }
}

struct ContactFormView_Previews: PreviewProvider {
    static var previews: some View {
        ContactFormView()
    }
}

```
確認するとこんな感じです。
<img width="1731" alt="000120.jpg" src="https://dl.dropbox.com/s/srv60938565yaum/000120.jpg">

## ContentView反映
ContentViewに追加して、Tabにしていきます。

```diff_swift:ContentView.swift
	import SwiftUI

	struct ContentView: View {
	    var body: some View {
	        TabView {
	            TopView()
	                .tabItem {
	                    Image(systemName: "house.fill")
	                    Text("TOP")
	                }
-	            Text("お問合せ")
+	            ContactFormView()
	                .tabItem {
	                    Image(systemName: "envelope.fill")
	                    Text("お問合せ")
	                }
	        }
	    }
	}

	struct ContentView_Previews: PreviewProvider {
	    static var previews: some View {
	        ContentView()
	    }
	}

```
一旦、見た目に必要なデータは揃いました。
<img width="1731" alt="000130.jpg" src="https://dl.dropbox.com/s/eec1sop4w4q7qec/000130.jpg">

# 最終的なコード
## ContentView

```Swift:ContentView

import SwiftUI

struct ContentView: View {
    var body: some View {
        TabView {
            TopView()
                .tabItem {
                    Image(systemName: "house.fill")
                    Text("TOP")
                }
            ContactFormView()
                .tabItem {
                    Image(systemName: "envelope.fill")
                    Text("お問合せ")
                }
        }

    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

```

## TopView

```Swift:TopView
import SwiftUI

struct TopView: View {
    var body: some View {
        VStack{
            Text("TOP").font(.title)
            VStack{
                Text("Bluecode,lifestyle development").font(.title).foregroundColor(.white)
            }.frame(maxWidth:.infinity).frame(height:200)
                .background(.blue)
            VStack{
                Text("websiteの最新情報")
                    .font(.title2)
                    .padding(.bottom, 50.0)
                Text("最新情報をご案内します。")
            }.frame(height:400)
        }
        
    }
}

struct TView_Previews: PreviewProvider {
    static var previews: some View {
        TopView()
    }
}

```
## ContactFormView

```Swift:ContactFormView
import SwiftUI

struct ContactFormView: View {
    
    @State var name = ""
    @State var email = ""
    @State var contactBody = ""
    
    var body: some View {
        VStack{
            Text("Contact").font(.title)
                            
            VStack{
                Text("お問合わせフォーム").font(.headline).foregroundColor(.white)
            }
            .frame(maxWidth:.infinity)
            .frame(height:100)
            .background(.blue)
            
            VStack{
                Text("お問合わせ内容を入力してください。").padding()
                Group{
                    TextField("お名前",text:$name)
                        .keyboardType(.default)
                        .textFieldStyle(RoundedBorderTextFieldStyle())
                        .frame(maxWidth: .infinity)
                        
                    Text("お名前は必須です。")
                        .multilineTextAlignment(.leading)
                        .frame(maxWidth:.infinity,alignment: .leading)
                        .padding(.leading, 10.0)
                        .foregroundColor(.red)
                        .font(.caption2)
                    
                }.padding(.bottom, 10.0)
                
                Group{
                    TextField("email",text:$email)
                        .keyboardType(.emailAddress)
                        .textInputAutocapitalization(.never)
                        .textFieldStyle(RoundedBorderTextFieldStyle())
                        .frame(maxWidth: .infinity)
                      
                    Text("emailは必須かつemailの形式で入力してください。")
                        .multilineTextAlignment(.leading)
                        .frame(maxWidth:.infinity,alignment: .leading)
                        .padding(.leading, 10.0)
                        .foregroundColor(.red)
                        .font(.caption2)
                }.padding(.bottom, 10.0)
                
                Group{
                    TextField("問合わせ内容",text:$contactBody)
                        .keyboardType(.emailAddress)
                        .textFieldStyle(RoundedBorderTextFieldStyle())
                        .frame(maxWidth: .infinity)
                      
                    Text("問合せ内容は必須かつ1文字以上10文字以内で入力して下さい。")
                        .multilineTextAlignment(.leading)
                        .frame(maxWidth:.infinity,alignment: .leading)
                        .padding(.leading, 10.0)
                        .foregroundColor(.red)
                        .font(.caption2)
                }.padding(.bottom, 10.0)
                
                Button(action:{
                      
                }){
                    Text("送信")
                        .frame(minWidth: 160)
                        .foregroundColor(.white)
                        .padding(12)
                        .background(Color.accentColor)
                        .cornerRadius(8)
                }

                Spacer()
                    
            }.frame(maxWidth:.infinity).frame(height:500)
                            
        }
    }
}

struct ContactFormView_Previews: PreviewProvider {
    static var previews: some View {
        ContactFormView()
    }
}

```

# 関連コンテンツ
* 次：[iOSで簡易コーポレートサイト（アプリ）を作成する #2 -バリデーション編-](https://qiita.com/minimumskills/private/aed53f9d185592aecdda)
* [超シンプルなWeb（アプリ）作成を通して各種フロントエンド技術を体験する - 2023 Early -](https://qiita.com/minimumskills/private/9e7efe86e244bb9844b0)