【まとめ】swiftにあるwebViewのカンタンな使い方
iphoneでカンタンにWEBページを表示したい方に向けて、
swiftのwebKitViewの使い方をまとめてみました。
iphone X以降だとサイトによってレイアウト崩れが発生するため、
その点も調査したことまとめてあります。
記事コンテンツ
- swiftでwebViewを使う方法
- UIパーツのWebKitviewの使い方！
- webViewの使い方について気をつける点
iOS 8.0以降、WKWebViewを使用してアプリにWebコンテンツを追加することが可能になりました。
つまり、誰でもカンタンにiphoneでwebサイトを表示できるわけです。
swiftのwebViewを使ってみましょう！
webKitViewをつかって表示させたいのはこんな感じです↓
swiftでwebViewを使う方法
iphoneにWebサイト表示する方法は大きく分けて２つみたいですが、
まずは、コードのみでwebKitViewをつかってみます。
ステップ１
ViewControllerをひらく。
ステップ2
コードを書いていく。
URL(string:”https://www.apple.com”)の部分を表示させたいサイトURLに変更。
例えばGoogleの検索画面(https://www.google.com/)に差し替える。
ステップ3
ビルドしてみる
「Command」+「R」
とりあえず、Googleの検索画面を表示できました。
画面上の方はサイズがちょうどいいけど、下の方がイマイチ？
UIパーツのWebKitviewの使い方！
次はUIパーツ使ってiphoneにWebサイトを表示してみましょう！
view(webkitView)のサイズをわりとカンタンに調節できるので役に立ちます。
ステップ１
Main.storyboardを開く。
ステップ2
右上の「＋」を押下して、「WebKitView」をドラッグアンドドロップでsafeareaにおく。
そしてwebviewのサイズを調節。
ステップ３
Outlet接続していきます。
Main.storyboardを開いてassistantをを開きます。
画面が分割されたら、ctrlとドラッグアンドドロップでコードに紐付けます。
そして、WebKitをインポート。
ステップ4
project→ General→ Frameworks,Libraries, and Embedded Contentの「＋」を押下し、Webkit.frameworkを検索して追加。
ステップ５
コードを書いていきます。
Apple開発者向けに載せいていたドキュメントを拝借。
参照：Apple Document
ステップ6
URL(string:”https://www.apple.com”)の部分を表示させたいサイトURLに変更。
今回もGoogleの検索画面(https://www.google.com/)
webViewの使い方について気をつける点
２つの方法でWebKitVIewの使い方を実践してみましたが、
UIパーツを使わずコードのみ場合注意するポイントがあります。
それは、
表示するサイトによってレイアウトが崩れてしまう可能性があります。
例えばこれです↓
YoutTubeを表示しようとしましたが、
safeareaをこえてステータスバーに重なってしまっています。
Safeareaのサイズを確保できてないのが原因かと。
なので、自分でsafeareaの広さを計算してあげる必要があります。
今回はportraitのみサイズ調節しました。
ビルドしてみると、想定していたとおりの表示になりました。
最初の方で表示したGoogleの検索画面も、問題ないですね！
ただし、landscapeで表示した際に画面が崩れるので改善の余地がありますね。
今回は以上です。また、アップグレードしていきます！