【はじめてのiPhoneアプリ開発】WebKitを使ってみよう

【はじめてのiPhoneアプリ開発】WebKitを使ってみよう

【今回の目標】アプリ内でWebページを表示

今回は単純にアプリを起動すると Webページ が開くものを作ってみました。ページ遷移などの機能と連携させると、おもしろそうですよね。

WebKitサンプル

WebKitの使い方

Step.1 新規プロジェクトの作成

まずは新規プロジェクトを作成しましょう。 XCode 起動後、 「Create New Xcode Project」 → 「Single View App」 で新規プロジェクトの作成ですね。

Step.2 アプリのhttp通信

アプリを使って Webページを読み込むためには、まずアプリで http通信 ができるようにセットしておく必要があります。 http通信の設定は、 XCode画面左のファイル群にある 「info.plist」 を開きましょう。

そして info.plist ファイルの最上部にある 「Information property List」 の横にマウスを合わせると ＋ マークが表示されます。その ＋ マークを左クリック。

すると入力欄が表示されますので、上図のように 「App Transport Security Settings」 と入力。このとき入力と同時に画面が自動的に切り替わるので、はじめの内はやりにくいと思います。 App Transport Security Settings が表示されたら、リターンキー。これでセキュリティー・セッティングの環境ができました。

次は http通信の許可をセットすべく、上記の様に手続きを行います。まずは先ほどセットできた 「App Transport Security Settings」 の文字頭にある ▶マークを左クリックして ▼ に変えます。

そして 「App Transport Security Settings」 にマウスを合わせて表示される ＋ マークを左クリック。入力欄に 「Allow Arbitrary Loads」 と入力し、リターンキー。この時 Allow Arbitrary Loads の項目（右）を見ると、 Value が NO になっていると思います。 これを 「YES」 に変えてあげましょう。

これでアプリから http通信ができるようになりました。

Step.3 ストーリーボードの作成

http通信の環境が整ったら、 Webページを表示させるための準備をしていきましょう。アプリ内で Webページを表示させるには UI部品の 「WebKit View」 を使うと便利。

XCode画面左にある 「Main.storybord」 を選択して、画面右上の 「Libraryボタン」 をクリック。 UI部品の 「WebKit View」 を検索し、ストーリーボードにドラッグ＆ドロップ。

ドロップすると上記のように表示されますが、スマホの画面いっぱいで Webページを見ようと思いますので、 UI部品の枠を画面いっぱいに拡大します。

UI部品のサイズを拡大できたら、レイアウトのセットをしておきましょう。

レイアウトのセットは、ストーリーボード下の |-□-| ボタンクリック後、上図のように空きスペースをすべて 0 にします。 これでストーリーボード側の設定は完了！次は Webページを読み込むためのセット。

Step.4 WebKit Viewの接続

Webページをアプリ内で表示させるためには UI部品の 「WebKit View」 と ViewController.swift を接続する必要があります。XCode画面右上の 「○○マーク（Show the Assistant Editor）」 をクリックし、 ViewController.swift 画面を開きます。

そしてストーリーボード上の 「WebKit View」 を右クリックしたまま、 上図のようにドラッグ＆ドロップ。ドロップする場所は、

import UIKit

class ViewController: UIViewController {

の下（上図参照）。

接続時の設定項目は以下の通り。

Connection: Outlet
Object: View Controller
Name: 任意（今回は web）
Type: WKWebView
Storage: Weak

接続が完了すると自動的にコードが追記されるのですが、今回はその追記コードが原因で赤色エラーが発生。原因は、 WebKitクラスが読み込まれていないため。

import WebKit

を追記するとエラーは消えました。次は読み込むページの URL などをセットしていきます。

Step.5 プログラミング

import UIKit
import WebKit

class ViewController: UIViewController {

    @IBOutlet weak var web: WKWebView!

    override func viewDidLoad() {
        super.viewDidLoad()

        let url = URL(string: "https://blog.codecamp.jp")
        let request = URLRequest(url:url!)
        web.load(request)
    }
}

新しく追加したコードは 3行。

まず let url = ・・・ で 読み込むページの指定。 次の let request = ・・・ で指定した URL にアクセス。 最後の web.load(request) で アクセスした URL の内容を読み込み、 UI部品の 「web（WebKit View）」 に出力。

以上でアプリを起動すると Webページが読み込まれるようになります。

まとめ

今回は Webページのみの表示ですが、ページ遷移のナビゲーション・コントローラーなどと合わせて使うとおもしろそうですよね。

「グノシーのようなRSS系アプリを作りたい」「Web上の情報を使ってアフィリエイト・アプリを作りたい」という方。 Swiftの基礎はお済みでしょうか？ 今回ご紹介した Webページの読み込みは簡単なプログラムでしたが、 XMLファイルや JSONファイルなど Web関係のデータを扱ったり、ページ移動の操作を円滑にしようと思うと Swiftの基礎知識が必須です。

「参考書を開いても眠くなる」「同じようにしているのにナゼかエラーが消えない」という方。ちょっと学習環境を見直してみませんか？ 一人でも自分の好きなペースでプログラミング・レッスンを受けられる 「オンラインのマンツーマン・レッスン」は試したことありますでしょうか？

まだという方、 CodeCamp ではオンラインのプログラミングレッスンの世界を知らない方向けに 「無料体験」 や 「無料相談」 を実施中。この機会によろしければ オンラインの学習環境、体験してみませんか？