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


「Hello World」の説明

デフォルトのPhoneGapアプリを作成してプレビューするために必要なツールがインストールされました。少し時間をかけて、デフォルトアプリといくつかの重要な詳細を見ていきましょう。

viewport

index.htmlファイル(プロジェクトルートのwwwフォルダーにあります)を開きます。viewportメタ要素に注目してください。 これは、アプリのコンテンツによって使用される画面の大きさを示し、拡大/縮小方法を指定するために使用されます。 拡大/縮小とはズームレベルのことです。initial-scaleは、ロード時に必要なズームを示します。maximum-scaleminimum-scaleの値は、許可される最小値と最大値を制御し、user-scalableプロパティはユーザーに(たとえばピンチジェスチャーを通じて)拡大/縮小またはズーム係数の制御を許可するかどうかを制御します。

デフォルトアプリでは、設定はコンテンツを100%ロードし(initial-scale=1)、ユーザーによる拡大/縮小を禁止し(user-scalable=no)、デバイスの最大の幅と高さを使用するように設定されています。

<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1,
width=device-width, height=device-height, target-densitydpi=device-dpi" />

cordova.js

index.htmlファイルには、次のような、cordova.jsファイルを指し示すscriptタグがあります。

<script type="text/javascript" src="cordova.js"></script>

cordova.jsファイルはPhoneGapライブラリ(オープンソースのApache Cordovaプロジェクトによって動くため)、PhoneGapアプリのJavaScriptからネイティブデバイスハードウェア(カメラ、通信先、GPSなど)に具体的にアクセスするために使用されます。 このファイル参照を含めることで、Cordova APIはこれらの機能にアクセスできるようになり、使用可能になります。

ただし、フォルダーのどこにもcordova.jsがないことに気付く場合があります。 これは、CLIを使用してプロジェクトを構築している場合、プラットフォームの適切なバージョンがDeveloperアプリまたはPhoneGap CLIによって実行時に挿入されているためです。 参照を使用可能にする必要があります。

index.js

index.jsファイルは、index.html内の別のスクリプトタグで参照されている別のJavaScriptファイルです。 このファイルは独自のアプリでは不要ですが、このデフォルトアプリに固有のもので、Cordovaライブラリがロードされ、使用できる状態になったタイミングを判定するシンプルなロジックを追加するために使用されます。 これについては次のセクションで詳しく説明します。 index.htmlには、HTML bodyタグを閉じる直前に、app変数経由でinitialize関数を呼び出すための行が含まれています。

<script type="text/javascript">
  app.initialize();
</script>

これは、initialize関数を、www/jsフォルダーにあるindex.jsファイルで定義されているapp変数で呼び出します。 続行する前にそれを開きます。

deviceready

その他の重要なCordova固有の機能はdevicereadyイベントです。 このイベントは、CordovaデバイスAPIがロードされ、アクセスできる状態になったことを通知します。 このイベントに依存せずにCordova APIの呼び出しを開始すると、ネイティブコードがまだ完全に読み込まれておらず、使用できない状況に陥る可能性があります。 アプリは、通常、HTMLドキュメントのDOMがロードされると、以下のようにdocument.addEventListenerでイベントリスナーをアタッチします。デフォルトのHelloアプリでは以下のようになっています。

document.addEventListener('deviceready', this.onDeviceReady, false);

index.jsファイルに、デバイスが準備できたことを視覚的に表示するreceivedEvent関数を呼び出す、onDiscoveryReady関数があります。 表示された初期の<p>要素でCSS display属性をnoneに設定することでこれを行い、代わりに、display属性をblockに設定してindex.htmlのDevice is Ready要素を表示します。 以下に、index.jsからの関連するコードスニペットとindex.htmlブロックを示します。

index.js

onDeviceReady: function() {
  app.receivedEvent('deviceready');
},
  // Update DOM on a Received Event
receivedEvent: function(id) {
  var parentElement = document.getElementById(id);
  var listeningElement = parentElement.querySelector('.listening');
  var receivedElement = parentElement.querySelector('.received');

  listeningElement.setAttribute('style', 'display:none;');
  receivedElement.setAttribute('style', 'display:block;');

  console.log('Received Event: ' + id);
}

index.html

<div id="deviceready" class="blink">
  <p class="event listening">Connecting to Device</p>
  <p class="event received">Device is Ready</p>
</div>

その他の<meta/>タグ

デフォルトプロジェクトに含まれている他のいくつかのメタタグについてもここで説明します。

format-detection

<meta name="format-detection" content="telephone=no" />

このメタタグは、電話番号を認識し、そこから自動リンクを作成して暗黙的なクリックして電話サポートを提供するAppleの機能を表します。 ただし、これを有効にして、アドレス、ISBN番号、その他の数値などのあまりに多くの数値が選択される傾向にあるため、noに設定して無効にし、代わりにtel: スキーム(RFC 3966)をURLで使用することをお勧めします。 Appleでサポートされているこれらのメタタグの詳細については、このリンクを参照してください。

msapplication-tap-highlight

<meta name="msapplication-tap-highlight" content="no" />

このメタタグを使用すると、Windows Phone 8以降でタップ時のグレーのハイライトを無効にすることができます。 このプロパティは、iOS Safariの-webkit-tap-highlight-colorと似ていますが、CSSプロパティではなくHTMLメタ要素です。

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

Translation by SYSTRAN