次の記事は、自動翻訳技術を使用して自動的に翻訳されました。 コンピュータプログラムによって翻訳されているため、誤りがある場合があります。Adobeは、世界中の多くのユーザーがより多くの記事を利用できるように、翻訳版を提供しています。
翻訳の品質を評価してください。Translation by SYSTRAN


Webviewの埋め込み

PhoneGapとiOSネイティブコンポーネントを使用したアプリの作成

開始する前に、モバイル戦略の選択に関するこのブログの記事を参照してください。 簡単なリフレッシャーとして、ここで参照するアプリの種類には、ネイティブコントロールと1つ以上のWebビューのブレンドが含まれます。 多くの一般的なアプリ(Instagram、Basecamp)で共通して実装されている使用事例は、ネイティブコントロールを使用したナビゲーションおよびページ切り替えの提供です。メインコンテンツは、埋め込まれたCordova Webviewにラップされます。 ただし、様々な方法でネイティブコンポーネントとWebViewコンポーネントを組み合わせて、ニーズを満たすことができます。 このガイドは、その作業を開始するのに役立つ参照として作成されています。

次の図は、従来のPhoneGapハイブリッドアプリ(左)とネイティブハイブリッドアプリケーション(右)の違いを示しています。

オプション

このネイティブiOSとWebViewの混在アプローチを実現するためには、いくつかの異なるオプションが用意されています。このガイドでは、これらの2つについて説明します。 1つ目は、一般的なiOS CocoaPods (iOS CocoaPods)アプローチを使用するための推奨アプローチで、最終的には(CocoaPodを使用したことがない場合でも)簡単に設定および使用できる方法です。 2つ目の手動アプローチは、 CocoaPods (CocoaPods)アプローチを使用しないで、より多くの未加工のソリューションを使用するか、依存設定をより詳細に制御する場合に適したオプションです。 続行するには、以下のいずれかのオプションを選択します。

オプション1: iOSネイティブおよびWebViewコンポーネントとCocoaPodの組み合わせ

CocoaPodsは 、iOSプロジェクトを構築するための依存性マネージャーで、 npmをnode.jsプロジェクトで使用する場合と同様です。 この例えを続けるために Podfileを使用して、 npmに package.jsonを使用する方法に似た依存関係を指定します 。 CocoaPodsは Ruby上に構築されているので、次に示すRuby gem (権限に応じて、必要とは限りません )コマンドを使用してインストールします。

$ sudo gem install cocoapods

