スポンサードリンク

楽天ウェブサービスとjQueryを使うとアイデアが広がる。

楽天ウェブサービス(WEB SERVICE)とjQueryを組み合わせると、アプリのアイデアが広がります。

あなたのアイデア次第で、面白い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ブラウザで開き、動作確認しましょう。

*インターネットに接続していることが前提

画面上に文字列が表示されますよね。

楽天ウェブサービスjQuery

これはhtmlファイルの中に記述した文字列です。

この文字列をマウスでドラッグ&ドロップすると・・・

なんと移動できてしまうのですw

楽天ウェブサービスjQuery

このようにWebページに、様々な効果を加えることができるのが、jQueryのUIなのです。

もちろん、jQueryのUIを使うと、他にもいろんな効果を加えることができます。


【解説】
jQueryのUIを使えるようにするのは、とても簡単です。
WebページのHTMLのheadタグ部分に、たった2行加えるだけです。



記述する順番は大事です。
先にjQuery本体をロードしてから、次にUIだからです。

test.htmlは、適当な文字を書いて、id名を付けているだけ。

test.cssは、文字の修飾です。

大事なのは、test.jsです。

プログラムのなかで、testという要素に対して、ドラッグ&ドロップできるようにしています。
$("#test").draggable();

たったこれだけ。

どうでしたか?

意外と簡単にjQueryのUIが使えますよね。

今回は一番初歩的で簡単な動作テストでしたが、
楽天ウェブサービスAPIの商品データと組み合わせると、何か面白いことができそうな予感がしますよね。

例えば、商品画像に動きを加えたりとか。文字に効果を加えるとか。

アイデアは無限に広がります。

jQueryはとても高機能なJavaScriptライブラリです。

興味がある方は試してみてください。

きっとプログラミングが楽しいですよ。

スポンサードリンク






楽天ウェブサービス初心者入門講座TOPへ