goo blog サービス終了のお知らせ 

作って遊ぼう&学校の応援

 最近JavaScriptを取得、学校支援の〈動く教材〉を作っています。

HTML・CSS・JavaScriptの取得をめざして〔CSS編〕

2025-05-06 12:36:46 | 教材の開発
 先日HTMLの教材をアップしてからかなり時間が経ちましたが、力不足からなかなかでき上りませんでした。どこまで掲載したらいいかも自信のない状況でした。「これだけ知ってれば何とかなる。」というところで落ち着きました。
 要は「わからないとき、どうやって調べるか!」これは私が0から出発してたどり着いたところですが、これにもハードルがあって、基本的なところがなければ到達できない領域です。これをクリアする内容です。

 では、学習頑張ってください。最後には添付資料付きのサイトを紹介します。一気にそこをご覧になるのも有効かと思います。

 全部で7ページありましたがいかがだったでしょうか。
 基本的な書式はHTMLで記入して、それを装飾するのがCSSという風に考えてホームページを作成します。

 添付ファイルも含めた学習のためのホームページを作っていますので、そこをご覧ください。
 次のURLか、その下の画像(バナー)をクリックするとそのサイトに飛びます。








HTML CSS JavaScript の習得をめざして〔HTML編〕

2025-04-01 11:11:56 | 教材の開発
 「私と一緒に〔動く教材〕をつくりませんかー」といってもなかなかそんな人がいないのが現実です。これからずーと続けて行くのですが、もしもそんな方がいたら第一歩としてほしいと学習教材を提供することにしました。
 動く教材を作れるにはHTML CSS JavaScriptの3つを習得する必要があります。HTMLはホームページをつくる基本的な言語です。これだけで基本的なホームページが作れます。私の3つのホームページはすべてこれです。 CSSはその画面をデザインする言語です。「見たい、魅力的なホームページ」にするためのものです。 JavaScriptはそれに動きをつけたり利用者の意図に合わせて機能させる言語です。
 ここではまずHTMLについて学習します。
 この中にサンプルプログラムを紹介していますが、ブログのシステム上利用はできません。最後に〔利用できるところ〕を紹介しますので、そちらを利用してください。ただし、パソコンで利用するには問題ありませんが、Androidのスマホで使うと◯〇〇〇.txtのテキストファイルの日本語が文字化けしてしまいます。何がそうさせるのか原因を探っているのですがわかりません。しばらくお待ち下さい。
4月2日追記
 原因は解明できませんでした。メモ帳に変わるようなアプリを入れたらいいという結論ですが、皆さんのスマホなので不可能です。申し訳ありませんが断念します。スミマセン!
4月3日追記
 上記の件解消しました。ご協力いただいたcametan_42さんにはお礼申し上げます。テキストファイルを保存する段階で間違っている事を教えていただきました。お陰さまで一つ賢くなりました。ありがとうございました。

 以上ですが、習得はいかがだったでしょうか。字が小さくて見えにくいようでしたら、タップして拡大してご覧ください。

 添付ファイルを利用できる他のホームページがありますので、そこをご覧ください。ぐっとわかり易くなります。下のURLかバナー(画)をクリックしてください。




〔動く教材〕太陽系の惑星の動き 「惑星ボタン」の追加しました

2025-02-26 13:11:52 | 教材の開発
 先に紹介したものが十分な理解につながっていないかもしれないという思いから、さらに研究を重ねて、惑星別に表示するものを追加しました。
 つまり、「水星」「金星」「火星」「木星」「土星」「天王星」「海王星」のボタンを配置して、各惑星の動きで、満ち欠けや大きさがどのように変化するかを個別に示したものです。
 これまでの表示は、初期画面や〔リセット〕ボタンで表示できるようにしました。

 各惑星の最大の大きさは、惑星と地球が最も接近したときの大きさを同じにして標準化しています。

 土星については、環を付けて実際の姿に近づけました。

 新しくなった初期画面です。
 時間表示と図の間にボタンを8こ並べました。

 これから紹介する図は、すべてシンクロしていて、最上部に表示する時間で管理されています。
 時々〔リセット〕に戻ったり、また同じボタンを押すと、各惑星の位置が同じことから、そのことがよくわかります。

 各惑星のボタンを押すと
〔水星〕ボタン
 初期画面から水星に関するところを取り出して、単純化した表示でわかりやすくしました。惑星の大きさや軌道も画面に合わせて大きくしています。
〔時間の操作〕の下のボタンを押すと時間が速く進みます。さらにその下〔◯◯時間後〕のボタンは一足飛びに時間が進みます。例えば〔1日後〕を押すと、毎日同じ時間に観測することができます。その機能を使うと〔リセット〕表示では、惑星の逆行なども観察できます。

〔金星〕ボタン
〔火星〕ボタン
〔木星〕ボタン
〔土星〕ボタン
 土星の環を表現してみました。左図では15本の環で環の面を表現しています。

