2022/8/7

【Swift UI】URLリンクボタンの作成方法！Link構造体や@Environment(openURL)

この記事からわかること

Swift UIでリンクボタンの作成方法
Link構造体の使い方
URL型へキャストするには？
UIKitのUIApplication.openメソッド
Swift UIの@EnvironmentのopenURL

index

[open]

＼アプリをリリースしました／

友達や家族の誕生日をメモ！通知も届く-みんなの誕生日-

posted withアプリーチ

Swift UIでWebサイトへのリンクボタンを作成する方法を3種類まとめていきたいと思います。

Swift UIでURLリンクボタンの作成方法

Swift UIフレームワークを使ってWebサイトなどへのリンクボタンを作成するにはLink構造体を使って簡単に作成できます

Linkの定義とイニシャライザ

@available(iOS 14.0, macOS 11.0, tvOS 14.0, watchOS 7.0, *)
public struct Link : View where Label : View {
    // 使用例1
    public init(_ titleKey: LocalizedStringKey, destination: URL)
    // 使用例2
    public init(destination: URL, @ViewBuilder  label: () -> Label)

}

使用例1

Link("開発者用Appleサイトを開く", destination: URL(string: "https://developer.apple.com/")!)

使用例2

Link(destination:URL(string: "https://appdev-room.com/")!, label: {
    HStack{
        Image(systemName:"note.text").frame(width: 30)
        Text("Webエンジニア学習部屋")
        Image(systemName:"link").font(.caption)
    }
})

引数destinationにはURL型の文字列を渡します。ただのURLの文字列ではエラーになってしまうのでURL構造体のイニシャライザを使って型変換していきます。

URL.init(string: "対象URL文字列")!

UIKitのUIApplicationクラスを使ったボタンリンク

Link構造体ではなくUIKitフレームワークのUIApplicationクラスのopenメソッドを使用しても指定したURLへ飛ばすことが可能です。この方法の場合はボタンだけでなく、処理の中に混ぜ込むことも可能になります。

定義

func open(
    _ url: URL,
    options: [UIApplication.OpenExternalURLOptionsKey : Any] = [:],
    completionHandler completion: ((Bool) -> Void)? = nil
)

使用例

import SwiftUI

struct ContentView: View {

    func executeLink(){
        let application = UIApplication.shared // シングルトンのインスタンスを取得
        application.open(URL(string: "https://appdev-room.com/")!) // openメソッド呼び出し
    }
    
    var body: some View {
        Button("リンク"){
            executeLink()
        }
    }
}

公式リファレンス：UIApplication.openメソッド

openメソッドでユニバーサルリンクのみ開けるようにする

ユニバーサルリンクとはディープリンクの1つでWebサイトのURLをクリック時に指定したiOSアプリを起動させる手法のことです。実際に実装するにはWeb側での「apple-app-site-association」ファイルの設置などやることが多いので今回は記述しません。

openメソッドでは引数optionsに.universalLinksOnly: trueを渡すことで指定したURLがユニバーサルリンクに対応していれば遷移を実行し、対応していなければ遷移しないようにすることができます。

import SwiftUI

struct ContentView: View {

    func executeLink(){
        let application = UIApplication.shared
        application.open(URL(string: "https://appdev-room.com/")!,options: [.universalLinksOnly: true])
    }
    
    var body: some View {
        Button("リンク"){
            executeLink()
        }
    }
}

openメソッドで遷移の可否で処理を分割

openメソッドの引数にはcompletionHandlerが用意されています。これはSwiftの仕組みの1つでありいわゆる「イベントドリブン」な仕組みでイベントが発生してから処理を実行させることができます。

completionHandlerはクロージャとして渡します。openメソッドのcompletionHandlerはイベント(Webページへ遷移したかどうか)が発生後、クロージャの引数に遷移したかどうかのBool(真偽)値が渡されます。

おすすめ記事：【Swift】クロージャとは？関数との違いとキャプチャの意味

遷移が成功するパターン

func executeLink(){
    let application = UIApplication.shared
    application.open(URL(string: "https://appdev-room.com/")!){ ( success ) in
        if success {
            print("遷移しました") // 遷移しました
        }else{
            print("遷移しませんでした")
        }
      }
}

リンクがユニバーサルリンクに設定していないので遷移しないパターン

func executeLink(){
    let application = UIApplication.shared
    application.open(URL(string: "https://appdev-room.com/")!,options: [.universalLinksOnly:true]){ ( success ) in
        if success {
            print("遷移しました")
        }else{
            print("遷移しませんでした") // 遷移しませんでした
        }
      }
}

Swift UIの@EnvironmentからopenURLで遷移する

Swift UIで使えるProperty Wrapper(プロパティラッパ)の1つ、環境値を読み取れる「@Environment」を使用することでURLリンクへ移動することが可能です。

Property Wrapper(プロパティラッパ)とは宣言するプロパティ(変数)に対してキーワードを追加するだけで特定の処理や操作、機能を持たせることができる仕組みです。

@Environmentではカラースキーム(ダークモードなど)やタイムゾーンなど環境によって変化する値を参照、操作することはできます。中でもopenURLは適切なシステムサービスを使ってURLリンクへと遷移してくれます。

struct ContentView: View {
    
    @Environment(\.openURL) var openURL
    
    var body: some View {
        Button("リンク") {
            openURL(URL(string: "https://appdev-room.com/")!)
        }
    }
}

公式リファレンス：@Environment「openURL」

おすすめ記事：【SwiftUI】入力されたURLの有効性を識別する方法！

まだまだ勉強中ですので間違っている点や至らぬ点がありましたら教えていただけると助かります。

ご覧いただきありがとうございました。

私がSwift UI学習に使用した参考書

リンク

Swift