CocoaPodsをインストールしたら、操作にネイティブのiOSプロジェクトが必要になります。

  1. 既存のネイティブiOSプロジェクトを開くか、新しいネイティブiOSプロジェクトを作成します。 Xcodeで新しいプロジェクトを作成するには、ファイル/新規/ プロジェクトを選択し 、iOSプロジェクトテンプレートを選択します。 この例では、簡単にするために Single View Controller Projectテンプレートを選択します。

    **注意:**ネイティブプロジェクトは、*Objective-C*または*Swift*のいずれかで、以下の手順は両方で同じです。 ただし、SwiftクラスからCordovaベースのクラスを具体的に参照する場合は、 Swiftの節に記載されている追加の手順が必要です
  2. コマンドラインに戻り、 cd を上から新しいiOSプロジェクトのルートに移動し、ポッドファイルを作成して 依存関係を管理します 。 作成する最も簡単な方法は、 pod init コマンドを使用する方法です。このコマンドは、最初に使用するベースを作成します。

    pod init now」と入力し、Enterキーを押した後、新しく作成した Podfile が表示されることを確認します。

     $ pod init

    このファイルを開き、この Podfileサンプルの 内容からポッド行をプロジ ェク トの最初のtarget targetSpecificationにコピーします。 ポッドの初期化を使用した場合、ターゲットは既にプロジェクトの名前に設定さ れます。 必要に応じて、こ のデモビデオを参照 してください。

     # Uncomment this line to define a global platform for your project
     # platform :ios, '9.0'
    
     target 'CordovaProj' do
       # Uncomment this line if you're using Swift or would like to use dynamic frameworks
       # use_frameworks!
    
       # Pods for CordovaProj
       # CordovaLib Dependency Pod
       pod 'Cordova'
    
       # Cordova Core Plugin Dependency Pod References
       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'
    
       # The following includes the PhoneGap iOS Platform Project Template for a quick start
       pod 'phonegap-ios-template'
    
       target 'CordovaProjTests' do
         inherit! :search_paths
         # Pods for testing
       end
    
       target 'CordovaProjUITests' do
         inherit! :search_paths
         # Pods for testing
       end
    
     end
    **注意:**「Cordova」CocoaPodが最初に指定され、「CordovaLib」コアクラスがすべて含まれます。 サンプルのPodfileでは、アプリで使用できるようにするためのプラグインの依存関係も多数指定されています。 最後に、「phonegap-ios-template」とは、PhoneGapサンプルアプリ「CocoaPod」を指します。これは、すばやく作業を開始するのに役立ちます。 サンプルアプリでは、この「Podfile」サンプルに記載されているプラグインを使用するので、簡単にテストできます。
  3. 次に、コマンドラ インから pod installを実行して、上で定義したCordovaの依存関係をインストールします。

  4. 手順1で作成したXcodeプロジェクトを閉じます。これからは、すべての依存関係を追加する代わりに、プロジェクト用に作成されたXcodeワークスペースファイルを使用する必要があります。

  5. ポッドのインストールから作成した .xcworkspaceファイルを 開きます 。 プロジェクトのXcodeワークスペースに 新しい Podsフォルダーが表示され、次に示すCordovaのすべての依存先フォルダーが存在することを確認します。

  6. これで、ネイティブプロジェクトでのCordovaの使用を開始できます。 そのためには、 Main.storyboard ファイルを開き、IDインスペクターで「カスタムクラス」の値をデフォルトの「 ViewController 」から「CDViewController」に 変更します。 CDVViewController 、Cordova固有のViewControllerです。

  7. Xcodeから今すぐアプリを実行します。 CocoaPodの依存 関係に含まれていたPhoneGap iOSサンプルアプリは 、デフォルトで実行されます(この機能の詳細については 、「説明」の節を参照してください)。

    テンプレートの実行

    サンプルアプリのCocoaPodフォルダーの概要を以下のプロジェクトで説明し、具体的に示します。 Webビュー用に独自のコードを使い始める準備が整ったら、 www フォルダー内のコンテンツを自分のアプリコンテンツに置き換えるだけで、リンクが設定され、すぐに使用できる状態になります。

これはどのように動作しますか?

これが自動的に機能し、サンプルアプリが読み込まれる方法を考えている場合は、 phonegap-webview-iosテンプレートのCocoaPodの設定方法が原因です 。 The .podspec is a file that configures aおよび for the phone-gap-template :resources属性は、 resources set the resources folder the resources folder(whe ConfigAppSample)を指します。 次に、ポ ッドスペック (podspec)を参照してください。

Pod::Spec.new do |s|

  s.name               = "phonegap-ios-template"
  s.version            = "0.1.4"
  s.summary            = "PhoneGap sample template project for iOS."

  s.description        = <<-DESC "A PhoneGap sample project to get started quickly with an embedded webview in a native iOS project."
                         DESC
  s.license            = { :type => "Apache License, Version 2.0", :file => "LICENSE" }
  s.homepage           = "https://github.com/phonegap/phonegap-webview-ios"
  s.author             = { "The Adobe PhoneGap Team" => "" }
  s.social_media_url   = "http://twitter.com/phonegap"
  s.source             = { :git => "https://github.com/phonegap/phonegap-webview-ios.git", :tag => "0.1.4" }
  s.resources          = "resources/*"

end

Xcodeは、実行時に、リソースとしてマークされたフ ァイルとフォルダーを 、特別なビルド命令を生成して、ターゲットアプリバンドルにコピーします。 例えば、このCocoaPodを含むプロジェクトのXcodeによって生成されたビルドスクリプトは、次の行を生成します。

if [[ "$CONFIGURATION" == "Debug" ]]; then
  install_resource "phonegap-ios-template/resources/config.xml"
  install_resource "phonegap-ios-template/resources/www"
fi
if [[ "$CONFIGURATION" == "Release" ]]; then
  install_resource "phonegap-ios-template/resources/config.xml"
  install_resource "phonegap-ios-template/resources/www"
