|
jQuery を活用したWeb デザイン |
jQuery はウェブブラウザ用のJavaScriptコードをより容易に記述できるようにするために設計されたJavaScriptライブラリです。 公式Web site はこちらです。Web系の開発では、HTMLやCSS、JavaScriptなどの言語を使って開発を行います。中でも、JavaScriptのライブラリであるjQueryは必須スキルの一つになっています。 jQueryがJavaScriptのライブラリなら、元のJavaScriptを使えばいいんじゃないかな？と思う人もいるかもしれません。ですが、jQueryを使う大きなメリットがあります。それは「短いコードで実装できる」ということです。記述が長いと管理も大変だし、データも大きくなるので大変です。jQueryではその点を解消していると言えます。
（Last updated:2019/7/19)
jQuery の使い方の基本 |
jQuery を使用するためには、jQuery をダウンロードする必要があります。 ダウンロードはこのサイトからできます。このファイル "Download the compressed, production jQuery 3.4.1" をダウンロードします。圧縮されているので、サイズが小さくなっています。通常の使用では、このファイルで十分です。このファイルをファイル名 "jquery.min.js" と付けてホームページのディレクトリに保存します。
次に、HTMLのheadの中に以下のコードを追加します。
<head>
<!-- headの中に以下のように記述 -->
<script type="text/javascript" src="js/jquery.min.js"></script>
</head>
ここで、src=””のリンク先は、それぞれのパスで記述してください。これでjQueryのファイルが紐付けされて、実際にjQueryを使用できるようになりました。
ファイルをローカルにダウンロードせずに、cdn を用いて利用することもできます。こちらの方が便利かと思います。以下のように記述します。
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
まだ、テストページを作成していない場合は、以下のようなHTML ページを作成してください。
<!doctype html>
<html lang="ja" >
<head>
<meta charset="utf-8">
<title>Demo</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<script type="text/javascript">
$(function(){
// Your code goes here.
});
</script>
</body>
</html>jQuery のコードはどこに書けばいいのか？となるので、どこに書けば良いかを説明します。これも２つの方法があります。HTMLファイルの中に直接記述する方法、と、もうひとつはJavaScriptのファイルを作って記述する方法です。HTML ファイルの中に直接記述する場合には、HTML の head か body の中に<script> を使って記述できます。上のテストページでは、body 要素のなかに置いています。head 内に置く場合は、以下のような形式で使用します。
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
/* この中にjQueryのコードを記述 */
});
</script>
</head>
コードの先頭に、$(function(){ を配置する理由は後で説明します。
HTMLの中に直接記述せずに、別にファイルを作って記述する場合はテキストエディタなどで「sample.js」というように、jsの拡張子で保存します。Webサイトが保存されているサーバー上にアップロードしてください。ローカル環境で試しても大丈夫です。別にファイルを作った場合は同様に紐付けをしないと機能しないのでHTMLの head 内に以下のように記述します。
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript" src="js/sample.js"></script>
</head>
HTMLの中に全て記述するとHTMLのコードが長くなってしまうので、別ファイルを作ってまとめて管理する方法が分かりやすいと思います。
HTMLは上から順番に読み込まれていくので、HTMLのコードよりも先にjQueryが実行されると結果的にjQueryが動かないという不具合が起こります。これを避ける安全な方法は、以下の形式でjQuery コードを記述することです。
$( document ).ready(function() {
// Your code here.
});
// sample.jsのコード
// Shorthand for $( document ).ready()
$(function(){
/* ここにjQueryのコードを記述 */
});
とすることで、「ページの読み込みが終わったらjQueryを実行する」という処理ができます。
jQuery の使い方の例 |
jQueryは基本的な記述では「セレクタ」と「メソッド」で構成されています。jQueryの基本的な記述形式は
$('セレクタ').メソッド();
です。「セレクタ」の部分には、操作をする対象が入ります。対象となる要素をclass名・id名を使ったり、タグで直接指定したり、また複数指定したりできます。CSSで要素を指定する時と同じ書き方です。続いてメソッド部分には、指定した要素に何をするのかを書きます。メソッドは.（ドット）をつけてセレクタにつなげて書きます。メソッド部分は後述のカッコ内で「具体的にどんな処理をするのか」を細かく指定することができます。簡単な例は以下の通りです。
$(function(){
$('p').css('color','blue');
});
最初のセレクタでpタグを指定しました。メソッドでは「cssメソッド」を使います。.css(‘color’,’blue’); という記述をして、「文字を青にする」というコードになります。
セレクタとメソッドだけでは、インタラクティブなコンテンツは作成できません。インタラクティブなコンテンツを作成するためには「イベント」という仕組みが必要になります。イベントとは、ユーザーの操作（クリックなど）や状態の変化（読込完了など）に応じて発生する情報のことです。イベントの仕組みを使う構文は以下の形式で記述します。
$(function(){
$(セレクタ).イベント名(function(){
イベントが発生したときに実行したい処理のコード
});
});
この様に、イベントが発生したときに実行したい処理はメソッドの引数をfunctionで設定して記述します。以下の例をみてください。このコードは、p 要素をクリックするとき、console.log に You clicked a paragraph! と表示させる例です。
$(function(){
$( "p" ).click(function() {
console.log( "You clicked a paragraph!" );
});
});
click イベントの仕組みを用いた簡単な web ページのHTMLを完成させると、以下のような形式になります。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Demo</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<a href="http://jquery.com/">jQuery</a>
<script>
$(function(){
$( "a" ).click(function( event ) {
alert( "The link will no longer take you to jquery.com" );
event.preventDefault();
});
});
</script>
</body>
</html>このHTMLをブラウザで開くとweb ページが表示されます。セレクターで指定されたjQuery というリンクをクリックするというイベントが起きたら、alert が表示されます。event.preventDefault() は誤動作を避けるために置いたコードですので、無視してください。
CodePen という online web editer が便利なので、これを活用します。CodePen の editer 画面を開いて、HTMLという画面に、上記の最も単純なjQueryの例のHTMLをコピペすると、以下の表示になります。（ CodePen の取り扱い説明は以下の節で行います。）
See the Pen Untitled by mashyko (@mashyko) on CodePen.
Resultにwebの表示が出ます。webの「jQuery」ボタンをクリックしてください。ポップアップに The link will no longer take you to jquery.com と表示されます。
jQuery の使い方の例：popup-menu |
多数のイベントを取り扱うケースでは、on メソッドを活用することが便利です。上記と類似の click エベント処理を行う時、on メソッドを使って、以下のようにコーディングすることができます。
$(function(){
// Equivalent event setup using the `.on()` method
$( "p" ).on( "click", function() {
console.log( "click" );
});
});
また、例えば、div 要素をクリックした時に web にclick! と表示させるコードは .text メソッドを用いて以下のように記述します。
$(function(){
$("div").click(function (){
$("div").text("click!");
});
});
通常、一つの HTML ファイルで同一要素（例えば、div, p, a ）が多数回使用されています。こうしたケースに対応するためには、要素名以外に、id名あるいはclass名が指定されます。jQuery のコーディングでは、セレクタとしてid名、class 名を使用することもできます。以下に例を挙げます。
$(function(){
$(".menu").on("click", function() {
$(".popup")
.addClass("show")
.fadeIn();
// return false;
});
$(".close").on("click", function() {
$(".popup").fadeOut();
// return false;
});
});
この例では、セレクタとして、class名、.menu, .popup., .close が使用されています。class名"menu"で指定された要素をクリックすると、class名 "popup"の要素の記述が実行されて、webに表示されます。fadeIn が表示を実行するメソッドです。fadeOut は表示を消去するメソッドです。addClass はclass名"show"で指定されたstyleシートを加えています。これがなくても表示のstyleが変更されないだけです。
このイベント処理を利用したwebページを作成しましょう。CodePenのエディターで、上記のコードを用いたHTMLを完成させてみると、以下のようなwebが完成します。
See the Pen popup-menu by mashyko (@mashyko) on CodePen.
「閉じる」ボタンをクリックしてから表示をもとに戻してから、JavaScript Site Map というボタンをクリックすると、ポップアップが表示されます。そこにMenuのリストが並んでいます。画面の関係上、表示全体は見れませんが、仕組みは理解できると思います。このHTMLの主要部分を説明します。body内は以下の通りです。
<!-- beginning of popup menu: style指定とjavascript とセット-->
<button class="menu" id="fd00">JavaScript Site Map </button>
<div class="popup">
<div class="content">
<button class="close">閉じる</button>
<ul>
<li><A href="javascript.html">Webデザイン入門編のページ</A></li>
<li><A href="jquery.html">jQuery 活用のページ</A></li>
<li><A href="Python.html">Python Tutorials 入門編のページ</A></li>
</ul>
</div>
</div>
<!-- end of popup menu-->
<!-- ここから main body -->
<P>
jQuery はウェブブラウザ用のJavaScriptコードをより容易に記述できるようにするために設計されたJavaScriptライブラリです。
公式Web site は<a href="https://jquery.com/">こちらです</a>。
Web系の開発では、HTMLやCSS、JavaScriptなどの言語を使って開発を行います。
中でも、JavaScriptのライブラリであるjQueryは必須スキルの一つになっています。
jQueryがJavaScriptのライブラリなら、元のJavaScriptを使えばいいんじゃないかな？と思う人もいるかもしれません。
ですが、jQueryを使う大きなメリットがあります。
それは「短いコードで実装できる」ということです。記述が長いと管理も大変だし、データも大きくなるので大変です。jQueryではその点を解消していると言えます。</p>
このプログラムでは、２つのbutton要素が使用されています。<button class="menu">JavaScript<br>Site Map </button> と <button class="close">閉じる</button> です。これらのbuttonをクリックするというイベントが使用されています。一つ目のボタン"menu"をクリックすると、"popup"のコンテンツが"content"で指定されたstyleでポップアップ表示されます。ポップアップに表示された「閉じる」というボタン"close"をクリックすると、ポップアップが消去されます。
popup、contentなどのstyleの設定は以下のCSSコードの通りです。
<style>
.popup {
display: none;
height: 100vh;
width: 80%;
background: black;
opacity: 0.;
position: fixed;
top: 0;
left: 0;
}
.content {
background: #fff0f5;
padding: 20px;
width: 80%;
}
.show {
display: flex;
/* justify-content: center; */
/* align-items: center; */
}
button {
background-color:#fff0f5;
width:80px;
height:50px;
}
</style>
" display: none; "というコードは、webが表示された時点では、"popup"内の要素を表示しないという意味です。
次に、jQuery UI を用いたPopup機能の例を取り上げます。jQuery UI を活用すると、記述が大変シンプルになります。jQuery UI の活用方法については、このサイトを参考にしてください。JavaScript のコードは以下のようになります。
$( function() {
$( "#dialog" ).dialog({
autoOpen: false,
show: {
effect: "blind",
duration: 1000
},
hide: {
effect: "explode",
duration: 1000
}
});
$( "#opener" ).on( "click", function() {
$( "#dialog" ).dialog( "open" );
});
} );
このコードは dialog メソッドとアニメーションの effect を使用したものです。 show と hide メソッドの意味は容易に理解できます。HTML本体の記述は
<head>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<div id="dialog" title="dialog window">
<div class="content">
<ul>
<p> Site Menu</p>
<li><A href="#">Web 開発：その1</A></li>
<li><A href="#">Web 開発：その2</A></li>
<li><A href="#">Web 開発：その3</A></li>
<li><A href="#">Web 開発：その4</A></li>
<li><A href="#">Web 開発：その5</A></li>
</ul>
</div>
</div>
<div id="opener">
<p><font size='9'>
≡
</font></p>
</div>
<p>This is an animated dialog which is useful for displaying information. </p>
<p>The dialog window can be moved, resized and closed with the 'x' icon.</p>
</body>
とします。この例は hamgurger menu と呼ばれるボタンをクリックして、ポップアップ表示を実行するものです。ここコードでは、hamgurger menuを表示するのに<span></span>を使用せずに、記号フォントを用いています。
この例をCodePenのエディターで表現してみると
See the Pen query_4 by mashyko (@mashyko) on CodePen.
となります。hamgurger menuをクリックして、何が起こるか体験してください。CSSの部分はなくても動きますが、背景色を付けたかったのでstyle を設定しました。
CodePen を用いたWeb 開発 |
CodePenとはウェブ開発に必要なHTML, JS, CSSの三要素を実際の表示を見ながら開発できるウェブサービスです。CodePenを利用するためには、会員登録が必要になります。無料と有料の２種類があります。下記URLにアクセスして会員登録をします。
https://codepen.io/CodePenトップページにアクセスしたら、下の[Sign Up for free]をクリックします。するとフリープラン登録画面が表示されます。「YOUR NAME」には、CodePen内で使用する自分の名称を入力します。「CHOOSE A USERNAME」は、ユーザー名です。これがアカウントIDになります。メールアドレスを入力し、パスワードを決めて入力します。入力し終わったら「Submit」をクリックします。プロフィールの詳細を埋めてという画面が表示されますが、後でも設定できるので「Save＆Continue」をクリックします。登録完了です。
トップページに戻ると、ドロップダウンメニューが表示されるので、「Create」、[Pen]を選択します。HTML、CSS、Javascriptのコーディング画面が表示されます。
CodePenは、Webブラウザ上でHTML、CSS、Javascriptのコーディングができて、修正を加えると更新されてプレビューに反映されるので、リアルタイムでデザインを確認しながらWeb 開発ができます。主な機能は
コードをリアルタイムでプレビューできる
コードを公開・共有できる
他人のコードも編集できる
プレビュー画面をWebサイトに埋め込める
というところでしょう。
ここで、Webページに埋め込まれたCodePenのプレビュー画面の見方をかんたんに解説します。下の例にある通り、左上のバーに「HTML」とか「CSS」、「JS」、「Result」というボタンがあります。それぞれをクリックして選択中にすると、プレビュー画面に選択中のファイルが表示されます。「Result」はHTML/CSS/Javascriptのコーディングによる実行結果が反映されます。
See the Pen jquery-popup by mashyko (@mashyko) on CodePen.
上記のコーディングを自分のWeb サイトで表示したい時の埋め込み方法を説明します。Pen編集画面の下端右下にEmbedというボタンがあるのでクリックします。ウインドウ画面が表示され、下部に4つの埋め込みコードが用意されます。「HTML(Recommended)」を使用します。結果のコードをすべてコピーして、HTML にコピペします。
以下は、JQueryとUI を用いたPopup機能の例です。