Xcode & Swift事始め、Web Viewを組み込む(超初心者編)

Xcodeはなんか複雑な感じがして、これまでずっと手が出ませんでした。ただ最近新しい12インチMacBookやApple Watchを購入してから、じわじわとiOSやApple Watchのアプリを作ってみたくなってきました。今回一念発起しXcodeを使ってみることにしました。ただ何からやっていいのかわからないので、まずは何となく思いついたWeb Viewの組み込みからチャレンジしてみることにしました

記事は書きますが、XcodeやSwiftに関しては超初心者なので、実装の甘い部分も多々あると思います。ただけっこう内容は詳しく書いてみたので、参考程度に見てもらえればと思います。

Xcode Swift

はじめに

私もそうですが、Xcodeに苦手意識を持っている方も多いと思います。Xcodeを起動しても何をどうすればよいかわからなかったりします。ドットインストールによくできた講座があります。まずは、そちらを見てXcodeについて基礎知識を入れておくとよいと思います。これだけでもだいぶ理解が深まると思います。

それからiOSアプリの開発に欠かせないUIKit Frameworkについて調べるには以下のレファレンスが役に立ちます。

Swiftも使いますね。公式サイトや無料の電子書籍などを紹介しておきます。

ちなみにこの記事を書いている時点での私のXcodeのバージョンは「6.3.2」となります。

Web Viewを組み込む

プロジェクトを作成する

今回は「Single View Application」としてプロジェクトを作ります。プロジェクトの立ち上げ方は上記でも紹介したドットインストールなどを参考にしてください。

Xcode - Single View Application

ストーリーボードにWeb Viewを配置する

プロジェクトを起動したら、左のナビゲーションエリアから「Main.storybord」をクリックして選択します。そうすると真ん中のエディターエリアにストーリーボードが表示されます。ストーリーボードは様々なビューの部品を配置してアプリの画面を作るためのツールとなります。

Xcode6 - Main.storyboardを開く

画面右下に部品の一覧があります。そこからWebビューを実装するための部品「Web View」を探して、ストーリーボード内にドラッグします。

Xcode - webviewをドラッグ

Web Viewをプログラム上で扱えるようにする

配置したWeb Viewは、そのままでは何も動いたりもしません。命を吹き込んで上げる必要があります。その役割を担うのが「ViewController.swift」となります。Viewを操作するためのControllerで、初期状態は以下のようになっています。(日本語部分は私が書いたコードの解説となります。)

// UIKitをインポート
import UIKit

// UIViewControllerクラスを継承した形でViewControllerクラスを定義
class ViewController: UIViewController {

  // 親クラスのviewDidLoadメソッドを上書きして再定義
  override func viewDidLoad() {
    // 親クラスのviewDidLoadメソッドを実行
    // UIViewControllerをインスタンス化する際に実行されViewを構成するメソッド
    super.viewDidLoad()
    // Do any additional setup after loading the view, typically from a nib.
  }

  // 親クラスのdidReceiveMemoryWarningメソッドを上書きして再定義
  override func didReceiveMemoryWarning() {
    // 親クラスのdidReceiveMemoryWarningを実行
    // メモリが不足した時にviewを解放するメソッド
    super.didReceiveMemoryWarning()
    // Dispose of any resources that can be recreated.
  }

}
ViewController.swift

配置したWeb Viewをプログラムで扱えるようにしていきます。まず「アシスタントエディタ」をクリックし画面を分割させ、ストーリーボードの右側にViewController.swiftのコードを表示させます。

Xcode - 画面を分割する

配置したWeb View上でcontrolキーを押しながらドラッグすると青い線が表示されます。その青い線をコード内の任意の場所まで引っ張っていきます。

Xcode - コード内にControlドラッグ

controlキーを押しながらコード内の任意の場所までドラッグすると、以下のようなポップアップウィンドウが表示されます。任意の名前をつけて「connect」ボタンを押します。

Xcode - WebViewとコードをconnectionする

コード内に以下のようなコードが追加され、これでWeb Viewがプログラム上から扱えるようになります。

import UIKit

class ViewController: UIViewController {

  @IBOutlet weak var webview: UIWebView!

