イメージ図
1.ツールバー
2.ナビゲーションエリア
3.ジャンプバー
4.インスペクタセレクトバー
5.ナビゲーションエリア
6.エディタエリア
7.インスペクタペイン
8.フィルターバー
9.デバッグバー
10.ライブラリセレクトバー
11.デバッグエリア
12.ライブラリペイン
イメージ図
この中でも主にFileタブ、Productタブを今回利用します。
(commandキーを押しながらクリックすると別タブで起動することが出来ます。)
ここではwebViewSampleというプロジェクト名で作成しています。
２・Main.storyboardを選択します。そしてユーティリティエリアからwebviewを選び、viewControllerへwebviewを貼付けます。最後にauto layautoを設定します。
次に画面表示の最適化を行うためにauto layautoを設定していきます。 画面にぴったり合わせます。 そしてMain.storyboardの右下の「△」を押し、「Add Missing Constraints」を押して、 設定していきます。
ここではwebViewという名前で設定しています。
//
// ViewController.swift
// webViewSample
//
// Created by g08m11 on 2014/08/19.
// Copyright (c) 2014年 Bloc. All rights reserved.
//
import UIKit
class ViewController: UIViewController {
@IBOutlet var webView: UIWebView!
// ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ この部分を写経
//表示したいURLを設定(初期化)
var targetURL = "http://rakutenqute.herokuapp.com/"
// ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑ この部分を写経
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view, typically from a nib.
// ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ この部分を写経
// webViewを表示するためのメソッド呼び出し
loadAddressURL()
// ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑ この部分を写経
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
// Dispose of any resources that can be recreated.
}
// ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ この部分を写経
func loadAddressURL(){
// 初期化済みのURLを読み込む
let requestURL = NSURL(string: targetURL)
// 読み込んだURLの実行結果を取得する
let req = NSURLRequest(URL:requestURL!)
// webvieにデータをロードする
webView.loadRequest(req)
webView.scalesPageToFit = true
}
// ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑ この部分を写経
}「Product」タブを選択して、「Build」を押してみましょう。 バグが無ければ以下の画像が表示されます。
ただ、エラーがあった場合は以下の画像が表示されます。
バグが無い状態を確認した後、 「Product」タブを選択して、「Run」を押してみましょう。 自動的にiPhoneシュミレーターが起動されます。
白い画面が数秒表示されますが、慌てずに待ちましょう。
### 備考 表示しているURLは[Rakuten Qute!](http://rakutenqute.herokuapp.com/)というwebアプリです。
(こちらはステップ１が前提となっています。)
//
// ViewController.swift
// webViewSample
//
// Created by g08m11 on 2014/08/19.
// Copyright (c) 2014年 Bloc. All rights reserved.
//
import UIKit
// ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ この部分を写経
// twitterなどのSocialへ投稿する際に必要な機能を外部から読み込むための初期化
import Social
// ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑ この部分を写経
class ViewController: UIViewController {
@IBOutlet var webView: UIWebView!
//表示したいURLを設定(初期化)
var targetURL = "http://rakutenqute.herokuapp.com/"
// ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ この部分を写経
// twitter投稿画面を生成するための初期化
var myComposeView : SLComposeViewController!
// twitter用のボタンを生成するための初期化
var myTwitterButton: UIButton!
// ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑ この部分を写経
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view, typically from a nib.
// webViewを表示するためのメソッド呼び出し
loadAddressURL()
// ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ この部分を写経
// twitterに似た色合いをコードで生成するための設定。色味のみの設定
let hex: Int = 0x55ACEE
let red = Double((hex & 0xFF0000) >> 16) / 255.0
let green = Double((hex & 0xFF00) >> 8) / 255.0
let blue = Double((hex & 0xFF)) / 255.0
var myColor: UIColor = UIColor( red: CGFloat(red), green: CGFloat(green), blue: CGFloat(blue), alpha: CGFloat(1.0))
// ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑ この部分を写経
// ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ この部分を写経
// twitter用のボタンを設定。ボタンを押された後にtwitter投稿用のメソッド呼び出しまで設定
myTwitterButton = UIButton()
myTwitterButton.frame = CGRectMake(0,0,100,100)
myTwitterButton.backgroundColor = myColor
myTwitterButton.layer.masksToBounds = true
myTwitterButton.setTitle("Twitter", forState: UIControlState.Normal)
myTwitterButton.titleLabel?.font = UIFont.systemFontOfSize(CGFloat(30))
myTwitterButton.setTitleColor(UIColor.whiteColor(), forState: UIControlState.Normal)
myTwitterButton.layer.cornerRadius = 50.0
myTwitterButton.layer.position = CGPoint(x: self.view.frame.width - 55, y:self.view.frame.height - 115)
myTwitterButton.tag = 1
myTwitterButton.addTarget(self, action: "onPostToTwitter:", forControlEvents: .TouchUpInside)
// ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑ この部分を写経
// ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ この部分を写経
// twitter用のボタンを画面に表示させるための設定
self.view.addSubview(myTwitterButton)
// ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑ この部分を写経
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
// Dispose of any resources that can be recreated.
}
func loadAddressURL(){
// 初期化済みのURLを読み込む
let requestURL = NSURL(string: targetURL)
// 読み込んだURLの実行結果を取得する
let req = NSURLRequest(URL:requestURL!)
// webvieにデータをロードする
webView.loadRequest(req)
webView.scalesPageToFit = true
}
// ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ この部分を写経
func onPostToTwitter(sender : AnyObject) {
myComposeView = SLComposeViewController(forServiceType: SLServiceTypeTwitter)
myComposeView.setInitialText("Swift講座でアプリ作ったよ！ ")
self.presentViewController(myComposeView, animated: true, completion: nil)
}
// ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑ この部分を写経
}動作にも問題が無いかtwitterボタンを押してみましょう。