〔天王星〕ボタン
〔海王星〕ボタン

 スクリーンショットなので”静止画”ですが、その動きを次のように表現してみました。
 まず〔水星〕ボタンを押します。次に〔十万倍〕のボタンを押すと時間が十万倍の速さで過ぎていきます。そのときの地球と水星の動き、水星の満ち欠けと大きさの変化が観察できます。連続して変化していきますからおもしろいです。
 どのような地球と水星の位置で”満ち欠け”や”大きさ”が変化するのがわかります。
 その他の惑星ではどう変化するのか観察できますよ。

 スマホでも観察できるように、押しボタンを大きくして「スマホ用」としました。
 このような画面です。

 実際に使ってみませんか。
 次のURLかバナー(図)をクリックすると使うことができます。

 他の人に紹介するときに使ってください。QRコードです。

パソコン用
スマホ用


 最後まで読んでいただきありがとうございました。
 




〔動く教材〕長方形を横にずらした図形(平行四辺形)の面積は 大きくなる ならない ?

2025-02-20 19:17:42 | 教材の開発
 この長方形の面積は底辺b=250、高さa=300 なので 250×300=75000 と計算できます。
 小学校で平行四辺形が出てくるのは4年生、その面積が出てくるのが5年生だそうです。
 私が小学生のとき戸惑ったのが、長方形が横にずれた平行四辺形の面積でした。
 これを見ると、面積が ”大きくなっている” とは感じませんか。そのときは、「同じだよ!」という証明があったのですが、どうしても「大きくなっている」という印象がず~と残っていてすっきりしませんでした。理屈ではわかっているのですが、、、。
 そこで今になって納得できる証明を提供しようと考えたものがこの動く教材です。

 その方法は、長方形から平行四辺形にするときに、長方形を分割して、それを横にずらすかたちで移行していきます。分割しても合計した面積は元の長方形の面積と同じですから。分割数をどんどん大きくしていくとカクカクの図形から平行四辺形に見えるようになってきます。こんな方法で〝直感的な〟理解を求めるものです。

 では早速やってみましょう。
上のボタン〔2分割〕を押します。長方形の2分割です。
真ん中に白い横線が入っています。
 画面の精度不足で見えません。すみません。
他に〔5分割〕〔10分割〕~〔100分割〕〔200分割〕があります。
〔5分割〕を押すと長方形の5分割です。
   かすかに見えます。
今、下のほうには〇が赤くなっていますが、その右側をタップすると、右側にずれて・・・
さらに右側をタップすると
一番右側をタップすると

ずれても「面積はずれる前と同じ」ということが実感できました。
さらに、分割数を増やしていきます。



これが200分割です。
分割数が大きくなると、平行四辺形にどんどん近づいてきます。
長方形を横にずらして平行四辺形に変形しても面積は同じだということが納得できました。無限大に分割することですから、「高校で学習する積分や微分なんかと同じ考え方が小学校でもあるんだな~!」ということに気づきました。
 この200分割をそのまま〔〇(ずれなし)〕を押しました。
結論としては、平行四辺形の面積は、

〔平行四辺形の面積〕 = 〔底辺の長さ〕 × 〔高さ〕

 ということになります。 


するとこんな感じです。

 同じような手法ですが、三角形の場合についても作成しました。
 これです。

 では、実際に使ってください。
 次のURLかバナー(図)をタップしてください。


 お近くに小学校の先生がいたら紹介してください。
 次のQRコードを活用してください。




〔動く教材〕直角三角形の斜辺の長さ(三平方の定理)

2025-02-11 20:35:35 | 教材の開発
 「三平方の定理」は、中学校3年数学で学習する内容です。一般的には「ピタゴラスの定理」ともいいます。実際に斜辺の長さを求めるときには √ (ルート)を使いますから、3年生の最後の最後に学ぶ教材です。

 直角三角形の底辺の長さをa、縦辺の長さをb、斜辺の長さをcとすると、

 という式になるのが「三平方の定理」です。

 どのような動く教材かというと、直角三角形の直角を作る2つの辺、底辺と縦辺の長さを変えることができます。
 それにしたがって直角三角形が変化します。もちろん斜辺の長さが変化しますから、その長さを測定するような仕組みになっています。
 それぞれの辺の2乗が出てきますが、この値はそれぞれの辺を一辺とする正方形の面積にあたります。正方形を描いたり面積を求めることもできます。
 三平方の定理には100以上もの証明方法があるといわれていますが、ここでも証明例を一つ紹介します。

 ピタゴラスが三平方の定理を発見する過程をたどる学習です。

 実際の画面です。
 初期画面です。
 底辺が20.0 縦の辺が15.0の直角三角形が描かれています。
 下のボタンで辺の長さを変えることができます。

 いくらかボタンを押して長さを変えたところです。
 斜辺の長さを求めたいですね。

 そこで、右側のボタン〈定規〉を押すと、
 このように、斜辺にそって定規が表示されます。それを読むことで長さがわかります。
 写真では、初期画面での定規表示になっていますが私のミスです。実際はその斜辺にそっての定規になります。スミマセン!

 正しい測定値は〈定規〉の下の〈数字〉ボタンを押すと表示されます。

 〈数字〉の下には〈正方形〉ボタンがあります。それを押すと、
 それぞれの辺を一辺とした正方形が3つ表示されます。

 その下の〈面積〉ボタンを押すと、
 黄色い数字で面積が表示されます。この場合は20、15、25という2乗しやすい数字ですが、小数点が付いたりする数字でも、瞬時に計算して表示してくれます。
 この3つの正方形の面積の値から「三平方の定理」が成り立つこと「底辺の正方形の面積+縦辺の正方形の面積=斜辺の正方形の面積」を、実験的に”確認”することができます。底辺と縦辺の長さがどんなときも成り立つことがわかります。

 三平方の定理が図形的にも証明できるということを、次の〈証明例〉ボタンを押して、証明のヒントを表示します。

 これです。同じ直角三角形を3つ描き加えることで、〔底辺の長さ+縦辺の長さ〕の辺を一辺とする正方形が描けます。この面積は計算できます。その正方形の中にある4つの直角三角形の面積も計算できます。このことから、前者から後者を引くと、斜辺を一辺とした正方形の面積となります。先ほどのabcでいうと、abからcが求まるということですから、
 が証明されることになります。
 
 〈証明例〉だけを押したときの画面です。
 すっきりした表示になりました。この状態でも下のボタンを押して辺の長さを変えると図形が変化します。面白いです。

 実際に使ってください。次のURLかバナー(図)を押すと、プログラムのある私のホームページに飛んで使うことができます。



