gyro_background

こんにちは。BeEngineer梅田校責任者の藤原圭吾です。

春光うららかな季節となりました。4月11日(土)、BeEngineerでは継続生を対象とした特別イベント「ジャイロセンサを使ったWebサイト制作」を実施しました。

今回は、2時間×2コマという集中した時間の中で、中高生たちが「動きのあるWebサイト」づくりに挑戦した様子をレポートします。

技術と感性を掛け合わせる「アニメーション」

今回のテーマは、Webサイトに欠かせない「アニメーション」です。 単にコードを書くだけでなく、「どうすれば桜の花びらが背景でひらひらと自然に落下して見えるか」という問いに対し、数学や物理的な計算を用いながらロジックを組み立てていきました。

さらに応用として、スマートフォンの「ジャイロセンサ(加速度センサ)」と連動させる仕組みを導入。スマホを傾けた方向に花びらが舞うという、直感的でインタラクティブな表現を目指します。

BeEngineer公式サイト

試行錯誤の先にある「自分だけの表現」

授業を担当したのは、この4月から講師デビューを飾るフレッシュな大学生たちです。 最初は少し緊張気味だった生徒たちも、講師からの発問や自己紹介を通じて、次第にリラックスした表情に。後半には、お互いの画面を覗き込みながらワイワイと活気ある雰囲気になりました。

最終的には全員が自分のスマートフォンで動作を確認。 基本の桜だけでなく、お気に入りの画像や、中には「1万円札」をひらひらと降らせるユニークな発想を見せる生徒も(笑)。自分の手で書いたコードが、手に持つデバイスの動きと連動する瞬間の喜びは、プログラミングの醍醐味そのものです。

遊びの中に、本物のスキルを

今回のイベントでは、楽しみながらも以下のような実践的な技術に触れました。

  • GitHubによるコード管理とGitコマンドの操作
  • JavaScriptのコーディングルールと論理的思考
  • 離脱率を下げ、ユーザーを惹きつけるためのUI/UX(視覚効果)の考え方

これらはすべて、実際の開発現場で使われている「本物のスキル」です。遊び心を持って取り組みながらも、いつの間にかプロの入り口に立っている。それがBeEngineerの学びの形です。

この4月から、生徒たちはまた新しい単元へと進み、さらに高度な開発レベルを目指していきます。プログラミングを通じて、自分のアイデアを形にする力を一緒に養っていきましょう。

BeEngineer公式サイト

新しい世界への一歩を、ぜひ一緒に踏み出しましょう。

BeEngineer通信一覧へ戻る