jQueryとBootstrapを追加して、モバイルフレンドリーでレスポンシブなWebアプリケーションを作成する


このシリーズのパート1では、IDEとしてNetbeansを使用して基本的なHTML 5プロジェクトを設定し、この言語の新しい仕様に追加されたいくつかの要素も紹介しました。

簡単に言うと、jQueryは、HTMLページでのクライアント側のスクリプトを大幅に簡素化できるクロスブラウザーおよびクロスプラットフォームのJavascriptライブラリと考えることができます。一方、Bootstrapは、HTML、CSS、およびJavascriptツールを統合して、モバイルフレンドリーでレスポンシブなWebページを作成する完全なフレームワークとして説明できます。

この記事では、HTML5コードをより簡単に記述できる2つの貴重なユーティリティであるjQueryとBootstrapを紹介します。 jQueryとBootstrapはどちらも、MITおよびApache 2.0ライセンスの下でライセンスされています。これらは、GPLと互換性があるため、フリーソフトウェアです。

基本的なHTML、CSS、およびJavascriptの概念は、このシリーズのどの記事でもカバーされていないことに注意してください。先に進む前に、まずこのトピックに慣れる必要があると思われる場合は、W3SchoolsのHTML5チュートリアルを強くお勧めします。

jQueryとBootstrapをプロジェクトに組み込む

jQueryをダウンロードするには、プロジェクトのWebサイト(http://jquery.com)にアクセスし、最新の安定バージョンの通知を表示するボタンをクリックします。

この記事の執筆時点では、完全なブラウザ互換性のためのv1.11.3(Internet Explorerバージョン6、7、および8を含む)または訪問者がこれらのバージョンのIEを使用しないことが確実な場合はv2.1.4です。

このガイドでは、この2番目のオプションを使用します。まだダウンロードリンクをクリックしないでください(次の図は、どちらが正しいオプションであるかを示すためだけのものです)。

圧縮された .min.js または非圧縮の .js バージョンのjQueryをダウンロードできることに気付くでしょう。前者は特にウェブサイト向けであり、ページの読み込み時間を短縮するのに役立ちます(したがって、Googleはサイトのランクを上げます)。後者は主に開発目的のコーダーを対象としています。

簡潔さと使いやすさのために、圧縮された(縮小された)バージョンをサイト構造内のscriptsフォルダーにダウンロードします。

圧縮された製品バージョンのリンクを右クリックし、[名前を付けてリンクを保存...]を選択して、指定されたディレクトリに移動します(パート1でプロジェクトを保存することを選択した場所に示されているパスを参照することをお勧めします)。

最後に、現在のダイアログの下部にある[保存]をクリックします。

次に、Bootstrapをプロジェクトに追加します。 http://getbootstrap.comにアクセスし、[DownloadBootstrap]をクリックします。次のページで、以下に示すように強調表示されたオプションをクリックして、縮小されたコンポーネントをすぐに使用できるようにzipファイルでダウンロードします。

ダウンロードが完了したら、ダウンロードフォルダーに移動し、ファイルを解凍して、強調表示されたファイルをプロジェクト内の指定されたディレクトリにコピーします。

# cd ~/Downloads
# unzip -a bootstrap-3.3.5-dist.zip
# cd bootstrap-3.3.5-dist
# cp css/bootstrap.min.css /home/gabriel/NetBeansProjects/TecmintTest/public_html/styles
# cp fonts/* /home/gabriel/NetBeansProjects/TecmintTest/public_html/fonts
# cp js/bootstrap.min.js /home/gabriel/NetBeansProjects/TecmintTest/public_html/scripts

Netbeansでサイトの構造を拡張すると、次のようになります。