fi

アプ リの実行後に作成された .appバンドルファイルは、コンテンツを表示した場合の最終結果を示します。

ストー リーボードで設定したCDVViewController クラスは、次のコードの例に示すように、デフォルトで www (www)フォルダーとindex.htmlファイルが存在するかどうか、プロジェクトをスキャンします。

if (self.wwwFolderName == nil){
   self.wwwFolderName = @"www";
}
if (delegate.startPage && self.startPage == nil){
   self.startPage = delegate.startPage;
}
if (self.startPage == nil) {
   self.startPage = @"index.html";
}

テンプレートア プリは wwwなどがアプリバンドルに含まれていたので、デフォルトで見つかり、使用されます。

**ヒント:**デフォルトのフォルダーと開始ページの値は、config.xml <content>タグ、または「CDVViewController」を拡張する独自のカスタムクラスでオーバーライドできます。 ネイティブアプリで複数のCordova webビューを使用する場合は、それぞれに異なるフォルダーと開始ページに設定されたカスタムの「ViewController」クラスを用意する必要があります。
**警告:** Xcodeで事前に配線されているフォルダー参照のため、「www」フォルダー自体を削除しないように注意してください。削除すると、事前配線が破損します。

この短いデモビデ オでは 、上記の手順全体を詳しく説明しています。

Custom viewController

この例で 、CDVViewControllerを使用して簡単にしています。 独自のアプリでは、デフォルトはフルスクリーンなので、ビュー内で他のネイティブコンポーネントと共に表示する場合など、ビューポートのサイズを変更して、Cordova webビューをさらにカスタマイズする場合に、このクラスを拡張します。 PhoneGap iOSプロジェクトテンプレートはMainViewControllerクラスとヘッダーファイルで拡張する方法を確認するのに役立ちます 。 これらをプロジェクトにコピーし、ストーリーボードのViewControllerクラス名の代わりに MainViewController を参照し、それに応じてカスタマイズするだけで済みます。 例えば、ビューポートの初期サイズを変更するには、カスタムViewController viewWillAppear メソッド内の境界を変更します。例えば、(値40はデモ用の任意のオフセットです)。

- (void)viewWillAppear:(BOOL)animated
{
    CGRect viewBounds = self.view.bounds;
    CGRect webViewBound = CGRectMake(viewBounds.origin.x,
                                     viewBounds.origin.y + 40,
                                     viewBounds.size.width,
                                     viewBounds.size.height - 40);

    self.webView.frame = webViewBound;
    self.webView.backgroundColor = [UIColor clearColor];

    [super viewWillAppear:animated];
}

Swiftベースのプロジェクト

前述のように、SwiftベースのプロジェクトをCordovaで使用する場合は、前述したのと同じCocoaPodsアプローチを使用できます。 SwiftクラスからObjective-Cクラスと通信できるように、Cordovaクラス(Objective-Cで記述)の拡張または使用を開始する場合は、ブリッジヘッダーファイルを追加する必要があります。

Xcodeからブリッジヘッダーを設定するには:

  1. ファイ ル/新規/ファイル/ヘッダーファイル/名前を選択し、Xcodeプロジェクトのルートに保存します。
  2. 次に、プロジェクトのビルド設定でブリッジヘッダーファイル名が設定されていることを確認する必要があります。 これを行うには、ナビゲーターでプロジェクトのルートをクリックします。 次に、「ビル ド設定 」タブで、 Swiftコンパイラー — コード生成セクションを探し、 Objective-Cブリッジヘッダーのヘッダーファイル名を入力します 。 次に例を示します。

  3. 次に、ブリッジヘッダーファイルに戻り、プロジェクトで使用するCordovaクラスのヘッダーファイルを読み込みます。 例:

    #ifndef bridge_header_h
    #define bridge_header_h
    
    #import "CDVViewController.h"
    
    #endif /* bridge_header_h */
  4. ブリッジファイルにヘッダーを追加したら、Swiftコードで直接使用を開始できます。 例えば、 ViewController.swiftファイルでは 、次のような方法で CDVViewControllerクラスを拡張し、Webビューフレームのサイズを変更できます。

    import UIKit
    class SecondViewController: CDVViewController {
    
       override func viewDidLoad() {
            super.viewDidLoad()
           // Do any additional setup after loading the view, typically from a nib.
       }
    
       override func didReceiveMemoryWarning() {
           super.didReceiveMemoryWarning()
           // Dispose of any resources that can be recreated.
       }
       override func viewWillAppear(animated: Bool) {
        super.viewWillAppear(true);
        self.webView.frame = CGRectMake(
            self.view.bounds.origin.x,
            self.view.bounds.origin.y+40,
            self.view.bounds.width,
            self.view.bounds.height-40)
       }
    }

    Swiftベースのプ ロジェクトで Cordovaを使用して実際のデモを行う方法については、このビデオを参照してください。

