あなたのアイデア次第で、面白いWebアプリケーションソフトが作れるかも。
jQueryとは、JavaScriptのライブラリの一種です。
JavaScriptのコード(プログラム)が簡単に書けるようになるため、
プログラミングがとても楽になります。
プログラマーを支援してくれるわけですね。
そして最大のメリットは、
jQueryのUIを使うと、ユーザーにとって操作性の良いアプリが作れるようになることです。
今回はその機能の一部だけでも感じてもらえたらと思います。
いろいろアイデアが広がると思いますよ。
それでは試してみましょう。
以下の3つのファイルを同じフォルダ内に保存してください。
単なるテストなので、フォルダの場所はどこでもかまいません。
ファイル名 test.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="test.css" rel="stylesheet" type="text/css">
<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<script type="text/javascript" src="test.js"></script>
<title>test</title>
</head>
<body>
<div id="test">あいうえお12345</div>
</body>
</html>
ファイル名 test.css
#test {
font-size:48px;
color:#0000cc;
}
ファイル名 test.js
$(document).ready(function(){
$("#test").draggable();
});
準備が出来たら、test.htmlをWebブラウザで開き、動作確認しましょう。
＊インターネットに接続していることが前提
画面上に文字列が表示されますよね。
これはhtmlファイルの中に記述した文字列です。
この文字列をマウスでドラッグ&ドロップすると・・・
なんと移動できてしまうのですｗ
このようにWebページに、様々な効果を加えることができるのが、jQueryのUIなのです。
もちろん、jQueryのUIを使うと、他にもいろんな効果を加えることができます。
【解説】
jQueryのUIを使えるようにするのは、とても簡単です。
WebページのHTMLのheadタグ部分に、たった2行加えるだけです。
<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
記述する順番は大事です。
先にjQuery本体をロードしてから、次にUIだからです。
test.htmlは、適当な文字を書いて、id名を付けているだけ。
test.cssは、文字の修飾です。
大事なのは、test.jsです。
プログラムのなかで、testという要素に対して、ドラッグ&ドロップできるようにしています。
$("#test").draggable();
たったこれだけ。
どうでしたか？
意外と簡単にjQueryのUIが使えますよね。
今回は一番初歩的で簡単な動作テストでしたが、
楽天ウェブサービスAPIの商品データと組み合わせると、何か面白いことができそうな予感がしますよね。
例えば、商品画像に動きを加えたりとか。文字に効果を加えるとか。
アイデアは無限に広がります。
jQueryはとても高機能なJavaScriptライブラリです。
興味がある方は試してみてください。
きっとプログラミングが楽しいですよ。
