開発
タグ SwiftUI WebView
SwiftUIでWebViewを使ってみました。
SwiftUI専用のWebViewはまだないようで、WebKit
のWKWebView
や、SafariService
のSFSafariViewController
を使う必要があります。
WKWebView
WKWebView
を使うには、まずUIViewRepresentable
を使ってWKWebView
を表示するView
を作成します。
import SwiftUI
import WebKit
struct WebView : UIViewRepresentable {
var url: URL
func makeUIView(context: Context) -> WKWebView {
return WKWebView(frame: .zero)
}
func updateUIView(_ uiView: WKWebView, context: Context) {
let req = URLRequest(url: url)
uiView.load(req)
}
}
#if DEBUG
struct WebView_Previews: PreviewProvider {
static var previews: some View {
WebView(url: URL(string: "https://apple.com")!)
}
}
#endif
このWebView
を使うと、WebViewを表示することができます。
import SwiftUI
struct MyView : View {
var url: URL
var body: some View {
WebView(url: url)
}
}
#if DEBUG
struct MyView_Previews : PreviewProvider {
static var previews: some View {
MyView(url: URL(string: "https://apple.com")!)
}
}
#endif
SFSafariViewController
SFSafariViewController
もWKWebView
と同様にUIViewControllerRepresentable
を使ってブリッジする必要があります。
import SwiftUI
import SafariService
struct SafariView: UIViewControllerRepresentable {
var url: URL
func makeUIViewController(context: UIViewControllerRepresentableContext<SafariView>) -> SFSafariViewController {
return SFSafariViewController(url: url)
}
func updateUIViewController(_ uiViewController: SFSafariViewController, context: UIViewControllerRepresentableContext<SafariView>) { }
}
#if DEBUG
struct SafariView_Previews: PreviewProvider {
static var previews: some View {
SafariView(url: URL(string: "https://apple.com")!)
}
}
#endif
今のところモーダルで表示する場合は問題無いようですが、プッシュで表示すると、ナビゲーションバーが2重で表示される問題があるようです。
オススメ記事
-
2021/2/17開発
brew upgradeで Your CLT does not support macOS 11というエラーがでた
-
2020/12/1開発
Apple Silicon搭載 MacBook Pro M1で Homebrewとrbenvをインストールする
先日購入したApple Silicon搭載 MacBook Pro M1にこのブログをビルドするためにHomebrewとrbenvをインストールしたのでメモ。
-
2020/11/27開発
Apple Silicon搭載のMacBook Pro M1が危うく文鎮化するところだったので記録
Apple Silicon搭載のMacBook Pro 13インチを仕事用に購入したのですが、クリーンインストールしたところ文鎮化しかけたので記録しておきます。
-
2020/6/23開発
Platform State of the Unionまとめ
Platform State of the Unioまとめ
-
2020/6/23開発
WWDC2020キーノートまとめ
WWDC2020 キーノートまとめ
-
2020/5/31開発
GitHub Pagesで無料ブログを作成する - Part4 自分のオリジナルのテーマを作る
Jekyllでは既存のテーマを使うこともできるのですが、さらに一歩踏み込んで、自分で既存のテーマをカスタマイズしたり、テーマを作ることもできます。
-
2020/5/28開発
GitHub Pagesで無料ブログを作成する - Part3 Jekyllの設定をカスタマイズする
前回の記事では、Jekyllのテーマを利用する方法と記事を追加する方法を紹介しました。今回はさらにJekyllをカスタマイズしていきますが、確認を簡単にするためにまずJekyllをローカル環境で実行する方法を紹介します。
-
2020/5/26開発
GitHub Pagesで無料ブログを作成する - Part2 Jekyllを使ってみる
JekyllはGitHub Pagesで使用することができる静的サイトのジェネレータです。Jekyllを使うことで、Markdownで書いたブログの記事やhtmlで作ったページをビルドして、公開用のhtmlとして生成することができます。
-
2020/5/24開発
GitHub Pagesで無料ブログを作成する - Part1 GitHubにリポジトリを作ってサイトを公開する
以前、GitHub Pagesでブログを運用し始めてから4年くらいたったというブログを書いたのですが、概要を書いただけで具体的な構築方法はあまり記述していなかったので、何回かに分けてブログを作っていく方法を書いていきたいと思います。
-
2020/1/3開発
FirebaseでCloud Storageに画像をアップロードする
今FirebaseとReactでアプリを開発中で、画像をアップロードする部分を作ったのでメモ。
MasamichiUeta
ソフトウェアエンジニアです。ソフトウェアエンジニアリング、アプリ開発、趣味などについて書いてます