この動く教材は ”使ってもらうこと” が一番の希望です。中学生や中学校や高校の数学の先生がおられましたら知らせてください。

スマホで使ってみたら、下のボタンが小さすぎますね。もうしばらくしたら修正してスマホ用を提供します。

追加 R07年02月12日 10時
 スマホ用を作りました。 ボタンを大きくして、場所も下部にまとめました。





〔動く教材〕月の満ち欠けシミュレーション

2025-02-03 22:16:20 | 教材の開発
〔動く教材〕〔シミュレーション〕太陽と地球と月の動きVer.2 中学校理科 高校地学 - 作って遊ぼう&学校の応援

〔動く教材〕〔シミュレーション〕太陽と地球と月の動きVer.2 中学校理科 高校地学 - 作って遊ぼう&学校の応援

追記令和7年1月13日正午月の満ち欠けの月齢が、1日分大きく表示されているところを修正しました。今日13日正午の月齢は13.2ですが、本プログラムでは13.9と表示され...

goo blog

 先に太陽系を示して、そこでの月の動きと日本の各地から見える月の動きと満ち欠けをシミュレーションとして提供しましたが、まだまだ一足飛びな理解を求めている教材ではないかと考えるに至りました。
 そこで、その前の段階としての教材を作成しました。太陽と地球を固定して、そこで月が地球の周りを公転するときに、地球から見える月の満ち欠けを示しました。

 月の満ち欠けは、同じ日時であれば、地球のどこから見ても同じですからこういう表現ができます。

満月↑

 こんな感じです。シミュレーションですから、初期設定で、月はわずかに反時計回りに動いています。下の緑の表示がありますが、これが速さを示しています。これより左側を押すと〈遅く〉なり、右側を押すと〈速く〉なります。

 満月からの月の動きを順に観察していくと、


下弦の月↑


ほぼ新月↑

ほぼ新月↑


上弦の月↑


 このように、月の位置によって、満ち欠けを連続的に観察することができます。

 このシミュレーションからわかったことは、まず地球から見て月が太陽の反対の位置にあるときに“満月”になります。この図で月が上にあるとき、左側が明るい半月になります。その間は、満月から右側から影が広がっていく様子が観察できます。
 更に時間が進むと、右側からの影の広がりが進んで、月が太陽側にきたとき“新月”となって、影が月を覆ってしまって見えなくなります。
 その後は、右側から明るい部分が広がっていって、反対側に来るときは“満月”に戻ります。これを繰り返します。

 太陰暦では,新月から新月までがひと月です。日数にして約29.5日です。一年は12月ですから、これでは季節がズレてします。これを修正するために、3年毎に12月の後に閏月(うるうつき)が追加されます。したがって閏月のある年は13ヶ月となります。

 ニュースで中国の旧正月が紹介されますが、そのとき(太陰暦の一月一日)の満ち欠けは“新月”です。

ネットから
仕組み
  • 太陰暦の1年は約354日で、太陽暦の1年(約365.24日)と比べて11日ほど短いです。
    <svg focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z"></path></svg>
  • この差を補正するために、約3年に1度うるう月を挿入します。
    <svg focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z"></path></svg>
  • うるう月の日数は29日か30日で一定ではありません。
 

 スマホ用に、2つの図を縦に並べて細長くしたものを作成しました。


 実際に使ってみませんか。次のURLかバナー(図)をタップすると使用することができます。

 パソコン用です。



スマホ用です。





 最後まで読んでいただきありがとうございました。
 自分ながら使い勝手の良い”理解しやすい教材”ができました。
 お近くに理科の先生がおられましたら紹介していただくと嬉しいです。

 「動く教材」を検索してもらうと、これまで紹介したものがたくさん表示されるようになりました。皆さんに使ってもらうと、検索の上位に表示されるようになりますのでよろしくお願いします。

 日本中の小中高の学校で使ってもらえたらいいな~。

〔動く教材〕個別の sin cos tan の学習

2025-01-16 09:23:05 | 教材の開発

〔動く教材〕三角関数 sin cos tan 高校数学 - 作って遊ぼう&学校の応援

sincostan覚えていますか?「うん、習ったけど、どんな内容か忘れたな〜」というかたが多いと思われます。思い出すのにいい教材を作りました。まずは読んでください。実際に...

