プログラミングで遊ぼう～jQueryRotateを使って回転寿司を作ってみよう～

ブログ

2020.01.28

最近、ふと気づきました。

回転寿司って、子供連れの外食としては、最強なんじゃないの..！？

ということに。

子供と一緒の食事って、大変ですよね。

外食すれば、食事を作る負担はなくなるものの、子供本人が「これがいい！」と言ったメニューを注文しても、実際頼んだ料理が来てみたら「えーこんなに食べきれなーい」「思ってたのとちがうー」とか！！！！言い出すし！！！

その点、回転寿司というのは目の前に実物が流れてきてくれるので子供にも内容が伝わりやすいですし、フライドポテトなどのサイドメニューや各種デザートなど、子供が好きなメニューもばっちり揃っています。

ありがたい事この上ありません。

こんなに日頃お世話になっている回転寿司への思い、なんとかプログラミングで表現できないだろうか..（なんでだ）

たしか、画像を回転させるjqueryがあったはず..それで回転寿司っぽい画像を回転させればそれっぽくなるのでは..

というわけで早速やってみました。

まず、回転寿司っぽい画像を用意します。

こんな具合です。

少し不自然な配置ではありますが、回転させることを想定して、なんとなく円形になるようにお寿司の画像を配置した方がいいかなと思ったので..その辺は温かい目で見てやってください。

お寿司のイラストはフリー素材から拝借いたしました。

さて、次は回転させるためのコードを書きます。

画像を回転させるのには、 JQueryRotateというものを使います
。
公式サイトの方で、jQueryRotate.js をダウンロードして、それを任意の場所に配置して使います。

<html>
  <head>
    <meta charset="UTF-8">
    <title>jQueryRotateを使って回転寿司をつくろう</title>
    <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
    <script src="js/jQueryRotate.js"></script>
    <style>
      body {
        background: #ffebcd;
      }
      #sushi {
        margin: 50px;
        border-radius: 50%;
      }
    </style>
  </head>
  <body>
    <img id="sushi" src="sushi.jpg" />
    <script>
      $(function() {
          var angle = 5;
          function rotate() {
              $('#sushi').rotate(angle);
          }
          setInterval(function() {
              angle += 0.1;
              rotate();
          }, 20);
      });
    </script>
  </body>
</html>

実行結果はこちらをご覧ください

回る速さはゆっくり目に設定してみましたが、速さを変えたりもできますし、画像ではなくてHTMLの要素をくるくる回すこともできるらしいので、いろいろ遊んでみるのも面白そうです。

GeekGirlLaboのJavascriptコースでは、基本的なJavascriptの文法や動作確認の方法、Jqueryを使ったHTML/CSSの操作方法などについて学ぶことができます。

「プログラミング、前に独学でやってみたことがあるけれど、よくわからなかったし..」という方も、大丈夫です！

担当チューターがあなたのスキルアップを丁寧にお手伝いいたします。

興味のある方は、ぜひお問い合わせください！

【プログラミングで遊ぼうシリーズ】
プログラミングで遊ぼう～秋の紅葉編～
～子供向け学習アプリをつくろう～

時間や場所にとらわれずに
働きたいあなたへ

「スキル」と「実績」を身につけて
自由に働こう

突然ですが、こんなことで
“お悩み” ではありませんか？

仕事以外の自分の時間が足りていない
家族との時間が足りていない
家事と育児に追われ、パートをする時間がない
Webサイトの仕組みを理解したい方
専門的スキルを持っておらず、将来が不安

GeekGirlLaboでは、
プログラミングのスキルを教えており、
身につけた方々は「残業なし、5時半定時上がり、リモートワーク可」という憧れる条件で
働けるようになられたり、「ホームページ制作のフリーランス」になられて、
通勤時間ゼロの在宅で
お仕事をできるようになっています。

GeekGirlLaboの卒業生は
なぜ自由な働き方ができるようになるのか。
その理由を覗いてみませんか？

GeekGirlLaboを覗いてみる

前の記事へ

次の記事へ