見出し画像

コピペでうごく! iPhoneアプリ:Lesson_1 『画面遷移と下部タブバーの基本を実装』



1:はじめに

「講座の概要と目標」

みなさん、はじめまして!コピペでうごく! iPhoneアプリ」講座へようこそ。
 ナビゲーターのドッチです。
この講座では、「iPhoneアプリを作ってみたいけど、何から始めればいいかわからない……」と感じている方を対象に、難しい設定や複雑なコードは一旦置いておいて、コピペだけで動くアプリをテーマに進めていきます。

初めてアプリ開発に挑戦する方にとって、「自分でアプリを作る」というのはハードルが高いように思えるかもしれません。でも、この講座なら心配いりません!
指定されたコードをそのままコピーして貼り付けるだけで、簡単に動くアプリが完成します。
※コピペするコードは、【コピペ!】と目印をつけておきました。

アプリが動いた!」という感動をぜひ体験してください。そして、アプリ開発の第一歩を一緒に踏み出しましょう!

完成版のアプリを無料公開中!

本講座で作成するアプリの完成版は、AppStoreで無料公開しています。
以下のリンクからダウンロードして事前にどんなアプリを作るのかを体験してください。
・アプリ名:『CoreScan コアスキャン』

appStoreで無料公開中です。各レッスンの内容と連動しています。
※iPhoneのみに対応しているため、パソコンからでは開けない場合があります。

2: 前提条件

この講座を進めるには以下の環境が必要です:
1. パソコン: Macintosh OSバージョン Sonoma以上
2. Xcode: バージョン15
3.スマホ: iPhone11以降
4. iOS: バージョン17.5以上
5.Apple ID: 事前に取得が必要です。

Xcodeがインストールされていない場合は、Mac App Storeからダウンロードしてください。Swiftの知識がなくても、この講座を進めることができます。

3:本講座のご利用に関するガイドライン

 本講座で提供するコードや画像、アプリ名などは、受講者の皆さまが学習や個人プロジェクトで自由にご活用いただけます。
アプリの開発や改善、学習の過程でご自身のプロジェクトに組み込むことも大歓迎です。

ただし、以下の点にご留意いただき、他の受講者と公平な学習環境を保つためのご協力をお願いいたします。

本講座の利用規約について(要約版)

本講座で提供するコードや画像は学習目的で自由にお使いいただけますが、以下のルールを守ってご利用ください:

1.本講座で提供するコードを使用して開発したアプリを公開・販売することは問題ありません。
2. 提供コードや画像の再配布および転売は禁止です。
3. 本講座で使用するアプリ名「CoreScan」や提供画像は講座外での利用を禁止します。
4. 講座そのものを模倣して販売する行為は禁止です。
5.本講座の内容(コード、画像、解説部分など)をそのまま他のサイトや書籍に転載することは禁止です。
6.提供画像(アイコンやUIサンプル画像など)は、講座内での使用を目的としています。再配布・販売は禁止です。
7.本講座の著作権は著者に帰属しますが、適切に使用いただければ特別な申請なしに個人利用やアプリ開発にご活用いただけます。

詳細な利用規約は、こちらをご確認ください。

4: 今回のアプリの構成

このLesson_1で作成するアプリでは、画面下部に配置された タブバー を使用して、複数の機能を切り替えられる構成になっています。タブバーは、iPhoneアプリのUIでよく使われるデザインで、簡単に画面遷移を実現できる便利な仕組みです。


アプリの画面構成(タブバーの役割)

このアプリでは、以下の4つのタブが設置されています。それぞれのタブは異なる画面を表示し、各レッスンで実装する機能に対応しています。
◇ HOME タブ(Lesson_1で作成)
• ホーム画面です。アプリの概要や次の操作案内を表示します。
◇ バーコードリーダー タブ(Lesson_2で作成)
• iPhoneのカメラを使ったバーコードスキャン機能を実装します。
◇ コアデータへ保存 タブ(Lesson_3で作成)
• スキャンしたバーコードデータをコアデータに保存する機能を実装します。
◇ リスト操作 タブ(Lesson_4で作成)
• CSVファイルのデータを読み込んでコアデータに保存し、そのデータを検索する機能を実装します。