goo blog


 以前の投稿で、sin cos tan の一括した学習ソフトを紹介しましたが、まずは個別の学習から始まるので、それに対応したソフトに加工しました。”加工した”といっても不必要な図を見えないほど小さくしただけです。その他のプログラムは変えていません。

まずは sin です。
sin の図を縦横2倍に拡大して表示しています。初期設定が30度ですから、図の中に赤い点が1つプロットされています。横軸30度のところにsin30=0.500 がその点です。

 次に下のボタン+1を押し続けます。すると、
どんどん点が重なって線になります。今、角度が 217.0 ですから sin217=-0.602 が最後の点です。

 さらに押し続けると
sin 関数のグラフが完成します。
他にも角度を変えるボタンが8こありますから、押して、求めたい sin 値を探してください。

 ぜひ使ってみませんか。次のURLかバナー(図)をクリックすると使えます。


 cos tan についても同様に作成しました。

cos



cos も使ってみませんか。


tan



tan も使ってみませんか。



いかがでしたか。昔を思い出したかたも多かったと思います。

 お願いになりますが、「こんなのを作って欲しい」というのはありませんか。もしあったらコメントに書いてください。できないことも多いですが、勉強を重ねて取り組むつもりです。宜しくお願いします。

〔動く教材〕〔シミュレーション〕太陽と地球と月の動きVer.2 中学校理科 高校地学

2025-01-05 13:53:00 | 教材の開発
 初期画面は今の空の太陽と月の位置や満ち欠けとほぼ一緒のものができました。
     難しかったです。

 Ver.1の投稿は、初期画面が2024年の秋分の日から始まりましたが、今の日付時間にならないかと考えていました。このプログラムは動きのほうから日付時間を計算して表示するようになっているので、先に日付時間を決めて動きを表現することには困難があるのです。
 そこで、このVer.2は初期設定の 2024/ 09/ 23/ 00/ 00/ 00.0の時間を0.1秒を単位として時間をすべて秒だけの数で表していて、それを年月日時分秒.0に変換しているんですが、この秒数を今の日付時間になるように順に増やしていって求める方法を考えました。実際、作ってみると”瞬時”に計算できるものができました。プログラムを立ち上げると、すぐ今の日付時間の太陽・地球・月の動きが表示されます。

 先に紹介したVer.1は、スマホでは画面に収まってもすべてが小さすぎて使いずらかったですが、Ver.2ではスマホ用を作ってボタンや図の位置を変えて使いやすくしました。起動すると画面は今日の日付時間となって2つの図は今の太陽・地球・月の動きを現しています。特に下図は今の空の太陽の位置が表示されます。曇りであっても「太陽はあそこにある。」と指させます。

 使い方です。図にしましたのでご覧ください。

〇 パソコン用です。
〇 スマホ用です。


 実際に使ってみませんか。
 私のホームページに飛びますが、次の図をタップすると使うことができます。楽しい?・勉強になります? かわかりませんが、ちょっと使ってみてください。



 どのボタンを押しても壊れることはありませんから、まずは時間を早める【千倍】や【万倍】などのボタンを押してみて下さい。一日が数分数十秒で経過します。

 東経を取得する関数を見つけましたが、画面下のボタンを設置しました。しかし、プログラムをアップすると「取得できませんでした」としか表示されません。チャットGPTにその理由を尋ねると、スマホの設定で許可がOFFになっているかもしれないということでした。どうすることもできず残念です。
解決…プロトコルhttpをhttpsに訂正して解決しました。httpsの方が「暗号化」された通信で、より機密性が高いという通信方法だそうです。
 ホームページの提供元のFC2の設定にhttpにするかhttpsにするか選択するところがありました。

 一昨日の13日夕刻に白い月が東の空に見えていました。このプログラムでは太陽が沈んだ後だんだん月の色が空の色→白→黄色に変わるようにしていましたが、改めて、太陽が低い時から白い月が見えるようにしました。実際の晴れの空に近づけることができました。

 最後まで読んでいただきありがとうございました。今回はプログラムの作り方をちょっと紹介しましたが、こんなことが楽しいと思う自分です。これが誰かの役に立ってくれれば最高なんですが、どうですかね?

〔動く教材〕斜面上の物体と力(スマホ用)を作りました。

2024-12-29 01:03:23 | 教材の開発
 昨年の12月22日に投稿した「斜面上の物体と力(角度を変えて)」を紹介しましたが、その折スマホ用を作っていなかったのでここに作りました。
 中学校で重力などを勉強しましたが、その学習に使用するものです。最後には、実際使えるものを提供しますので使ってくださいね。

 では表紙に掲載したのが初期画面です。右ボタン〔重力〕を押した状況で表示されます。左の図には、物体にはたらく重力が青い矢印で記入されています。
 右側の7つのボタンは、その力をボタンの色の矢印で表示するものです。
 だから重力は青色なのです。

他の力のボタンを押してみます。
〔重力の斜面に垂直な分力〕を押しました。
青の点線の矢印で表しています。

〔重力の斜面に平行な分力〕を押しました。
これも青の点線です。

〔斜面が物体を押す力〕を押しました。
緑の矢印です。

〔ひもが物体を引く力〕を押しました。

赤い矢印です。

〔物体が斜面を押す力〕を押しました。

