Embedding Cordova WebView on iOS
Cordova 1.4 からは、 Cordova を iOS アプリケーションの中でコンポーネントとして使用できます。このコンポーネントのコードネームは "Cleaver" です。
Cordova 1.4 以降の Xcode テンプレートを用いて作られた新しい Cordova バースのアプリケーションは Cleaver を使用し、このテンプレートは Cleaver の参照実装と捉えられます。
Cordova 2.0.0 からは、 Cleaver を実装したサブプロジェクトのみをサポートしています。
必要なもの
- Cordova 2.0.0 またはそれ以降
- Xcode 4.3 またはそれ以降
Cordova.plist
ファイル
Xcode プロジェクトへの Cleaver の追加 (CordovaLib サブプロジェクト)
- Cordova を インストール します
Cordova.plist
ファイルをディスクのプロジェクトフォルダー内に コピー しますCordova.plist
ファイルを Xcode の Project Navigator に ドラッグアンドドロップ します- "Create groups for any added folders" のラジオボタンを 選択 します
- Option-Command-A キーを押します。ファイルをプロジェクトに追加するためのドロップダウン画面 ("Add Files..." 画面) が開きます。 "Created groups for any added folders" のラジオボタンが選択されていることを確認します
- Shift-Command-G キーを押します。フォルダー移動のための別のドロップダウン画面 ("Go to the folder:" 画面) が開きます
~/Documents/CordovaLib/
と入力し、 "Go" ボタンをクリックします- "Add Files..." 画面 で
VERSION
ファイルを選択します - "Add Files..." 画面 で "Add" ボタンをクリックします
- Option-Command-A キーを押します。ファイルをプロジェクトに追加するためのドロップダウン画面 ("Add Files..." 画面) が開きます。 "Created groups for any added folders" のラジオボタンが選択されていることを確認します
- Shift-Command-G キーを押します。フォルダー移動のための別のドロップダウン画面 ("Go to the folder:" 画面) が開きます
~/Documents/CordovaLib/CordovaLib.xcodeproj
と入力し、 "Go" ボタンをクリックします- "Add Files..." 画面 で "Add" ボタンをクリックします
- Project Navigator で
CordovaLib.xcodeproj
を選択します - File Inspector を開くため、 Option-Command-1 キーを押します
- Location のドロップダウンメニューのため、 File Inspector から "Relative to CORDOVALIB" を選択します
- Project Navigator の Project アイコン をクリックし、 Target を選択し、 "Build Settings" タブを選択します
- "Other Linker Flags" の値に
-all_load
と-Obj-C
を追加します - Project Navigator の Project アイコン をクリックし、 Target を選択し、 "Build Phases" タブを選択します
- "Link Binaries with Libraries" を展開します
"+" ボタン をクリックし、以下の framework を追加します (オプションで、 Project Navigator の中でこれらを Frameworks グループに 移動 します):
AddressBook.framework AddressBookUI.framework AudioToolbox.framework AVFoundation.framework CoreLocation.framework MediaPlayer.framework QuartzCore.framework SystemConfiguration.framework MobileCoreServices.framework CoreMedia.framework
"Target Dependencies" を展開します。 (もしこのラベルのボックスが複数ある場合は、一番上のものを選んでください)
"+" ボタン をクリックし、
CordovaLib
ビルドプロダクトを追加します"Link Binaries with Libraries" を展開します。 (もしこのラベルのボックスが複数ある場合は、一番上のものを選んでください)
"+" ボタン をクリックし、
libCordova.a
を追加します
コード中での CDVViewController の使用法
この header を追加します:
#import <Cordova/CDVViewController.h>
新しい
CDVViewController
のインスタンスを作成し、どこかで保持します:CDVViewController* viewController = [CDVViewController new];
(オプション)
wwwFolderName
プロパティーをセットします (デフォルトは"www"
):viewController.wwwFolderName = @"myfolder";
(オプション)
startPage
プロパティーをセットします (デフォルトは"index.html"
):viewController.startPage = @"mystartpage.html";
(オプション)
useSplashScreen
プロパティーをセットします (デフォルトはNO
):viewController.useSplashScreen = YES;
view frame をセットします (常にこれを最後のプロパティーとしてセットします):
viewController.view.frame = CGRectMake(0, 0, 320, 480);
Cleaver を view に 追加 します:
[myView addSubview:viewController.view];
HTML, CSS, JavaScript ファイルの追加
- 新しいフォルダー を ディスク上の プロジェクト内に作成します。例として名前は
www
とします - HTML, CSS, JavaScript ファイル をこのフォルダーの中に入れます
- このフォルダーを Xcode の Project Navigator に ドラッグアンドドロップ します
- "Create groups for any added folders" のラジオボタンを 選択 します
CDVViewController
をインスタンス化するとき、 (1) で作成したフォルダーに 適切なwwwFolderName
とstartPage
プロパティーをセット するか、デフォルト値を使用します (前のセクションを参照してください)。/* もし 'myfolder' という名前のフォルダーを作成し、 startPage として 'mypage.html' を 使用したい場合 */ viewController.wwwFolderName = @"myfolder"; viewController.startPage = @"mypage.html"