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

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

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

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

    ということに。

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

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

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

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

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

    たしか、画像を回転させる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の操作方法などについて学ぶことができます。

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

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

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

     

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

     

    The following two tabs change content below.
    山下 芽実

    山下 芽実

    2児の母。GeekGirlLaboのエンジニアコースで学習後、下の子が幼稚園に入園したタイミングで、2018年4月～在宅ワークをしています。いくつかの開発案件を経て、現在はGeekGirlLaboのJavascriptコースでチューターを担当させていただいたり、教材改善の業務を担当したりしています。好きなことはインターネット・プログラミング・音楽・読書・妄想・人の思考の流れをいろいろ想像すること。