今回は、iosのアプリ開発をしたのでそれの説明をしようと思います。アプリの主な機能は
- urlを読み込み、webページを表示させる
- Segmented Controlを用いて３つのWebページを表示する機能
- ネッワークエラー検出機能
- ネットワークエラー検出時の表示ボックス
です。初心者なのでまだこの程度のものしか作れませんが、簡単なところから始めようと思います。ついでに今回はサッカーのチャンピオンズリーグとヨーロパリーグとリーガエスパニョーラのwebページを表示させてみようと思います。
ストーリボードの設定
以下にstoryboard を載せます。とはいっても、複雑な部品は配置していません。設置した部品は、
- Segmented Control
- Web View
の二つです。Segmented Control は「Show the Attributs inspector」→「Segmented Control」→「Segments」でカテゴリーを３つにするのを忘れないように。
スポンサードリンク
コードの説明
Segmented Controlの設定
以下に、取得したWebページをSegmented Controlと紐付けるコードを載せます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
@IBAction func siteChoice(_ sender: UISegmentedControl) { // choose category switch sender.selectedSegmentIndex { case 0: taskCategory = "CL" let urlString = "http://jp.uefa.com/uefachampionsleague/" let urlRequest = URLRequest(url: URL(string: urlString)!) self.browserWebview.loadRequest(urlRequest) case 1: taskCategory = "EL" let urlString = "http://jp.uefa.com/uefaeuropaleague/" let urlRequest = URLRequest(url: URL(string: urlString)!) self.browserWebview.loadRequest(urlRequest) case 2: taskCategory = "LIGA" let urlString = "http://www.wowow.co.jp/sports/liga/" let urlRequest = URLRequest(url: URL(string: urlString)!) self.browserWebview.loadRequest(urlRequest) default: taskCategory = "CL" } } |
|
1 |
sender: any のところを sender: UISegmentedControl とするのを忘れないでください。 |
３つのWebページの配置にはswitch 文を用いています。case内の主な手順としては、
- カテゴリーの宣言
- urlString （letで定数指定）の中に表示させたいURLをぶち込む
- urlをURLRequest型に変換。urlStringがoptinal 型なので、「！」をつける
- Webviewのメソッドを呼ぶので、お決まりのselfで呼んであげて終わり。
ネットワークエラー検出
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
//アラートの表示 func showAlert(_ message: String) { let alertController = UIAlertController(title: "Error", message: message, preferredStyle: .alert) let defaultAction = UIAlertAction(title: "OK", style: .default, handler: nil) alertController.addAction(defaultAction) self.present(alertController, animated: true, completion: nil) } //nettowa-kuエラー時の検出と表示 func webView(_ webView: UIWebView, didFailLoadWithError error: Error) { if (error as! URLError).code == URLError.cancelled { return } self.showAlert("Network Error") self.browserWebview.stopLoading() } |
showAlertメソッドでまずアラートの表示機能を実装します。そして今回実装する機能は、ネットワークエラー時なので、webViewメソッドで実装します。
そしてshowAlertを’Network Error’と表示するようにし、その時にwebページのロードを中止するようにします。if文の中身はユーザーがロード中に他のボタンを押してしまった時などにキャンセルされた場合などを除外するために、記述しましょう。
以下に動作確認の動画を載せます。
webページを表示させることができるので、いつかUIに凝ったブラウザとかも作ってみたいです。以下に今回のアプリ開発で実装したコードを載せます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 |
// // ViewController.swift // browser // // Created by 中村俊 on 2017/05/12. // Copyright © 2017年 中村俊. All rights reserved. // import UIKit class ViewController: UIViewController , UIWebViewDelegate{ @IBOutlet weak var browserWebview: UIWebView! @IBOutlet weak var categorySegment: UISegmentedControl! var taskCategory = "CL" override func viewDidLoad() { super.viewDidLoad() // Do any additional setup after loading the view, typically from a nib. self.browserWebview.delegate = self } @IBAction func categoryChosen(_ sender: UISegmentedControl) { // choose category of task switch sender.selectedSegmentIndex { case 0: taskCategory = "CL" let urlString = "http://jp.uefa.com/uefachampionsleague/" let urlRequest = URLRequest(url: URL(string: urlString)!) self.browserWebview.loadRequest(urlRequest) case 1: taskCategory = "EL" let urlString = "http://jp.uefa.com/uefaeuropaleague/" let urlRequest = URLRequest(url: URL(string: urlString)!) self.browserWebview.loadRequest(urlRequest) case 2: taskCategory = "LIGA" let urlString = "http://www.wowow.co.jp/sports/liga/" let urlRequest = URLRequest(url: URL(string: urlString)!) self.browserWebview.loadRequest(urlRequest) default: taskCategory = "CL" } } //アラートの表示 func showAlert(_ message: String) { let alertController = UIAlertController(title: "Error", message: message, preferredStyle: .alert) let defaultAction = UIAlertAction(title: "OK", style: .default, handler: nil) alertController.addAction(defaultAction) self.present(alertController, animated: true, completion: nil) } //nettowa-kuエラー時の検出と表示 func webView(_ webView: UIWebView, didFailLoadWithError error: Error) { if (error as! URLError).code == URLError.cancelled { return } self.showAlert("Network Error") self.browserWebview.stopLoading() } override func didReceiveMemoryWarning() { super.didReceiveMemoryWarning() // Dispose of any resources that can be recreated. } } |
スポンサードリンク
