Learn Swift / 第17章 Web ブラウザ
このコーナーでは、Swift による、Mac OS X アプリケーションの作成方法を、説明しています。
Web プロジェクトの作成
この章では、Appple が提供している、WebView クラスを使って、Web ブラウザを作成する方法を学習します。
Xcode を起動して、Cocoa Application プロジェクトを作ってください。Product Name は「Web」にします。Language は、Swift を選んでください。チェックボックスは、"Use Storyboards" だけに、チェックを入れます。プロジェクトの作成方法が、分からない場合は、Part1. アプケーション作成の概要の、第1章 Xcode のインストールとプロジェクトの作成 をご覧ください。
次の図を参考にして、「TARGETS」で「Web」を選び、「General」タブを選択します。プロジェクトを作成した直後は、この画面になっていると思います。プロジェクト画面の中央の、エディタエリアを、下にスクロールすると、「Linkws Frameworks and Libraries」項目が見つかります。「Add Items」ボタンをクリックしてください。
次に現れるパネルの検索フィールドに "web" と入力します。結果に現れる「WebKit.framework」を選択して、「Add」ボタンをクリックしてください。Web プロジェクトに、WebKit フレームワークが追加されます。WebKit フレームワークは、WebView を使うための、クラスや関数が定義されています。
プロジェクト画面の一番左側のナビゲータエリアで、ViewController.swift を選びます。プロジェクト画面の中央、エディタエリアが、ViewController.swift のコードに変わります。
ViewController.swift に、次のリストのように、コードを追加します。太字が追加するコードです。
import Cocoa
import WebKit
class ViewController: NSViewController {
|
WebKit フレームワークは、すでにプロジェクトには追加しましたが、「import WebKit」と記述することによって、WebKit フレームワークに定義されている、すべてのコードを、ViewController.swift に追加しています。
Web アプリケーションの画面の作成
次の図を参考にして、ストーリーボードの下の方のウィンドウに、Text Field と、WebKit View を配置してください。画面のレイアウト方法が、分からない場合は、Part1. アプケーション作成の概要の、第2章 アプリケーションの画面の作成 をご覧ください。
TextField は、左辺・上辺・右辺をピンでとめます。WebView は、左辺・上辺・右辺・下辺の、四辺をすべてピンでとめます。
次に、ストーリーボードで、上の方のウィンドウを選択して、最小サイズを、280、170に、設定してください。
ビューとコードの接続
ストーリーボードの WebView と、ViewControler.swift を、アウトレット接続します。アウトレットの接続方法が、分からない場合は、Part1. アプケーション作成の概要の、第3章 ビューとコードの接続 をご覧ください。
コネクションパネルで、Name を、"web" にします。
ストーリーボードの Text Field と、ViewController.swift を、アクション接続します。アクションの接続方法が、分からない場合は、Part1. アプケーション作成の概要の、第3章 ビューとコードの接続 をご覧ください。
コネクションパネルで、Connection を「Action」に変更し、Name に、"endEditing" と入力します。Type を「NSTextField」に変更してください。
ここまでの作業で、ViewController.swift のコードは、次のリストのようなります。太字部分が、接続によって、自動的に挿入されたコードです。なお、冒頭のコメント部分は、省略しています。
import Cocoa
import WebKit
class ViewController: NSViewController {
@IBOutlet weak var web: WebView!
@IBAction func endEditing(sender: NSTextField) {
}
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view.
}
override var representedObject: AnyObject? {
didSet {
// Update the view, if already loaded.
}
}
}
|
Web アプリケーションのコーディング
まずはじめに、URL を保持するプロパティを、変数として定義します。次のリストのように記述してください。太字部分が追加するコードです。「・・・」は、省略されていること表しています。
・・・
class ViewController: NSViewController {
var url = "https://www.apple.com/jp/"
@IBOutlet weak var web: WebView!
@IBAction func endEditing(sender: NSTextField) {
}
・・・
|
var url = "https://www.apple.com/jp/"
url という変数を定義しています。初期値として、アップルジャパンのサイト URL を指定しています。
ここで重要なことが一つあります。Xcode は、デフォルトでは、「https」で始まる、セキュリティの高いサイトのみを、表示でるようになっています。「http」で始まるサイトを、表示するには、プロジェクトの「App Transport Security」という設定を変更しなければなりません。「App Transport Security」の変更方法は、後ほど説明いたします。それまでは、リストのとおりの、アップルジャパンのサイトを指定するか、「https」で始まるサイトを、指定してください。
なお、プロパティとメソッドは、どのような順序で記述しても、問題ありません。しかし慣習としては、クラスの冒頭で、プロパティを定義し、次にメソッドを定義することになっています。
次に、loadWeb というメソッドを定義し、そのメソッドを、viewDidLoad メソッドの中で、呼び出します。次のリストのように記述してください。
・・・
@IBAction func endEditing(sender: NSTextField) {
}
func loadWeb() {
let url = NSURL(string: self.url)
let req = NSURLRequest(URL: url!)
web.mainFrame.loadRequest(req)
}
override func viewDidLoad() {
super.viewDidLoad()
loadWeb()
}
・・・・
|
let url = NSURL(string: self.url)
定数 url に、NSURL クラスのインスタンスを設定しています。「self.url」は、「クラスの url プロパティ」を指しています。
URL は、変更される可能性があります。しかし、その URL を定数にしていることは不思議かもしれません。メソッド内の定数や変数は、メソッドが終了するときになくなります。つまりメソッドが、呼び出されるたびに、新しく作られています。結果として、ここは定数で大丈夫です。定数でも変数でも大丈夫なときには、定数を使うことが、Apple によって、推奨されています。
let req = NSURLRequest(URL: url!)
定数 req に、NSURLRequest クラスのインスタンスを設定しています。
web.mainFrame.loadRequest(req)
WebView の、mainFrame というプロパティの、loadRequest メソッドを呼び出しています。この結果、WebView に、ウェブサイトが表示されます。プロパティに、メソッドがあることを、不思議に思うかもしれません。プロパティには、クラスのインスタンスも、設定できます。ここでは、mainFrame インスタンスの loadRequest メソッドを呼び出していることになります。
override func viewDidLoad()
viewDidLoad メソッドは、ビューが、アプリケーションに読み込まれた直後に、実行されるメソッドです。ビューが読み込まれた直後とは、アプリケーションを起動して、ウィンドウが表示される直前です。
プロジェクトを実行すると、アップルジャパンのサイトを表示した、ウィンドウが起動します。
ウィンドウの大きさを、変えることもできます。試してみてください。
App Transport Security
「http」で始まるサイトも、表示できるように、「App Transport Security」の設定を変更します。
ナビゲータエリアで「infor.plist」を選択してください。エディタエリアが「info.plist」に変わります。
「info.plist」で、一番下の行に、マウスポインターを移動すると、 「+」と「-」ボタンが表示されます。「+」ボタンをクリックし、表示されるプルダウンメニューで、「App Transport Security Settings」を選んでください。
「App Transport Security Settings」の左にある、三角ボタンをクリックして、下向き三角にします。
再び、「+」ボタンをクリックし、プルダウンメニューで「Allow Arbitrary Loads」を選びます。
そして、右側のプルダウンメニューで、「YES」を選んでください。
endEditing
endEditing メソッドは、Text Field に文字を入力して、リターンキーを押した時に、呼び出されます。
endEditing メソッドを、次のリストのように、実装してください。実装とは、メソッドの内容を定義することをいいます。stringValue は、Text Field に入力されている文字列を指しています。
@IBAction func endEditing(sender: NSTextField) {
url = sender.stringValue
loadWeb()
}
|
url = sender.stringValue
sender は、このメソッドの送り手である、Text Field を表しています。ここでは、url プロパティに、Text Field の stringValue プロパティの値を設定しています。
loadWeb()
そして、loadWeb メソッドを呼び出します。これによって、Text Field に入力されている URL のサイトが、WebView に表示されます。
ViewController.swift のコードは、次のリストのようになります。
import Cocoa
import WebKit
class ViewController: NSViewController {
var url = "https://www.apple.com/jp/"
@IBOutlet weak var web: WebView!
@IBAction func endEditing(sender: NSTextField) {
url = sender.stringValue
loadWeb()
}
func loadWeb() {
let url = NSURL(string: self.url)
let req = NSURLRequest(URL: url!)
web.mainFrame.loadRequest(req)
}
override func viewDidLoad() {
super.viewDidLoad()
loadWeb()
}
override var representedObject: AnyObject? {
didSet {
// Update the view, if already loaded.
}
}
}
|
コーディングが終わりましたら、アプリケーションを実行して、テストしてみてください。
Text Field に URL を入力し、リターンキーを押すと、WebView に、指定したサイトが、表示されます。Text Field に入力する URL は、必ず「http」もしくは「https」から始まっている、必要があります。
お疲れ様でした。
次章では、ドキュメント・ベースド・アプリケーション (Documet-Based Application) の、学習をする予定です。ドキュメント・ベースド・アプリケーションは、複数のドキュメントウィンドウを開くことのできる、アプリケーションです。