見出し画像

【じっくりSw1ftUI ８】導入編８〜コードテンプレートを作ろう⑥WebKitでリンクボタンを追加しよう

M_Kaku堂

さてと、前回で

タブビューで表示切り替えまでは作ったので、

アプリ内で指定したWEBにアクセスできるWEBView

を作ってく〜〜〜🕺ここでも、導入編で詳細な解説は本編でやってくつもりだから、前回までと同様に、

コードとか組み込んだ後にどうなるかのイメージを掴んでもらえれば十分

あくまでも、

コードテンプレート

を作ってるだけ👀なんで💦

WebViewとは、

なんかを参考にしてみてね💦


操作

まずは、前回までに作った画面

てな感じで、

タブビューに３つのボタンがすでに並んでるんだけど、今回は、さらに

WEBリンクボタン

を増やして、ボタン切り替え後に表示されるWEBビューを作りたいので、

struct SwiftUIMasterMindsiOS17Ch1Sec1WebView: UIViewRepresentable {
    let searchURL: URL
    func makeUIView(context: Context) -> WKWebView {
        let view = WKWebView()
        let request = URLRequest(url: searchURL)
        view.load(request)
        return view
    }
    
    func updateUIView(_ uiView: WKWebView, context: Context) {
        
    }
}

struct SwiftUIMasterMindsiOS17Ch1Sec1WEB: View {
    private var url:URL = URL(string: "https://note.com/m_kakudo/m/m681b1be679c5")!
    var body: some View {
        SwiftUIMasterMindsiOS17Ch1Sec1WebView(searchURL: url)
    }
}

#Preview {
    SwiftUIMasterMindsiOS17Ch1Sec1WEB()
}

てな感じでコードを下の行に追加すると、

てな感じで、赤いエラー警告が発生

これ実は、

組み込んだWebKit用のメソッドなんかを使う用のフレームワーク
👉WebKitがインポートされてないよ〜〜〜

ってだけのエラーなので、

WebKitフレームワークをインポート

一番上の行あたりにあるフレームワーク指定するところに
import WebKit

を追加してあげると、

インポート後
見てのとおり赤いエラー警告がなくなった🕺

次に、タブのボタンを追加してく〜〜〜

前回作ったTabManageFileに、

let webImageTab = "link"
let webTextTab = "参考リンク"

を、

てな感じで追加してあげて、、、
（個人的な手法なんで必ずやらないといけないわけじゃないからね💦）

前回、差し込んだTabViewのコードに

SwiftUIMasterMindsiOS17Ch1Sec1WEB()
　　　　.tabItem {
   Image(systemName: webImageTab)
   Text(webTextTab)
　　　　}

を追加〜〜〜

てな感じで、リンクボタンがタブにひとつ追加できてるので〜〜〜

追加した参考リンクボタンをクリックすると、

てな感じで、

他のブラウザとかに連動することなく、

アプリ内で他のWEBページにアクセスできたことが確認できた🕺

今後、リンク先は増えてくる可能性が高いので〜〜〜

新しいSwiftFileを追加して、

URL(string: "https://note.com/m_kakudo/m/m681b1be679c5")!

にあるString以降の、URLは他のファイルで名前をつけて管理しやすくしとく🕺

てな感じでファイルに定数を作って、
ここを書き換えただけ〜〜〜

後は、もう一冊の本の方にも同じ操作をしてあげれば、完成

てな感じ🕺

最後に、ちゃんとSimulatorで動くかを検証👀

マスターマインド
エッセンシャルズ

💃両方問題ないことを確認出来た🕺

ちなみに、

URLを今回みたいに、パラメータで管理しておくと、例えば

で紹介した、

みたいなサイトのURLに変更するだけで、

エッセンシャルズのURLのみ変更
てな感じで管理が簡単になるからね👀

今回のコード（まとめ）

🔹SwiftUIMasterMindsiOS17Ch1Sec1

import SwiftUI
import WebKit

