WebViewでWebページを表示する

WebView

Webページを表示するアプリを作るのは、実は超かんたんです。手順を覚えてしまえば10分掛かりません。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行だけでした。

次はもうちょっと複雑なことをしてみましょう!


戻る