ピンクの矢印です。

〔物体がひもを引く力〕を押しました。

 このように力が個々に表示されます。〇〇が△△を押す(引く)、、力という表現です。

 上の黒いボタンは、力の関係を表示するものです。
〔つり合い〕ボタンを押すと、

 2つのつり合いが表示されています。関係する力のボタンが押された色になっています。

〔重力の分解〕ボタンを押すと、
 重力が2つの分力に分解されています。

〔物体に働く力〕ボタンを押すと、
 このようになります。これも「つり合い」ですかね。

〔物体が他に働く力〕ボタンを押すと、
 物体が触れあっているものに力を及ぼしているんですね。

 角度のボタンを押してみました。
 角度によって力の大きさが変わるのが角度を変えるたびに表示されます。

 最後は〔力のリセット〕ボタンを押しました。

力が全部消えてしまいます。

こんなソフトです。中学校時代を思い出して勉強してみるのもいいですよ。お子さんお孫さんと一緒に学習するのもいいかもしれません。
 ぜひ使ってください。次のURLかバナー(絵)をクリックすると使えます。
 私のホームページに飛びます。


 これはパソコン用です。





〔動く教材〕湿度を求めるグラフ〔スマホ用〕を作りました。

2024-12-26 21:42:13 | 教材の開発
 https://blog.goo.ne.jp/hiraku2014/e/4747343a433f4d6bfaa7c0070a2366a1

〔動く教材〕気温・露点から湿度を求めるグラフ 中学校理科 高校物理 - 作って遊ぼう&学校の応援

ガラスコップに水を入れて氷と温度計を入れてかき混ぜ続けると、しばらくするとガラスコップに水滴が付き始めます。その時の温度を”露点(ろてん)”といいます...

goo blog



もうかなり以前(昨年の10月)ですが、スマホ用を紹介していなかったので、ここに作り替えて紹介します。改善したところは、パソコンでは障害となりにくいんですが、パソコン用をスマホで使用すると、ちょっと指でボタンを触るだけで、横にずれてしまい画面が拡大してしまうのです。そこをCSS言語で”禁止命令”を挿入しました。
 同じような改善はパソコン用にも挿入しています。
まずパソコン用は初期画面です。
使用中の画面です。

 露点と気温を飽和水蒸気量のグラフに記入することで、図のように湿度を求めることができます。

 これをスマホで見るとボタンが押せませんから、スマホ用は指で押せるほどに大きくしました。

 これがスマホ用の初期画面です。
気温を高くしました。
 露点を下げたところです。
〔湿度目盛表示〕を押したら、目盛りが表示されます。
 
 目盛りを読むとだいたいの湿度が原理的に分かります。40%よりチョット大きい値ですね。

〔湿度数字表示〕を押したら、湿度の数字が表示されます。

 この場合、41.5%です。

 実際に使っていただけるように、次のURLかその下のバナー(図)をクリックすると現物が表示されます。URLの表記からわかるように開かれた学校の応援という私自身のホームページへ飛びます。ぜひ楽しんでください。
 中学生や高校生、学校の先生がいたら教えてください。できれば一緒に使ってもらったら嬉しいです。
 「開かれた学校の応援」と検索してもらうと、直接ホームページにたどり着けます。そこで「学校支援ソフト」を押すとたくさんの学校支援ソフトのあるページが開きます。







〔動く教材〕円周角 中学校数学3年

2024-12-18 15:26:57 | 教材の開発
 この前の投稿に”ひでぼう様”からのコメント「学校の教科書をタブレットに変えるなら、こうゆう動くのに変えてほしいですね。」と言ってもらったので、ここに開発している教材を “動く教材” とネーミングすることにしました。教えていただいてありがとうございました。これからの開発意欲が高まります。

 円周角は中学校数学3年生の教材です。「うん、覚えている。」という人も多いと思います。円周上の2点(2点間の弧)からもう一つの円周上の1点にそれぞれ直線を引きます。その2直線からできる角を円周角といいます。またその2点から円の中心点に引いた2直線からできる角を中心角といいます。
 円周角の定理とは、ひとつの弧について、中心角の半分が円周角の値となります。このことは、円周角が弧が対面する円周上のどこにあっても成り立ちます。
 この事実を確かめた後で、それを証明することが学習内容です。青点から中心点までのの補助線を引くと証明のやり方が見えてきます。二等辺三角形が2つできますからそれを手がかりにして証明していきます。(1例です。)

 その青点が「どこにあっても」というところを動かしながら角度が変わらないことを確かめることができます。
 「ひとつの弧」というのも、2点を離したり近づけたりして、いろいろな”弧”で確かめることができます。

では、教材をお見せします。
これが初期画面です。
弧の部分を2つの黒点で表しています。円周角の点を青点で表しています。
画面下のボタンで黒点を動かします。
黒点が円にそって離れました。当然、円周角は大きくなります。
次は上の左側の⇦ボタンか⇦⇦ボタンを何回か押すと、
このように青点が円周上を動きます。
円周角の大きさはどうでしょうか?
そこで、分度器ボタンを押します。すると、
円周角のところに分度器があてられ角度を測ることができます。一目盛りは5度です。10度ごとに太い線、30度ごとに長い線が引かれています。
この状態でも動かすことができます。
円周角(値)ボタンを押したところです。赤色で円周角の値が表示されます。
勿論、この状態でも青点を動かすことができます。

