2024年2月29日 / 最終更新日 : 2024年2月29日 アシアル情報教育研究所 アシアル情報教育研究所ブログ JavaScriptによるタートルグラフィックス（試作版） タートルグラフィックスとは タートルグラフィックスは、初心者にも理解しやすい、目で見えるフィードバックを提供する、プログラミングの教育用ツールです。画面上を動く「タートル」（亀）をカーソル代わりに使って、線や図形を描くこ […]
2024年2月29日 / 最終更新日 : 2024年2月29日 アシアル情報教育研究所 アシアル情報教育研究所ブログ JavaScriptによるアニメーション HTMLとJavaScript を使ったシンプルなアニメーションの例を紹介します。具体的には画面上でボールが跳ねるプログラムです。 サンプルアプリの動作：ボールが枠の中で跳ねるアニメ このプログラム […]
2024年2月26日 / 最終更新日 : 2024年2月26日 アシアル情報教育研究所 アシアル情報教育研究所ブログ CSSで画像をアニメーションさせてみよう(4) メトロノームのように画像を動かす CSSで静止画像をアニメーションさせる CSSを使うことで、静止した画像をアニメーション表示することができます。上下・左右に動かせるのはもちろん、回転させることもできます。 参考：CSSで画像をアニメーションさせてみよう […]
2024年2月14日 / 最終更新日 : 2024年2月14日 アシアル情報教育研究所 アシアル情報教育研究所ブログ 摩擦のシミュレーション コンピュータ上で運動をシミュレーションする コンピュータ上で、物体の運動をシミュレーションすることができます。 その際には、物理学の知識を厳密に適用しなくても、「それらしく」見せることができます。 実際のところ、コンピュ […]
2024年2月14日 / 最終更新日 : 2024年2月14日 アシアル情報教育研究所 アシアル情報教育研究所ブログ CSSでイベントを取り扱う 〜マウスオーバーの例〜 Webページで起きる「イベント」とその処理 Webブラウザを使って、Webページを表示しているとき、コンピュータはさまざまな「イベント」を処理しています。 イベントとは、クリックやマウスの移動のような、ユーザーのアクショ […]
2024年2月13日 / 最終更新日 : 2024年2月13日 アシアル情報教育研究所 アシアル情報教育研究所ブログ ボールの弾みをシミュレーションする ボールの弾み（跳ね返り）をシミュレーションする ボールを高いところから落とすと、徐々に加速しながら落ちていきます。そして地面に当たると跳ね返ります。 跳ね返ると、今度は上昇していきますが、徐々に減速して、あるタイミングで […]
2024年2月7日 / 最終更新日 : 2024年2月7日 アシアル情報教育研究所 アシアル情報教育研究所ブログ CSSで画像をアニメーションさせてみよう(3)動きの速度を変える 普段利用しているウェブサイトやSNSでは、目を引く視覚効果、滑らかなアニメーションがふんだんに用いられています。 CSSを使うと、静止画像を、簡単なアニメーションに仕立て上げることができます。 この記事では、CSSの設定 […]
2024年2月7日 / 最終更新日 : 2024年2月7日 アシアル情報教育研究所 アシアル情報教育研究所ブログ CSSで画像をアニメーションさせてみよう(2)平面の画像を立体的に回転させる 普段利用しているウェブサイトやSNSでは、目を引く視覚効果、滑らかなアニメーションがふんだんに用いられています。 CSSを使うと、静止画像から簡単なアニメーションを作ることができます。本格的なアニメーションではありません […]
2024年2月6日 / 最終更新日 : 2024年2月7日 アシアル情報教育研究所 アシアル情報教育研究所ブログ CSSで画像をアニメーションさせてみよう(1)キーフレームとは 普段利用しているウェブサイトやSNSでは、目を引く視覚効果、滑らかなアニメーションがふんだんに用いられています。 CSSを使うと、静止画像を、簡単なアニメーションに仕立て上げることができます。 この記事では、画像のサイズ […]
2024年2月2日 / 最終更新日 : 2024年2月2日 アシアル情報教育研究所 アシアル情報教育研究所ブログ クイズアプリを作ってみよう サンプルアプリの動作 問題を示し、選択肢から正解を選ばせる。用意した問題の数だけ出題・回答を繰り返す。正解の数を得点として計算し、終了時に総得点を示す。 そんな動作をするクイズアプリの例を示します。例題として、情報Ⅰに関 […]
