キャンパスプログラム北海道斜里高等学校参加記録

Day1

2024年9月9日、キャンパスプログラムの初回授業が行われました。

どんな生徒さんが集まるのかドキドキして待っていたのですが、

始業のチャイムがなっても生徒さんが二人しか教室にいません。

「あれ?」と不安になっていたところ、

二人が「教室を間違えてるかも」と教えてくれました。

慌てて先生に探しに行ってもらい、無事全員で授業を始めることができました。

まずは、事前に作ってもらったストーリーボード(※1)について確認です。

生徒さんの考えたテーマは『観光地と飲食店をまとめたアプリ』でした。

観光地や飲食店を訪れたときに、サイコロをふってすごろくができる機能をつけたい!

すごろくの止まったマスによって色々なキャラクターを獲得できるようにしたい!

という案でした。

※1　ストーリーボードの一例

「とても素敵な機能」だと思ったのですが、

すごろくの複雑さやお店への許可取など実装が難しい点に気づきました。

何度も悩み、みんなで話し合いをした結果、

すごろくの部分はルーレットにし、

その場所にいったら「行った!」ボタンを押してルーレットスタート。

止まったキャラクターをゲットできる!

という仕様に決まりました。

アプリの方向性も決まり、いよいよアプリ作成!

みんなで役割分担をすることに。

キャラクター作成、レイアウト作成、スクリプト作成、

どれがやりたいか聞いたところ、、、

全員が「キャラクター作成!」

FileMakerを使いたい子はゼロでした。🥲

難しそうという思い込みがあり、できるか不安だったようです。

そこで、まずはみんなにFileMakerを触ってもらうことにしました。

各自に作るレイアウトを割り振り、そのレイアウトに必要なスクリプト作成までを行なってもらいました。

最初こそ不安そうにFileMakerを使っていたのですが、

慣れてきた頃には「楽しい」という声も出てきてとても嬉しかったです。

そうこうしてる間に終業のチャイムが。

放課後も残ってくれた子達で作業を進め、

1日目はインフォメーションの画面を完成させて終了することができました。

 

 

Day2

2日目が始まりました。

各自でレイアウトを作っていたことにより問題発生!

大まかなデザインは決まっていたのですが、決めていなかった細かい部分、

フォントサイズや配色、ヘッダやフッタの高さなどがバラバラに…

そこで統一性を持たせるため、レイアウトのテーマを決めることにしました。

用意した「オレンジ」「ピンク」「ブルー」の3つのサンプルの中から選ばれたのは、

「ピンク」でした!

昨日作ったレイアウトにテーマを反映していくと統一感が生まれ、一気にアプリらしくなりました。

一旦完成していたインフォメーション画面のおかげで具体的なイメージが持てたのか、

レイアウト制作はスムーズに進んでいきました。

そしてアプリ開発は次の段階、「ボタンの作成」です。

ボタンに設定するスクリプトの作り方を教え、チャレンジしてもらいました。

学生たちは初めてのスクリプト作成に悪戦苦闘。

もう少しだけ作り方の説明を補足したところ、

要領をつかみ、手探りながらも思う通りに動くスクリプトができました!

レイアウト上にGoogleマップを載せたり、お店の電話番号情報から電話をかけれるようにしたりと、

着実に完成へと近づいていきました。

ここで終業のチャイム。

2日目も作業を進めるため、放課後も残って作業をしていました。

レイアウトは完成してきたのですが、ゲットできるキャラクター数が圧倒的に少ない!

先生から「1人5つずつキャラクターを考えてくる」という宿題をもらい、2日目は終了となりました。

Day3

いよいよ最終日。

レイアウトの調整や、まだできていないスクリプトの作成など、ラストスパート。

前日に先生からだされた「1人5つずつキャラクターを考えてくる」という宿題を持って集合です。

それを使ったキャラクターのルーレット画面の作成と、キャラクターをゲットするスクリプトの作成に取り掛かります。

それぞれが個性的なキャラクターをたくさん用意してくれた結果、キャラクター数はかなり増えました。

ルーレットのようにキャラクターが切り替わる画面をgif動画で作り、フィールド内に配置、ストップボタンを押すとキャラクターがゲットできる構成となっています。

ストップボタンも最初は既存のもので作ろうと思っていたが、イメージに合うものがあまりなく、生徒さんが自らデザインしました。

ペイントツールでサクッとボタンのイメージを作成していたのでとても感心しました。

作成したストップボタンにキャラクターをゲットするスクリプトを割り当てて、

今回メインとなっているキャラクターのゲットスクリプトの完成です。

ここで授業は終了。この日もまた放課後まで作業が続きます。

最終日の放課後も多くの生徒さんが自主的に残り、アプリの完成を目指しました。

FireMakerの扱いにも慣れてきたのか、着々と作業が進み、わからないところがあると、その都度私たちに質問をしてくれる流れができていました。

できた画面はひたすらデバッグ。

まもなく完成という頃になって、重大な事実に気がつきました。

アプリ名が決まっていない!

一番重要なことを忘れていました。

アプリの命名は、今回総監督をしてくれた生徒さんに依頼。

そこで出てきたのが「とこさんぽ」

由来は、知床の「とこ」と散歩を組み合わせたものです。

アプリ名が決まったら、次はロゴ作成です。

iPadを使い、デザインを考え作成しました。

ロゴをアプリの上に配置し、アプリ完成です!

さっそくiPhoneで一連の操作を試します♪

うまくいかない…

ルーレットが動作しなかったり、レイアウトによってボタン配置がズレてたり、トラブルが多発しました。

それでも実際に動いてる画面を見て、生徒たちは感動していました。

細やかな修正は後日にし、ここまでイメージ通りに動くアプリを作れたことを喜び合い、最終日も終わりとなりました。