back
Webアプリをネイティブアプリ化する (4/6)
■XcodeプロジェクトにWebViewを組み込む
では、プロジェクトを修正していきましょう。ここでは、プロジェクトに用意されているファイルの中から３つのファイルを修正します。
ヘッダーファイルの修正
まずは「FirstNativeAppViewController.h」というファイルを選択してください。Objective-C言語を編集するためのエディタが現れます。この「.h」という拡張子のファイルは「ヘッダーファイル」と呼ばれるもので、プログラムで使うさまざまなものを宣言し用意しておくためのものです。
ソースコードの中で必要となるのは「#import 〜」という文以降です。Objective-Cでも、// ではじまる文はコメントです（緑色で表示されている文です）ので、これらは無視してかまいません。もちろん、削除してしまってもOKです。#import以降の文を、下のリスト欄に掲載したように修正しましょう。デフォルトで生成されているコードに、★マークの２文を追記するだけです。
nibファイルの修正
続いて、「nibファイル」と呼ばれるファイルの修正です。「FirstNativeAppViewController.xib」というファイルのことです（これは、もともとは.nibという拡張子だったため、今でも「nibファイル」と呼ばれるのが一般的です）。これを選択すると、Xcode 4ではGUIのデザイン画面が現れます。Xcode 3.2の場合は、このファイルをダブルクリックすると、Interface Builderというアプリケーションが起動し、同様にGUIのデザインが行えるようになります。
・WebViewの配置――デザイン画面には、何もない状態のウインドウが表示されます。ここに、「WebView」という部品を配置します。ウインドウの右上にある「View」という表示のアイコンから、一番右端のものをクリックしてください。ウインドウの右側に、パレットが現れます（Xcode 4。Xcode 3.2ではパレットとして表示されます）。
この下の方に、ずらっとGUIの部品が一覧リストで表示されるので、その中から「WebView」というものを探し、ドラッグしてデザイン画面の何もないウインドウの上にドロップしてください。そして、ウインドウ全体を覆うように配置を整えます。
・プロパティの接続――続いて、先ほどヘッダーファイルに用意した「webview1」という変数（プロパティというものです）と、配置したWebViewを接続します。接続の作業そのものは、Dashcodeでもやりましたね。やり方は同じです。
Xcode 4では、デザイン表示部分の左側にある立方体のアイコン（２つありますが、上のやつです）を右ボタンでプレスし、びよ〜んと線が伸びるのでそのままドラッグしていって、ウインドウに配置したWebViewの上でドロップします。Xcode 3.2の場合は、nibファイルウインドウ（アイコンがいくつか並んでいるやつ）にある「File's Owner」のアイコンからWebViewまで右ボタンドラッグしてください。
WebViewにドロップすると、画面に黒いリストがポップアップするので、ここから「webview1」を選びます。これで、ヘッダーファイルに用意したwebview1というプロパティと、画面に配置したWebViewが接続されました。プログラムの中からwebview1プロパティを操作すると、そのまま配置したWebViewを操作できるようになります。
FirstNativeAppViewController.h見ればわかるように、ここで修正するのは「(アプリ名)ViewController.(拡張子)」といった名前のファイルです。これは、アプリに実際に表示される画面のデザインと動作を記述するものです。ここだけ修正すれば、独自の表示をアプリに組み込むことができます。では、順に作業しましょう。
FirstNativeAppViewController.m
FirstNativeAppViewController.xib
ヘッダーファイルの修正
まずは「FirstNativeAppViewController.h」というファイルを選択してください。Objective-C言語を編集するためのエディタが現れます。この「.h」という拡張子のファイルは「ヘッダーファイル」と呼ばれるもので、プログラムで使うさまざまなものを宣言し用意しておくためのものです。
ソースコードの中で必要となるのは「#import 〜」という文以降です。Objective-Cでも、// ではじまる文はコメントです（緑色で表示されている文です）ので、これらは無視してかまいません。もちろん、削除してしまってもOKです。#import以降の文を、下のリスト欄に掲載したように修正しましょう。デフォルトで生成されているコードに、★マークの２文を追記するだけです。
nibファイルの修正
続いて、「nibファイル」と呼ばれるファイルの修正です。「FirstNativeAppViewController.xib」というファイルのことです（これは、もともとは.nibという拡張子だったため、今でも「nibファイル」と呼ばれるのが一般的です）。これを選択すると、Xcode 4ではGUIのデザイン画面が現れます。Xcode 3.2の場合は、このファイルをダブルクリックすると、Interface Builderというアプリケーションが起動し、同様にGUIのデザインが行えるようになります。
・WebViewの配置――デザイン画面には、何もない状態のウインドウが表示されます。ここに、「WebView」という部品を配置します。ウインドウの右上にある「View」という表示のアイコンから、一番右端のものをクリックしてください。ウインドウの右側に、パレットが現れます（Xcode 4。Xcode 3.2ではパレットとして表示されます）。
この下の方に、ずらっとGUIの部品が一覧リストで表示されるので、その中から「WebView」というものを探し、ドラッグしてデザイン画面の何もないウインドウの上にドロップしてください。そして、ウインドウ全体を覆うように配置を整えます。
・プロパティの接続――続いて、先ほどヘッダーファイルに用意した「webview1」という変数（プロパティというものです）と、配置したWebViewを接続します。接続の作業そのものは、Dashcodeでもやりましたね。やり方は同じです。
Xcode 4では、デザイン表示部分の左側にある立方体のアイコン（２つありますが、上のやつです）を右ボタンでプレスし、びよ〜んと線が伸びるのでそのままドラッグしていって、ウインドウに配置したWebViewの上でドロップします。Xcode 3.2の場合は、nibファイルウインドウ（アイコンがいくつか並んでいるやつ）にある「File's Owner」のアイコンからWebViewまで右ボタンドラッグしてください。
WebViewにドロップすると、画面に黒いリストがポップアップするので、ここから「webview1」を選びます。これで、ヘッダーファイルに用意したwebview1というプロパティと、画面に配置したWebViewが接続されました。プログラムの中からwebview1プロパティを操作すると、そのまま配置したWebViewを操作できるようになります。
(by. SYODA-Tuyano.)
※リストが表示されない場合
AddBlockなどの広告ブロックツールがONになっているとリストなどが表示されない場合があります。これらのツールをOFFにしてみてください。
※.hファイルの内容
#import <UIKit/UIKit.h>
@interface FirstNativeAppViewController : UIViewController {
UIWebView *webview1; //★
}
@property (nonatomic, retain) IBOutlet UIWebView *webview1; //★
@end
| << 前へ | 次へ >> |