ローディング中

【Swift】webviewを使ってサイトを表示するだけのアプリを作る

今までWordpressやhtml/css/javascriptといった、The フロントエンドエンジニアだった私ですが。
この技術を使って、アプリからwebviewで表示しちゃえば、アプリっぽく見えるんじゃないかって発想です。
そんな安易な考えからとりあえず導入してみました。

目次

webview使えばアプリっぽく見えんじゃない?

webkitはとりあえず置いておいてUIWebViewで

初心者はやっぱりフレームワークとか使わずにというか使い方わからないので、
まずは簡単そうなUIWebViewで実装です。
まずはストーリーボードにwebviewを追加します。

スクリーンショット 2016-09-06 午後8.12.28

で、あれやこれやしてアウトレットを作成してください。
その後、レスポンシブというかフルスクリーンでどの機種でも表示されるようにしたいので、
サイズの設定を行います。

Constraintsの設定

スクリーンショット 2016-09-06 午後8.13.15

親要素のViewと子要素のWebviewをどちらも選択しながらConstraintsをクリックすると

スクリーンショット 2016-09-06 午後8.13.35

こういうのがパーンとでますので、ここのところの

Equal WidthsEqual Heghtsにチェックを入れることで、

機種がどれであってもフルスクリーンになります。
詳しいことは僕もわかりませんのでググってください。

コーディング

import UIKit

class ViewController: UIViewController {
@IBOutlet weak var webview: UIWebView!

var targetURL = "https://awe-some.net"

override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view, typically from a nib.
loadAddressURL()
}

override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
// Dispose of any resources that can be recreated.
}

func loadAddressURL() {
let requestURL = NSURL(string: targetURL)
let req = NSURLRequest(URL: requestURL!)
webview.loadRequest(req)
}

}

こんな感じでコーディンしたところ
↓のような結果に

スクリーンショット 2016-09-06 午後8.07.49

 

→の通り、AWESOMEのホームページが表示されるアプリの完成です。
まだフリックで戻ったり進んだりとかの機能は何もつけてないんですが

これだけでも十分ハッタリかませそう

アイディア次第で色々できそうですね。
新しい技術を導入していくのも大切ですが、
今ある技術を寄せ集めて掛け算していくというのもとても大切だと私は思います。
swiftももっともっと勉強して、

ハッタリを極めていきたいと思います。

▶第3回 アイコン設定

ホームページ・デザイン制作のご相談・ご依頼は

079-451-5881

68ED4C65-BA1E-46D0-A7AC-B9869923C696 Created with sketchtool. A07C553F-CF16-4B7D-94FE-D36AE0A6297D Created with sketchtool. 37B7D8F4-7A18-4725-9EC6-595ABDF69D64 Created with sketchtool. 95DFB680-1EDF-4199-BC4A-BB6752EBA23C Created with sketchtool. 02DDF754-E1DB-4EF2-B6BB-C884722938C4 Created with sketchtool. NEW! 1A95E369-6469-4C46-B38F-F83410B928B0 Created with sketchtool. Group 5Group 2Group 4Group 3E4FC8CF2-721D-4699-8162-18E886C432C1 Created with sketchtool.