次は中心角のほうです。中心角(線)ボタンを押すと、
中心角が表示されます。
さらに、中心角(値)ボタンを押すと、
黒い数字で中心角の値が表示されます。
全部を表示させるとこんな表示です。
どれを押しても壊れることはありませんから、試しに色々押してみると仕組みがわかります。
使い方説明書も作りましたので掲載します。

 ぜひ、使ってみてください。次のURLかバナーの絵をタップすると、プログラムが開きます。 



そのボタンの位置を変えてスマホ用を作りました。
初期画面です。
黒点を離しました。
青点を右へ動かしました。
ボタンを押して表示させたところです。

全部押したところです。


スマホ用の説明書です。


実際に使うには、URLかバナー(絵)をタップしてください。




 いかがだったでしょうか。前回までの理科教材と比べると計算量は100分の1、1000分の1ほどです。「ボタンを押すと動く」タイプの教材ですからスマホでもスイスイ動きます。使っていただけたら嬉しいです。できれば感想も聴きたいですね。
 中学3年生や中学校・高校の先生がいたら教えてあげてください。
 よろしくお願いします。

〔動く教材〕三角関数 sin cos tan 高校数学

2024-12-03 15:02:57 | 教材の開発
 sin cos tan 覚えていますか?「うん、習ったけど、どんな内容か忘れたな〜」というかたが多いと思われます。思い出すのにいい教材を作りました。まずは読んでください。実際にこの教材を使ってみることもできますから。

前投稿で円の座標と角度の関係の教材を紹介しましたが、それを発展させて高校数学1の「三角比」の内容に作り変えました。作り変えたといっても基本のところはそのままです。sin,cos,tanの三角関数を理解する教材に変身するために、角度ボタンを押すたびにグラフに点を画いていきます。そのグラフを3つ付け加えました。

 これが初期画面です。

 初期画面の角度は30.0度に設定しています。グラフを見てください。グラフの横目盛りが角度の目盛りです。1目盛りが30度です。その上のほうにsinでは赤丸がcosでは緑丸がtanでは青丸がプロットされています。これが角度ボタンを押すたびにプロットされます。

 ボタンをいくらか押したところです。
 点がつながって線となっています。おなじみのsin曲線、cos曲線、tan曲線が見えてきました。

 さらにボタンを押していくと
 曲線が完成します。角度は
  0.0 <= 角度 < 360.0
と設定しているので、さらに押していくと359.9度の次は0.0度です。30.0度まで押していくと完成します。
 この付近はちょっと楽しいです。完成の喜びというかわかったような気になります。何度も繰り返すと理解が進みます。

 図の下 ボタンの上 がsin cos tanの値です。前投稿の座標の数値はsin cos の値と同じ数値です。sin cos tanというと難しそうですが、実は半径1の円のy軸上の値がsinの値でx軸上の値がcosの値というわけです。
 tanはsinをcosで割った値になります。cosが分母になりますから分母が0のとき(角度が90度と270度)は値がありません。グラフを見てもらうと+∞か-∞という値になりそうです。数字では表現不能です。  

 実際に使ってみませんか。次のURLやバナー(図)をクリックすると使うことができます。

https://hirakaretagakkou.web.fc2.com/puroguramu/sannkakukannsuup.html



 スマホ用を作りました。グラフの位置を変えて縦長にしました。ボタンを押しやすく位置を変えて大きくしました。ボタンを押すとき拡大縮小する場合があるのでそれを禁止する命令を付け加えています。
 それがこれです。


 グラフが画けたところです。

 どうぞ使ってみてください。


〔動く教材〕半径1の円上の点の座標と角度の関係 中学校数学

2024-12-02 20:51:40 | 教材の開発
 今回は算数・数学に挑戦しました。これまで三角関数を駆使してやってきたので比較的容易に2日程度でつくることができました。内容としては小学校高学年や中学校であればわかる内容です。小学生中低学年でも「うんうん~・・わかった!」という児童もいるかもしれません。ちょっと使ってみてください。

 これが初期画面です。
 画面の中央の(0,0)を中心として半径1の円を描きました。その円の上にある赤い点の座標が(0.866,0.500)となっています。これは角度30.0度のときの座標です。
 角度が変わったら座標の数字はどう変わっていくかの関係を理解するための教材です。
 下にある角度を変える8つのボタン[ー100]~[100]で知りたい角度の座標の数字がわかります。45度のときには? 60度のときには?という具合ですが、「興味はありませんか?」興味のある方が変わっているのかな。工作やものづくりでは設計の段階で必要な数字かもしれません。

 これはいくらかボタンを押したところです。
 こんな風に”押す”たびに図が変化していきます。角度は 
     0<= 角度 <360
 359.9度を通り過ぎるところで0.0度となります。

 もしよかったら使ってみませんか。次のURLかバナー(図)をクリックすると使うことができます。


 スマホ用も作りました。プログラムはほとんど変わりませんが、ボタンを使いやすい場所に動かしたり大きくしました。

 初期画面です。

 機能は全く同じですが、ボタンを押すとき”拡大”してしまうところがあるので、拡大縮小しないようにちょっとプログラムを書き加えてあります。

 いくらかボタンを押したところがこれです。


 よかったら使ってみてください。