その他のリソース

  • InstaSnap Sample Hybrid App - PhoneGap Day 2016ワークショップで使用する手順を追った、ハイブリッドiOSアプリの別のサンプルです。

オプション2: iOSネイティブコンポーネントとWebViewコンポーネントの一からの組み合わせ

この節では、iOSネイティブコンポーネントとCordova WebViewコンポーネントを組み合わせる手動アプローチについて説明します。

参照アプリ

このサンプルアプリをチュートリアル全体を通じて参照として使用します。 2つのビューが含まれています。 Cordovaビューとネイティブビューです。 最終的にサンプルアプリではCordova Webview上にボタンが作成されます。このボタンは、ネイティブビューのテーブルコントロールに、Webビューとネイティブビューの間で通信する方法を示すためのブックマークを表す項目を追加します。

レッスン1: デフォルトのCordova iOSプロジェクトを作成する

多くの開発者はプロジェクトを作成するのにPhoneGapまたはCordova CLIを使用します。このアプローチでも使用できますが、iOSプラットフォームプロジェクト自体を操作するだけなので、お勧めしません。 代わりに、cordova-isoプロジェクトを使用します。 これは、iOSプラットフォームを追加するときにCLIから使用するのと同じプロジェクトです。

  1. ベースcordova-iosプロジェクトのzipファイルを複製またはダウンロードして開始します。

  2. ターミナルウィンドウを開き、cdで上記のcordova-iosベースプロジェクトを含むディレクトリに移動します。 したがって、たとえばuserxyz/cordova-iosにダウンロードした場合は、createコマンドをuserxyzから実行します。 次のコマンドを実行して新しいCordova iOSプロジェクトを作成します。

    $ cordova-ios/bin/create HybridIOSApp org.sample.hybridiosapp HybridIOSApp
  3. cdで新しく作成したプロジェクトに移動します。

    
    $ cd HybridIOSApp
  4. plugmanを使用して、必要なプラグインをプロジェクトに追加します。 plugmanがない場合は、npmからインストールできます。 (iOSに少なくともCordovaコンソールプラグインを追加して、ログメッセージを受信できるようにする必要があります)

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

