LoginSignup
109

More than 5 years have passed since last update.

【詳説】初めてのiPhoneアプリ開発「簡単webViewアプリ」その①

Last updated at Posted at 2015-05-12

対象者

初めてiPhoneアプリをつくる人

ゴール

iPhoneアプリの作り方をざっくりと理解する。

※各機能の細かい説明は含んでいません。
今回はアプリを一から作り上げることが目的です。

今回つくるアプリの概要

・webViewでgoogleのページを表示(その①)
・ページの戻る/進む機能の実装(その②)
・Facebook/Twitterでの投稿機能の実装(その③)
(表示中ページのURL/タイトルをデフォルトでセット)

プロジェクトをつくる

Xcodeを開く。

スクリーンショット_2015-04-27_午前2_32_17.png

「Create a new Xcode project」を選択

スクリーンショット_2015-04-26_午後11_26_17.png

「Single View Application」を選択して、「Next」へ

スクリーンショット_2015-04-26_午後11_27_09.png

今回はPriductNameを「simpleWebView」にします。

Languageは「Swift」、Deviceは「iPhone」を選択します。

これでプロジェクトができました。

スクリーンショット 2015-04-26 午後11.28.14.png

最初に上記の画面の
[simpleWebView]->[General]->[Deployment Info]から
DeploymentTargetをアプリの最低サポートバージョンに指定しておくと後々楽です。
※今回はswiftなのでiOS7.0を選択。

WebViewの配置

  • まずは画面左のナビゲーションから「Main.storyboard」を選択します。

  • 右下のエリアから「View Controller」を探し、中央のエリアにドラッグ&ドロップします。

スクリーンショット_2015-05-10_午後3_53_26.png

  • 今度は追加したView Controllerに、ウェブページを表示するためのwebViewを設置します。
  • View Controllerをダブルタップして拡大、右下のエリアからWeb Viewを見つけ出し、View Controllerへドラッグ&ドロップ。

スクリーンショット_2015-05-10_午後3_59_43.png

WebViewのレイアウト設定

次に、追加したWebViewのレイアウトを設定していきます。
今回はAutoLayoutという機能を使います。

  • WebViewを選択した状態で、下記の図①〜③の手順で設定してください。

何しているかというと、
「親のViewのそれぞれ上部、下部、右部、左部から⚪︎ptずらした位置に配置する」ということを「制約(Constraint)」として定めています。

今回の場合は、画面いっぱいに表示したいので、上部から0pt、下部から0pt、右部から-16pt、左部から-16ptとしています。
※0ptではなく、-16ptとしているのは理由があるのですが今回は触れません。

設定できたら「Add 4 Constraints」を押して保存します。

スクリーンショット_2015-05-10_午後4_04_46.png

その後、WebViewを選択した状態で、下記のようにUpdate Framesを押します。
これでさきほど設定した制約が反映されます。

これでwebViewの配置ができました。

スクリーンショット_2015-05-10_午後4_31_15.png

WebViewに任意のwebページを表示する。

今度は、配置したwebViewに好きなwebページを表示させてみます。

実際に処理を書くファイルを追加

  • まずは、storyBoardに追加したViewControllerの処理を書くswiftファイルを追加します。(下記画像の手順)

スクリーンショット_2015-05-10_午後4_42_48.png

スクリーンショット_2015-05-10_午後4_43_09.png

スクリーンショット_2015-05-10_午後4_43_27.png

これで「WebViewController.swift」というファイルが追加されます。

swiftファイルとstoryBoardの紐付け

次に、最初にStoryBoardに追加したViewControllerと
今追加した「WebViewController.swift」ファイルの紐付けをします。

画面左のナビゲーションから「Main.storyboard」を選択、
webViewを追加したViewControllerを選択し、画面右の[Custom Class]->[Class]から先ほど追加したWebViewControllerを選択します。

これでStoryBoard上のViewControllerと「WebViewController.swift」が紐づけることができました。

スクリーンショット_2015-05-10_午後4_53_28.png

WebViewにWebページを表示

次にwebViewにWebページを表示していきます!
ここからコードを書いていきます。

まずはStoryBoardで追加したwebViewを「WebViewController.swift」で扱うために、「WebViewController.swift」ファイルに紐付けて定義します。

下記画像の手順で行ってください。

スクリーンショット_2015-05-10_午後5_03_57.png

「Name」の部分に「webView」と入れてConnectを選択します。
これで「WebViewController.swift」ファイル上でwebViewとして扱うことができます。

スクリーンショット_2015-05-10_午後5_13_54.png

これで準備ができたので、実際にコードを書いていきます。
「WebViewController.swift」を開きます。

WebViewにページを表示するのに必要なコードは下記になります。

スクリーンショット_2015-05-10_午後5_18_40.png

Delegateの設定

Delegateとは、一言で言うと「委譲」と呼ばれるものです。

今回のwebViewのケースで説明します。

webView関連のメッセージ(例えば、「web読み込み完了しました!」など)は
本来はUIWebViewControllerで受け取り、その場合の処理を行います。

ただ、そのためにUIWebViewControllerのオブジェクトを作り、処理を書くのは面倒なので、
メッセージを受け取り、処理をする役割を他のクラスに任せる。(=委譲)
(今回の例で言えば、WebViewControllerに委譲して、このクラス内でメッセージの受け取り、処理を行えるようにしています。)

※詳しくは下記の記事を参考に。
http://konton.ninpou.jp/program/cocoa/delegate.html
http://dev.classmethod.jp/smartphone/iphone/ios-delegate/

Delegateは下記のように書くと設定できます。

まずは「UIWebviewDelegate」を追加。

class WebViewController: UIViewController, UIWebViewDelegate {

viewDidLoad()のメソッドに下記を追加。

self.webViewdelete = self

これで、webViewのDelegateをself(=WebViewController)に設定できました。

URLを指定してwebページを表示

表示したいURLを下記のようにNSURLとして宣言する。

let initialUrl = NSURL(string: "https://www.google.co.jp")

下記のコードで上で設定したURLリクエストを飛ばします。

let request = NSURLRequest(URL: initialUrl!)
self.webView.loadRequest(request)

これで、指定したURLのページが表示されるはずです。

最後に起動時に呼ばれるViewControllerを「WebViewController」に指定します。

「main.storyboard」を開き、
「ViewController」についている矢印を「WebViewController」にドラッグ&ドロップします。

スクリーンショット_2015-05-10_午後6_21_23.png

では実際にSimulatorで動かしてみましょう。

Command+Rで「Run」します。

iOS Simulatorが立ち上がり、下記のようにページが表示されれば成功です。

スクリーンショット 2015-05-10 午後6.11.15.png

ここまでのアプリでは、
Safariなどのブラウザアプリのように「前のページへ戻る」「次のページへ進む」などの動きができないので、次回はその方法を書いていきます。

【詳説】初めてのiPhoneアプリ開発「簡単webViewアプリ」その②

一言

デフォルトでViewController.swiftファイルとStoryBoard上にViewControllerが用意されていますが、
Viewの追加などのStoryBoardの使い方を学ぶために自分でファイルを追加して実装しいく方法をご紹介しました。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
109