Webページを表示する

本記事は「デジタルサイネージアプリ「Sign!」(iOS版)とその実装機能の紹介」の子記事です。

目的

StoryboardでWKWebViewを配置し、Webページを読み込んで表示するための操作やコードを紹介します。

開発・実行環境

• 開発環境：macOS、Xcode(9~10)、Swift(4~5)
• 実行環境：iOS 11以上

StoryboardでWKWebViewを配置する

まず、Xcodeのナビゲータエリア上部のフォルダアイコン(一番左)をクリックし、表示されるツリーの中の「Main.storyboard」(Storyboardの名前は、みなさんのプロジェクトごとに異なると思います)をクリックし、Storyboard画面を開きます。
ここでは、StoryboardにViewControllerが1つあるものとして以下を記述します。

次に、画面右上にあるライブラリアイコン(寛永通宝のような丸の中に四角のアイコン)をクリックすると、UIオブジェクトを選択できるダイアログが表示されます。

ダイアログ上部の検索窓で、「web」と入力すると、「WebKit View」が現れます。

「WebKit View」をStoryboardのViewControllerへドラッグ&ドロップすると、WKWebViewの配置が完了します
※なお、ここでは説明しませんが、以降の説明のため、WKWebViewが画面いっぱいに表示されるようにレイアウトしておきます。

次に、配置したWKWebViewをコードへ紐づけます。
画面右上にある「Show the Assistant editor」アイコン(丸を2つ重ねたアイコン)をクリックすると、Storyboard画面の隣に、ViewControllerのコードが表示されます。この状態で、「control」キーを押しながら、StoryboardのWKWebViewをドラッグし、ViewControllerのコードの方へドロップすると、ダイアログが開きますのでNameにしかるべき名前(ここではwebviewとしています)を入力し、「Connect」ボタンをクリックします。

すると、「＠IBOutlet ~」なる行が追加されますが、このままでは「Use of undeclared type 'WKWebView'」なるエラーが表示されますので、WebKitをインポートする記述をしておきます。

これで、ViewControllerのコードでWKWebViewを扱えるようになりました。

WKWebViewでWebページを表示する

WKWebViewでWebページを読み込み、表示するには、load()メソッドを使います(以下はViewControllerのviewDidLoad()で実行しています)。

ViewController.swift

@IBOutlet weak var webview: WKWebView!

override func viewDidLoad() {
  super.viewDidLoad()
  if let url = URL(string: "https://ojami.net/") {  // URL文字列の表記間違いなどで、URL()がnilになる場合があるため、nilにならない場合のみ以下のload()が実行されるようにしている
    self.webview.load(URLRequest(url: url))
  }
}

以上です。