Netbeansを使用してUbuntuで基本的なHTML5プロジェクトを作成する方法


この4記事のモバイルWeb開発シリーズでは、UbuntuでNetbeansをIDE(統合開発環境とも呼ばれます)としてセットアップし、モバイル対応でレスポンシブなHTML5Webアプリケーションの開発を開始する方法について説明します。

以下は、HTML5モバイルWeb開発に関する4つの記事シリーズです。

洗練された作業環境(後で説明します)、サポートされている言語のオートコンプリート、およびWebブラウザーとのシームレスな統合は、Netbeansの一部であり、最も際立った機能です。

HTML 5仕様は、開発者に多くの利点をもたらしたことも忘れないでください。たとえば、いくつかの例を挙げます。多くの新しい要素によるクリーンなコード)、組み込みのビデオおよびオーディオ再生機能(Flashの必要性を置き換える)、相互互換性主要なブラウザ、およびモバイルデバイスの最適化を使用します。

最初はローカル開発マシンでアプリケーションをテストしますが、最終的にはWebサイトをLAMPサーバーに移動し、動的ツールに変換します。

その過程で、jQuery(クライアント側のスクリプトを大幅に簡素化する有名なクロスプラットフォームJavascriptライブラリ)とBootstrap(レスポンシブWebサイトを開発するための一般的なHTML、CSS、およびJavaScriptフレームワーク)を利用します。これらのHTML5ツールを使用してモバイルフレンドリーなアプリケーションをセットアップするのがいかに簡単であるかについて、次の記事が表示されます。

この簡単なシリーズを終えると、次のことができるようになります。

  1. ここで説明するツールを使用して、基本的なHTML5動的アプリケーションを作成します。
  2. さらに高度なWeb開発スキルを学びましょう。

ただし、このシリーズではUbuntuを使用しますが、手順と手順は他のデスクトップディストリビューション(Linux Mint、Debian、CentOS、Fedoraなど)でも完全に有効であることに注意してください。

そのために、インストール方法として汎用tarball(.tar.gz)を使用して、必要なソフトウェア(NetbeansとJava JDK、後で説明します)をインストールすることを選択しました。

そうは言っても、パート1から始めましょう。

UbuntuへのJavaJDKのインストール

このチュートリアルは、Ubuntuデスクトップがすでにインストールされていることを前提としています。そうでない場合は、先に進む前にMateiCezarを参照してください。

Ubuntuの公式リポジトリからダウンロードできるNetbeansのバージョンは少し古くなっているため、OracleのWebサイトからパッケージをダウンロードして、新しいバージョンを入手します。

これを行うには、2つの選択肢があります。

  • 選択肢1:Netbeans + JDKを含むバンドルをダウンロードするか、
  • 選択肢2:両方のユーティリティを別々にインストールします。

この記事では#2を選択します。これは、ダウンロードが少し小さいだけでなく(HTML5とPHPをサポートするNetbeansのみをインストールするため)、必要に応じてスタンドアロンのJDKインストーラーを使用できるようにするためです。 Netbeansを必要とせず、Web開発を伴わない別のセット(主に他のOracle製品に関連)。

JDKをダウンロードするには、Oracle Technology Networkサイトにアクセスし、「Java」→「JavaSE」→「ダウンロード」セクションに移動します。

下で強調表示されている画像をクリックすると、使用許諾契約に同意するよう求められ、必要なJDKバージョン(この場合は64ビットマシンのtarball)をダウンロードできます。 Webブラウザーでプロンプトが表示されたら、ファイルを開くのではなく保存することを選択します。

ダウンロードが完了したら、〜/ Downloadsに移動し、tarballを/usr/local/binに解凍します。

$ sudo tar xf jdk-17_linux-x64_bin.tar.gz -C /usr/local/bin

UbuntuへのNetbeansのインストール

HTML5およびPHPをサポートするNetbeansをインストールするには、次のようにwgetコマンドに移動してダウンロードします。

