WebViewでWebページを表示する

WebView

Webページを表示するアプリを作るのは、実は超かんたんです。手順を覚えてしまえば5分でできてしまいます。
今回は、Googleを表示するアプリを作ってみましょう。

学習内容
・WebView(ウェブビュー)を使ってみる。
・外部のサポートファイルを使ってみる。

1.新しいプロジェクトを作る

いつものようにSingle View Applicationでプロジェクトを作ってください。

名前は『webView』としておきましょう。ViewのVは大文字にしてください。
単語の間にスペースを入れられない時は、単語の頭文字を大文字にします。全部小文字だと読みにくいためです。

2.画面デザイン

『Main.storyboard』をクリックすると、インターフェイスビルダーが表示されます。

部品一覧にある『Web View』をドラッグ&ドロップしてください。

WebViewを画面いっぱいに広げてください。
Autoresizingも全方向のマージンを固定、伸縮も縦横有効にしてください。

3.アウトレットを接続する

プログラムの中からWebViewを使えるようにするためにアウトレットを接続してください。

もう慣れたもんでしょう?

↓こんな感じでWebViewのアウトレットができればOKです。

4.外部プログラムを利用する

今回、簡単にwebViewを使うためのサポートファイルを用意しました。
↓コチラからダウンロードしてください。
サポートファイルをダウンロード

Google choromeでダウンロードすると、画面の下にファイル名が出てきます。ファイル名の右の▼ボタンを押すとメニューが出るので、『Finderで表示』をクリックしてください。

Finderで表示されたら、『support_files_web.zip』をダブルクリックしてください。

すると『General.swift』というファイルが作られます。
『.zip』が後ろに付いているファイルは『圧縮ファイル』といい、中にファイル(複数ならフォルダができます)が入っています。
ダブルクリックすると『展開(あるいは解凍)』されて中身を使えるようになります。

General.swiftをXcodeのファイル一覧にドラッグ&ドロップしてください。

ファイルの追加画面が↓のように出てきます。『Copy items if needed』にチェックを入れて、右下のFinishをクリックしてください。

これで今回用意したサポートファイルのプログラムがアプリに組み込まれました。

5.アプリ起動時にGoogleを表示するようにする

アプリが起動すると『viewDidLoad』が実行されます。

その中に『https://www.google.co.jp』を表示するプログラムを書けばいいわけです。
下の赤枠の中身をviewDidLoadに入力してください。

『General』とは、サポートファイルに含まれていたプログラムです。
Generalの『urlToRequest』というファンクションで、文字列のURL(Webページのアドレス)を『リクエスト』というものに変えます。
リクエストが正しく作られたら、webViewの『loadRequest』というファンクションに渡して表示してもらいます。
こういう『定形』なので、そういうもんだと思って入力してください。

6.実行する

入力できたら実行してみてください。
下のようにGoogleが表示されれば成功です。
もちろん普通に検索できます。

今回のプログラム全体はこうなっています。

入力したのはURLをwebViewに渡して表示してもらう部分の4行だけでした。
次はもうちょっと複雑なことをしてみましょう!


戻る

Begin typing your search above and press enter to search. Press ESC to cancel.

Back To Top