レッスン2: ストーリーボードをセットアップする

  1. XcodeでHybridIOSApp.xcodeprojファイルを開きます(Mac OSが必要です)。 このベースネイティブプロジェクトを拡張します。

  2. iOSストーリーボードを作成して、各画面を「シーン」としてレイアウトします。 選択されているHybridIOSAppプロジェクトのClassesフォルダーがあることを確認し、XcodeのFile/Newメニューを使用してストーリーボードファイルを作成し、Main.storyboardと名前を付けます。

  3. プロジェクトのメインインターフェイスを、作成したストーリーボードに設定します。 前の手順で作成したこの新しいストーリーボードファイルは、アプリのメインインターフェイスとして機能するので、先に進む前に、それを指すようにプロジェクトのプロパティを更新する必要があります。 左のProject Navigatorでプロジェクトルートを選択します。最初のタブ「General」が選択されているはずです。 設定されていない場合は「「Devices」をiPhoneに設定し、「Main Interface」ドロップダウンを、作成したMain.storyboardファイルに設定します。 以下のスクリーンショットでは、このすべてを赤色で囲んでいます。

  4. ストーリーボードに戻り、右側のObject Libraryパネルから「View Controller」をドラッグしてシーンを作成します。 (開かれていない場合は、XcodeメインメニューバーのView/Utilitiesで切り替えます) 下の右側の矢印はドラッグ元を示しています。 ドラッグすると、以下に示すように、Document Outlineビューで表示されるはずです。 そのアウトラインが表示されていない場合は、下の赤い矢印が指し示すボタンを使用して切り替えます。 それをこのガイド全体を通じて使用する必要があります。

  5. 次に、View ContollerクラスをMainViewControllerに設定する必要があります。これは、ベースプロジェクトで作成されたCordova対応のView Controllerで、PhoneGap APIへのアクセスを提供します。 これを行うには、新しいView Controllerが選択されていることを確認し、Identity Inspectorパネル(下の図で円で囲まれています)を開き、クラス名をMainViewControllerに変更します。

  6. Attributes Inspector」タブ(赤い丸で囲まれています)で、「View Controller」をCordovaに設定します。 これにより、ビューのドキュメントアウトラインが表示され、どのビューで作業しているかを追跡しやすくなります。

  7. 次に、ストーリーボードに1つ以上のView Controllerを追加して、ネイティブビューシーンを表現しましょう。 ネイティブビューシーンを表現しているので、デフォルトクラスはUIViewControllerに設定したままにします。 タイトルを「Attributes Inspector」タブでNativeに設定します。

  8. TabBarControllerを追加してアプリにナビゲーションを配置し、ユーザーがアプリケーションの下部のタブからcordovaビューとネイティブビューを切り替えられるようにしましょう。 ネイティブビューとCordovaビュー用の2つのView Controllerは、このTabBarControllerにXcodeのEditorメニューから埋め込むことができます。 両方のView Controllerが選択されていることを確認し、Editor/Embed In/Tab Bar Controllerに移動します。

  9. 新しいTabBarControllerが画面に配置され、View Controllerに自動的に接続されます。

  10. 次に、アプリが最初に表示する内容を知るためのエントリポイントを設定する必要があります。 TabBarControllerをエントリポイントに設定するには、「Attribute Inspector」タブをクリックし、以下のように「Is Initial View Controller」の横にあるボックスにチェックを入れます。 このボックスにチェックを入れると、画面にTabBarControllerへの矢印が追加されます。

  11. 前の手順で設定したストーリーボードのエントリポイントはまだ有効になりません。エントリポイントをプログラムによって設定するコードがまだ存在しており、このコードを削除する必要があります。 AppDelegate.mを開き、didFinishLaunchingWithOptionsを検索します。 このメソッドで、アプリを表示する前に最終的なカスタマイズまたは最終的な微調整を行うことができます。 ストーリーボードを使用していて、すでにTabBarControllerへのエントリポイントを設定したので、このメソッド内の現在のコードを使用してrootViewControllerを設定する必要はありません。したがって、完全に削除します。

  12. Document Outlineビューの各シーンには、各ビューに表示されるタブを表すItemオブジェクトがあります。

  13. Attribute Inspector」で、それぞれの名前とアイコンを変更して、より意味のあるものにします。 Cordovaビューでは、名前をCordovaに設定し、ドロップダウンでCordovaビューのcordovaロゴを選択します。 デフォルトのロゴはすでにcordova-iosプロジェクトのResourcesフォルダーに含まれているので、ドロップダウンから簡単に選択できます。 icon-40.pngサイズを選択します。

    ネイティブビューでは、「System Item」を組み込みの値Historyに設定するだけです。このビューは、ブックマークされた並べ替えアイテムの履歴を表すからです。 この値を設定すると、自動的にタブでアイコンとタイトルが設定されるため、必要なのはその値の入力だけです。 結果については、次の手順のスクリーンショットを参照してください。

  14. ここでアプリを実行すると、下部に2つのボタンが表示され、これらを使ってビューを切り替えることができます。 CordovaビューはデフォルトのHello Cordovaアプリを表示します。ネイティブビューは今のところ空白です。 次のレッスンで変更します。

レッスン3: ネイティブビューへの追加