struct SwiftUIMasterMindsiOS17Ch1Sec1: View {
    var body: some View {
        VStack{
            TabView {
                SwiftUIMasterMindsiOS17Ch1Sec1Contents()
                    .tabItem {
                        Image(systemName: contentsImageTab)
                        Text(contentsTextTab)
                    }
                SwiftUIMasterMindsiOS17Ch1Sec1Code()
                    .tabItem {
                        Image(systemName: codeImageTab)
                        Text(codeTextTab)
                    }
                SwiftUIMasterMindsiOS17Ch1Sec1Point()
                    .tabItem {
                        Image(systemName: pointImageTab)
                        Text(pointTextTab)
                    }
                SwiftUIMasterMindsiOS17Ch1Sec1WEB()
                    .tabItem {
                        Image(systemName: webImageTab)
                        Text(webTextTab)
                    }
            }
        }
    }
}

#Preview {
    SwiftUIMasterMindsiOS17Ch1Sec1()
}

struct SwiftUIMasterMindsiOS17Ch1Sec1Contents: View {
    var body: some View {
        Text("内容")
    }
}

#Preview {
    SwiftUIMasterMindsiOS17Ch1Sec1Contents()
}

struct SwiftUIMasterMindsiOS17Ch1Sec1Code: View {
    var body: some View {
        ScrollView{
            Text(codeSwiftUIMasterMindsiOS17Ch1Sec1)
        }
    }
}

#Preview {
    SwiftUIMasterMindsiOS17Ch1Sec1Code()
}

struct SwiftUIMasterMindsiOS17Ch1Sec1Point: View {
    var body: some View {
        Text("ポイント")
    }
}

#Preview {
    SwiftUIMasterMindsiOS17Ch1Sec1Point()
}

struct SwiftUIMasterMindsiOS17Ch1Sec1WebView: UIViewRepresentable {
    let searchURL: URL
    func makeUIView(context: Context) -> WKWebView {
        let view = WKWebView()
        let request = URLRequest(url: searchURL)
        view.load(request)
        return view
    }
    
    func updateUIView(_ uiView: WKWebView, context: Context) {
        
    }
}

struct SwiftUIMasterMindsiOS17Ch1Sec1WEB: View {
    private var url:URL = URL(string: urlSwiftUIMM1_1)!
    var body: some View {
        SwiftUIMasterMindsiOS17Ch1Sec1WebView(searchURL: url)
    }
}

#Preview {
    SwiftUIMasterMindsiOS17Ch1Sec1WEB()
}

🔸iOSApp17DevelopmentEssentialsCh1Sec1

import SwiftUI
import WebKit

struct iOSApp17DevelopmentEssentialsCh1Sec1: View {
    var body: some View {
        VStack{
            TabView {
                iOSApp17DevelopmentEssentialsCh1Sec1Contents()
                    .tabItem {
                        Image(systemName: contentsImageTab)
                        Text(contentsTextTab)
                    }
                iOSApp17DevelopmentEssentialsCh1Sec1Code()
                    .tabItem {
                        Image(systemName: codeImageTab)
                        Text(codeTextTab)
                    }
                iOSApp17DevelopmentEssentialsCh1Sec1Points()
                    .tabItem {
                        Image(systemName: pointImageTab)
                        Text(pointTextTab)
                    }
                iOSApp17DevelopmentEssentialsCh1Sec1WEB()
                    .tabItem {
                        Image(systemName: webImageTab)
                        Text(webTextTab)
                    }
            }
        }
    }
}

#Preview {
    iOSApp17DevelopmentEssentialsCh1Sec1()
}

struct iOSApp17DevelopmentEssentialsCh1Sec1Contents: View {
    var body: some View {
        Text("機能")
    }
}

#Preview {
    iOSApp17DevelopmentEssentialsCh1Sec1Contents()
}

struct iOSApp17DevelopmentEssentialsCh1Sec1Code: View {
    var body: some View {
        ScrollView{
            Text(codeiOSApp17DevelopmentEssentialsCh1Sec1)
        }
    }
}

#Preview {
    iOSApp17DevelopmentEssentialsCh1Sec1Code()
}

struct iOSApp17DevelopmentEssentialsCh1Sec1Points: View {
    var body: some View {
        Text("ポイント")
    }
}

