JointApps

  • このエントリーをはてなブックマークに追加

ニュース

2015年2月

【イベントレポート】JointAppsの課外授業で実感したこと。

2015.2.18

先日、神奈川県立逗子高等学校で高校1年生を対象にした
総合的な学習
<地域の方とつくる表現活動>において
JointAppsを使った「アプリ制作」という授業を持たせていただきました。

昨年に続き2回目となるこの総合学習ですが、
ヒップホップダンスや外国語でのあいさつ、ゴスペルなどなど
色々な授業の中から「アプリ制作」を選んでくれた学生は8名!

3分の2が女子の逗子高等学校で、見事に全員男子の参加になりました!
(女子にはあまりアプリ作りって身近ではない感じなんですかね~)

1日45分の授業を2回分、×2日で合計4回でアプリ作りを覚え、
自分達で企画をし制作、発表するところまで行けたのでしょうか?

まずはJointAppsを覚えてもらいました。

IMG_2483まずは、アプリ作りの基本ツールとなるJointAppsを覚えてもらいます。
今回は、2つのページをボタンを押すことで、
交互に移動するだけの単純なアプリを作ってもらいました。

JointAppsを理解するのに、このページ移動アプリはとても効果的です。
1ページの背景に青空を設置、ボタンを押すと2ページ目に移動します。
2ページ目にも夜空の背景を設置し、ページを移動できたことが、一目で
分かるようにしました。ボタンを押して1ページ目に8名みんな戻れたところで
1コマ目の45分が終了しました。

設計図を書くチーム、書かないチーム

2コマ目は、1コマ目で学んだ”ページを移動する”アプリを応用しアプリの企画を立ててもらいました。

要素としては、画像・文字・移動ボタン
これをいかに組合せ、どう演出して、自分達オリジナルのアプリができるか?
チームに分かれて、考え始めてもらいました。

IMG_2478

これからどんなアプリを作るか?のコンセプト、そしてページの遷移図、
1ページごとの構成要素(画像は何?文字は何を入れる?)を
まず紙に書いてごらん、と紙を複数枚渡して考えてもらったのですが、
素直に、まず紙に書くチームと、書かずに作り始めるチームがいました。

書かずに作り始めたチームの子たちは、パソコンに慣れ親しんでいるようで
JointAppsのレクチャーの時も、余裕があるのか?どんどん作れていました。
しかし、アイデアがまとまらない。。。

設計図を描いてみたら?と何度アドバイスしても、意見を聞いてくれません。
1週目の2コマは終了しました。2コマ目が終わった時点で、
設計図を描いていたチームは何が必要か?がうまく整理でき、
「手書きのイラストが必要だ!」と1人が自分のパソコンを取り出して
絵を描き始いていました。

他のチームはつくりながらなので、作るアプリが決まっていない状態。
昨年も宿題で企画を詰めて!と伝えても何もやってこない子ばかり。。。
来週で全チームのアプリが完成できるのか?不安がよぎります。

2週目からスパルタ!

「もう時間ないよ!今日で作って発表練習まで行くからね!」

激を飛ばし、制作は進みます。設計図を書かない2チームのうち
1チームは、チームでの話し合いがうまくいかず、のらりくらり…。

そこで私から、「ちゃんと設計図をかくべきだよ!終わらないよ」とアドバイス。
すると、ちゃんと書き始めました。書いたことで、一気にアプリ制作が
すすんだようです。IMG_2484

 

やはり予想していたことが現実に!

IMG_2482設計図を最初に描いたチームのみんなは、自分たちでパソコンで絵を描き、
それを素材として使ったアプリを制作、にもかかわらず余裕のプレゼン練習です。IMG_2487他のチームがアプリを完成させ、プレゼンの練習をする中、

一番コンピュータに詳しく、「余裕」と言っていたチームが遅れをとってしまいました。

ちゃんと設計図を描いて、作るものの整理をしていなかったため、
色々なアイデアが頭を巡るだけで、中々形になりません。
また、作るものが決まっても、作りながら文章を考えていたため、時間がかかった模様。

それでもなんとか、3組ともアプリを完成させました。

アプリが完成!

いったいみんなどんなアプリが完成したのでしょうか?

「うさg(ry」
http://www.jointapps.net/form/app_detail/?id=1828

Screenshot_2015-02-18-19-02-37うさぎが、人参を探す迷路アプリです。
成功すると、人参をゲットしますが、失敗すると
BadEND!になります。
3方向ありますが、それぞれのボタンがランダムに
なっており、さらに3つに分かれます。
9通りの迷路となっており、2回目からも
どの道がアタリか?はわからないようになっているのがミソ。
オリジナルのイラストで作成した秀逸な作品です。
さすが、設計図をまず書いただけあって無駄なく
完成できました。 

 

「SEKAI NO OHGOSHI_アプリ」
http://www.jointapps.net/form/app_detail/?id=18

Screenshot_2015-02-18-19-02-11

途中で設計図を描いたチームのアプリは、
食べたいもので、自分が何系か?わかる
診断アプリ。ラッキーアイテムもわかっちゃいます。
文章の面白さが光っていました。

「てぃんにん占い~今日の運勢~Ver,1.2」
http://www.jointapps.net/form/app_detail/?id=1829

Screenshot_2015-02-18-19-02-30

一番時間がかかってしまったチームは
さすが!コンピュータに慣れているため、
十何ページの大作!とてもよくはできています。
でも、もし設計図を描いていれば、
もっとアプリを良いものにできたと思いますよ。

講堂でそれぞれ発表!

照れながらもアプリを全1年生の前で発表、
お疲れ様でした!

IMG_2527私は常々、プログラミングの技術も大事だけれど、
何を作りたいか?それには何が必要か?をまずまとめる工程
いわゆるプログラム設計が一番大切だと思っています。

今回のワークショップでも、それを忠実に実行したチームが
一番早く、オリジナル画像を使うという応用までできて完成していました。

私がJointAppsで伝えたいこと、
そしてこれを使ってワークショップをする際に何を一番に覚えてもらうか?

それは、
「アプリが作れてうれしかったね!」ということではなく、
プログラミングを覚える前に、何をすべきか?なのです。

それは、あなたは何をしたいのか?そしてそのために何が必要か?を
しっかり考えて、まとめる行程こそが効率的に成功に近づく最良の方法ですよ。

ということです。これはプログラミングだけでなく、社会に出たら
実感することだと思います。

プログラムを打つワークショップだと、打つことに集中しなければならず、
この行程に力がなかなか入れることができません。

JointAppsは、プログラムを覚えずとも制作ができるので、
この 何がしたい?それには何が必要?をしっかりとまとめる行程に
集中できるのです。

 

私の考えが間違えでない!と、確信にかえられた

ワークショップとなりました。

 

  • このエントリーをはてなブックマークに追加

PAGE TOP