Swift Playgroundsで学ぶiOSプログラミング

ウェブブラウザーを10行未満のコードで開発する方法

文●柴田文彦 編集●吉田ヒロ

2017年02月20日 17時00分

ビューの代わりにウェブビューを配置する

 ウェブビューを利用するには、そのためのフレームワークであるWebKitを1つだけインポートする必要があります。もちろん、これまで使っていたUIKitやPlaygroundSupportも必要になります。それでも3つのフレームワークをインポートするだけで、かなり簡単にウェブブラウザーを実現できるのですから便利です。

 最も簡単にウェブビューを使うには、これまで、素(す)のビュー(UIView)を使っていた部分を、WKWebViewクラスのオブジェクトに置き換えるだけです。もちろん、それだけでは何も表示されませんが、それでウェブコンテンツを表示する準備は整います。iOSでは、以前はUIWebViewというクラスのウェブビューを使っていた時期もありましたが、iOS 8.0以降ではWKWebViewを使うことになっています。むかしに書かれたチュートリアルなどを参照する際には間違えないようにしましょう。ちなみに先頭のWKはWebKitを表すので、「Web」という語がダブりますが、気にしないことにしましょう。

 配置したウェブビューに何かを表示するための、最も簡単な方法は、HTMLを表す文字列を読み込ませることです。文字列を用意して、ウェブビューのloadHTMLStringメソッドを使うだけでよいのです。「Hello, WKWebView!」という文字列をウェブページとして表示するプログラム全体を示します。たったこれだけです。

これまで使っていたUIViewをWKWebViewに置き換え、そのビューにHTMLを表す文字列を読み込ませればHTMLの内容を表示できます

 この表示は、パソコン画面上のブラウザーなどに比べると、かなり縮小された表示になっていて、文字が小さくなっています。しかし、このウェブビューは、ウェブページとしての基本的なUIも備えているので、iOSの流儀でピンチアウトするなどして表示を拡大することもできます。

HTMLを表示したウェブビューは、ピンチアウトなどのiOSの一般的なジェスチャーを受け付けます。何もプログラムを書かなくても拡大表示が可能です

 その場合、ページが画面からはみ出すことになるので、ページの右辺と下辺にはスクロールバーが表示されていることも確認できます。

インターネット上のウェブページを表示する

 HTMLを表す文字列は、メソッド1つで非常に簡単に表示できました。それでは、ウェブブラウザー本来の機能である、インターネット上のウェブサイトを表示するのはどうでしょうか。インターネット上にあるリモートのサーバーにアクセスするのだから、それなりの面倒な処理が必要になると思われるかもしれません。

 実はそんなことはありません。HTMLの文字列をURLに置き換えるだけです。とはいえウェブビューには、URLの文字列を直接ではなく、URLクラスのオブジェクトとして与える必要があります。といっても、URLクラスのオブジェクトを作成する際にURLを文字列として与えればいいのです。

 また、そのURLをロードするという操作も必要になります。それには、URLRequestクラスのオブジェクトを指定する必要がありますが、それも、上で作成したURLオブジェクトを指定するだけです。それができたら、ウェブビューのloadメソッドに、URLRequestオブジェクトを指定して実行します。

 言葉で説明すると面倒に感じられるかもしれませんが、上のHTMLの例に比べて実質的には1、2行増えるだけです。URLとしてアップルのサイトを開く例を示します。

HTML文字列の代わりに、URLを表す文字列を用意し、それをURLオブジェクトにしてURLRequestオブジェクトを作成し、そのリクエストをロードするだけで、インターネット上のウェブサイトが表示できます

 これだけで、表示に関しては、ほとんど完璧なウェブブラウザーになります。放っておいてもアニメーションは動くし、ページ上のリンクやメニューなどの操作も可能です。

ウェブページ上にあるUIは、ウェブビュー上をタップすることで、iOS上のウェブブラウザーアプリとまったく同様に操作できます

 このプログラムだけでここまでの機能が実現できるのは、かなりの驚き、ショッキングですらあるでしょう。

UIの欠如を補う工夫

 ところで、このプログラムをウェブブラウザーと呼ぶには、重大な欠陥を補う必要があります。そう、これはブラウザーとしての基本的なUIを備えていません。開きたいページのURLを入力することもできないので、あらかじめプログラムに書いておく必要があります。これでは、一般のユーザーが使えるアプリにはなりません。

 しかし、URLを入力するようなUIを実現するのは、実はなかなか面倒です。何かと不自由なSwift Playgroundsの開発環境では特にそうでしょう。そこで今回は、とりあえず開きたいページにたどり着けるようにする簡単な方法を示します。それは最初に開くページをGoogleの検索ページにするだけです。

最初に表示するページをGoogleの検索ページにしてみました。それによって、ブラウザーとしてのUIを特に用意せずに、任意のページを開けるようになります

 ここで、検索する語を入力する部分をタップすると、なんとiOSのキーボードが表示されます。このプレイグラウンド上のウェブビューは、iOSから見れば1つのアプリ(Swift Playgrounds)の中で動いているビューなので、当然と言えば当然の動作です。

検索語を入力する部分をタップすると、iOSのキーボードが表示されるので、通常のiOSアプリと同様の操作でキーワードを入力して検索できます

 そこに検索したいサイトを表すキーワードを入力すれば、あとは一般的なGoogle検索と同じです。検索結果の候補が表示されるので、開きたいサイトを選んでタップすれば目的のページが開きます。

通常のiOS上のブラウザーと同様の表示で検索結果が表示されます。∨や∧をタップして、階層を開いたり閉じたりもできます

URLを直接入力しなくても、2、3ステップの操作で目的のウェブサイトが表示できるようになりました

 画面サイズからして、ほとんどiPhoneを使っている感覚でウェブページを操作できるでしょう。

次回の予定

 今回は、まがりなりにも開きたいウェブサイトを読み込んで表示できるウェブブラウザーもどきのプログラムができました。これを実用的なウェブブラウザーに仕上げるのは大変な作業になります。ただし、もう少し機能を追加すればある程度実用的に使えるのも事実です。ブックマーク機能などは、とりあえず我慢するとしても、最低でも「戻る」ボタンは欲しいところです。次回は、特にボタンは追加せずにiOSらしい方法で戻る機能を実現することにしましょう。

mobileASCII.jp TOPページへ