Google Git
Sign in
apache / netbeans-website-cleanup / refs/heads/asciidoc-features / . / src / content / kb / docs / webclient / cordova-gettingstarted_ja.html
blob: 84026bf0e3cb976b042d02d2440156188b2bc280 [file] [log] [blame]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="../../../netbeans.css">
<title>Cordovaアプリケーションの作成の開始</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="description" content="A tutorial that describes how to configure the IDE to create a mobile application using Cordova.">
<meta name="keywords" content="NetBeans, IDE, integrated development environment, jQuery, JavaScript, CSS, HTML5">
</head>
<body>
<!--
Copyright (c) 2014, Oracle and/or its affiliates. All rights reserved.
-->
<h1>Cordovaアプリケーションの作成の開始</h1>
<p>
このドキュメントでは、モバイル・アプリケーションとしてパッケージされ、モバイル・デバイス・シミュレータで実行されるHTML5プロジェクトを、IDEで作成する方法を説明します。HTML5アプリケーションを作成する際、Apache Cordovaサイト・テンプレートを使用してアプリケーションを作成するオプションが用意されています。Apache Cordovaは、ネイティブ・モバイル・アプリケーションとしてパッケージされるHTML、CSSおよびJavaScriptでアプリケーションを開発できるAPIのグループを提供します。アプリケーションはモバイル・デバイスで実行され、GPSやカメラなどデバイスのネイティブ機能にアクセスできます。Cordova APIを使用することで、開発者はネイティブ・コードを記述せずにモバイル・アプリケーションをビルドできます。
</p>
<p>このドキュメントでは、Cordovaを使用してアプリケーションをインストールおよび開発するのに必要なソフトウェアをインストールする方法を説明します。Cordovaをインストールしたら、新規プロジェクト・ウィザードでCordovaテンプレートを使用してCordovaアプリケーションを作成します。その後、いくつかのコードを追加して、アプリケーションをモバイル・デバイス・シミュレータで実行します。このチュートリアルではiOSシミュレータを使用しますが、Androidデバイス・エミュレータを使用する場合も手順はほぼ同じです。</p>
<p class="tips">CordovaアプリケーションをAndroidエミュレータにデプロイする方法を紹介するスクリーンキャストを視聴するには、<a href="../web/html5-cordova-screencast.html">Cordova開発入門のビデオ</a>を参照してください。</p>
<!-- <p class="tips">For a tutorial on how to use jQuery in a NetBeans Java web application, see the tutorial
<a href="../web/js-toolkits-jquery.html">Using jQuery to Enhance the Appearance and Usability of a Web Page</a>.</p>-->
<h3>内容</h3>
<img alt="このページの内容は、NetBeans IDE 8.0に適用されます" class="stamp" src="../../../images_www/articles/80/netbeans-stamp.png" title="このページの内容は、NetBeans IDE 7.3に適用されます">
<ul class="toc">
<li><a href="#installcordova">Cordovaのインストール</a></li>
<li><a href="#createproject">Cordova HTML5プロジェクトの作成</a></li>
<li><a href="#editapp">ソース・コードの変更</a>
<ul>
<li><a href="#edithtml">HTMLファイルの編集</a></li>
<li><a href="#editconfig">Cordova構成の変更</a></li>
<li><a href="#editjs">JavaScriptファイルの編集</a></li>
</ul>
</li>
<li><a href="#debug">アプリケーションのデバッグ</a></li>
<li><a href="#summary">サマリー</a></li>
<li><a href="#seealso">関連項目</a></li>
</ul>
<h4>このチュートリアルを完了するには、次のリソースが必要です。</h4>
<table id="requiredSoftware">
<tbody>
<tr>
<th class="tblheader" scope="col">ソフトウェアまたはリソース</th>
<th class="tblheader" scope="col">必須バージョン</th>
</tr>
<tr>
<td class="tbltd1"><a href="https://netbeans.org/downloads/index.html">NetBeans IDE、Java</a></td>
<td class="tbltd1">8.0</td>
</tr>
<tr>
<td class="tbltd1"><a href="http://www.oracle.com/technetwork/java/javase/downloads/index.html">Java Development Kit (JDK)</a></td>
<td class="tbltd1">バージョン7</td>
</tr>
<!-- <tr>
<td class="tbltd1"><a href="http://www.google.com/chrome">Chrome Browser</a></td>
<td class="tbltd1">--</td>
</tr>-->
<!-- <tr>
<td class="tbltd1"><a href="https://chrome.google.com/webstore/detail/netbeans-connector/hafdlehgocfcodbgjnpecfajgkeejnaa?utm_source=chrome-ntp-icon">NetBeans Connector Extension for Chrome</a></td>
<td class="tbltd1">1.0.0</td>
</tr>-->
<tr>
<td class="tbltd1"><a href="http://cordova.apache.org/">Apache Cordova</a></td>
<td class="tbltd1">--</td>
</tr>
<tr>
<td class="tbltd1"><a href="http://nodejs.com/">NodeJS</a></td>
<td class="tbltd1">--</td>
</tr>
<tr>
<td class="tbltd1"><a href="http://git-scm.com/">Git</a></td>
<td class="tbltd1">--</td>
</tr>
<tr>
<td class="tbltd1">モバイル・プラットフォームSDK<br /></td>
<td class="tbltd1">Androidまたは<br />iOS</td>
</tr>
</tbody>
</table>
<p><strong class="notes">注意: </strong></p>
<ul>
<li>このドキュメントでは、互換性のあるターゲット・モバイル・プラットフォームSDKとデバイス・エミュレータがすでにインストールされていることを想定して書かれています</li>
<li>このドキュメントは、HTML、CSSおよびJavaScriptについて基本的な知識またはプログラミング経験を持つ読者を想定して書かれています。NetBeans IDEでのHTML5サポートの詳細は、<a href="html5-gettingstarted.html">HTML5アプリケーションの開始</a>を参照してください。</li>
</ul>
<!-- ++++++++++++++++ Installing Cordova ++++++++++++++++ -->
<a name="installcordova"></a>
<h2>Cordovaのインストール</h2>
<p>HTML5アプリケーションをネイティブ・モバイル・アプリケーションとしてNetBeans IDEにパッケージするには、ローカル・システムにCordovaをインストールする必要があります。Cordovaのインストールおよび更新には、NodeJSパッケージ・マネージャ、<strong>npm</strong>を使用します。Gitがローカル・システムにインストールされ、適切に構成されていることも確認する必要があります。アプリケーションをネイティブ・モバイル・アプリケーションとしてパッケージする際、CordovaはGitを使用して必要なCordovaソース・ファイルをリポジトリから取得します。</p>
<p>この課題では、次のほとんどの手順をターミナル・ウィンドウで実行します。</p>
<ol>
<li>Node.jsがまだインストールされていない場合、ダウンロードしてインストールします。
<p><a href="http://nodejs.org">Node.jsサイト</a>からインストーラをダウンロードできます。</p></li>
<li>ターミナル・ウィンドウを開きます。</li>
<li>次のコマンドを実行して、Node.jsがインストールされていることを確認します。
<pre class="examplecode">$ node -v</pre>
<p>node.jsがインストールされている場合、ターミナル・ウィンドウにバージョンが出力されます。</p>
<p class="notes"><strong>注意:</strong></p>
<div class="indent">
<ul>
<li>プロキシの内側にいる場合は、プロキシを使用してネットワークにアクセスするようにnode.jsを構成する必要があります。次のコマンドを実行してプロキシを設定できます。<tt>http://proxy:8080</tt>をお使いのプロキシに置き換えます。
<pre class="examplecode">$ sudo npm config set proxy http://proxy:8080
$ sudo npm config set https-proxy http://proxy:8080</pre>
<p>次のコマンドを実行して、現在の構成設定を表示できます。 </p>
<pre class="examplecode">$ npm config list</pre>
</li>
<li>node.jsの構成の詳細は、<a href="https://npmjs.org/doc/config.html">https://npmjs.org/doc/config.html</a>を参照してください。</li>
</ul>
</div>
</li>
<li>次のコマンドを実行して、Cordovaをインストールします。
<pre class="examplecode">$ npm install -g cordova</pre>
<p class="notes"><strong>注意:</strong></p>
<div class="indent">
<ul>
<li>インストール・コマンドの実行時にターミナル・ウィンドウにエラー・メッセージが表示される場合は、プロキシ構成が正しいことを確認してください。</li>
<li>次のコマンドを実行して、Cordovaを最新バージョンに更新できます。
<pre class="examplecode">$ npm update -g cordova</pre>
</li>
</ul>
</div>
</li>
<li>次のコマンドを実行して、Cordovaがインストールされていることを確認し、バージョンを表示します。
<pre class="examplecode">$ cordova --version</pre>
<p>Cordovaがインストールされている場合、ターミナル・ウィンドウにバージョンが出力されます。</p>
</li>
<li>Gitバージョン管理システムがまだインストールされていない場合、ダウンロードしてインストールします。
<p><a href="http://git-scm.com/">Gitサイト</a>からインストーラをダウンロードできます。</p>
<p class="notes"><strong>注意:</strong>Path環境にGitを追加する必要があります。</p></li>
<li>次のコマンドを実行して、Gitがインストールされていることを確認します。
<pre class="examplecode">$ git --version</pre>
<p>Gitがインストールされている場合、ターミナル・ウィンドウにバージョンが出力されます。</p>
<p class="notes"><strong>注意:</strong></p>
<div class="indent">
<ul>
<li>プロキシの内側にいる場合は、プロキシを使用してネットワークにアクセスするようにGitを構成する必要があります。次のコマンドを実行してプロキシを設定できます。<tt>http://proxy:8080</tt>をお使いのプロキシに置き換えます。
<pre class="examplecode">$ git config --global http.proxy http://proxy:8080
$ git config --global https.proxy http://proxy:8080</pre>
<p>次のコマンドを実行して、現在の構成設定を表示できます。 </p>
<pre class="examplecode">$ git config --list</pre>
</li>
<li>Gitの構成の詳細は、<a href="http://git-scm.com/book/en/Getting-Started-First-Time-Git-Setup">http://git-scm.com/book/en/Getting-Started-First-Time-Git-Setup</a>で設定手順を参照してください。</li>
</ul>
</div>
</li>
</ol>
<p>これで、IDEでネイティブ・モバイル・アプリケーションの開発およびパッケージに必要なすべてのツールがインストールされました。次の課題では、新規プロジェクト・ウィザードを使用してアプリケーションを作成します。</p>
<!-- ++++++++++++++++ Creating the Project ++++++++++++++++ -->
<a name="createproject"></a>
<h2>Cordovaアプリケーションの作成</h2>
<p>この課題では、IDEで新規プロジェクト・ウィザードを使用して新しいCordovaアプリケーションを作成します。Cordovaアプリケーションを作成するには、新規プロジェクト・ウィザードで「CordovaのHello World」テンプレートをサイト・テンプレートとして選択します。Cordovaアプリケーションは、追加のライブラリと構成ファイルを伴ったHTML5アプリケーションです。既存のHTML5アプリケーションがある場合は、IDEで「プロジェクト・プロパティ」ウィンドウを使用して、Cordovaソースおよびアプリケーションのパッケージに必要な他のファイルをCordovaアプリケーションとして追加できます。</p>
<p>このチュートリアルでは、<tt>index.html</tt>ファイルといくつかのJavaScriptおよびCSSファイルがある、非常に基本的なHTML5プロジェクトを作成します。ウィザードでプロジェクトを作成する際には、いくつかのjQuery JavaScriptライブラリを選択します。</p>
<ol>
<li>メイン・メニューで「ファイル」→「新規プロジェクト」([Ctrl]-[Shift]-[N]、Macの場合は[⌘]-[Shift]-[N])を選択して新規プロジェクト・ウィザードを開きます。</li>
<li><strong>HTML5</strong>カテゴリを選択し、<strong>「Cordovaアプリケーション」</strong>を選択します。「次」をクリックします。<br> <img alt="新規プロジェクト・ウィザードのCordovaアプリケーション・テンプレートのスクリーンショット" class="margin-around b-all" src="../../../images_www/articles/80/webclient/cordova-getstart/cordova-newproject-wizard1.png" title="新規プロジェクト・ウィザードのCordovaアプリケーション・テンプレート">
</li>
<li>「プロジェクト名」に<strong>「CordovaMapApp」</strong>と入力し、プロジェクトを保存するコンピュータ上のディレクトリを指定します。「次」をクリックします。</li>
<li>手順3の「サイト・テンプレート」で「オンライン・テンプレートをダウンロード」が選択され、リストで「CordovaのHello World」が選択されていることを確認します。「次」をクリックします。<br> <img alt="新規HTML5アプリケーション・ウィザードの「サイト・テンプレート」パネルのスクリーンショット" class="margin-around b-all" src="../../../images_www/articles/80/webclient/cordova-getstart/cordova-newproject-wizard2.png" title="新規HTML5アプリケーション・ウィザードの「サイト・テンプレート」パネル">
<p><strong class="notes">注意:</strong> リストのオンライン・テンプレートの1つに基づくプロジェクトを作成するにはオンラインになっている必要があります。</p></li>
<li>手順4の「JavaScriptファイル」では、「使用可能」ペインで<tt>jquery</tt>および<tt>jquery-mobile</tt> JavaScriptライブラリを選択し、右矢印ボタン(&nbsp;>&nbsp;)をクリックして、選択したライブラリをウィザードの「選択済」ペインに移動します。デフォルトでは、ライブラリはプロジェクトの「<tt>js/libraries</tt>」フォルダに作成されます。このチュートリアルでは、「縮小」バージョンのJavaScriptライブラリを使用します。
<p class="tips">パネルのテキスト・フィールドを使用して、JavaScriptライブラリのリストをフィルタできます。たとえば、フィールドに<strong>「jq」</strong>と入力して、<tt>jquery</tt>ライブラリを探します。[Ctrl]を押しながらライブラリの名前をクリックして、複数のライブラリを選択できます。</p>
<img alt="新規HTML5アプリケーション・ウィザードの「JavaScriptライブラリ」パネルのスクリーンショット" class="margin-around b-all" src="../../../images_www/articles/80/webclient/cordova-getstart/cordova-newproject-wizard3.png" title="新規HTML5アプリケーション・ウィザードの「JavaScriptライブラリ」パネル">
<p class="notes"><strong>注意:</strong></p>
<ul>
<li>「バージョン」列でライブラリのバージョン番号をクリックして、旧バージョンのライブラリを選択できるポップアップ・ウィンドウを開くことができます。デフォルトでは、ウィザードには最新バージョンが表示されます。</li>
<li>JavaScriptライブラリの最小バージョンは、圧縮されたバージョンであり、エディタで表示するとコードは包括的に表示されません。</li>
</ul>
</li>
<li>手順5の「Cordovaサポート」ではデフォルト値を使用します。<strong>「終了」</strong>をクリックすると、ウィザードが完了します。
<p>「終了」をクリックすると、IDEによりプロジェクトが作成され、「プロジェクト」ウィンドウにプロジェクトのノードが表示され、エディタに<tt>index.html</tt>ファイルが開かれます。</p>
<img alt="「プロジェクト」ウィンドウのスクリーンショット" class="margin-around b-all" src="../../../images_www/articles/80/webclient/cordova-getstart/cordova-projects-window1.png" title="「プロジェクト」ウィンドウ">
<p>「プロジェクト」ウィンドウで「<tt>js/libs</tt>」フォルダを展開した場合、新規プロジェクト・ウィザードで指定したJavaScriptライブラリがプロジェクトに自動的に追加されたことがわかります。JavaScriptファイルを右クリックし、ポップアップ・メニューで「削除」を選択して、JavaScriptライブラリをプロジェクトから削除できます。</p>
<p class="tips">JavaScriptライブラリをプロジェクトに追加するには、プロジェクト・ノードを右クリックし、「プロパティ」を選択して、「プロジェクト・プロパティ」ウィンドウを開きます。「プロジェクト・プロパティ」ウィンドウの「JavaScriptライブラリ」パネルでライブラリを追加できます。または、ローカル・システムにあるJavaScriptファイルを「<tt>js</tt>」フォルダに直接コピーできます。</p>
<p>これで、プロジェクトが実行され、ターゲット・モバイル・デバイスのエミュレータにデプロイされていることをテストできます。</p>
</li>
<li>ツールバーのブラウザ選択アイコンをクリックし、表の「Cordova」列でターゲット・モバイル・デバイス・エミュレータが選択されていることを確認します。「Cordova」列では、「Androidエミュレータ」または「iOSシミュレータ」を選択できます(OS XおよびXCodeが必要)。<br> <img alt="ツールバーのドロップダウン・リストのスクリーンショット" class="margin-around b-all" src="../../../images_www/articles/80/webclient/cordova-getstart/cordova-select-browser.png" title="ツールバーのドロップダウン・リストで選択されたブラウザ"></li>
<li>ツールバーの「実行」アイコンをクリックします。</li>
</ol>
<p>「実行」を選択すると、IDEでCordovaアプリケーションがエミュレータにデプロイされます。</p>
<img alt="iOSシミュレータでのアプリケーションのスクリーンショット" class="margin-around " src="../../../images_www/articles/80/webclient/cordova-getstart/cordova-ios7-run.png" title="iOSシミュレータでのアプリケーション">
<p class="notes"><strong>注意:</strong>iOSシミュレータにデプロイする場合、シミュレータは自動的に開きます。アプリケーションをAndroidエミュレータにデプロイする場合は、アプリケーションを実行する前に、エミュレータを構成して起動する必要があります。CordovaアプリケーションをAndroidエミュレータにデプロイする方法を紹介するスクリーンキャストを視聴するには、<a href="../web/html5-cordova-screencast.html">Cordova開発入門のビデオ</a>を参照してください。</p>
<!-- ++++++++++++++++ Editing the HTML File ++++++++++++++++ -->
<h2><a name="editapp"></a>アプリケーションの変更</h2>
<p>この課題では、<tt>index.html</tt>および<tt>index.js</tt>ファイルを編集します。「CordovaのHello World」テンプレートで生成されたコードを、アプリケーションでの現在の場所のマップを表示するコードに置き換えます。また、デフォルトのCordova構成を変更して、アプリケーションで不要なCordovaプラグインを削除します。
</p>
<div class="indent">
<h3><a name="edithtml"></a>HTMLファイルの編集</h3>
<p>この課題では、ソース・エディタでHTMLファイルを編集して、ライブラリとCSSファイルへの参照を追加し、ページ要素を追加します。</p>
<ol>
<li>エディタに<code>index.html</code>を開きます(まだ開いていない場合)。
<p>エディタで、IDEにより「CordovaのHello World」テンプレートに基づいていくつかのコードが生成されたことを確認できます。</p>
</li>
<li>エディタで、プロジェクトの作成時に追加したjQuery JavaScriptライブラリとCSSファイルへの参照を追加します。開始および終了<tt>&lt;head></tt>タグの間に次のコード(<strong>太字</strong>)を追加します。
<pre class="examplecode">&lt;html&gt;
&lt;head&gt;
&lt;meta charset=UTF-8&quot;&gt;
&lt;meta name=&quot;format-detection&quot; content=&quot;telephone=no&quot; /&gt;
&lt;meta name=&quot;viewport&quot; content=&quot;user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi&quot;&gt;
&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;css/index.css&quot; /&gt;
<strong>&lt;link rel=&quot;stylesheet&quot; href=&quot;js/libs/jquery-mobile/jquery.mobile.min.css&quot;/&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;js/libs/jquery/jquery.min.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;js/libs/jquery-mobile/jquery.mobile.min.js&quot;&gt;&lt;/script&gt;</strong>
&lt;title&gt;Hello World&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
...
&lt;/html&gt;</pre>
<p class="tips">「プロジェクト」ウィンドウでファイルへのパスを確認できます。また、エディタでコード補完を使用できます。</p>
<img alt="エディタでのコード補完のスクリーンショット" class="margin-around b-all" src="../../../images_www/articles/80/webclient/cordova-getstart/cordova-code-completion.png" title="エディタでのコード補完">
</li>
<li>Google Maps JavaScript APIへの次のリンクを、<code>&lt;head></code>タグの間に追加します。
<pre class="examplecode">&lt;script type="text/javascript" src="http://www.google.com/jsapi"&gt;&lt;/script&gt;</pre>
<p class="notes"><strong>注意:</strong>これは、非推奨になったJavaScript API v2へのリンクです。このチュートリアルではデモ目的でこのJavaScriptを使用していますが、実際のアプリケーションでは最新バージョンを使用する必要があります。</p>
</li>
<li><code>index.js</code>および<code>cordova.js</code> JavaScriptファイルへの次のリンクを除いて、<code>&lt;body></code>タグの間のすべてのコードを削除します。
<pre class="examplecode"> &lt;body&gt;
<strong>&lt;script type=&quot;text/javascript&quot; src=&quot;cordova.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;js/index.js&quot;&gt;&lt;/script&gt;</strong>
&lt;/body&gt;
&lt;/html&gt;</pre>
<p><code>index.js</code>ファイルは、プロジェクトの作成時に自動的に生成されました。このファイルは「プロジェクト」ウィンドウの<code>js</code>ノードの下にあります。<code>index.js</code>のコードは、チュートリアルの後半で変更します。</p>
<p><code>cordova.js</code>はCordovaアプリケーションのビルド時に生成されるため、「プロジェクト」ウィンドウには表示されません。</p>
</li>
<li><tt>body</tt>タグの間に次のコード(<strong>太字</strong>)を追加します。
<pre class="examplecode"> &lt;body&gt;
<strong>&lt;div data-dom-cache=&quot;false&quot; data-role=&quot;page&quot; id=&quot;mylocation&quot;>
&lt;div data-role=&quot;header&quot; data-theme=&quot;b&quot;>
&lt;h1 id=&quot;header&quot;&gt;Searching for GPS&lt;/h1&gt;
&lt;a data-role=&quot;button&quot; class=&quot;ui-btn-right&quot; onclick=&quot;showAbout()&quot;&gt;About&lt;/a&gt;
&lt;/div&gt;
&lt;div data-role=&quot;content&quot; style=&quot;padding:0;&quot;&gt;
&lt;div id=&quot;map&quot; style=&quot;width:100%;height:100%; z-index:50&quot;&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div data-role=&quot;footer&quot; data-theme=&quot;b&quot; data-position=&quot;fixed&quot; &gt;
&lt;h4&gt;Google Maps&lt;/h4&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div data-dom-cache=&quot;false&quot; data-role=&quot;page&quot; id=&quot;about&quot;&gt;
&lt;div data-role=&quot;header&quot; data-theme=&quot;b&quot;&gt;
&lt;a data-role=&quot;button&quot; data-rel=&quot;back&quot; href=&quot;#mylocation&quot; data-icon=&quot;arrow-l&quot; data-iconpos=&quot;left&quot; class=&quot;ui-btn-left&quot;&gt;Back&lt;/a&gt;
&lt;h1&gt;About&lt;/h1&gt;&lt;/div&gt;
&lt;div data-role=&quot;content&quot; id=&quot;aboutContent&quot;&gt;
&lt;/div&gt;
&lt;div data-role=&quot;footer&quot; data-theme=&quot;b&quot; data-position=&quot;fixed&quot; &gt;
&lt;h4&gt;Created with NetBeans IDE&lt;/h4&gt;
&lt;/div&gt;
&lt;/div&gt;
</strong>
&lt;script type="text/javascript" src="cordova.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="js/index.js"&gt;&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</pre>
</li>
</ol>
<h3><a name="editconfig"></a>Cordova構成の変更</h3>
<p>この課題では、アプリケーションにインストールされるCordovaプラグインのリストを変更します。</p>
<ol>
<li>「プロジェクト」ウィンドウでプロジェクト・ノードを右クリックし、ポップアップ・メニューで「プロパティ」を選択します。</li>
<li>カテゴリのリストで<strong>「Cordova」</strong>を選択します。<br> <img alt="「プロジェクト・プロパティ」ウィンドウの「Cordovaプラグイン」タブのスクリーンショット" class="margin-around b-all" src="../../../images_www/articles/80/webclient/cordova-getstart/cordova-properties-application.png" title="「プロジェクト・プロパティ」ウィンドウの「Cordovaプラグイン」タブ">
<p>「アプリケーション」タブを使用して、<code>config.xml</code>で指定されたアプリケーションのCordova構成詳細を表示および編集できます。</p></li>
<li>「Cordova」パネルで「プラグイン」タブをクリックします。
<p>「プラグイン」タブには2つのペインがあります。「使用可能」ペインには、現在使用可能なCordovaプラグインのリストが表示されます。</p>
<p>「選択済」ペインには、アプリケーションにインストールされているプラグインのリストが表示されます。「CordovaのHello World」テンプレートを使用してアプリケーションを作成すると、デフォルトですべてのプラグインがインストールされます。ほとんどのアプリケーションでは、すべてのプラグインは必要ありません。「プロジェクト・プロパティ」ウィンドウの「プラグイン」タブを使用して、アプリケーションで必要のないプラグインを削除できます。
</p>
<p class="notes"><strong>注意:</strong>エディタで<code>nbproject/plugins.properties</code>ファイルを編集して、インストールされているプラグインを編集することもできます。</p></li>
<li>Device API、Dialogs (Notifications)およびGeolocation以外のすべてのプラグインを削除します。「OK」をクリックします。 <br> <img alt="「プロジェクト・プロパティ」ウィンドウの「Cordovaプラグイン」タブのスクリーンショット" class="margin-around b-all" src="../../../images_www/articles/80/webclient/cordova-getstart/cordova-properties-plugins.png" title="「プロジェクト・プロパティ」ウィンドウの「Cordovaプラグイン」タブ">
</li>
</ol>
<h3><a name="editjs"></a>JavaScriptファイルの編集</h3>
<p>この課題では、テンプレートで生成されたJavaScriptコードを削除し、現在の場所のマップを表示するいくつかの簡易なメソッドを追加します。</p>
<ol>
<li>エディタで<code>index.js</code>を開きます。
<p>プロジェクトの作成時に、IDEで<code>index.js</code>にいくつかのボイラープレート・コードが生成されました。このアプリケーションでは、生成されたすべてのコードを削除できます。</p>
</li>
<li>生成されたコードを次のコードに置き換えます。変更を保存します。
<pre class="examplecode">var map;
var marker;
var watchID;
$(document).ready(function() {
document.addEventListener("deviceready", onDeviceReady, false);
//uncomment for testing in Chrome browser
// onDeviceReady();
});
function onDeviceReady() {
$(window).unbind();
$(window).bind('pageshow resize orientationchange', function(e) {
max_height();
});
max_height();
google.load("maps", "3.8", {"callback": map, other_params: "sensor=true&language=en"});
}
function max_height() {
var h = $('div[data-role="header"]').outerHeight(true);
var f = $('div[data-role="footer"]').outerHeight(true);
var w = $(window).height();
var c = $('div[data-role="content"]');
var c_h = c.height();
var c_oh = c.outerHeight(true);
var c_new = w - h - f - c_oh + c_h;
var total = h + f + c_oh;
if (c_h < c.get(0).scrollHeight) {
c.height(c.get(0).scrollHeight);
} else {
c.height(c_new);
}
}
function map() {
var latlng = new google.maps.LatLng(50.08, 14.42);
var myOptions = {
zoom: 15,
center: latlng,
streetViewControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP,
zoomControl: true
};
map = new google.maps.Map(document.getElementById("map"), myOptions);
google.maps.event.addListenerOnce(map, 'tilesloaded', function() {
watchID = navigator.geolocation.watchPosition(gotPosition, null, {maximumAge: 5000, timeout: 60000, enableHighAccuracy: true});
});
}
// Method to open the About dialog
function showAbout() {
showAlert("Google Maps", "Created with NetBeans 7.4");
}
;
function showAlert(message, title) {
if (window.navigator.notification) {
window.navigator.notification.alert(message, null, title, 'OK');
} else {
alert(title ? (title + ": " + message) : message);
}
}
function gotPosition(position) {
map.setCenter(new google.maps.LatLng(position.coords.latitude, position.coords.longitude));
var point = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
if (!marker) {
//create marker
marker = new google.maps.Marker({
position: point,
map: map
});
} else {
//move marker to new position
marker.setPosition(point);
}
}</pre>
<p class="notes"><strong>注意:</strong>このチュートリアルでは、<code>onDeviceReady</code>メソッドの呼出しはコメントにされます。アプリケーションをモバイル・デバイス・エミュレータにデプロイする際に、このメソッドは不要であるためです。アプリケーションをWebブラウザで実行する場合は、<code>onDeviceReady</code>メソッドの呼出しをコメント解除する必要があります。</p>
</li>
<li>エミュレータを再起動するか設定をリセットして、エミュレータをリセットします。</li>
<li>ツールバーで「実行」をクリックして、アプリケーションをエミュレータにデプロイします。<br>
<p>iOSシミュレータで、アプリケーションが現在の場所を使用することを許可するよう求めるメッセージが表示されます。 </p>
<img alt="現在の場所をリクエストするダイアログ・ボックスのスクリーンショット" class="margin-around " src="../../../images_www/articles/80/webclient/cordova-getstart/cordova-ios7-run1.png" title="アプリケーションの場所のプロンプト">
<p>iOSシミュレータのメイン・メニューから「デバッグ」>「場所」>カスタム場所を選択してカスタム場所ダイアログ・ボックスを開き、iOSシミュレータでシミュレートされた場所をテストできます。</p>
<img alt="iOSシミュレータのカスタム場所ダイアログ・ボックスのスクリーンショット" class="margin-around b-all" src="../../../images_www/articles/80/webclient/cordova-getstart/cordova-ios-customlocation.png" title="iOSシミュレータのカスタム場所ダイアログ・ボックス">
<p>現在の場所として緯度フィールドに48.8582および経度フィールドに2.2945を入力すると、場所がエッフェル塔としてマップに表示されます。</p>
<img alt="iOSシミュレータでカスタム場所を使用する場合のアプリケーションのスクリーンショット" class="margin-around " src="../../../images_www/articles/80/webclient/cordova-getstart/cordova-ios7-run3.png" title="iOSシミュレータでカスタム場所を使用する場合のアプリケーション">
</li>
</ol>
</div>
<h2>アプリケーションのデバッグ</h2>
<p>この課題では、JavaScriptファイルにブレークポイントを設定して、アプリケーションを再度実行します。</p>
<ol>
<li>エミュレータをリセットまたは再起動します。</li>
<li>エディタで<code>index.js</code>を開きます。</li>
<li><code>gotPosition</code>メソッドの次の行で左マージンをクリックして、ブレークポイントを配置します。
<pre class="examplecode">var point = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);</pre>
</li>
<li>ツールバーの「実行」をクリックして、アプリケーションを再度実行します。
<p>アプリケーションを実行すると、アプリケーションが現在の場所を特定しようとしたときに、デバッガでブレークポイントにヒットします。</p>
<img alt="ブレークポイントで停止したデバッガのスクリーンショット" class="margin-around b-all" src="../../../images_www/articles/80/webclient/cordova-getstart/cordova-debug-breakpoint1.png" title="ブレークポイントで停止したデバッガ">
<p>変数の上にカーソルを置くと、その変数の詳細を示すツールチップが表示されます。<code>latitude</code>変数の上にカーソルを置くと、この変数の値がツールチップに表示されます。</p>
<img alt="変数を示すツールチップのスクリーンショット" class="margin-around b-all" src="../../../images_www/articles/80/webclient/cordova-getstart/cordova-debug-variables1b.png" title="変数を示すツールチップ">
<p><code>position</code>または<code>coords</code>の上にカーソルを置くと、ツールチップには、クリックしてツールチップを展開する矢印が表示されます。</p>
<img alt="変数を示すツールチップのスクリーンショット" class="margin-around b-all" src="../../../images_www/articles/80/webclient/cordova-getstart/cordova-debug-variables1a.png" title="変数を示すツールチップ">
<p>展開したツールチップには、値の詳細が表示されます。</p>
<img alt="変数を示すツールチップのスクリーンショット" class="margin-around b-all" src="../../../images_www/articles/80/webclient/cordova-getstart/cordova-debug-variables2.png" title="変数を示すツールチップ">
<p>この場合、「変数」ウィンドウで値を表示する方が簡単です。「変数」ウィンドウでは、現在の場所の緯度と経度を表示できます。</p>
<img alt="「変数」ウィンドウのスクリーンショット" class="margin-around b-all" src="../../../images_www/articles/80/webclient/cordova-getstart/cordova-debug-variables.png" title="「変数」ウィンドウ">
<p>「ネットワーク・モニター」ウィンドウでは、アプリケーション・リクエストのリストを表示できます。 </p>
<img alt="「変数」ウィンドウのスクリーンショット" class="margin-around b-all" src="../../../images_www/articles/80/webclient/cordova-getstart/cordova-network-monitor.png" title="「変数」ウィンドウ">
</li>
</ol>
<h2 id="summary">サマリー</h2>
<p>このチュートリアルでは、IDEでCordovaアプリケーションを作成するために必要なソフトウェアをインストールおよび設定する方法について学習しました。Cordovaアプリケーションを作成する方法について学習し、いくつかのCordova構成設定を変更しました。
</p>
<div class="feedback-box">
<a href="/about/contact_form.html?to=3&amp;subject=Feedback:%20Getting%20Started%20with%20Creating%20a%20Cordova%20Applications">このチュートリアルに関するご意見をお寄せください</a>
</div>
<br style="clear:both;">
<br>
<h2 id="seealso">関連項目</h2>
<p>IDEでのHTML5アプリケーションのサポートの詳細は、<a href="https://netbeans.org/">netbeans.org</a>で次のソースを参照してください。</p>
<ul>
<li>[ビデオ] <a href="../web/html5-cordova-screencast.html">Cordova開発入門</a></li>
<li><a href="html5-editing-css.html">HTML5アプリケーションでのCSSスタイル・シートの操作</a>。このチュートリアルで作成したアプリケーションを継続するドキュメントで、IDEでCSSのウィザードおよびウィンドウのいくつかを使用する方法、およびChromeブラウザの「検査」モードを使用してプロジェクト・ソース内の要素をビジュアルに特定する方法を示します。</li>
<li><a href="html5-js-support.html">HTML5アプリケーションでのJavaScriptのデバッグとテスト</a>。IDEでJavaScriptファイルをデバッグおよびテストするのに役立つツールをIDEが提供する方法を示すドキュメントです。</li>
<li><i>NetBeans IDEによるアプリケーションの開発</i>の<a href="http://www.oracle.com/pls/topic/lookup?ctx=nb8000&id=NBDAG2272">JavaScriptファイルの作成</a></li>
</ul>
<p>jQueryの詳細は、公式ドキュメントを参照してください。</p>
<ul>
<li>公式ホーム・ページ: <a href="http://jquery.com">http://jquery.com</a></li>
<li>UIホーム・ページ: <a href="http://jqueryui.com/">http://jqueryui.com/</a></li>
<li>チュートリアル: <a href="http://docs.jquery.com/Tutorials">http://docs.jquery.com/Tutorials</a></li>
<li>ドキュメントのメイン・ページ: <a href="http://docs.jquery.com/Main_Page">http://docs.jquery.com/Main_Page</a></li>
<li>UIデモおよびドキュメント: <a href="http://jqueryui.com/demos/">http://jqueryui.com/demos/</a></li>
</ul>
</body>
</html>