web-dev-qa-db-ja.com

Ripple Emulator for Windowsを使用してPhoneGapアプリケーションをテストする方法

WindowsでPhoneGapアプリケーションをテストするためにRippleエミュレーターを使用できますか？

私は本当に悪いことをしているのか、Rippleはそのような環境ではまったく機能していません。

ChromeストアからChromeのRipple Emulator拡張機能をインストールしました。 Chromeをモバイルアプリ（XAMPP経由でローカルに提供）に移動しました。 Chromeオムニバーの横にあるリップルアイコンをクリックし、開いたウィンドウでEnableをクリックしました。適切なプラットフォーム（Cordova 2.0）を選択しました。

私のアプリケーションは、モバイルデバイスのように見えるモバイル風の外観でリロードされました。 Rippleはconfig.xmlファイルから設定を読み取ることができませんでしたが、それはよく知られているバグです（報告されている here および here ）。これがRippleの使用を妨げる問題ではないことを願っていますか？

デバイス（Samsung Nexus）を選択し、モバイルデバイスのテストを開始しました。 PhoneGap APIへの最初の呼び出しでも失敗しました。コンパスを試しましたが、得られたのはCannot call method 'watchHeading' of undefinedだけでした。

基本的なPhoneGapオブジェクトを未定義にするにはどうすればよいですか？私は何が欠けていますか？ Ripple Emulatorまたはamyを使用してWindowsでPhoneGapアプリケーションをChromeでテストできますか？

Rippleのドキュメントを手伝おうとしましたが、「 Rippleエミュレーターを有効にする 」という章は完全なゴミです。 RippleアイコンにStart Ripple Servicesオプションの記号さえありません（EnableとDisableのみ）、Enableをクリックしても記号がありませんライセンス契約を確認し、同意します。私は、このドキュメントが私が使用しているものとは完全に異なるものについて話していると感じています。

ChromeでRippleを使用してPhoneGapアプリケーションをテストする方法何が欠けていますか？

cordovaripple
22
trejder

tl; dr： PGBのドキュメントで述べられていることとは反対に、 must にcordova.jsファイルのコピーを保持するRipple Emulatorの最新バージョンは他のバージョンでもこのファイルなしでも動作しないため、アプリのルートディレクトリとこのファイルはPhoneGapのバージョン2.0から取得する必要があります。

解決

ローカルPhoneGap環境ではなく、PhoneGap Buildを使用してPhoneGapアプリを開発しています。そのため、指示されたとおり、アプリケーションのWebルートからphonegap.jsファイルを削除し、index.htmlにのみ参照を残しました。これはPhoneGap Buildには問題ありませんが、Ripple Emulatorには絶対に not で問題ありません。

そのファイルを元に戻したので（実際にはcordova.jsのlib\Android\example\assets\www\フォルダーのphonegap-2.0.0.ZipからCordova 2.0のライセンスを確認できたので、Ripple Servicesを起動し、作業中のPhoneGapアプリケーションをローカルでテストします。

同様の問題に苦しんでいる人々への注意：Ripple Emulatorの現在のバージョンはcordova.jsを使用しています。 PhoneGapの rightバージョンをダウンロードし、そこからcordova.jsを取得するようにしてください。新しいバージョン（現在は3.0.0）からcordova.jsを使用しようとしないでください。多くの奇妙なalert()が表示されたり、オーバーロードされたChromeがハングアップしたりするなど、検出できない状況に陥ります。

Rippleの背後にあるバージョンを使用するPhoneGapのJSファイルバージョンを使用していることを常に確認してください。

ステップバイステップ

