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

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

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

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

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

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

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

Constraintsの設定

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

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

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

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

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)
}

}

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

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

 

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

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

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

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

▶第3回 アイコン設定

Instagram Feed

Load More

Instagram

WEB DIRECTOR

マンノカズミチ

バンドマンを経て、台湾で日本語教師をしてましたが、2016年より株式会社AWESOMEにてWEB開発とコンテンツ制作を担当しております。SEO対策と記事執筆が得意分野です。こっそり台湾と日本のハーフです。

他の投稿を見る →