whitebook.log

Photo & Programming

Author : laqu [FrontendEngineer]

Program : Javascript,Swift,ActionScript

Camera : Canon EOS6D, Olympus E-P5, Ricoh GR

[Swift] WKWebViewを使ってみる(2) - URLバーを設置する

引き続きiOS8から追加されたWebKitを使ってみます。
前回はただ単にWKWebViewを表示しただけだったのでブラウザのようなGUIを追加していきます。

URLバーの設置でやることは以下です。

  1. URLバーを設置し現在表示されているページのURLをテキストで表示する
  2. URLバーの右端に更新ボタンを設置する
  3. テキスト入力エリア編集中は更新ボタンは非表示にし、同じ場所にテキスト削除ボタンを表示する(iOSのSafariのような振る舞い)
  4. URLバーのテキスト入力エリアを編集できるようにし、キーボードのreturnがタッチされたら編集されたURLをリクエストする


今回は「1. URLバーを設置し現在表示されているページのURLをテキストで表示する」についてです。

1. URLバーを設置し現在表示されているページのURLをテキストで表示する

まず、実際にURLバーを設置する前に、表示されているURLの取得方法についてです。
UIWebViewではstringByEvaluatingJavaScriptFromStringメソッドでjavascriptを実行し、サイトタイトルやURLを取得していました。
WKWebViewではそれらをプロパティとして取得することができます。

では、どのタイミングでタイトルやURLを取得できるようになるのでしょうか?
WKWebViewにはいくつかのデリゲートが用意されています。
WKWebViewでウェブページを表示する際、以下のデリゲートが順番に呼ばれます。

1)

ページの読み込みが開始した時に呼ばれます。

2)

Appleのドキュメントを見て翻訳かけてもいまいちよく分からなかったのですが以下のページが参考になりました。
「iOS 8から追加されたWebKit Frameworkを使ってみる」によると

“ページが見つかり、読み込み開始。”

とのことです。

3)

ページの読み込みが完了した時に呼ばれます。

以上の3つです。他にもページの読み込みに失敗した場合に呼ばれるデリゲート等もありますが今回は触れません。
確認してみた結果、URLはdidCommitNavigationで、タイトルはdidFinishNavigationで取得できているのが確認できていましたが今回のURLバーのテキストの更新はdidFinishNavigationで行います。

では、URLの取得方法、取得できるタイミングが分かったので実装していきましょう。
前回のコードに追記していく形で進めます。

先ほどのデリゲートを受け取る場合はWKNavigationDelegateをクラス宣言の後に記述(1行目)し、WKWebViewのnavigationDelegateプロパティにデリゲート先を指定する必要があります(17行目)。

また、URLバーに使うUIVeiwやUITextFieldをインスタンス変数として宣言しておきます。(5〜7行目)
テキストエリアは編集できるようにUILabelではなくUITextFieldを使用します。

URLバーを表示されるため、WKWebViewのy座標と高さも前回から変更しています。(16行目)
※URLバーの高さを40pxにするため、WKWebViewのy座標を[ステータスバーの高さ(20px) + URLバーの高さ(40px)] = 60px としています。高さもデバイスの高さから60px分引いています。

次にURLバー部分のコードを記述します。viewDidLoad内に追記します。

urlBarが薄いグレーのバー部分、urlBarFormがurlTextFieldの下に表示される角丸の濃いグレー部分、urlTextFieldはURLの文字列が表示される部分です。

最後にdidFinishNavigationが呼ばれた時にurlTextFieldにページのURLが表示されるようにします。

WKWebViewで取得できるURLプロパティは型がNSURLなのでabsoluteStringメソッドで文字列で取得します。
これで下記のようなURLバーが表示されました。
少しはブラウザっぽい見た目になりましたが機能的にはまだまだです。

次回は「2. URLバーの右端に更新ボタンを設置する」の実装を行います。

コメントを残す

メールアドレスが公開されることはありません。

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

*