$ cd ~/Downloads
$ wget https://dlcdn.apache.org/netbeans/netbeans/12.5/Apache-NetBeans-12.5-bin-linux-x64.sh
$ chmod 755 Apache-NetBeans-12.5-bin-linux-x64.sh
$ sudo ./Apache-NetBeans-12.5-bin-linux-x64.sh --javahome /usr/local/bin/jdk-17.0.1

それ以降は、画面の指示に従ってインストールを完了し、デフォルト値を残します。

インストールが完了するのを待ちます。

Ubuntuでの基本的なHTML5プロジェクトの作成

Netbeansを開くには、「ダッシュ」メニューからNetBeansを選択します。

Netbeansが提供する基本テンプレートを使用して新しいHTML5プロジェクトを作成するには、「ファイル」→「新規プロジェクト」→「HTML5」→「HTML5アプリケーション」に移動します。プロジェクトのわかりやすい名前を選択し、最後に[完了]をクリックします(現時点では、外部サイトテンプレートまたはJavaScriptライブラリを含めないでください)。

次に、Netbeans UIに移動します。ここで、必要に応じてサイトルートにフォルダとファイルを追加できます。私たちの場合、これは、フォント、画像、Javascriptファイル(スクリプト)、およびカスケードスタイルシート(スタイル)のフォルダーを追加して、今後の記事でコンテンツをより適切に整理できるようにすることを意味します。

フォルダまたはファイルを追加するには、サイトルートを右クリックし、[新規]→[フォルダまたはHTMLファイル]を選択します。

それでは、いくつかの新しいHTML5要素を紹介し、ページ本文を変更しましょう。

  1. は、それぞれドキュメントまたはセクションのヘッダーまたはフッターを定義します。
  2. は、ドキュメントのメインコンテンツを表し、中心的なトピックまたは機能が表示されます。
  3. は、いくつかの例を挙げると、画像やコードなどの自己完結型の素材に使用されます。
  4. は、
    要素のキャプションを表示するため、
    タグ内に配置する必要があります。


次に、次のコードスニペットをNetbeansの index.htmlファイルにコピーします。

ヒント:このウィンドウから開発環境にコピーして貼り付けるだけでなく、後で役立つNetbeansのオートコンプリート機能を視覚化するために、時間をかけて各タグを入力してください。

!DOCTYPE html>
<html>
	<head>
    	<title>TODO supply a title</title>
    	<meta charset="UTF-8">
    	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	</head>
	<body>
    	<header style="background-color: #6699CC">THIS IS A HEADER</header>
    	<main>
        	<article>
            	<p>This is some sample text.</p>
            	<p>Another line of sample text for this HTML 5 article</p>
                	<aside>
                    	<figure>
                        	<img src="https://www.w3.org/html/logo/downloads/HTML5_Logo_256.png" alt="HTML 5 logo" />
                        	<figcaption>Figure 1: The HTML 5 logo</figcaption>
                    	</figure>
                        	<h2>Web development basics series at Tecmint.com</h2>
                        	<h3><a href="http://dev.w3.org/html5/html-author/">This is HTML 5!</a></h3>
                        	<p>Some text here</p>
                	</aside>
        	</article>
    	</main>
    	<footer style="background-color: #CC6699">THIS IS A FOOTER</footer>
	</body>
</html>

このページを表示するには、Webブラウザ(下の画像のようにFirefoxが望ましい)を選択し、[再生]アイコンをクリックします。

これで、これまでの開発の進捗状況を確認できます。

概要

この記事では、HTML 5を使用してWebアプリケーションを作成し、UbuntuでNetbeansを使用して開発環境をセットアップすることの利点のいくつかを確認しました。

この言語の仕様により新しい要素が導入され、よりクリーンなコードを記述したり、Flashムービーなどのリソースを大量に消費するコンポーネントを組み込みのコントロールに置き換えたりできる可能性があることを学びました。

今後の記事では、jQueryとBootstrapを紹介します。これにより、これらのコントロールを使用してページの読み込みを高速化できるだけでなく、モバイルフレンドリーにすることもできます。

それまでの間、Netbeansの他のコントロールを自由に試してみてください。質問やコメントがあれば、以下のフォームを使用してお知らせください。