ネイティブiOSプロジェクトでのCordova統合

「 クロスウォークプロジェクト-Android WebViewの置き換え 」という短いシリーズの記事を続けて、iOSの同様のタスクを解析することは理にかなっています。 今回は、Cordovaプロジェクトが統合の基盤として選択されました。 より多くの機能があり、この場合はタスクにより適しています。



CordovaとCrosswalkはどちらも、iOSバージョンのWKWebViewに基づいています。 したがって、この場合、これらはシステムWebViewの直接の置き換えではなく、拡張するだけです。



デモプロジェクトのターゲット言語はSwiftですが、Objective-Cプロジェクトの場合はすべて同じです。 CordovaをSwiftで使用できるように適応させるのは、最後のステップだけではありません。



NB！ Crosswalkには、Cocoa Podsを使用した簡単な統合ガイドがあり、拡張性のあるコアCordovaプラグインのサポートがあります 。



アプリケーションにCordovaを埋め込むための2つのオプションがあります。

1. Cordovaを手動で埋め込む。
2. Cocoa Podsを介した前提条件の追加。

NB！ 実際には、もう1つの簡単なオプションがあります。 Cordovaの環境を設定すると、Xcodeプロジェクトが機能するようになります。これは、Cordovaとは別に開発して使用できます。 このプロジェクトはObjective-Cに基づいていることに注意してください。

Cordovaを手動で埋め込む

最初に最初のオプションを検討し、必要なコンポーネントを含むCordovaを手動で追加します。 このオプションはもう少し複雑ですが、より柔軟で、ポッドの作成者に関係なく、最新バージョンのcordova-iosおよびプラグインを使用できます。



使用されているソフトウェアバージョン：

• Xcode 8.3.2、Swift 3.1
• Cordova 7.0.1、 Cordova iOS 4.4.0
• MacPorts 2.4.1
• npm 4.6.1

環境設定

最初のオプションを実装するには、最初にCordovaプロジェクト自体と必要なユーティリティをインストールする必要があります。 インストールプロセスは非常にシンプルで、 Cordovaのドキュメントで詳しく説明されています。デモプロジェクトを作成するために必要な手順にのみ焦点を当てます。



1. npmパッケージマネージャーをインストールします。このヘルプを使用して、次にCordovaと必要なプラグインをインストールします（MacPortsを使用してnpmをインストールします）。

sudo port install npm4
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

2. Cordovaを直接インストールします 。

 sudo npm install -g cordova
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

同様に、cordova-iosのみをインストールできます。

 sudo npm install -g cordova-ios
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

これは、他のプラットフォームで作業する予定がない場合に便利です。 ただし、この場合、コンソールでコマンドを使用する方が少し便利です。 たとえば、次を使用する必要があります。

 cordova-ios/bin/create
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

短いコマンドの代わりにフルパスで：

 cordova create
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

NB！ npmを使用してインストールされるすべてのパッケージは、 / opt / local / lib / node_modules /にあります。



3.次に、Cordovaプロジェクトを作成し、そのフォルダーに移動して、ターゲットiOSプラットフォームを追加します 。

 cordova create cordova_full cd cordova_full/ cordova platform add ios
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

必要なファイルは、フォルダーcordova_full / platforms / ios /にあります。 cordova-iosパッケージを直接使用すると、最小限の違いで同様のセットが得られます。



NB！ プロジェクトを作成するときに、アプリケーションの名前とバンドル識別子を指定できます。 詳細については、Cordovaのドキュメントを参照してください。



4.さらに、Cordovaプラグインを操作するためのplugmanユーティリティをインストールできます 。

 sudo npm install -g plugman
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

5.また、コンソールにメッセージを表示し、システムステータスバーを操作するための2つのプラグインをインストールします 。これらは作業に役立ちます。 これを行うには、iosのリソースフォルダーに移動し、次のコマンドを実行します。

 plugman install --platform ios --project . --plugin cordova-plugin-console plugman install --platform ios --project . --plugin cordova-plugin-statusbar
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

NB！ Ionic Frameworkツールチェーン（http://ionicframework.com/）で作業し、そのテンプレートを使用する場合、すべてが同じに見えます。

プロジェクト作成

1.プロジェクトは 、Xcodeの標準のタブ付きアプリケーションテンプレートに基づいていました 。 すべてのリソースを備えた作成済みのデモプロジェクトはgithubにあります。



Cordova iOS 4.4.0 iOSバージョンの最小サポートバージョンは9.0です。デモプロジェクト用に選択します。



2.必要なリソースをデモプロジェクトに転送します 。

• プロジェクトフォルダーCordovaLib cordova_full /プラットフォーム/ ios / CordovaLib /
• プラグインがインストールされたフォルダーcordova_full / platform / ios / HelloCordova / Plugins /
• 構成ファイルCordova cordova_full / platform / ios / HelloCordova /config.xml
• cordova_fullのリソースフォルダー/ platforms / ios / www / web application

NB！ CordovaLibを追加した後、タブBuild Builds→Compile Sourcesでメインプロジェクトの設定をチェックインします。 そこからCordovaLibファイルを削除して、アセンブリ中に競合が発生しないようにします。



NB！ www / resourcesでフォルダーを追加する場合、リソースがCordovaの標準的な方法で配置されるように、「フォルダー参照の作成」オプションを選択する必要があります。



3.正しいアセンブリ用にデモプロジェクトを構成する必要があります 。

• ビルド設定→その他のリンカーフラグで-ObjCフラグを追加
• [ビルド設定]→[ヘッダー検索パス]でパスを追加します。
  
  
  
  

   "$(TARGET_BUILD_DIR)/usr/local/lib/include" "$(OBJROOT)/UninstalledProducts/include" "$(OBJROOT)/UninstalledProducts/$(PLATFORM_NAME)/include" "$(BUILT_PRODUCTS_DIR)"
        
        
  
          
          
          
        
  
      
          
          
          
        
        
  
          
          
          
        
  
      
       

  
  
  
