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.1.0 またはそれ以降
- Xcode 4.5 またはそれ以降
Cordova.plist
ファイル (新しく作成した Cordova プロジェクトから)
Xcode プロジェクトへの Cleaver の追加 (CordovaLib サブプロジェクト)
- ハードディスクの恒久的なフォルダー (例: ~/Documents/Cordova) に Cordova をダウンロードし解凍します
- Xcode が起動している場合、 終了 します
- Terminal.app を使用して、Cordova をダウンロードしたディレクトリまで 移動します
Cordova.plist
ファイルをディスクのプロジェクトフォルダー内に コピー します (上の 必要なもの を参照してください)Cordova.plist
ファイルを Xcode の Project Navigator に ドラッグアンドドロップ します- "Create groups for any added folders" のラジオボタンを 選択 し、 Finish ボタンをクリックします
CordovaLib.xcodeproj
ファイルを Xcode の Project Navigator に ドラッグアンドドロップ します (上の、 CordovaLib のサブディレクトリ、恒久的なフォルダーから)- 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
を追加しますXcode 設定 "Xcode Preferences -> Locations -> Derived Data -> Advanced…" を "Unique" にセットします
Project Navigator の Project アイコン をクリックし、 Target を選択し、 "Build Settings" タブを選択します
"Header Search Paths" で検索をします。この設定に、以下の値を追加します (クォートを含む)
"$(TARGET_BUILD_DIR)/usr/local/lib/include" "$(OBJROOT)/UninstalledProducts/include" "$(BUILT_PRODUCTS_DIR)"
Cordova 2.1.0 では、 CordovaLib は Automatic Reference Counting (ARC) を使用するようにアップグレードされました。 CordovaLib を使用するにあたって ARC にアップグレードする必要はありませんが、もしプロジェクトを ARC を使用するようにアップグレードしたい場合は、メニューから Xcode migration wizard : Edit -> Refactor -> Convert to Objective-C ARC… を使用して、 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"