  override func viewDidLoad() {
    super.viewDidLoad()
  }

  override func didReceiveMemoryWarning() {
    super.didReceiveMemoryWarning()
  }

}
ViewController.swift

Swiftで処理を書く

Web Viewに任意のURLのサイトを表示させてみようと思います。今回はこちらのブログ(http://mae.chab.in/)をWeb Viewに表示させることにします。コードはSwiftで書いていきます。

まずは以下のように、表示させたいページのURLを代入するための「URL変数」と、URLをWeb Viewに表示させるための「loadURL関数」を定義します。

import UIKit

class ViewController: UIViewController {

  @IBOutlet weak var webview: UIWebView!

  // url変数にhttp://mae.chab.in/を代入
  var url:String = "http://mae.chab.in/"

  // loadURL関数を定義    
  func loadURL() {
    let requestURL = NSURL(string: url)
    let request = NSURLRequest(URL: requestURL!)
    webview.loadRequest(request)
  }

  override func viewDidLoad() {
    super.viewDidLoad()
  }

  override func didReceiveMemoryWarning() {
    super.didReceiveMemoryWarning()
  }

}
ViewController.swift

上記コード内のクラスやメソッドの詳細については以下でご確認ください。

上で定義したloadURL関数を、viewがロードされたら実行するようにします。

import UIKit

class ViewController: UIViewController {

  @IBOutlet weak var webview: UIWebView!

  var url:String = "http://mae.chab.in/"
    
  func loadURL() {
    let requestURL = NSURL(string: url)
    let request = NSURLRequest(URL: requestURL!)
    webview.loadRequest(request)
  }

  override func viewDidLoad() {
    super.viewDidLoad()
    // viewのローディング終了後にlaodURL関数を実行
    loadURL()
  }

  override func didReceiveMemoryWarning() {
    super.didReceiveMemoryWarning()
  }

}
ViewController.swift

iOSシミュレーターを起動し確認

これで準備が整いました。Xcodeの画面上部の「Run」ボタンを押すか、「command + r」を押します。何も問題なければ、iOSシミュレーターが立ち上がります。Web View内に指定したURLのページが表示されていることが確認できます。

iOS_Simulator_-_iPhone_6 - Web Viewサンプル

任意のURLをWeb Viewに表示させるだけなら、これで完了です。

[追記] Xcode 7でのATS対応

Xcodeのバージョンを「7」に上げると、App Transport Security(ATS)というネットワークセキュリティ対策のための機能が有効となり、HTTPでの通信が強制的にHTTPSにされるようになり、「http://」で指定したWebページが表示されなく(真っ白な状態と)なってしまいました。

とりあえずSSLに対応していないページを表示させたい場合は、推奨はされていませんが、このATSを無効にするようにすれば良いようです。

「Supporting Files」ディレクトリ内の「info.plist」ファイルのサブメニューを開き、「Opne AS」の中の「Source Code」を選択して、編集画面を開きます。

info.plistファイルを開く

開いた「info.plist」ファイルに以下を追記します。

<key>NSAppTransportSecurity</key>
<dict>
  <key>NSAllowsArbitraryLoads</key>
  <true/>
</dict>

これでhttpで指定したページも開くようになります。その他、info.plistファイルを使って個別にATSの対象にしないドメインを設定したりすることもできるようです。詳細は以下をご参考にしてください。

Text FieldにURLを入力してWeb Viewを切り替える

今回これだでは味気ないので、もうちょっと頑張ってみました。テキストフォームとボタンを配置して、テキストフォームに入力されてURLをボタンを押すことでWeb Viewに表示させるようにしてみました。

ストーリーボードにButtonとText Fieldを配置する

「Web View」の時と同様に、画面右下に部品の一覧から「Button」「Text Field」を探して、それぞれストーリーボード内にドラッグして配置します。

Xcode - テキストフィールドとボタンを配置

ButtonとText Fieldをプログラム上で扱えるようにする

配置した「Button」「Text Field」をプログラム上から扱えるように、これまた「Web View」の時と同様に、画面を分割して、それぞれの部品上でcontrolキーを押しながら青い線をコード内の任意の場所までドラッグします。

Xcode - controlキーを押しながらドラッグ

それぞれの部品から青い線をコード内にドラッグすると、ポップアップウィンドウが表示されます。

「Text Field」の場合は、以下のように任意の名前をつけて「connect」ボタンを押します。

xcode - textfieldをコネクト

「Button」の場合は、以下のようにConnectionの部分を「Action」に変更し、任意の名前をつけて「connect」ボタンを押します。

Xcode - ボタンをコネクト

コード内にそれぞれ以下のようなコードが追加され、これでButtonとText Fieldがプログラム上から扱えるようになります。

import UIKit

class ViewController: UIViewController {

  @IBOutlet weak var webview: UIWebView!
  @IBOutlet weak var urlField: UITextField!

  var url:String = "http://mae.chab.in/"
    
  func loadURL() {
    let requestURL = NSURL(string: url)
    let request = NSURLRequest(URL: requestURL!)
    webview.loadRequest(request)
  }

  @IBAction func getUrl(sender: AnyObject) {
  }

  override func viewDidLoad() {
    super.viewDidLoad()
    loadURL()
  }

  override func didReceiveMemoryWarning() {
    super.didReceiveMemoryWarning()
  }

}
ViewController.swift

Swiftで処理を書く

さっそくSwiftでコードを書いていきます。追加するコードは、ボタンを押した時の処理となります。ボタンを押したら、Text Feildから値を取得し、url変数にセットし、loadURL関数を実行し、最後に表示されたキーボードを閉じるといった処理を実行するようにします。

import UIKit

class ViewController: UIViewController {

  @IBOutlet weak var webview: UIWebView!
  @IBOutlet weak var urlField: UITextField!

  var url:String = "http://mae.chab.in/"
    
  func loadURL() {
    let requestURL = NSURL(string: url)
    let request = NSURLRequest(URL: requestURL!)
    webview.loadRequest(request)
  }

  @IBAction func getUrl(sender: AnyObject) {
    // Text Fieldに入力されたURLを取得
    url = urlField.text!
    // loadURL関数を実行
    loadURL()
    // キーボードを閉じる
    urlField.resignFirstResponder()
  }

  override func viewDidLoad() {
    super.viewDidLoad()
    loadURL()
  }

  override func didReceiveMemoryWarning() {
    super.didReceiveMemoryWarning()
  }

}
ViewController.swift

上記コード内のクラスやメソッドの詳細については以下でご確認ください。

iOSシミュレーターを起動し確認

これで準備が整いました。Xcodeの画面上部の「Run」ボタンを押すか、「command + r」を押します。何も問題なければ、iOSシミュレーターが立ち上がります。表示されたText FieldにURLを入力し、buttonを押して、ページが表示されることを確認します。以下のように「http://google.com/」と入力したら、ちゃんとGoogleが表示されました。

Xcode - WebViewサンプル

まとめ

苦手意識を持っていたXcodeですが、実際に真剣に取り組んでみると、自分の思っていたほどやっかいなものではないことがわかりました。ひとつ思ったのは、慣れが必要なツールだなということです。まずは何でもいいから、いろいろチャレンジして覚えていく必要あるかなと思います。

それから今回全然うまくできなかったのが、レイアウトやデザイン部分です。Webのレイアウトやデザインは得意なんですが、Xcodeになるとまったく歯が立たない状況です。Auto Layout機能もまだまだ完全に理解できていないので、今回の記事では触れないことにしました。まずはこの辺りからクリアしていければと思っています。Swiftも今回はそれほど書いた実感がないので、もっとパンチの効いた処理を伴うものをどんどん試していこうと思っています。

最後に今回参考にさせていただいたサイトを以下に紹介しておきます。

Swiftではじめる iPhoneアプリ開発の教科書 【Swift 2&Xcode 7対応】(教科書シリーズ)
  • 『Swiftではじめる iPhoneアプリ開発の教科書 【Swift 2&Xcode 7対応】(教科書シリーズ)』
  • 著者: 森巧尚
  • 出版社: マイナビ出版
  • 単行本: 448ページ
  • 発売日: 2015年10月30日
  • ISBN: 978-4839957032

コメント一覧

  • 必須

コメント