ChromeおよびRipple Emulatorを使用して、WindowsでPhoneGapアプリケーションをテストできるようにするための重要な手順：

  1. lib\Android\example\assets\www\ファイルをフォルダールートに戻し、その参照を確認します。 PhoneGapのダウンロード可能なバージョンのphonegap-2.0.0.Zipフォルダーから取得できます（ただし、Ripple Emulatorを使用する必要があります。上記を参照）。

  2. ChromeブラウザにChromeストアを使用してください。有効にします。

  3. ローカルWebサーバーを起動し、それを介してモバイルアプリケーションのHTMLコードを実行します（直接ファイルアクセスを介したテストは主にRipple Emulatorで可能ですが、あまりお勧めできず、予測できない結果が生じる可能性があります）。

  4. Ripple Emulatorアイコンをクリックして、Chrome omnibar）を右クリックし、Enableをクリックします（またはコンテキストメニューから適切なオプションを選択して、ページを右クリックします）。

  5. ライセンス契約に同意し、適切なプラットフォーム（Cordova 2.0.0）を選択します。

  6. リップルエミュレーターアイコンをもう一度クリックし、自動的に開始されない場合はStart Ripple Servicesをクリックします。

  7. 宛先プラットフォーム（デバイス）を設定し、ローカルでPhoneGapアプリケーションの作業を楽しんでください。

バージョンとAPIの違い

また、 PhoneGap API に注意を払って、PhoneGap 2.0.0で何が利用可能で、どのようにアクセス可能だったかを注意深く確認する必要がありますか？たとえば、それ以来、単純な接続タイプのチェックは変更されています。 2.9.0 API ではnavigator.connectionを介して行われますが、 2.0.0 API ではnavigator.networkインターフェイスでアクセスされました。

Ripple EmulatorはPhoneGap 2.0.0を使用しているため、現在サポートされているこのオブジェクトの呼び出し方法：

var networkState = navigator.connection.type;

失敗します。次のように使用する必要があります。

var networkState = navigator.network.connection.type;

PhoneGapのバージョンを選択することはできますが、PhoneGap Buildでコンパイルする場合（およびこのコードを変更せずにコンパイルすることを強制してバージョン2.0.0を使用することもできます）、PhoneGapの最新バージョンを使用してアプリケーションを開発することができます。

この場合、RippleとPhoneGapの両方で機能する「セキュリティで保護された」アプローチを使用する必要があります。

var networkState = ((navigator.connection) ? navigator.connection.type : ((navigator.network && navigator.network.connection) ? navigator.network.connection.type : 'unknown'));

または、いくつかの特別な変数を宣言できます。

var debugMode = typeof(window.tinyHippos) !== 'undefined';

スイッチとして使用します。

var networkState = (debugMode) ? navigator.network.connection.type : navigator.connection.type;

できれば、Rippleがすぐに最新のPhoneGapに更新されるので、このようなthingsを削除できます。

29
trejder

RippleはPhonegapの最新バージョンで動作しますが、Rippleが最新のPhonegapバージョンでまったく最新ではないため、ページの読み込み中にポップアップするいくつかの誤ったエラーメッセージが表示される場合があります。 Phonegap JSがページに含まれていることを確認してください。次の例を試してください-Rippleでうまく動作します：

<html>
    <head>
        <script type="text/javascript" charset="utf-8" src="cordova-2.8.0.js"></script>
        <script type="text/javascript">
        function deviceready() {
            console.log("Device ready");
            navigator.compass.watchHeading(function(heading){
                document.getElementById("heading").innerHTML = heading.trueHeading;
            },function(error){
                var errorType;
                switch(error.code){
                    case CompassError.COMPASS_NOT_SUPPORTED:
                        errorType = "Compass not supported";
                        break;
                    case CompassError.COMPASS_INTERNAL_ERR:
                        errorType = "Compass internal error";
                        break;
                    default:
                        errorType = "Unknown compass error";
                }
                document.getElementById("heading").innerHTML = errorType;
            });
        }
        document.addEventListener("deviceready", deviceready, true);
        </script>
    </head>
    <body>
        <h1>Test</h1>
        <p>Heading: <span id="heading"></span></p>
    </body>
</html>
1
DaveAlden