このレッスンでは、ネイティブビューでテーブルを設定して、Cordova WebViewからボタンをクリックしたときに項目が追加されて表示されるようにします。 テーブルを表示するようにネイティブビューを設定するには、ロジックに対してUITableViewControllerクラスを定義する必要があります。

  1. File/New/File/Cocoa Touch Classに移動します。

  2. MyTableViewControllerという名前を付け、UITableViewControllerサブクラスが選択されていることを確認し、 Classesフォルダーに保存します。

  3. 次に、ネイティブビューのストーリーボード内からネイティブのView Controllerとして設定して作成した新しいTableViewControllerクラスを使用する必要があります。 ネイティブシーンが選択されていることを確認し、「Identity Inspector」でView ControllerクラスをMyTableViewController(または上記で付けた名前)に変更します。

  4. ネイティブビューでUIに表示されるものはまだ何もないので、MyTableViewControllerクラスが管理する実際のTableコントロール自体を追加する必要があります。 このコントロールは、UITableViewクラスによって表され、現在のデフォルトUIViewDocument OnlineViewオブジェクトによって表される)を置き換えます。 「Document Outline」で「Native View」の下にある現在のビューを削除します。選択してdeleteキーを押します。 「Table View」コンポーネントをObject Libraryから「Native View」にドラッグします。 結果は次のようになります。

  5. TableViewが選択されている間に、行の高さも変更して少し大きくし、読みやすくしましょう。 次に示すように、「Row Height」を70に変更します。

  6. Object LibraryからドラッグしてTable View CellコンポーネントをTableViewに追加します。 Prototype Cellsというタイトルの新しい要素がテーブルビューに表示されます。 「Attribute Inspector」タブで識別子を設定して、テーブルビューセルにCell1と名前を付けます。 以下に示すように、Document Outlineで名前が変更されます。

  7. 次に、テーブルセルビュー(Cell1)にラベルをドラッグして、追加された項目のタイトルを表します。 以下に示すように、新しいラベルにTitleと名前を付け、左へドラッグして揃えます。

  8. ストーリーボードとUIの作業が完了しました。 この手順では、MyTableViewControllerヘッダーおよびクラスを更新して、この新しいテーブル用のコード処理を追加する必要があります。

    テーブルの項目を管理するために配列を使用し、配列変数にbookmarksと名前を付けます。 新しい配列変数をサポートするには、まず、それをMyTableViewController.hヘッダーファイルでプロパティとして定義する必要があります。

    @property (nonatomic,strong) NSMutableArray* bookmarks;

    次に、MyTableViewController.mクラスを開き、次のように変更します。

    • bookmarks配列を初期化するための新しいメソッドをviewDidLoadメソッドの上に追加します。

      - (instancetype)initWithCoder:(NSCoder *)aDecoder {
        self = [super initWithCoder:aDecoder];
        self.bookmarks = [[NSMutableArray alloc]init];
        return self;
      }
    • 0の代わりに1を返すようにnumberOfSectionsInTableViewメソッドを更新します。

      - (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {
       return 1;
      }
    • numberOfRowsInSectionでは、bookmarks配列の現在のカウントを返します。

      - (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
       return [self.bookmarks count];
      }
    • 最後に、cellForRowAtIndexPathのコメントを外し、次のコードを含むように更新します。

      - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
      UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"Cell1" forIndexPath:indexPath];
      cell.textLabel.text=[self.bookmarks objectAtIndex:indexPath.row];
      return cell;
      }

実行

次に、エミュレーターまたはiPhoneでアプリを停止および実行します。 ここに示すように、ネイティブのHistoryビューには空白のテーブルが表示されるはずです。

空の実行

次のレッスンでは、プラグイン経由で通信して、WebViewボタンコントロールからこのテーブルに項目を追加する方法を紹介します。

トラブルシューティング

実行時にエラーが発生した場合は、上記のコードの更新をサンプルプロジェクトと比較して再確認し、ストーリーボードが合致していることを確認します。 コントローラーのアウトレットは以下のスクリーンショットと同じになります。View/Table Viewが「Outlet」として表示されます。

また、実行しようとしているスキームおよびターゲットデバイスが、ここに示すように、上部のバーで正しく設定されていることを確認します。 スキームとしてのアプリ名、さらにiPhone 6シミュレーターまたは独自のデバイスが設定されている必要があります。

レッスン4: Webとネイティブ間の通信

CordovaビューとネイティブiOSビュー間の通信手段はCordovaプラグインを経由します。 独自のカスタムプラグインを作成しましょう。TableViewControllerへのアクセスを取得してテーブルに項目を追加する方法がわかります。