#Preview {
    iOSApp17DevelopmentEssentialsCh1Sec1Points()
}

struct iOSApp17DevelopmentEssentialsCh1Sec1WebView: UIViewRepresentable {
    let searchURL: URL
    func makeUIView(context: Context) -> WKWebView {
        let view = WKWebView()
        let request = URLRequest(url: searchURL)
        view.load(request)
        return view
    }
    
    func updateUIView(_ uiView: WKWebView, context: Context) {
        
    }
}

struct iOSApp17DevelopmentEssentialsCh1Sec1WEB: View {
    private var url:URL = URL(string: urlDevEssentials1_1)!
    var body: some View {
        iOSApp17DevelopmentEssentialsCh1Sec1WebView(searchURL: url)
    }
}

#Preview {
    iOSApp17DevelopmentEssentialsCh1Sec1WEB()
}

🟪URLManageFile

import Foundation

let urlSwiftUIMM1_1 = "https://note.com/m_kakudo/m/m681b1be679c5"
let urlDevEssentials1_1 = "https://sites.google.com/view/masaboct3/%E3%83%9B%E3%83%BC%E3%83%A0/"

Apple公式サイト

さてと、これで、

本題の学びに入る前にオイラが準備しときたかった、

コードテンプレート

は大体、出来上がったので、

次回からいよいよ、本題に入ってく〜〜〜〜🕺

んだけど、最初のうちは、どの技術書でも同じようにXcodeを使って実際にアプリを組み込む前に、

Playgroundを使って、Swiftプログラミングをしっかりやってく〜〜〜

最近は、

  • 実践で学べばいい

  • 作りながら理解すればいい

  • syntax単体の勉強は不要

みたいな人が増えて、Swiftに限らず、コード学習を疎かにする人も多いか、逆に、Swiftのプログラミング言語だけをマニアックに、

みたいな本と同等かそれ以上に、プログラミング言語自体の勉強はやって理解してるが、

  • 実際に、Xcodeを使ってアプリを作ったことがない

  • Xcodeを使ってアプリまでは作れるが、AppStoreで公開したことがない

  • Swiftの文法は理解してるが、Xcodeでいざアプリを開発するときにどうしていいかわからない

みたいな人も多いみたいだし、

Swiftは進化し続ける言語

で、最近始めた人は知らないかもしれないけど、数年前、

iOS2→iOS3に移行する際のコードの破壊的な変更

があったくらい、色々と変更が今回もあるかもしれないので、本編に入っても、順番どおりにまずは

💃しっかりPlaygroundでコードをしっかり学んでく〜〜〜🕺

そっちの方が、いきなりサンプルコードのみを引っ張ってきてアプリを作るよりも

遠回りなようで近道
👉急がば回れ

ま、レガシーエンジニアやブラックITの営業さんなんかで、

「だからSwiftじゃなくJavaとかVBみたいな成熟した言語の方がいい」
「リソースが確保できるから」

とかって思ってる人もいるみたいなんだけど、現在のSwiftUIに繋がるような

よりモダンでシンプルに使いやすい言語に日々進化してるだけ

だからね。現在の結果だけを見て、SwiftとかiOSアプリ開発は簡単って勘違いしてる人も多いみたいなんだけど、

ややこしい言語や開発環境でやろうと、シンプルでモダンで直感的に扱える言語と開発環境でやろうと、出来上がるアプリが同じなら、
シンプルで早く簡単に作れて、管理もしやすくて安全な開発環境と言語でやった方がいいでしょ👀？

簡単ってゆーわりに、タプルやジェネリクスなんかを他の言語で理解して使いこなせてる人を見たことないけどね👀

それじゃ、コードテンプレートで準備もできたところで、

来週末から、ページ数も少ないし、まだ、１回もやったことがない、

Essentials

の方からやってこっかな🧐ま、どうせ次回は週末になるから、それまでにゆっくり考えよう🕺

ではでは、みなさん

また週末に〜❣️

さてと、犬の散歩とトイレ掃除して、終わったら近くの神社に『蜻蛉日記』の続き読みに行こ🚶‍♀️

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