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


手順4: アプリのプレビュー

PhoneGap DeveloperアプリPhoneGap Desktopをペアリングして使用すると、プラットフォームSDKのインストールやデバイスの登録、コードのコンパイルを行わなくても、デバイス上で直ちにアプリをプレビューすることができます。

PhoneGap Desktopは 、プロジェクトをホストする小さなWebサーバーを起動し、サーバーアドレスを返します。このサーバーアドレスを返すと、モバイルデバイスまたはデスクトップブラウザーで実行される PhoneGap Developer appに入力できます。 プロジェクトはプロジェクトの作成時に自動的に提供されますが、非アクティブなプロジェクトの横の緑の再生(** > **)ボタンをクリックして、手動で開始することもできます。

デスクトップブラウザーでのプレビュー

デスクトップブラウザーを利用して、最初の開発プロセスを迅速に進めるために、まずアプリをプレビューしてテストできます。 例えば、AngularやReactなどのフレームワークを使用している場合は、デバイスに移動する前に非常に役立つ、ブラウザーでこれらのフレームワークを特にデバッグするためのツールが用意されています。 最近、PhoneGapはブラウザープラットフォームをターゲットとして自動的にサポートし始め、 deviceready eventとApache Cordovaコアプラグインを使用して、既に慣れ親しんでいる環境で簡単にテストできるようになりました。

詳しくは、『 PhoneGap Browser Support Reference guide 』を参照してください。

デバイス上でのプレビュー

続行する前に、同じネットワーク上でデバイスとコンピューターが実行されていることを再度確認してください。
  1. 前の手順では、プロジェクトを作成し、緑色の再生ボタンがハイライト表示され、PhoneGap Desktopの下部にある緑色のバーにプロジェクトが実行されているサーバーのアドレスが表示されることを確認することによって、プロジェクトが実行されていることを確認しました。

    参考のため、もう一度スクリーンショットを以下に示します。 次の手順に進む前に、プロジェクトの具体的なサーバーアドレスを確認します。

  2. PhoneGap Developerアプリが実行されているモバイルデバイスに移動し、メイン画面にサーバーアドレスを入力して、「Connect」をタップします。

    **注意:** PhoneGap Developer Appの端末画面に表示されるサーバーアドレスを直接タップして、お使いのサーバーアドレスに合わせて変更します。 デフォルトで入力されている値はサンプルです。
    PhoneGap Developer App、iOS

    接続が確立され、以下のように成功したというメッセージが表示されます。 何らかのエラーが発生した場合は、デバイスとコンピューターの両方が同じネットワークに接続されていることをもう一度確認してください。 さらにヘルプが必要な場合は、問題追跡ツールPhoneGap Googleグループのリストを確認することもできます。

    デベロッパーアプリ、接続成功

    PhoneGap Developerアプリが接続されると、以下のようにアプリがロードされ、表示されます。

    開発アプリ、プレビュー
    **ヒント:**ジェスチャーは、アプリのプレビュー中に使用できます。 3本指でタップするとメイン画面に戻り、4本指でタップすると最新の状態に更新されます。

    サンプルビデオ

    更新

  3. では、一部のコードを更新し、変更のテストがいかに簡単であるかを確認しましょう。 お気に入りのテキストエディターを使用して、プロジェクトのwwwフォルダーにあるindex.htmlファイルを開きます (例:~/appSample/www/index.html)。

    **ヒント:**一般的な軽量で強力なエディターには、[Brackets](http://brackets.io/)、[Sublime Text](http://www.sublimetext.com/)、[Atom](https://atom.io/)などがあります。 コードヒントや先読みなど、豊富な機能とプラグインを備えたIDEをさらに多くお探しの場合は、[WebStorm by JetBrains](https://www.jetbrains.com/webstorm/)をご覧ください。
  4. 更新内容を選択します。 まず、アプリに表示されるPHONEGAPというテキストを、<h1>PhoneGap</h1>から<h1>Hello PhoneGap</h1>に変更します(デフォルトのプロジェクトでは、このテキストはCSSで大文字に変換されます)。 完了したら保存して、次の手順に進みます。

  5. ここでPhoneGap Developerアプリが実行されているモバイルデバイスを確認すると、アプリが再度ロードされ、次のテキストが自動的に表示されます。

    開発アプリの更新のプレビュー
  6. このワークフローに慣れるため、プロジェクトの更新を続行します。

    この時点で、こちらのガイドを確認する必要があります。ここでは、デフォルトのPhoneGapアプリに関する重要な詳細情報と、PhoneGapを使用したモバイルアプリの開発に関する一般的なヒントについて説明しています。

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

Translation by SYSTRAN