〔動く教材〕〔シミュレーション〕ある日の太陽系の太陽と各惑星の動き 中学校理科 高校地学

2024-11-26 15:48:59 | 教材の開発


ほぼ一か月ほどかかって、表記プログラミングが完成しました。基本的なところは2週間ほどで出来上がったのですが、自身のスマホgalaxy S10つまりプラウザ‐アンドロイドのネット上で使うときに少し画面が乱れてしまうのです。数字をデータとして常に表示するのですが、文字の色・大きさが制御できないのです。表示枠をキッチリ指定しても無視してしまいます。命令を聞いてもらえない部分を何とか少なくして公開したところです。
 どなたかわかる方がおられましたら教えてください。

 さて、これが初期画面です。
 
 一番上に時間の表示が2つありますが、起動すると時計がスタートします。基本的に秒単位で表示しますが、分かりやすくするために右に秒単位を年日時分秒に変換したものを表示します。

 左側に“ある日”の太陽系の全体像を表示しています。太陽を中心に内側から水星・金星・地球・火星・木星・土星・天王星・海王星が反時計方向に公転しています。実際は楕円軌道ですが円として表示しています。すべての惑星の軌道面も同じ平面としています。「ある日」としたのは、起動した初期状態として完全にランダムに配置したからです。配置は起動のたびに変わります。
 公転や地球の自転の時間は、可能な限り正確です。
 
 右図は、左図の各惑星が地球からどのように見えるかを示したものです。完全に左図と連動しています。左図の地球に白い点が見えますが、そこが観測地点です。時間の倍率を上げていくと地球が自転しているのがわかります。その地点から見た東南西の空です。
 太陽の位置によって空の色が変わります。各惑星の位置は夜の空に惑星の色の●印で表します。大きさはすべて同じとしています。太陽だけが少し大きい白●です。

 右図の上に各惑星の満ち欠けの図があります。地球・太陽・惑星の位置関係によるものです。なぜこのような満ち欠けになるのかも理解してほしいところです。左図右図と満ち欠け図を見比べて考えるとわかるかもしれません。

 一番下に時間を操作するボタンが配置されています。
 [一倍]~[十億倍]の9つのボタンは”時間の進行”を早くするものです。実際の空ではできないことですから画期的です。[一倍]は通常の時間の進行です。指定の倍率で時間を進行させることで、各惑星がどのように動くか、また見えるかを短時間に体験することができます。百倍千倍で右図はが動いたり左図の地球の自転が確認できます。百万倍や千万倍で惑星の動きがわかります。天王星や海王星もわずかに動きます。まずは小さい方から押してください。

 その下に[1時間後]~[10年後]の6つのボタンがあります。(これは上のボタン[一倍]にして使うのが基本です。)一気に表示の時間後に飛びます。[1時間後]以外は一日の時間は変わらないので、”同じ時間”に観察すると各惑星がどのように違って見えるかがわかります。

 時間操作ボタンの両側に[補助線]と[位置表示]のボタンがあります。これは2つの図をつなぐ”ヒント”となるものです。
 ここについては説明しませんが、ボタンを押してじっとな眺(なが)めてもらったら「気づいてほしいな~!」というところです。この教材の核心です。

 使い方の説明図を作りました。
 文字が小さくて見えませんが、写真をタップして拡大してご覧ください。

 ヒントのところをちょっと紹介します。
[補助線]ボタンを押したところです。
 左図に線が2本現れました。実際の図を指二本で拡大して見ると地球の観測地点からでています。赤い線と黄色い線はどういう意味の”補助線”でしょう。
 次は[位置表示]ボタンを押してみましょう。
 各惑星が見えるのは昼の空だけですが、各惑星はいつでもどこかにあります。その位置を示してくれます。右図の画面の中央を中心として各惑星の位置が示されています。昼間の空や地面にも表示されます。

 両方を押(選択)して左図と右図を見比べることで、そのつながりが「あっ、そうか!」とわかってくることが本教材のねらいです。

 実際に使ってもらうために下のURLまたはバナー(図)をタップしてください。私の紹介用ホームページへ移行します。


 

 スマホ用のプログラムも作りましたので紹介します。

 初期画面です。

 こんな画面です。ボタンの配置を工夫しています。
 冒頭で”困難”なところを紹介しましたが、半角数字が全角で表示されたり、その文字の色が無視されてすべて黒く表示されるのです。アンドロイドに問題があるのかプログラムに問題があるのか、わからないで試行錯誤をして、結局”問題を避ける”というところで完璧を諦(あきら)めて公表しました。

 説明図です。


 ヒントボタンの画面です。


 実際に使ってもらうために下のURLまたはバナー(図)をタップしてください。私の紹介用ホームページへ移行します。





新Ver,2を作りました。
2025.2

〔動く教材〕太陽系の惑星の動き 「惑星ボタン」の追加しました - 作って遊ぼう&学校の応援

〔動く教材〕太陽系の惑星の動き 「惑星ボタン」の追加しました - 作って遊ぼう&学校の応援

先に紹介したものが十分な理解につながっていないかもしれないという思いから、さらに研究を重ねて、惑星別に表示するものを追加しました。つまり、「水星」「金星」「火星...

goo blog