iOS用のCordovaプラグインはCDVPluginクラスを拡張し、CDVPluginResultクラスを使用して結果を返すことができます。cordova.execインターフェイス経由でJavaScriptから呼び出されます。 execインターフェイスシグネチャは、成功とエラー、サービス名、メソッド名、およびオプション引数の配列用のコールバック関数を次のように受け取ります。

exec(<successFunction>, <failFunction>, <service>, <action>, [<args>]);

serviceパラメーターはiOSクラスの名前にマップされ、actionは、最後のパラメーターから渡される引数を使用して実行する、そのクラス内の関数を指定します。 成功すると、成功のコールバック関数が呼び出されます。それ以外の場合は、エラーのコールバック関数が呼び出されます。 CDVPluginResultは特定の結果を保持します。メッセージ内にさまざまな結果タイプが保持される可能性があります。 例えば、成功ステータスというシンプルな結果は次のような形式の場合があり、成功ステータスのみを返送します。

pluginResult = [CDVPluginResult resultWithStatus:CDVCommandStatus_OK];

または、次のように、メッセージ文字列を渡すこともできます。

pluginResult = [CDVPluginResult resultWithStatus:CDVCommandStatus_OK messageAsString:myStr];

エラーが発生した場合は、失敗に関する詳細を示すメッセージまたはオブジェクトを渡すことができます。 以下はメッセージを渡す例ですが、エラーステータスをメッセージまたは別のデータタイプ(messageAsArrayBuffermessageAsMultipartなど)とともに渡すこともできます。

pluginResult = [CDVPluginResult resultWithStatus:CDVCommandStatus_ERROR messageAsString:@"Arg was null"];

さまざまな結果の種類の一覧については、このドキュメントを参照してください。

Cordovaプラグインの作成

XcodeのFile/New/Fileに移動し、「Cocoa Touch」を選択して、カスタムプラグインの作成を開始します。 新しいプラグインのサブクラスとしてCDVPluginを選択し、MyHybridPluginのような名前を付け、Classesフォルダーに保存します。

次に、MyHybridPlugin.hヘッダーファイルを次のように更新します。

#import <Cordova/CDVPlugin.h>

  @interface MyHybridPlugin : CDVPlugin
      - (void)addBookmark:(CDVInvokedUrlCommand*) command;
  @end
**注意:** XcodeがデフォルトのCordova.hを使用しようとする場合があり、動作しないので、importステートメントで`CDVPlugin.h`を使用していることを確認してください。

次に、MyHybridPlugin.mクラスファイルを開き、次のように変更します。


#import "MyHybridPlugin.h"
#import "MainViewController.h"
#import "MyTableViewController.h"

@implementation MyHybridPlugin
    -(void)addBookmark:(CDVInvokedUrlCommand*) command {
        NSString* bookmark = [command.arguments objectAtIndex:0];

        if(bookmark) {
            NSLog(@"addBookmark %@", bookmark);
            MainViewController* mvc = (MainViewController*)[self viewController];

            MyTableViewController* tvc = (MyTableViewController*)mvc.tabBarController.viewControllers[1];
            [tvc.bookmarks addObject:bookmark];
            [tvc.tableView reloadData];
            CDVPluginResult* pluginResult = [CDVPluginResult resultWithStatus:CDVCommandStatus_OK];
            [self.commandDelegate sendPluginResult:pluginResult callbackId:command.callbackId];
        } else {
            CDVPluginResult* pluginResult = [CDVPluginResult resultWithStatus:CDVCommandStatus_ERROR];
            [self.commandDelegate sendPluginResult:pluginResult callbackId:command.callbackId];
        }
    }
@end

コードの詳細分析

