もとまか日記

■[iPhone][開発] iPhoneアプリを作ってみよう（Xcode4編）第２回：簡単ブラウザ

本ブログはコメント停止中です。

本内容へのコメントは以下にお願いします。

iPhoneアプリを作ってみよう（Xcode4編）第２回：簡単ブラウザ

iPhoneアプリを作ってみよう（Xcode4編）の第２回目です。

ちなみに第１回目は以下でした。

iPhoneアプリを作ってみよう（Xcode4編）第１回：じゃんけんゲーム

なお、iOSアプリ開発の基礎は以下でまとめたのでご覧ください。

今更ですがiOSアプリ開発の基礎について色々調べてみました

第２回の題材はこちらです。

元の題材は「自分専用ブラウザ」です。

といっても難しいものではなく、非常にシンプルなものです。

なので今回は「簡単ブラウザ」という題名にしてみました。

今回は以前の内容から更に絞って、必要最小限の内容にしてみました。

プロジェクト作成

まず、プロジェクトを作成します。

今回は以下の条件で作成してみます。

プロジェクト名：browser

テンプレート：View-Based Application

以下から、コーディングの説明です。

Webのレイアウト作成

まず「browserViewController.h」を以下のように編集して保存します。

次に「browserViewController.xib」を選択し、

以下のようにUIWebViewをViewに貼り付けます。

そして、以下のようにアウトレット接続します。

ここまでは前回と同じような内容なので、大丈夫だと思います。

「よくわからない・・・」という方は、前回の内容をご覧ください。

iPhoneアプリを作ってみよう（Xcode4編）第１回：じゃんけんゲーム

次に、コーディングを行います。

コーディング

「browserViewController.m」を以下のように編集します。

ここの内容は、少し細かく説明してみます。

「viewDidLoad」メソッドは、ViewがLoad完了した時点で呼び出されます。

つまりこの内容は、ViewがLoadされたらUIWebViewに

「http://d.hatena.ne.jp/moto_maka/」を表示しろ、という内容です。

この状態で実行してみると、以下のようになります。

超簡単ですね！

ステータスバーにActivityIndicatorを表示する

ネット系アプリには必ずといっていいほど、

ステータスバーにくるくる回るアイコンのようなものが表示されています。

何か処理をしていますよ、という表現なわけですが、ActivityIndicatorと言います。

あれを表示してみます。

「browserViewController.xib」を選択して、UIWebViewパーツを選択し、

以下のように「delegate」を「File's Owner」にアウトレット接続します。

これで準備完了です。あとはコーディングですが、

「browserViewController.m」を以下のように編集します。

「webViewDidStartLoad」は、UIWebViewの内容がロードされ始める時に呼び出され、

「webViewDidFinishLoad」は、UIWebViewの内容がロード完了した時に呼び出される

「delegateメソッド」と呼ばれるものです。

先ほど、UIWebViewのdelegateをFile's Ownerにアウトレット接続しましたが、

あの操作はこれらのdelegateメソッドを認識させるために必要な作業になります。

ちなみに、delegateをアウトレットしなくてもエラーにはなりませんが、

「webViewDidStartLoad」と「webViewDidFinishLoad」を認識できないので

ActivityIndicatorを適切なタイミングで使えない、ということになります。

また、「#pragma mark - UIWebView lifecycle」という記述部分ですが、

これは以下のように、メソッドを行き来する時に便利な目印みたいなものです。

表記内容は何でも大丈夫なので、自分の分かりやすい表記にしてください。

この状態で実行してみると以下のようになります。

たったこれだけのコーディングで、それっぽい感じになってきましたね。

URL入力バーの配置

次に、ブラウザなら必須とも言えるURL入力バーを追加してみます。

まず「browserViewController.h」を以下のように編集して保存します。

次に「browserViewController.xib」を選択し、

以下のようにUISearchBarをViewに貼り付けます。

UISearchBarパーツの高さ分、UIWebViewパーツの高さを低くします。

以下のように変更してください。

そして、以下のようにアウトレット接続します。

次に「browserViewController.m」を以下のように編集します。

「searchBarSearchButtonClicked」はUISearchBarで入力後、

実行された時に処理されるメソッドです。

以下はsearchBarの入力状態を解除し、キーボードが隠すための処理です。

    [searchBar resignFirstResponder];

そして、以下のコードで入力されたURLをUIWebViewで表示する、というわけです。

    [webv loadRequest:
     [NSURLRequest requestWithURL:
      [NSURL URLWithString:searchbar.text]]];

実行すると以下のように表示されます。

これで、UISearchBarにURLを入力して実行すると、そのURLのページが表示されます。

ブラウザ機能ボタンの配置

次に、ブラウザを操作するためのボタンを追加してみます。

「browserViewController.xib」を選択し、

以下のようにUIToolbarをViewに貼り付けます。

次に、以下のように各種ボタンのBar Button Itemを配置します。

次に、以下のようにFlexble Space Bar Button Itemを

Bar Button Itemの間に配置します。

ボタンの間を自動的に等間隔で調整してくれます。

次に、Bar Button Itemのタイトルを変更します。

画像を指定してもいいです。というか、普通は画像を使いますね(^^;;

今回は適当な文字で表現してみました。

次に、UIWebViewを選択し、UIWebViewの各種メソッドと

Bar Button Itemを以下のように紐付けます。

「goBack」は戻るボタン、「goForward」は進むボタン、

「reload」は再読み込みボタン、「stopLoading」は停止ボタンとして使用します。

最後に、UIWebViewの高さを調整しておきましょう。

初期表示の変更

ここまでの状態でもブラウザ的に使うことは可能ですが、

PCモードで表示すると、以下のように拡大した状態になります。

これを修正するには、以下の設定をチェックします。

これで画面サイズにフィットした状態で使用できるようになります。

UIWebViewはなかなか奥も深いパーツです。

その他の設定についても、色々試してみると面白いと思います。

最後に

「簡単ブラウザ」のチュートリアルは以上で終了です。

今回はよりiPhoneアプリっぽい？と言えるかもしれない

ブラウザを取り上げてみましたが、いかがでしたでしょうか？

今や、UIWebViewを使ったアプリ内ブラウザ機能は必須とも言えるでしょう。

このチュートリアルでもお分かり頂けると思いますが、

UIWebViewの実装はとても簡単だし、とても使いやすいです。

iPhoneの特性を生かしたアプリを作りたい、けど何を作ろうか迷ってる。

という方にも、まず手始めに作ってみるのに最適なテーマなのではないでしょうか。

アイコンや起動画面等の設定については以下をご覧ください。

iPhoneアプリを作ってみよう（Xcode4編）第１回：じゃんけんゲーム

なお、本記事の内容は以下を元にXcode4向けに書き直したものです。

第２回　自分専用ブラウザ

タイトル	内容	はてブ
#1．プロローグ	自分専用ブラウザの紹介と今後の進め方
#2．ブラウザ作成編	超簡単なブラウザの作り方
#3．ブラッシュアップ編	使い勝手を考慮して見た目の変更等

　

ツイートする

Permalink | コメント(4) | トラックバック(13) | 04:18