〔動く教材〕〔シミュレーション〕太陽と地球と月の動きVer.1 中学校理科 高校地学

2024-09-18 07:20:10 | 教材の開発
ひと月ほどかかりましたが、やっとできました。「太陽と地球と月の動き」というこれらの太陽系での配置と動きと見え方を学習するものです。中学校理科で学習するんですが、記憶にありますか。ぜひ次の説明を聞きながら思い出してもらうと嬉しいです。最後にネットにアップしたものをお知らせしますので、実際に使ってみてください。
 では早速説明します。見出しの画像を見てもらうと、2つの画面から構成されています。左が図1「太陽系を北の方向から見たもの」です。太陽が中心にあり、その周りを地球が半時計方向に回ります(地球の公転)。地球は地軸が23.4度傾いて回っています(地球の自転)。ちょっと見難いですが地球の中心よりちょっと右にずれたところの黒い点がその地軸です。その地軸の右側に赤い点がありますが、そこが地球北半球の観察者(私)のいる場所です。地球の自転は赤い点が黒い点を中心に反時計方向に回ることでわかります。その地球を月が半時計方向に回ります(月の公転)。起動したときには、いつもこの位置からスタートします。地球が冬至の方向にありますから冬至(12月20日ごろ)です。赤い点が太陽と反対側にありますから真夜中の0時です。月も地球から見て太陽の反対側にあります。この時の月は「満ち欠けはどうかな?どこに見えるかな?見えないかな?」など〔学習〕しますというより、これを使って〔研究〕できます。
 右の図2は地球上の赤い点にいる観察者(私)が見る東南西の方向です。昼夜で色が変わります。太陽と満ち欠けする月を見ることができます。

※ 地球の地軸の歳差運動については対応しておりません。それは約25772年に時計方向に1回転しますからその分季節がズレてくるというわけです。図1では冬至春分夏至秋分が時計方向に回転するということになります。その大きさをこのプログラミングで計測して見みると、1年に約20分ほどになります。この分だけ季節が早く訪れます。

 詳細に説明したのが次の図です。


 このプログラミングの最大の特徴が3つあります。
1 図1と図2が完全に連動しています。「図1がこういう配置だから、観察者には図2のように見える。」と理解が進む第一歩となります。
2 画面の上のほうには時間と公転自転の詳細なデータがわかります。
3 時間を操作できます。早く進めたり、止めたり、逆進させたり できます。上のデータ欄を見ながら時間をコントロールして仕組みを考えることができます。


 いかがですか、どんなプログラムかわかっていただけたでしょうか。 太陽・地球・月 の動きをこのようなシミュレーションで解明していくためのものです。動きを見ているだけでも楽しいですから〔千倍〕〔一万〕〔十万〕・・〔千万〕のボタンを押してみてください。

 昼の画面です。

 図2の西の空に太陽がありますが、太陽が出ているときが「昼」ですね。何時ごろかな? そのときの図1はこんな感じです。図1の配置を見ただけで図2の太陽の位置、時間などが判るようになれば「理解できた」ということになります。

 夜の画像です。

 図2では西の空に三日月が見えています。このときの図1はこんな位置関係にあります。図1がどうなっていると夜なのかわかりますか? 三日月が見える理由は? 太陽と地球と月の位置からわかリますね。そんなことを言われても、う〜ん、判りません。 ヒントは「赤い点の位置」です。ちょっと見にくいですから拡大して見てください。

 〔位置表示〕のボタンを押したときの画面です。

 画面には月しか見えていませんが、太陽はどこにあるんでしょう。図1にはちゃんとありますね。太陽は見えないところにあります。それを「ここ」と示してくれるのがこの機能です。地面の下に白い点がありますが、ここが太陽の位置です。つまり地球の裏側にあるので見えないんです。〔画面表示ボタン〕はこんな機能です。同じように見えない月の位置も「黄色い点」で現します。地球の裏側にあるときと、昼明るくて見えない空の月です。

 〔補助線〕を押したときの画面です。

 図1の赤い点に茶色い線と黄色い線が現れました。これはどんな意味の補助線でしょうか?ヒントは図2と比較してください。共通点が見えてきませんか!
 実際の画面はシミュレーションですから、遅く早く停止して観察できます。こんな機能です。

 最後に、この図1で実際と違う部分があります。それは太陽・地球・月の大きさと互いの距離についてです。正しい情報を次の図で示します。

 まず大きさです。太陽の直径は地球の直径の約100倍です。月の直径は地球の直径の4分の1です。月の直径を1とすると地球は4、太陽は400です。
 次に互いの距離です。日食ではちょうど太陽と月が重なって見えます。このことから地球からの見かけの大きさは同じというわけです。月の400倍の太陽が同じ大きさに見えるということは、地球から月までの距離を1とすると、地球から太陽までの距離は400ということになります。

 実際に使ってみませんか。これまでの説明が実感できます。もし理科の先生がいたら教えてください。授業で使ってもらったら嬉しいです。興味のある人だったら小学生高学年から大人まで楽しめると思います。
 次の《太陽と地球と月の動き》をタップすると使えます。(私の「開かれた学校HP」へ飛びます。)
 パソコンとタブレットでの使用を推奨しますが、スマホでも十分楽しめます。

《太陽と地球と月の動き》