上記のコードについて説明します。

  1. MainViewControllerで実行しているので、ボタンがクリックされると、この行によって、そのコントローラーへのアクセスを取得できます。

    MainViewController* mvc = (MainViewController*)[self viewController];
  2. MainViewControllerオブジェクトを使用してTabBarController続いてネイティブビューTableViewControllerオブジェクトへのアクセスを、そのViewController配列のインデックス1経由で取得します(MainViewControllerはインデックス0です)

    MyTableViewController* tvc = (MyTableViewController*)mvc.tabBarController.viewControllers[1];
  3. 次に、bookmarkオブジェクトをTableViewControllerオブジェクトに保持されるブックマークの配列に追加します。

    [tvc.bookmarks addObject:bookmark];
  4. 配列(データソース)が変更されたので、reloadData関数を呼び出してテーブルビューにデータをリロードします。

    [tvc.tableView reloadData];
  5. 最後に、このガイドで説明したCDVPluginResultクラス経由でプラグインの結果を形成し、プラグイン結果ステータスをcommandDelegateを使用して返します。

    CDVPluginResult* pluginResult = [CDVPluginResult resultWithStatus:CDVCommandStatus_OK];
       [self.commandDelegate sendPluginResult:pluginResult callbackId:command.callbackId];
    }
    else {
       CDVPluginResult* pluginResult = [CDVPluginResult resultWithStatus:CDVCommandStatus_ERROR];
       [self.commandDelegate sendPluginResult:pluginResult callbackId:command.callbackId];
    }
また、上記の例では、クラス名は「MyHybridPlugin」で、呼び出されるメソッド名は「addBookmark」です。 Cordova javaScript側からこの新しいプラグインを使用するには、次のシンタックスを使用し、コールバックおよびパラメーター(ネイティブテーブルビューに追加するストリング)と共に、これらの値を「exec」呼び出しで指定します。
  cordova.exec(win, fail, "MyHybridPlugin", "addBookmark", [bookmark]);

プラグインの使用

  1. プロジェクトのwww/jsフォルダーにあるCordova index.jsファイルを開き、addBookmarkメソッドをexec呼び出し経由プラグインで呼び出す(赤色で強調)、addBookmarkというメソッドをJavaScript側で追加します。

    addBookmark: function() {
     var win = function(d) {
       console.log("Bookmark added!");
     };
     var fail = function(e) {
       console.log(e)
     }
     var bookmark = document.getElementById("bookmark").value;
     cordova.exec(win, fail, "MyHybridPlugin", "addBookmark", [bookmark]);
    }
  2. index.htmlを開き、divの内容を新しいテキスト入力およびボタンに置き換えます。

    <div class="app">
     <label for="bookmark">Bookmark this:</label>
     <input id="bookmark" type="text" />
     <button id="bookmarkBtn">Add a bookmark</button>
    </div>
  3. index.jsに戻り、onDeviceReady関数で、receivedEvent呼び出しを削除するかコメントアウトし(前の手順で対応するコードをindex.htmlから削除したため)、ボタンがクリックされたときにaddBookmark関数を呼び出すための以下の行を追加します。

    onDeviceReady: function() {
     //app.receivedEvent('deviceready');
     document.getElementById("bookmarkBtn").onclick = app.addBookmark;
    },
  4. config.xmlファイルを <feature/>タグの形式で新しいプラグインの詳細で更新するまで、有効なプラグインであり、その参照方法を確認する必要があります。 これまで作業してきたプロジェクトのClassesフォルダーと同じレベルにあるconfig.xmlファイル(パス: HybridIOSApp/HybridIOSApp/config.xml)を開き、他のプラグインを追加した場合は既に追加した他の機能要素と同じ領域に以下の行を追加します。 (プラグインを追加するのにplugmanやCLIなどのツールを使用しなかったため、この手順を手動で実行する必要があります)

    <feature name="MyHybridPlugin">
     <param name="ios-package" value="MyHybridPlugin" />
    </feature>
  5. アプリを実行し、Cordova画面の入力フィールドにテキストを入力できることを確認し、「Add a bookmark」ボタンをクリックし、ネイティブビューに追加されることを確認します。 項目の追加を続け、ネイティブテーブルに追加されることを確認してください。

より詳しく参照するには、このガイドの完全なサンプルプロジェクトPhoneGyap GitHubリポジトリで検索してください。

まとめ

見栄えのよいアプリではないかもしれませんが、どれほど簡単にネイティブとWebViewの要素を組み合わせることができるかを紹介しました。独自のハイブリッドアプリ開発でこの作業に取り組む際にはその他のオプションを検討してください。

GitHubでこのページを編集
Copyright SYSTRAN 2016
この翻訳は役に立ちましたか?

Translation by SYSTRAN