HTML5アプリケーションの開始
NetBeans IDE 7.3は、HTML5アプリケーションの開発を支援する新規プロジェクト・タイプを導入しています。このドキュメントは、IDEでHTML5プロジェクトを作成する方法と、プロジェクトでのJavaScriptおよびCSSの使用をサポートするIDEの機能の一部を示します。このドキュメントでは、jQuery JavaScriptライブラリを使用してWebページのリストを変更する単純なHTML5アプリケーションを作成します。
このドキュメントでは、Chrome WebストアからChromeブラウザのNetBeans Connector拡張機能をインストールする方法も示します。
チュートリアルのスクリーンショットを確認するには、HTML5アプリケーションの開始のビデオ を参照してください。
NetBeans Java WebアプリケーションでjQueryを使用する方法のチュートリアルは、チュートリアルjQueryを使用したWebページの外観と使いやすさの強化 を参照してください。
目次
このチュートリアルを完了するには、次のリソースが必要です。
注意:
プロジェクト・リソースzipファイル には、このチュートリアルでプロジェクトに追加する必要のあるJPGイメージとCSSファイルが含まれます。プロジェクトを動作中のソリューションと比較する場合は、完成したプロジェクトのサイト・テンプレート をダウンロードできます。
このドキュメントは、HTML、CSSおよびJavaScriptについて基本的な知識またはプログラミング経験を持つ読者を想定して書かれています。
ChromeブラウザでのIDEの使用
HTML5アプリケーション開発をサポートする、IDEで使用可能なツールの一部をフルに活用するには、Chromeブラウザを使用し、Chrome Webストア からNetBeans Connector拡張機能をインストールすることをお薦めします。拡張機能をインストールする必要があるのは1回のみです。
インストールすると、NetBeans Connector拡張機能は、ChromeブラウザでNetBeans HTML5プロジェクトを実行する際にURLの場所バーからアクセス可能なNetBeansアクション・メニューを追加します。NetBeansアクション・メニューでは、NetBeansでの検査モードを有効にし、ブラウザ・ウィンドウを一般的な表示デバイスのサイズにすばやく変更できます。JavaScriptデバッガも、HTML5アプリケーションを実行すると自動的に有効になります。
Chrome Webストアからの拡張機能のインストール
IDEからNetBeans HTML5アプリケーション・プロジェクトを実行し、NetBeans統合でターゲット・ブラウザとしてChromeを選択した場合は、NetBeans Connector拡張機能のインストールを確認するプロンプトが自動的に表示されます。この課題では、ダミーのHTML5プロジェクトを作成および実行することで拡張機能をインストールする方法を示します。この課題をスキップし、IDEから求められた場合に拡張機能をインストールするか、NetBeans Connector拡張機能をChrome Webストアから直接インストールすることもできます。
注意: IDEにより、Chrome Webストアがデフォルト・ブラウザに開きます。ChromeがIDEのデフォルト・ブラウザとして設定されていない場合は、次の手順を実行する前に、「オプション」ウィンドウを開き、「一般」カテゴリの「Webブラウザ」ドロップダウン・リストで「Chrome」を選択する必要があります。
「ファイル」>「新規プロジェクト」を選択し、新規プロジェクト・ウィザードを開きます。
HTML/JavaScriptカテゴリで「HTML5アプリケーション」を選択します。「次」をクリックします。
プロジェクトの「名前と場所」を指定します。「次」をクリックします。
この課題では、名前は重要ではありません。
「サイト・テンプレートなし」を選択します。「終了」をクリックします。
「終了」をクリックすると、IDEにより新規HTML5プロジェクトが作成され、index.html がエディタに開きます。
NetBeans統合のあるChromeがツールバーのドロップダウン・リストで選択されていることを確認します。
ツールバーの「実行」をクリックします。
「Chrome拡張機能のインストール」ダイアログ・ボックスで「Chrome Webストアへ移動」をクリックします。「Chrome Webストアへ移動」をクリックすると、ChromeブラウザにChrome WebストアのNetBeans Connectorページが開きます。
注意: 「Chrome拡張機能のインストール」では、拡張機能がインストールされた後にクリックするボタンが表示されます。
Chromeブラウザに移動し、NetBeans ConnectorページでChromeに追加をクリックします。拡張機能を追加するかどうかを確認するプロンプトが表示されたら、「追加」をクリックします。拡張機能がインストールされると、拡張機能が追加されたことを示す通知が表示され、ChromeブラウザでNetBeans HTML5プロジェクトを実行するとNetBeans ConnectorアイコンがURLの場所バーに表示されます。
IDEで、「Chrome拡張機能のインストール」ダイアログ・ボックスの「プロジェクトの再実行」をクリックします。
「プロジェクトの再実行」をクリックすると、Chromeブラウザに新しいタブが開き、HTML5アプリケーションの索引ページが表示されます。
拡張機能がインストールされると、ChromeブラウザでNetBeans HTML5プロジェクトを実行したときにNetBeans ConnectorアイコンがURLの場所バーに表示されます。
ChromeブラウザでChromeの「拡張機能」ページ(chrome://extensions/ )を開くと、拡張機能が有効になっています。
注意: または、次の手順を実行して、NetBeans Connector拡張機能をChrome Webストアから直接インストールできます。
Chromeブラウザを起動し、Chrome Webストア に移動します。
Chrome WebストアでNetbeans Connector拡張機能を検索します。
検索結果ページでChromeに追加をクリックし、拡張機能の追加を確認するプロンプトが表示されたら「追加」をクリックします。
拡張機能のオフライン・インストール
Chrome Webストアに接続できない場合は、IDEにバンドルされているNetBeans Connector拡張機能をインストールできます。NetBeans HTML5プロジェクトを実行し、NetBeans Connector拡張機能のインストールを求められた場合に、Chrome Webストアにアクセスできない場合は、次の手順を実行して拡張機能をインストールできます。
「Chrome拡張機能のインストール」ダイアログ・ボックスで接続なしをクリックします。
ダイアログ・ボックスの検索 をクリックして、ローカル・システム上のnetbeans-chrome-connector.crx
ChromeブラウザでChromeの「拡張機能」ページ(chrome://extensions/ )を開きます。
netbeans-chrome-connector.crx 拡張機能をブラウザの「拡張機能」ページにドラッグし、「追加」をクリックして、拡張機能を追加することを確認します。
拡張機能が追加されると、NetBeans Connector拡張機能がインストール済拡張機能のリストに追加されていることが表示されます。
「Chrome拡張機能のインストール」ダイアログ・ボックスで「はい、プラグインをただちにインストールします」 をクリックして、ChromeブラウザにNetBeans HTML5プロジェクトを開きます。ブラウザ・タブの場所バーにNetBeans Connectorアイコンが表示されます。
埋込みWebKitブラウザの使用
アプリケーションを開発している場合は、NetBeans Connector拡張機能がインストールされたChromeブラウザでHTML5を実行することをお薦めします。HTML5アプリケーションを作成する場合は、実行ターゲットとしてNetBeans統合のあるChrome がデフォルトで選択されています。ただし、IDEにバンドルされている埋込みWebKitブラウザでHTML5アプリケーションを実行することもできます。
埋込みWebKitブラウザでHTML5アプリケーションを実行すると、「Webブラウザ」ウィンドウがIDEに開かれます。埋込みWebKitブラウザでは、「検査」モード、各種画面サイズ・オプション、JavaScriptデバッグなど、NetBeans Connector拡張機能がインストールされている場合にChromeブラウザで有効になる機能の多くがサポートされます。
注意: メイン・メニューで「ウィンドウ」→「Web」→「Webブラウザ」を選択すると、IDEによって、「オプション」ウィンドウで「Webブラウザ」として指定されたブラウザが開かれます。
次の手順を実行して、埋込みWebKitブラウザでHTML5アプリケーションを実行します。
ツールバーのドロップダウン・リストで「埋込みWebKitブラウザ」を選択します。
ツールバーで「実行」をクリックするか、「プロジェクト」ウィンドウでプロジェクト・ノードを右クリックして「実行」を選択します。
アプリケーションを実行すると、IDEに「Webブラウザ」ウィンドウが開きます。
「Webブラウザ」タブのツールバーでアイコンをクリックして「検査」モードを有効にし、異なる表示サイズ間をすばやく切り替えることができます。
NetBeans HTML5プロジェクトの作成
この課題では、IDEの新規プロジェクト・ウィザードを使用して新規HTML5プロジェクトを作成します。このチュートリアルでは、index.html ファイルのみ持つ非常に基本的なHTML5プロジェクトを作成します。ウィザードでは、プロジェクトで使用するいくつかのjQuery JavaScriptライブラリも選択します。
メイン・メニューで「ファイル」→「新規プロジェクト」([Ctrl]-[Shift]-[N]、Macの場合は[⌘]-[Shift]-[N])を選択して新規プロジェクト・ウィザードを開きます。
HTML/JavaScript カテゴリを選択し、「HTML5アプリケーション」 を選択します。「次」をクリックします。「プロジェクト名」に「HTML5Demo」 と入力し、プロジェクトを保存するコンピュータ上のディレクトリを指定します。「次」をクリックします。
手順3の「サイト・テンプレート」では、「サイト・テンプレートなし」を選択します。「次」をクリックします。「サイト・テンプレートなし」オプションを選択すると、ウィザードによって基本的な空のNetBeans HTML5プロジェクトが生成されます。ここで「終了」をクリックした場合、プロジェクトには「サイト・ルート」フォルダのみ含まれ、「サイト・ルート」フォルダにはindex.html ファイルのみ含まれます。
ウィザードの「サイト・テンプレート」ページでは、HTML5プロジェクトに対して一般的なオンライン・テンプレートのリストから選択するか、サイト・テンプレートの.zip アーカイブの場所を指定できます。.zip アーカイブのURLを入力するか、「参照」をクリックしてローカル・システム上の場所を指定できます。サイト・テンプレートに基づいてプロジェクトを作成すると、プロジェクトのファイル、ライブラリおよび構造はテンプレートによって決定されます。
注意: リストのオンライン・テンプレートの1つに基づくプロジェクトを作成するにはオンラインになっている必要があります。
手順4の「JavaScriptファイル」では、「使用可能」ペインでjquery およびjquerygui JavaScriptライブラリを選択し、右矢印アイコン( > )をクリックして、選択したライブラリをウィザードの「選択」ペインに移動します。デフォルトでは、ライブラリはプロジェクトの「js/libraries 」フォルダに作成されます。このチュートリアルでは、「縮小」バージョンのJavaScriptライブラリを使用します。
パネルのテキスト・フィールドを使用して、JavaScriptライブラリのリストをフィルタできます。たとえば、フィールドに「jq」 と入力して、jquery ライブラリを探します。[Ctrl]を押しながらライブラリの名前をクリックして、複数のライブラリを選択できます。
注意:
「バージョン」列でライブラリのバージョン番号をクリックして、旧バージョンのライブラリを選択できるポップアップ・ウィンドウを開くことができます。デフォルトでは、ウィザードには最新バージョンが表示されます。
JavaScriptライブラリの最小バージョンは、圧縮されたバージョンであり、エディタで表示するとコードは包括的に表示されません。
「終了」 をクリックすると、ウィザードが完了します。
「終了」をクリックすると、IDEによりプロジェクトが作成され、「プロジェクト」ウィンドウにプロジェクトのノードが表示され、エディタにindex.html ファイルが開かれます。
「プロジェクト」ウィンドウで「js/libs 」フォルダを展開した場合、新規プロジェクト・ウィザードで指定したJavaScriptライブラリがプロジェクトに自動的に追加されたことがわかります。JavaScriptファイルを右クリックし、ポップアップ・メニューで「削除」を選択して、JavaScriptライブラリをプロジェクトから削除できます。
JavaScriptライブラリをプロジェクトに追加するには、プロジェクト・ノードを右クリックし、「プロパティ」を選択して、「プロジェクト・プロパティ」ウィンドウを開きます。「プロジェクト・プロパティ」ウィンドウの「JavaScriptライブラリ」パネルでライブラリを追加できます。または、ローカル・システムにあるJavaScriptファイルを「js 」フォルダに直接コピーできます。
ここで、プロジェクトがChromeブラウザに正しく表示されることをテストできます。
NetBeans統合のあるChromeがツールバーのドロップダウン・リストで選択されていることを確認します。
「プロジェクト」ウィンドウでプロジェクト・ノードを右クリックし、「実行」を選択します。
「実行」を選択すると、IDEによってChromeブラウザにタブが開き、アプリケーションのデフォルトのindex.html ページが表示されます。
NetBeans Connectorがタブをデバッグしていることを示す黄色いバーがブラウザ・タブに表示されます。黄色いバーが表示されているときは、IDEとブラウザが接続され、相互に通信できます。IDEからHTML5アプリケーションを起動すると、JavaScriptデバッガが自動的に有効になります。ファイルに変更を保存するかCSSスタイル・シートに変更を加えた場合は、ブラウザ・ウィンドウが自動的に更新されて変更が表示されるため、ページを再ロードする必要はありません。
黄色いバーを閉じるか「取消」をクリックした場合は、IDEとブラウザ間の接続が切断されます。接続を切断した場合は、IDEからHTML5アプリケーションを再度実行する必要があります。
また、NetBeansアイコンがブラウザのURLの場所フィールドに表示されます。アイコンをクリックして、ブラウザの表示サイズの変更およびNetBeansでの検査モードの有効化を行う各種オプションを提供するメニューを開くことができます。
メニューでデフォルト・デバイスの1つを選択した場合、ブラウザ・ウィンドウがデバイスのサイズに変更されます。これにより、アプリケーションが選択したデバイスでどのように表示されるかを確認できます。HTML5アプリケーションは、通常、表示されるデバイスの画面サイズに対応するように設計されています。画面サイズに対応するJavaScriptおよびCSSルールを使用し、レイアウトがデバイスに対して最適化されるようにアプリケーションの表示方法を変更できます。
HTMLファイルの編集
この課題では、プロジェクトにプロジェクト・リソースを追加し、index.html ファイルを編集してリソースへのリンクを追加し、いくつかのCSSルールを追加します。JavaScriptと組み合せた場合に、いくつかの単純なCSSセレクタによってブラウザへのページの表示方法が大幅に変化する様子を確認します。
project resources アーカイブをダウンロードし、コンテンツを抽出します。
zipアーカイブには、プロジェクトに追加する必要のあるファイルを含む2つのフォルダ(pix およびcss )が含まれます。
pix およびcss フォルダを「サイト・ルート」フォルダにコピーします。
注意: プロジェクトのディレクトリ構造を参照する場合は、フォルダをpublic_html フォルダにコピーする必要があります。
エディタにindex.htmlを開きます(まだ開いていない場合)。
エディタで、開始および終了<head> タグの間に次のコード(太字)を追加することで、プロジェクトの作成時に追加したJavaScriptライブラリへの参照を追加します。
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="js/libs/jquery-1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="js/libs/jqueryui-1.9.2/jquery-ui.min.js"></script>
</head>
<body>
TODO write content
</body>
</html>
エディタでのコード補完の使用が役立つ場合があります。
デフォルトの「TODO write content」コメントを削除し、body タグの間に次のコードを入力します。
<body>
<div>
<h3><a href="#">Mary Adams</a></h3>
<div>
<img src="pix/maryadams.jpg" alt="Mary Adams">
<ul>
<li><h4>Vice President</h4></li>
<li><b>phone:</b> x8234</li>
<li><b>office:</b> 102 Bldg 1</li>
<li><b>email:</b>
m.adams
@
company.com
</li>
</ul>
<br clear="all">
</div>
<h3><a href="#">John Matthews</a></h3>
<div>
<img src="pix/johnmatthews.jpg" alt="John Matthews">
<ul>
<li><h4>Middle Manager</h4></li>
<li><b>phone:</b> x3082</li>
<li><b>office:</b> 307 Bldg 1</li>
<li><b>email:</b>
j.matthews
@
company.com
</li>
</ul>
<br clear="all">
</div>
<h3><a href="#">Sam Jackson</a></h3>
<div>
<img src="pix/samjackson.jpg" alt="Sam Jackson">
<ul>
<li><h4>Deputy Assistant</h4></li>
<li><b>phone:</b> x3494</li>
<li><b>office:</b> 457 Bldg 2</li>
<li><b>email:</b>
s.jackson
@
company.com
</li>
</ul>
<br clear="all">
</div>
<h3><a href="#">Jennifer Brooks</a></h3>
<div>
<img src="pix/jeniferapplethwaite.jpg" alt="Jenifer Applethwaite">
<ul>
<li><h4>Senior Technician</h4></li>
<li><b>phone:</b> x9430</li>
<li><b>office:</b> 327 Bldg 2</li>
<li><b>email:</b>
j.brooks
@
company.com
</li>
</ul>
<br clear="all">
</div>
</div>
</body>
変更を保存します。
変更を保存すると、ブラウザにページが自動的に再ロードされ、ページは次の図のようになります。
次のインラインCSSルールをファイルの<head> タグの間に入力します。
<style type="text/css">
ul {list-style-type: none}
img {
margin-right: 20px;
float:left;
border: 1px solid;
}
</style>
CSSルールを追加する際に、[Ctrl]-[Space]を押して、エディタでコード補完を使用します。
「ナビゲータ」ウィンドウを開くと、ページの現在の構造を確認できます。
スタイル・シートへの次のリンク(bold )を<head>タグの間に追加します。
<head>
...
<script type="text/javascript" src="js/libs/jqueryui-1.9.2/jquery-ui.min.js"></script>
<link type="text/css" rel="stylesheet" href="css/basecss.css">
...
</head>
basecss.css スタイル・シートは、jQuery "UI lightness"テーマのカスタムCSSスタイル・シートに定義されているCSSルールの一部に基づきます。
エディタにbasecss.css スタイル・シートを開き、スタイル・シートを変更して前の手順で追加したCSSルールを追加するか、CSSルールの新規スタイル・シートを作成できます。
<head> タグの間に次のコードを追加して、ページの要素がロードされる際にjQueryスクリプトを実行します。
<script type="text/javascript">
$(document).ready(function() {
});
</script>
</head>
jQueryは、動的に適用されるJavaScriptの属性と動作をDOM (Document Object Model)の要素に結び付けることによって機能します。この例で使用するjQuery命令は、DOMのすべての要素がブラウザにロードされた後にのみ実行される必要があります。jQuery動作はDOMの要素に接続されるので、期待する結果を得るにはこれらの要素がjQueryで使用できる必要があるため、これは重要です。jQueryは、$で表される、jQueryオブジェクトの後に続く組込みの(document).ready関数を使用して、これを処理してくれます。
この関数の次の省略バージョンを使用することもできます。
$(function(){
});
jQueryの命令は、JavaScriptメソッドの形式をとり、パラメータの配列を表すオプションのオブジェクト・リテラルを持ちます。また、適切なとき、つまりDOMが完全にロードされた後にのみ実行されるように、(document).ready関数内の中括弧{}の間に置く必要があります。
(document).ready関数内の中括弧{}の間に、次のコード(太字)を追加します。
<script type="text/javascript">
$(document).ready(function() {
$("#infolist").accordion({
autoHeight: false
});
});
</script>
</head>
このコードは、jQuery UIライブラリ に含まれるjQuery accordionウィジェット ・スクリプトを呼び出します。accordionスクリプトは、infolist として識別されているDOMオブジェクト内の要素を変更します。このコードで、#infolistは、値infolistのid属性を持つ一意のDOM要素に接続されたCSSセレクタです。これは、典型的なJavaScriptドット表記法(「.」)を使用して、accordion()メソッドを使用してこの要素を表示するjQuery命令に接続されています。
次の手順では、ページ内の要素をinfolist として識別します。
注意: 上記のスニペットでは、「autoHeight: false」も指定しています。これは、アコーディオン・ウィジェットが各パネルの高さをマークアップ内で最も高いコンテンツ部分に基づいて設定することを防止します。詳細は、アコーディオンのAPIドキュメント を参照してください。
index.htmlファイルの<head> セクションは次のようになります。
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="js/libs/jquery-1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="js/libs/jqueryui-1.9.2/jquery-ui.min.js"></script>
<link type="text/css" rel="stylesheet" href="css/basecss.css">
<style type="text/css">
ul {list-style-type: none}
img {
margin-right: 20px;
float:left;
border: 1px solid;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$("#infolist").accordion({
autoHeight: false
});
});
</script>
</head>
エディタ内で右クリックし、「フォーマット」を選択すると、コードの体裁を整えることができます。
次のidセレクタと値(太字)を追加することで、ページのコンテンツを囲む<div> 要素を変更します。
<body>
<div id="infolist" >
この<div>要素は、ページのコンテンツを囲みます(4セットの<h3>タグと、チュートリアルで前に追加した<div>タグ)。
「CSSルールの編集」ダイアログ・ボックスで、要素にセレクタを追加できます。次の方法で「CSSルールの編集」ダイアログ・ボックスを開くことができます。
CSSルール・ダイアログ・ボックスで、「セレクタ・タイプ」として「id 」を選択し、「セレクタ」として「infolist」 を入力します。「要素に変更を適用」が選択されていることを確認します。「プレビュー」フィールドに、変更された要素が表示されます。
ダイアログ・ボックスで「OK」をクリックすると、infolist セレクタのCSSルールがbasecss.css スタイル・シートに自動的に追加されます。
変更をindex.html に保存します([Ctrl]-[S]、Macの場合は[⌘]-[S])。
変更を保存すると、Webブラウザにページが自動的に再ロードされます。ページのレイアウトが変更され、basecss.css スタイル・シートに定義されているCSSスタイル・ルールがページで使用されています。下のリストのうち<h3> は開いていますが、その他は縮小されています。<h3> 要素をクリックしてリストを展開できます。
jQuery accordion関数は、infolist DOMオブジェクトに含まれるすべてのページ要素を変更します。「ナビゲータ」ウィンドウで、div id=infolist ノードの下の要素のすべてのノードがグレー表示され、JavaScriptで変更されたことを示しています。
「ナビゲータ」ウィンドウで要素を右クリックし、「ソースへ移動」を選択して、ソース・ファイル内のその要素の場所にすばやく移動できます。
サイト・テンプレートとしてのプロジェクトの保存
テンプレートとして使用できるサイト・テンプレートとしてプロジェクトを保存して、プロジェクトに基づく他のHTML5サイトを作成できます。サイト・テンプレートには、JavaScriptライブラリ、CSSファイル、イメージおよびHTMLファイルのテンプレートを含めることができます。IDEには、サイト・テンプレートに含めるファイルを選択できるウィザードが用意されています。
「プロジェクト」ウィンドウでプロジェクトを右クリックし、ポップアップ・メニューから「テンプレートとして保存」を選択します。
「名前」フィールドに「HTML5DemoSiteTemplate」 と入力し、テンプレートを保存する場所を指定します。
すべてのファイルが選択されていることを確認します。「終了」をクリックします。
ダイアログ・ボックスのツリーでノードを展開すると、サイト・テンプレートに含まれるファイルを確認できます。
サイト・テンプレートにindex.html ファイル、CSSスタイル・シート、プロジェクトに使用されるイメージおよびJavaScriptライブラリが含まれることを確認できます。サイト・テンプレートには、構成ファイルとテストを含めることもできます。
「保存」をクリックすると、IDEによってサイト・テンプレートが.zip アーカイブとして生成されます。
サイト・テンプレートに基づくプロジェクトを作成する場合は、新規プロジェクト・ウィザードの「サイト・テンプレート」パネルで.zip アーカイブの場所を指定します。
要約
このチュートリアルでは、いくつかのjQuery JavaScriptライブラリを使用する空のHTML5プロジェクトを作成する方法を学習しました。ChromeブラウザのNetBeans Connector拡張機能をインストールし、ブラウザでHTML5プロジェクトを実行する方法も学習しました。index.html ファイルを編集するときに、HTMLおよびCSSファイルの編集に役立ついくつかのツールがIDEによって提供されることを確認しました。
関連項目
IDEでのHTML5アプリケーションのサポートの詳細は、netbeans.org で次のソースを参照してください。
jQueryの詳細は、公式ドキュメントを参照してください。
)をクリックします。
