プログラミングで遊ぼう~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の操作方法などについて学ぶことができます。
「プログラミング、前に独学でやってみたことがあるけれど、よくわからなかったし..」という方も、大丈夫です!
担当チューターがあなたのスキルアップを丁寧にお手伝いいたします。
興味のある方は、ぜひお問い合わせください!
【プログラミングで遊ぼうシリーズ】
プログラミングで遊ぼう~秋の紅葉編~
~子供向け学習アプリをつくろう~
時間や場所にとらわれずに
働きたいあなたへ
「スキル」と「実績」を身につけて
自由に働こう
“お悩み” ではありませんか?


- 仕事以外の自分の時間が足りていない
- 家族との時間が足りていない
- 家事と育児に追われ、パートをする時間がない
- Webサイトの仕組みを理解したい方
- 専門的スキルを持っておらず、将来が不安
無料カウンセリングは
こちらから
カウンセリングでは、プラン内容や料金体制、
学習後のイメージなど不安や疑問に
思われていることにお答えします。
あなたにピッタリな適性プラン診断をはじめ、
豪華特典がいっぱい

LINE限定配信動画プレゼント
女性・男性ともに生活の質(QOL)を高めたいニーズが高まっています。そんな中で、Webスキルを獲得すると、なぜ自由な働き方ができるのかを“限定動画”でお伝えします。
*数日間配信を見続けるとことで、限定動画が配布されます。


LINE限定配信動画
プレゼント
女性・男性ともに生活の質(QOL)を高めたいニーズが高まっています。そんな中で、Webスキルを獲得すると、なぜ自由な働き方ができるのかを“限定動画”でお伝えします。
*数日間配信を見続けるとことで、限定動画が配布されます。


未経験から始めるWEB
の
お仕事ガイド
スクールに通う前に必ず読んで欲しいガイドブックです。
仕事ガイドには、Webの仕事でQOLが上がる理由や、未経験から仕事獲得するまでの道筋を余すことなく掲載しています。


適性プラン診断
あなたの理想の働き方を実現するための最適な受講プランを診断します。
診断結果を参考に、効率よく理想の働き方を実現しましょう。


エンジニア適性診断
未経験でエンジニアに向いているか不安な方は、まず適性診断を受けましょう。
あなたの適性を知ることでスクールに通うべきか否かを知ることができます。


教材サンプルプレゼント
受講生が実際に使っているオンライン教科書を体験できます。
「実務研修」の教材の一部をプレゼント!

LINEに登録して特典を受け取る