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

この記事からわかること

  • Swift UIリンクボタン作成方法
  • Link構造体の使い方
  • URL型キャストするには?
  • UIKitUIApplication.openメソッド
  • Swift UIの@EnvironmentopenURL

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

使用例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()
        }
    }
}

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(真偽)値が渡されます。

遷移が成功するパターン

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/")!)
        }
    }
}

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

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

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

searchbox

スポンサー

ProFile

ame

趣味:読書,プログラミング学習,サイト制作,ブログ

IT嫌いを克服するためにITパスを取得しようと勉強してからサイト制作が趣味に変わりました笑
今はCMSを使わずこのサイトを完全自作でサイト運営中〜

New Article

index