• ビルドフェーズ→ターゲットの依存関係でCordovaLibを追加
• ビルドフェーズ→ライブラリとバイナリをリンクでlibCordova.aを追加

NB！ 文字列全体と引用符を追加する必要があることに注意してください。



Objective-Cのオプションでは、構成が完了しており、プロジェクトを使用できます。



4. Swiftへの適応 。 Cordova iOSプロジェクトはもともとObjective-Cで実装されていましたが、現時点では、Swiftに移植する公式の計画については知られていません。 非公式の移植版がありますが、まだ完成していません。



ただし、SwiftプロジェクトでCordovaを使用する場合、根本的な問題はありません。 Swiftの世界をObjective-Cに接続するには、ブリッジングヘッダーを追加するだけです 。



これを行うには、プロジェクトに.hファイルを作成します（たとえば、Bridging-Header.h）：

 #ifndef Bridging_Header_h #define Bridging_Header_h #import "CDVViewController.h" #endif /* Bridging_Header_h */
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

そして、ビルド設定-> Objective-Cブリッジングヘッダーにパスを追加します。

 CordovaEmbedded/Libraries/Bridging-Header.h
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

5.その後、Cordova WebViewを使用できます 。 たとえば、デモプロジェクトでは、 UIViewControllerの代わりにCDVViewControllerからSecondViewControllerを継承します。 手首を軽く振ると、2番目のタブが本格的なCordovaアプリケーションに変わります。



6. Cordovaプラグインに関するいくつかの言葉 。 最初に、2つのプラグインをプロジェクトに接続しました。

• コンソールにメッセージを表示する
• システムステータスバーの操作用

最初のプラグインにより、Xcodeコンソールで適切な形式でメッセージを受信できます。

 CordovaEmbedded[31857:638683] Received Event: deviceready
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

2番目のプラグインでは、ステータスバーを設定できます-スタイル、色などに設定します。



プラグインはconfig.xmlファイルで構成されます。 使用されているプロジェクトテンプレートでは、ステータスバーは最初は透明ですが、プラグインの設定により、外観を変更し、最初のタブに透明なステータスバーを、2番目のタブに不透明なステータスバーを取得できます。 これは、統合システム全体のパフォーマンスをよく示しています。

Cocoa Podsを介した前提条件の追加

1. CocoaPodsを介してCordovaを接続する方法を説明するために 、Xcodeから同じTabbed Applicationプロジェクトテンプレートを取得してみましょう 。 すべてのリソースを備えた作成済みのデモプロジェクトはgithubにあります。



2. pod init



コマンドを使用してポッドファイルを作成し、それにポッドを追加します。

 pod 'Cordova' # Cordova framework and plugins pod 'CordovaPlugin-console' pod 'cordova-plugin-camera' pod 'cordova-plugin-contacts' pod 'cordova-plugin-device' pod 'cordova-plugin-device-orientation' pod 'cordova-plugin-device-motion' pod 'cordova-plugin-globalization' pod 'cordova-plugin-geolocation' pod 'cordova-plugin-file' pod 'cordova-plugin-media-capture' pod 'cordova-plugin-network-information' pod 'cordova-plugin-splashscreen' pod 'cordova-plugin-inappbrowser' pod 'cordova-plugin-file-transfer' pod 'cordova-plugin-statusbar' pod 'cordova-plugin-vibration' pod 'cordova-plugin-wkwebview-engine' pod 'phonegap-ios-template' # Cordova template
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

NB！ すべてのプラグインが追加されます phonegap-ios-templateリソーステンプレートで使用されます。 実際には、必要なものだけを追加できますが、テンプレートのconfig.xmlを調整する必要があります。



3. pod install



コマンドでpod install



、結果の.xcworkspaceを開きます。 次に、前のセクションのステップ4を実行して、プロジェクトをSwift言語で使用するように適合させる必要があります 。



4.現在、構成に問題があり、プロジェクトのビルド時に必要なヘッダーがすべて見つかりません 。 これを解決するには、 [ビルド設定]→[ユーザーヘッダーの検索パス]にパス（再帰フラグ付き）を追加します。

 "${PODS_ROOT}"
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

5.-6. Cordovaのパフォーマンスを示すために、前のセクションのステップ5と6を繰り返すことができます 。 すべてが同じように機能します。

結論と有用なリソース

Cordovaを手動で接続するオプションは、この場合Cocoa Podsを使用するオプションほど複雑ではありませんが、より柔軟性があり、最新バージョンのcordova-iosおよびプラグインを使用できます。



ただし、Cocoa Podを使用する場合、いくつかの欠点があります。

• 必要なバージョンのCordova iOSまたはプラグインにアップグレードする方法はありません。
• とにかく、プロジェクトを構成する必要があります。
• ポッドプロジェクトでCordovaの構成を変更する必要があります。

概して、主な欠点は、Cordovaのポッドサポートがあまり良くないことです:)



さらに、Cordova WebViewのネイティブiOSプロジェクトへの統合について学ぶことができます。

• Cordovaドキュメント： Cordovaをネイティブアプリに埋め込む→iOS WebViews
• PhoneGapドキュメント： Webviewの埋め込み
• Cordova統合用のポッドファイルと手順のリポジトリ
• すべてのリソースを備えた作成済みデモプロジェクトは、 githubにあります。

NB！ 公式の統合ドキュメントはやや時代遅れであり、余分な手順や欠落している手順がある可能性があることに注意してください。