SwiftのWKWebViewでブラウザアプリを作ってみた!

こんにちは。株式会社インターファクトリーでエンジニアをしている「たっきー」です。

弊社インターファクトリーの業務では、JavaでWebアプリの開発を行っていますが、個人的にSwiftに興味を持ち勉強しているので、WKWebViewというUI部品を用いてブラウザアプリを作ってみました。

今回はその結果を記載します。

利用した環境

今回使用した環境はこちらです。

・Mac 
・Xcode

開発の流れ

以下の手順にてブラウザアプリを作成しました。

①Xcodeのストーリーボードにボタンやラベル等のUI部品を配置してレイアウトを調整
②ViewController.swiftをストーリ―ボードに配置したUI部品を接続
③配置したUI部品の処理(タップされた時、画面が読み込まれた時の処理等)の記述
④動作確認

①Xcodeのストーリーボードにボタンやラベル等のUI部品を配置してレイアウトを調整

使用する主なUI部品


各部品を「Main.storyboard」へ配置してレイアウト調整を行い、以下の画面を作成しました。

②ViewController.swiftをストーリ―ボードに配置したUI部品を接続

ViewController.swiftにUI部品を定義するためのOutlet接続とUI部品の処理を書くためのメソッドを作成するAction接続を行いました。

接続は、配置したUI部品をダブルタップまたは右クリックをしたままViewController.swiftへドラッグアンドドロップすると接続が行えます。

接続した結果は以下のようになります。

Outlet接続

ViewController.swift

 

Outlet接続を行うと上のようにソースコード上で画面に配置した部品が変数として定義されて各部品の設定等をソースコード上でも行えるようになります。

Action接続

Action接続を行うとその名の通り、ボタン等のUI部品のアクションを設定するためのメソッドが作成されます。

今回は画面下の戻るボタン・リロードボタン・停止ボタンをAction接続してそれぞれが押下されたときの処理を記載しました。

③配置したUI部品の処理(タップされた時、画面が読み込まれた時の処理等)の記述

処理内容

◇WKWebViewにWebサイトを表示するための処理
◇戻るボタン、リロードボタン、停止ボタンの処理
◇各種ボタンと読み込みインジケータの処理タイミングによる表示非表示処理
◇SearchBarの検索する処理

ViewController.swift

 

④動作確認

Xcodeで作成したアプリの動作確認を行うには以下の二つの方法があるのでそれぞれで動作確認を行いました。

XcodeのiOSシミュレータを用いた動作確認

XcodeのiOSシミュレータでは、iPhoneやiPad等のネイティブアプリが動く様々な機種でのシミュレーションが実行できます。

今回は、iPhone XSでアプリを実行してみました。

このように、実際にアプリを起動するとアプリ起動時に設定したURLのサイトが表示されます。また画面読み込み時にはインジケータが表示されて読み込みが終わるとインジケータは非表示になるようになっています。

検索機能もシミュレーションしてみます。
Swiftと検索バーで検索するとGoogleでの検索結果が表示されます。

自分のiPhoneに作成したアプリをインストールする実機での動作確認

実機で動作確認を行う場合は、PCに自分のiPhoneを接続して実行を行うと作成したネイティブアプリが実機へとインストールされます。あとは、実機の方でインストールしたアプリをタップして起動すればシミュレータと同じように操作ができます。

まとめ

今回は、WKWebViewというUI部品を使ってブラウザアプリを作成しました。

簡易的なアプリであればストーリーボードに部品を配置して処理を書くという流れで作ることができるので初心者の方でも理解しやすいと思います。

私も初めて触ったときは視覚的にプログラミングができるのでかなりわかりやすいと感じました。興味を持たれた方は是非Swiftに挑戦してみてください!

また、今回はアプリの画面が1つのシンプルなアプリを作成しましたが複数画面のアプリも作ることができるのでもっと色々な種類のアプリ開発にも挑戦してみたいと思います。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です