5:それでは、早速始めましょう!

1. 新規プロジェクトの作成

まずは、Xcodeを使って新しいプロジェクトを作成します。
1. Xcodeを起動し、「Create a new project…(新しいXcodeプロジェクトを作成)」を選択します。
2. テンプレートの選択
• 「App」を選び、「Next」をクリックします。
3. プロジェクトの詳細を入力
• プロジェクト名: CoreScan2(自由に設定可能してください。)
• Team: Personal Team(有料登録の方はご自分のチーム名を選択してください。)
• Organization Identifer: 逆ドメイン形式(例: com.yourname.appname)で入力してください。(この項目は、後から変更するのが手間なので、わかりやすい形式にしておくと良いです。)※appnameはプロジェクト名で大丈夫です。
• Bundle Identifer: 自動で生成されます。
• Interface(インターフェース): SwiftUI
• Language(言語): Swift
• Storage(データの保存場所): Core Data
4. プロジェクトの保存先を選択し、「Create」をクリックします。
5. 指定した保存先に、「CoreScan2」というフォルダができれば、準備完了です。

2. 初期状態のファイル構成

新規プロジェクトを作成すると、以下のようなファイル構成が自動的に生成されます:
CoreScanApp.swift
 アプリのエントリーポイント(アプリ起動時に呼び出されるファイル)。
 役割: アプリ全体の構造を定義します。
• ContentView.swift
 アプリのメインビュー(初期画面)。
 役割: 最初に、このファイルを編集してタブバーを作成します。
• Assets.xcassets
 アプリのアイコンや画像を管理する場所。
• Info.plist
 アプリの設定ファイル。
 役割: アプリの権限やメタ情報を設定します。
    本講座では、Lesson_2で設定します。

補足: 初期状態では、まだ何もカスタマイズされていない状態ですが、これから ContentView.swift にコードを追加してタブバーを実装します。


3. タブバー付きアプリの概要

今回作成するアプリでは、画面下部にタブバーを配置し、以下のように4つの画面を切り替えられる構成にします。今回は、各タブのトップページのみ作成します。各機能はLesson_2以降で実装します。
1. HOME タブ: アプリの概要を表示するメイン画面
2. バーコードリーダー タブ: カメラでバーコードをスキャンする画面
3. CoreData 保存 タブ: スキャンデータを保存・管理する画面
4. CSV取り込み&検索 タブ: CSVファイルの読み込みやデータ検索を行う画面

4. 【コピペ!】ContentView.swift

 まず、作成されたコードを開くと、「ContenView.swift」にはコードが既に記載されています。
これはデフォルトで設定されているサンプルアプリです。この講座では不要なので全て削除してください。(削除するとプレビューも消えますが問題ありません。)
尚、「Git Repository Creation Failed」というアラートが出る場合は、「Cancel」をクリックしてください。 

 では、実際のコードを実装していきましょう。 
