Embedding Cordova WebView on iOS

Cordova 1.4 からは、 Cordova を iOS アプリケーションの中でコンポーネントとして使用できます。このコンポーネントのコードネームは "Cleaver" です。

Cordova 1.4 以降の Xcode テンプレートを用いて作られた新しい Cordova バースのアプリケーションは Cleaver を使用し、このテンプレートは Cleaver の参照実装と捉えられます。

Cordova 2.0.0 からは、 Cleaver を実装したサブプロジェクトのみをサポートしています。

必要なもの

  1. Cordova 2.0.0 またはそれ以降
  2. Xcode 4.3 またはそれ以降
  3. Cordova.plist ファイル

Xcode プロジェクトへの Cleaver の追加 (CordovaLib サブプロジェクト)

  1. Cordova を インストール します
  2. Cordova.plist ファイルをディスクのプロジェクトフォルダー内に コピー します
  3. Cordova.plist ファイルを Xcode の Project Navigator に ドラッグアンドドロップ します
  4. "Create groups for any added folders" のラジオボタンを 選択 します
  5. Option-Command-A キーを押します。ファイルをプロジェクトに追加するためのドロップダウン画面 ("Add Files..." 画面) が開きます。 "Created groups for any added folders" のラジオボタンが選択されていることを確認します
  6. Shift-Command-G キーを押します。フォルダー移動のための別のドロップダウン画面 ("Go to the folder:" 画面) が開きます
  7. ~/Documents/CordovaLib/ と入力し、 "Go" ボタンをクリックします
  8. "Add Files..." 画面VERSION ファイルを選択します
  9. "Add Files..." 画面"Add" ボタンをクリックします
  10. Option-Command-A キーを押します。ファイルをプロジェクトに追加するためのドロップダウン画面 ("Add Files..." 画面) が開きます。 "Created groups for any added folders" のラジオボタンが選択されていることを確認します
  11. Shift-Command-G キーを押します。フォルダー移動のための別のドロップダウン画面 ("Go to the folder:" 画面) が開きます
  12. ~/Documents/CordovaLib/CordovaLib.xcodeproj と入力し、 "Go" ボタンをクリックします
  13. "Add Files..." 画面"Add" ボタンをクリックします
  14. Project Navigator で CordovaLib.xcodeproj を選択します
  15. File Inspector を開くため、 Option-Command-1 キーを押します
  16. Location のドロップダウンメニューのため、 File Inspector から "Relative to CORDOVALIB" を選択します
  17. Project Navigator の Project アイコン をクリックし、 Target を選択し、 "Build Settings" タブを選択します
  18. "Other Linker Flags" の値に -all_load-Obj-C を追加します
  19. Project Navigator の Project アイコン をクリックし、 Target を選択し、 "Build Phases" タブを選択します
  20. "Link Binaries with Libraries" を展開します
  21. "+" ボタン をクリックし、以下の framework を追加します (オプションで、 Project Navigator の中でこれらを Frameworks グループに 移動 します):

    AddressBook.framework
    AddressBookUI.framework
    AudioToolbox.framework
    AVFoundation.framework
    CoreLocation.framework
    MediaPlayer.framework
    QuartzCore.framework
    SystemConfiguration.framework
    MobileCoreServices.framework
    CoreMedia.framework
    
  22. "Target Dependencies" を展開します。 (もしこのラベルのボックスが複数ある場合は、一番上のものを選んでください)

  23. "+" ボタン をクリックし、 CordovaLib ビルドプロダクトを追加します

  24. "Link Binaries with Libraries" を展開します。 (もしこのラベルのボックスが複数ある場合は、一番上のものを選んでください)

  25. "+" ボタン をクリックし、 libCordova.a を追加します

コード中での CDVViewController の使用法

  1. この header を追加します:

    #import <Cordova/CDVViewController.h>
    
  2. 新しい CDVViewController のインスタンスを作成し、どこかで保持します:

    CDVViewController* viewController = [CDVViewController new];
    
  3. (オプション) wwwFolderName プロパティーをセットします (デフォルトは "www"):

    viewController.wwwFolderName = @"myfolder";
    
  4. (オプション) startPage プロパティーをセットします (デフォルトは "index.html"):

    viewController.startPage = @"mystartpage.html";
    
  5. (オプション) useSplashScreen プロパティーをセットします (デフォルトは NO):

    viewController.useSplashScreen = YES;
    
  6. view frame をセットします (常にこれを最後のプロパティーとしてセットします):

    viewController.view.frame = CGRectMake(0, 0, 320, 480);
    
  7. Cleaver を view に 追加 します:

    [myView addSubview:viewController.view];
    

HTML, CSS, JavaScript ファイルの追加

  1. 新しいフォルダーディスク上の プロジェクト内に作成します。例として名前は www とします
  2. HTML, CSS, JavaScript ファイル をこのフォルダーの中に入れます
  3. このフォルダーを Xcode の Project Navigator に ドラッグアンドドロップ します
  4. "Create groups for any added folders" のラジオボタンを 選択 します
  5. CDVViewController をインスタンス化するとき、 (1) で作成したフォルダーに 適切な wwwFolderNamestartPage プロパティーをセット するか、デフォルト値を使用します (前のセクションを参照してください)。

    /*
     もし 'myfolder' という名前のフォルダーを作成し、
     startPage として 'mypage.html' を
     使用したい場合
    */
    viewController.wwwFolderName = @"myfolder";
    viewController.startPage = @"mypage.html"