空欄になった「ContenView.swift」に以下のコードをコピペしてください。
それぞれのコードの役割をコメント(//で始まるテキスト)で解説しています。

import SwiftUI

struct ContentView: View {
    
    // 現在選択されているタブのインデックスを保持する状態変数
    @State var tabSelection: Int = 0
    
    init() {
        // タブバーの背景色をライトグレーに設定
        // UITabBar.appearance() を使ってタブバー全体の外観をカスタマイズ
        UITabBar.appearance().backgroundColor = UIColor.lightGray
    }
    
    var body: some View {
        
        // TabView を使ってタブバーを作成
        // 各タブの選択状態を `tabSelection` で管理
        TabView(selection: $tabSelection) {
            
            // HOME タブ
            HomeView_Top(tabSelection: $tabSelection)
                .tabItem {
                    // タブアイコンとラベルの設定
                    Image(systemName: "house.fill") // アイコン: 家
                    Text("HOME") // ラベル: HOME
                }
                .tag(0) // タブを識別するタグ番号
            
            // バーコードリーダー タブ
            BarcodeView_Top(tabSelection: $tabSelection)
                .tabItem {
                    // タブアイコンとラベルの設定
                    Image(systemName: "barcode.viewfinder") // アイコン: バーコード
                    Text("バーコードリーダー") // ラベル: バーコードリーダー
                }
                .tag(1) // タブを識別するタグ番号
            
            // CoreData 保存 タブ
            SaveToCoreDataView_Top(tabSelection: $tabSelection)
                .tabItem {
                    // タブアイコンとラベルの設定
                    Image(systemName: "square.and.arrow.down.fill") // アイコン: ダウンロード
                    Text("コアデータへ保存") // ラベル: コアデータへ保存
                }
                .tag(2) // タブを識別するタグ番号
            
            // CSV取込み&検索 タブ
            CSVImportView_Top(tabSelection: $tabSelection)
                .tabItem {
                    // タブアイコンとラベルの設定
                    Image(systemName: "doc.text.magnifyingglass") // アイコン: 書類と検索
                    Text("CSV取込みと検索") // ラベル: CSV取込みと検索
                }
                .tag(3) // タブを識別するタグ番号
        }
    }
}

5. エラーの解消と各ビュー(画面)の作成

・エラーの内容を確認

前回の記事で「ContentView.swift」にコードをコピーした際、以下のようなエラーが表示されます。
Cannot find ‘HomeView_Top’ in scope
Cannot find ‘BarcodeView_Top’ in scope
Cannot find ‘SaveToCoreDataView_Top’ in scope
Cannot find ‘CSVImportView_Top’ in scope

これらのエラーは、必要なビュー(画面)ファイルがまだ作成されていないために発生しています。
そこで次に、これらのビューファイルを作成するための手順を説明します。 

・新規のビューファイルを作成する:1_ディレクトリの作成

 まず、アプリの規模が大きくなっても管理しやすいように、ビューファイルごとにディレクトリ(フォルダ)を作成します。また、初心者の方でも分かりやすいよう、ディレクトリ名の先頭に番号を付けます。
1. Xcodeのプロジェクトナビゲータでディレクトリを作成
• プロジェクトナビゲータの空白部分を右クリックし、「New Group」を選択します。
• 新しいグループ(フォルダ)の名前を 1_Home に変更します。
2. 他のディレクトリも作成
• 同じ手順で、以下のグループを追加します:
• 2_BarcodeScan
• 3_SaveCoreData
• 4_CSVImport

これで、ビューごとにディレクトリが分かれ、管理しやすい構造が完成しましました。

新しいビューファイルを作成する

次に、最初のビュー(HomeView_Top)を作成します。
1. 1_Homeディレクトリを選択して新しいファイルを作成
• プロジェクトナビゲータで 1_Home を右クリックし、「New File」を選択します。
SwiftUI View を選択し、「Next」をクリックします。
• ファイル名を HomeView_Top に設定して、「Create」をクリックします。
2. HomeView_Top.swift にコードを追加


作成した、HomeView_Top.swiftファイルに表示されているコードを全て削除して、以下のコードをコピーして貼り付けます。

【コピペ!】HomeView_Top.swift

import SwiftUI

// HomeView_Top: HOMEタブに対応するビュー
// タブバーでこのビューを表示する際に利用します。
struct HomeView_Top: View {
    
    // 他のタブとの連携のため、タブの選択状態を保持する変数を受け取ります。
    // `@Binding` を使うことで、外部(ContentViewなど)で管理している状態をここでも操作できます。
    @Binding var tabSelection: Int
    
    var body: some View {
        
        ZStack {
            // 背景色を薄い黄色に設定
            Color.yellow.opacity(0.1)
                .ignoresSafeArea()
            
            // このビューのメインコンテンツ
            Text("ここはHomeです") // 表示するテキスト
                .font(.largeTitle) // フォントサイズを大きく設定
                .fontWeight(.bold) // 太字
                .foregroundColor(.blue) // テキスト色を設定
                .padding() // テキスト周りに余白を追加
                .background(Color.white) // 背景に白色を設定
                .cornerRadius(12) // 角を丸める
                .shadow(color: Color.blue.opacity(0.5), radius: 10, x: 5, y: 5)  //影を追加して立体感を演出
        }
        
    }
}

ポイント:
このコードで、HOME タブに対応するビューを作成しました。アプリを起動すると、最初にこのビューが表示されます。※この段階では、残りのビューが無いためエラーが解消されておらず、シミュレーターまたは実機でのアプリの起動はできません。

他のビューを作成する

残りのビュー(BarcodeView_Top、SaveToCoreDataView_Top、CSVImportView_Top)もHomeView_Topと同じ手順で作成してください。
作成するディレクトリ名とファイル名はそれぞれ以下の通りです:
• 2_Barcode → BarcodeView_Top.swift
• 3_CoreData → SaveToCoreDataView_Top.swift
• 4_CSV → CSVImportView_Top.swift

それぞれのコードをコピペして実装してください。

【コピペ!】BarcodeView_Top.swift

import SwiftUI

// BarcodeView_Top: バーコードリーダータブに対応するビュー
struct BarcodeView_Top: View {
    
    // 現在選択されているタブのインデックスを保持する状態変数
    @Binding var tabSelection: Int
    
    var body: some View {
        
        ZStack {
            // 背景色を薄い黄色に設定
            Color.yellow.opacity(0.1)
                .ignoresSafeArea()
            
            // このビューのメインコンテンツ
            Text("バーコードリーダー") // 表示するテキスト
                .font(.largeTitle) // フォントサイズを大きく設定
                .fontWeight(.bold) // 太字
                .foregroundColor(.brown) // テキスト色を設定
                .padding() // テキスト周りに余白を追加
                .background(Color.white) // 背景に白色を設定
                .cornerRadius(12) // 角を丸める
                .shadow(color: Color.brown.opacity(0.5), radius: 10, x: 5, y: 5)  //影を追加して立体感を演出
        }
        
    }
}

【コピペ!】SaveToCoreDataView_Top.swift

import SwiftUI

// SaveToCoreDataView_Top: CoreData保存タブに対応するビュー
struct SaveToCoreDataView_Top: View {
    
    // 現在選択されているタブのインデックスを保持する状態変数
    @Binding var tabSelection: Int
    
    var body: some View {
        
        ZStack {
            // 背景色を薄い黄色に設定
            Color.yellow.opacity(0.1)
                .ignoresSafeArea()
            
            // このビューのメインコンテンツ
            Text("コアデータへ保存") // 表示するテキスト
                .font(.largeTitle) // フォントサイズを大きく設定
                .fontWeight(.bold) // 太字
                .foregroundColor(.green) // テキスト色を設定
                .padding() // テキスト周りに余白を追加
                .background(Color.white) // 背景に白色を設定
                .cornerRadius(12) // 角を丸める
                .shadow(color: Color.green.opacity(0.5), radius: 10, x: 5, y: 5)  //影を追加して立体感を演出
        }
        
    }
}

【コピペ!】CSVImportView_Top.swift

import SwiftUI

// CSVImportView_Top: CSV取り込み&検索タブに対応するビュー
struct CSVImportView_Top: View {
    
    // 現在選択されているタブのインデックスを保持する状態変数
    @Binding var tabSelection: Int
    
    var body: some View {
        
        ZStack {
            // 背景色を薄い黄色に設定
            Color.yellow.opacity(0.1)
                .ignoresSafeArea()
            
            // このビューのメインコンテンツ
            Text("CSV取込みと検索") // 表示するテキスト
                .font(.largeTitle) // フォントサイズを大きく設定
                .fontWeight(.bold) // 太字
                .foregroundColor(.red) // テキスト色を設定
                .padding() // テキスト周りに余白を追加
                .background(Color.white) // 背景に白色を設定
                .cornerRadius(12) // 角を丸める
                .shadow(color: Color.red.opacity(0.5), radius: 10, x: 5, y: 5)  //影を追加して立体感を演出
        }
        
    }
}

【確認】ディレクトリ構造の最終形

ここまでで、以下のようなディレクトリ構造になっていればOKです。
同時に、表示されていたエラーが解消されたのが確認できます。

作ったアプリを動かしてみよう!

 ここまでの手順を終えると、ContentView.swift と各ビューがエラーなく連携し、タブバー付きのアプリが完成しています!
今回は、実際にPCの画面上で動くシミュレーターを使ってアプリの動作確認をしましょう。自分のアプリを動かす瞬間を楽しんでください!

シミュレーターの起動方法

1. 実行ボタンをクリック
• Xcodeの画面左上にある再生ボタン(▶︎)をクリックします。
• これで現在選択されているシミュレーター(この画面では、iPhone 15 Pro)でアプリが起動します。
2. シミュレーターが起動
• 初めて起動する場合、少し時間がかかることがあります。
• シミュレーターの画面に、作成したアプリの起動画面が表示されます。

シミュレーターで、タブバーを操作してみよう!

シミュレーターでアプリが起動したら、タブバーをタップして各画面に切り替えてみましょう。
HOMEタブ
 「ここはHomeです」と表示されるシンプルな画面です。

バーコードリーダータブ
 「バーコードリーダー」と表示されるシンプルな画面です。
 Lesson1でカメラ機能(バーコードリーダー)を実装します。

CoreData保存タブ
 「CoreDataへの保存」と表示されるシンプルな画面です。
 Lesson2でCoreDataへの保存機能を実装します。

CSV取り込み&検索タブ
 「CSVの取込みと検索」と表示されるシンプルな画面です。
 Lesson3でCSVの取込みと検索機能を実装します。


 各タブを押して画面が切り替わる動きが確認できましたか?自分で作ったアプリが動くのは感動ですよね!
 とは言え、今の状態だと少し寂しいので最後に各ページに画像を配置してみましょう。

各タブのトップページへ画像を配置してみよう!

 説明画像1から4の手順で、assets に 画像を登録しましょう。
今回は4つの画面それぞれに1種類ずつの画像をセットします。1種類ずつ画像を登録していきます。
 アプリ画面に使用する画像は、1種類×3サイズ(1X・2X・3X)が必要になります。
 画像のファイル名は変更しなくても大丈夫ですが、非常に長いので各画像のキャプション(例:tab1Icon_1X)をコピペしてファイル名にしてください。
 全ての画像が保存できたら、説明画像の手順に沿って画像を、assets に登録してください。

全ての画像で、1種類×3サイズ(1X・2X・3X) が必要です。

1 : tab1Icon の画像:上から、1X・2X・3Xの順番に並んでいます。以下の3つを「名前を付けて画像を保存」してください。

tab1Icon_1X
tab1Icon_2X
tab1Icon_3X 

2 : tab2Icon の画像:上から、1X・2X・3Xの順番に並んでいます。以下の3つを「名前を付けて画像を保存」してください。

tab2Icon_1X
tab2Icon_2X
tab2Icon_3X

3 : tab3Icon の画像:上から、1X・2X・3Xの順番に並んでいます。以下の3つを「名前を付けて画像を保存」してください。

tab3Icon_1X
tab3Icon_2X
tab3Icon_3X

4 : tab4Icon の画像:上から、1X・2X・3Xの順番に並んでいます。以下の3つを「名前を付けて画像を保存」してください。

tab4Icon_1X
tab4Icon_2X
tab4Icon_3X

保存した画像をセットするための手順

1:Assetsの画面を開きます。この画面で画像をアプリに登録します。
2:➕マークを押します。Image Set を選択して画像を登録する場所を作ります。
3:アプリで呼び出すために画像に名前をつけます。また、画像は1種類に3枚必要です。
4:上記のように、全ての画像を登録してください。

画像をセットするためにコードを更新しましょう。

 画像をセットするためには先ほどのコード(背景色とTextの間)に画像を追加します。
 もちろん、この講座はコピペが基本なので、全てのコードを一旦削除して次のコードをコピペしてください!

【コピペ!】HomeView_Top.swift 〜画像を配置〜

import SwiftUI

// HomeView_Top: HOMEタブに対応するビュー
// タブバーでこのビューを表示する際に利用します。
struct HomeView_Top: View {
    
    // 他のタブとの連携のため、タブの選択状態を保持する変数を受け取ります。
    // `@Binding` を使うことで、外部(ContentViewなど)で管理している状態をここでも操作できます。
    @Binding var tabSelection: Int
    
    var body: some View {
        
        ZStack {
            // 背景色を薄い黄色に設定
            Color.yellow.opacity(0.1)
                .ignoresSafeArea()
            
            VStack(spacing: 80) {
                // 画像(lessonIcon)を配置
                Image("tab1Icon") // アセットに登録された画像名を指定
                    .resizable() // 画像のリサイズを許可
                    .aspectRatio(contentMode: .fit) // アスペクト比を維持して画像をフィット
                    .frame(width: 250, height: 250) // サイズを250pxの正方形に指定
                    .clipShape(RoundedRectangle(cornerRadius: 20)) // 角を丸くする
                    .shadow(color: .gray.opacity(0.5), radius: 10, x: 5, y: 5) // 影を追加
                
                // このビューのメインコンテンツ
                Text("ここはHomeです") // 表示するテキスト
                    .font(.largeTitle) // フォントサイズを大きく設定
                    .fontWeight(.bold) // 太字
                    .foregroundColor(.blue) // テキスト色を設定
                    .padding() // テキスト周りに余白を追加
                    .background(Color.white) // 背景に白色を設定
                    .cornerRadius(12) // 角を丸める
                    .shadow(color: Color.blue.opacity(0.5), radius: 10, x: 5, y: 5)  //影を追加して立体感を演出
             
            
            }
        }
        
    }
}

【コピペ!】BarcodeView_Top.swift 〜画像を配置〜

import SwiftUI

// SaveToCoreDataView_Top: CoreData保存タブに対応するビュー
struct BarcodeView_Top: View {
    
    // 現在選択されているタブのインデックスを保持する状態変数
    @Binding var tabSelection: Int
    
    var body: some View {
        
        ZStack {
            // 背景色を薄い黄色に設定
            Color.yellow.opacity(0.1)
                .ignoresSafeArea()
            
            VStack(spacing: 80) {
                // 画像(lessonIcon)を配置
                Image("tab2Icon") // アセットに登録された画像名を指定
                    .resizable() // 画像のリサイズを許可
                    .aspectRatio(contentMode: .fit) // アスペクト比を維持して画像をフィット
                    .frame(width: 250, height: 250) // サイズを250pxの正方形に指定
                    .clipShape(RoundedRectangle(cornerRadius: 20)) // 角を丸くする
                    .shadow(color: .gray.opacity(0.5), radius: 10, x: 5, y: 5) // 影を追加
                
                // このビューのメインコンテンツ
                Text("バーコードリーダー") // 表示するテキスト
                    .font(.largeTitle) // フォントサイズを大きく設定
                    .fontWeight(.bold) // 太字
                    .foregroundColor(.brown) // テキスト色を設定
                    .padding() // テキスト周りに余白を追加
                    .background(Color.white) // 背景に白色を設定
                    .cornerRadius(12) // 角を丸める
                    .shadow(color: Color.brown.opacity(0.5), radius: 10, x: 5, y: 5)  //影を追加して立体感を演出
            }
            
        }
        
    }
}

【コピペ!】SaveToCoreDataView_Top.swift 〜画像を配置〜

import SwiftUI

// SaveToCoreDataView_Top: CoreData保存タブに対応するビュー
struct SaveToCoreDataView_Top: View {
    
    // 現在選択されているタブのインデックスを保持する状態変数
    @Binding var tabSelection: Int
    
    var body: some View {
        
        ZStack {
            // 背景色を薄い黄色に設定
            Color.yellow.opacity(0.1)
                .ignoresSafeArea()
            
            VStack(spacing: 80) {
                // 画像(lessonIcon)を配置
                Image("tab3Icon") // アセットに登録された画像名を指定
                    .resizable() // 画像のリサイズを許可
                    .aspectRatio(contentMode: .fit) // アスペクト比を維持して画像をフィット
                    .frame(width: 250, height: 250) // サイズを250pxの正方形に指定
                    .clipShape(RoundedRectangle(cornerRadius: 20)) // 角を丸くする
                    .shadow(color: .gray.opacity(0.5), radius: 10, x: 5, y: 5) // 影を追加
                
                // このビューのメインコンテンツ
                Text("コアデータへ保存") // 表示するテキスト
                    .font(.largeTitle) // フォントサイズを大きく設定
                    .fontWeight(.bold) // 太字
                    .foregroundColor(.green) // テキスト色を設定
                    .padding() // テキスト周りに余白を追加
                    .background(Color.white) // 背景に白色を設定
                    .cornerRadius(12) // 角を丸める
                    .shadow(color: Color.green.opacity(0.5), radius: 10, x: 5, y: 5)  //影を追加して立体感を演出
            }
            
        }
        
    }
}

【コピペ!】CSVImportView_Top.swift 〜画像を配置〜

import SwiftUI

// CSVImportView_Top: CSV取り込み&検索タブに対応するビュー
struct ListCrudView_Top: View {
    
    // 現在選択されているタブのインデックスを保持する状態変数
    @Binding var tabSelection: Int
    
    var body: some View {
        
        ZStack {
            // 背景色を薄い黄色に設定
            Color.yellow.opacity(0.1)
                .ignoresSafeArea()
            
            
            VStack(spacing: 80) {
                // 画像(lessonIcon)を配置
                Image("tab4Icon") // アセットに登録された画像名を指定
                    .resizable() // 画像のリサイズを許可
                    .aspectRatio(contentMode: .fit) // アスペクト比を維持して画像をフィット
                    .frame(width: 250, height: 250) // サイズを250pxの正方形に指定
                    .clipShape(RoundedRectangle(cornerRadius: 20)) // 角を丸くする
                    .shadow(color: .gray.opacity(0.5), radius: 10, x: 5, y: 5) // 影を追加
                
                // このビューのメインコンテンツ
                Text("リスト操作") // 表示するテキスト
                    .font(.largeTitle) // フォントサイズを大きく設定
                    .fontWeight(.bold) // 太字
                    .foregroundColor(.red) // テキスト色を設定
                    .padding() // テキスト周りに余白を追加
                    .background(Color.white) // 背景に白色を設定
                    .cornerRadius(12) // 角を丸める
                    .shadow(color: Color.red.opacity(0.5), radius: 10, x: 5, y: 5)  //影を追加して立体感を演出
            }
            
        }
        
    }
}

Lesson_1の完成形の画面はこちら!

 最後にシミュレーターを起動してアプリを動かしてみましょう。どうでしょうか?画像が入ると一気にアプリっぽくなりますよね!

実機のサイズによって、若干見た目は違うかもしれませんが、このようになっていればOKです。

6:Lesson_1のまとめ

 お疲れさまでした!Lesson_1では、Xcodeを使ってiPhoneアプリの開発を始めるための準備と、タブバーを使ったアプリの基本構造を作成しました。

今回学んだこと

1. Xcodeの基本操作
• 新しいプロジェクトの作成方法や、ファイル・フォルダの管理について学びました。
2. タブバーの実装
• アプリの画面遷移を管理するためのタブバー(TabView)を作成しました。これにより、複数の画面をスムーズに切り替えられるアプリの基礎が完成しました。
3. 実機テストの準備
• Apple ID を使った Xcode の設定方法や、実機テストを行うための手順を確認しました。
4. 画像のセット
• アプリの画面に画像のセットを実装しました。

7:次回の予告

 次回の Lesson_2 では、いよいよiPhoneのカメラを使ったバーコードスキャン機能を実装していきます!
• バーコードをカメラでスキャンし、読み取った値を画面に表示する仕組みを作ります。
• 実機で動作確認を行い、動くアプリの楽しさを体験しましょう!


いいなと思ったら応援しよう!