情報デザイン専攻では、はじめてプログラミングを学ぶ1年生向けに「プログラミング入門」という授業があります。2019年度までは図形やアニメーションを描きながら、楽しくプログラミングを学ぶことができるProcessingを使用してきましたが、2020年度はオンライン授業に対応することもあり、ProcessingをJavaScriptで書けるようにしたライブラリp5.jsを導入しました。p5.jsはProcessingをJavaScriptに移植したものなので、少し書き方は異なりますが、自分の手元に開発環境が整っていなくても、Webブラウザ上でコーディングや共有が簡単にできるという利点があります。

2020年度も最後の3回の授業時間を使ってプログラミングコンテストを実施しました(これまでの結果はこちらからご覧になれます。第1回コンテスト第2回コンテスト第3回コンテスト第4回コンテスト第5回コンテスト第6回コンテスト第7回コンテスト)。2020年度のコンテストのテーマは「持続可能な世界の実現に向けて」にしました。2015年に国連によって定められた、2030年に達成すべき「持続可能な開発目標」SDGs。SDGsの目標又はターゲットの中から一つ選び、その知名度を向上させるための作品作りです。わかりやすく楽しめるプロモーションアニメ又はインタラクティブメディアの制作を課題としました。

こうして1年生全員がコンテンストに取り組みました。オンライン授業下では、なかなか友人と相談しながら進めるなどの機会には恵まれませんでしたが、そのような環境の中でもアニメーションやマウス・キーボード操作を駆使した素晴らしい作品が多数制作されました。今年度は創意工夫が凝らされた作品が多く、教員3名による審査は難航しましたが、優秀賞(ゴールド)4件、優秀賞(シルバー)1件を選出しました。次の通りご報告いたします。

受賞されたみなさん、おめでとうございます。また、惜しくも受賞できなかった方の中にも素晴らしい作品が多くありました。是非、これからも楽しんでプログラミングを続けて欲しいと願っております。

以下の受賞作品の画像をクリックすると、その作品が別タブが開きます。画面を一度クリックしてから、マウスやキーボードで操作して下さい。スマホのタッチには対応していない場合がありますので、必ずPCでご覧下さい。


【優秀賞(ゴールド)】クリックで学ぼう!SDGs

ClicktoLean1

作者のコメント:SDGsという一見難しそうなテーマを、いかに分かりやすく飽きさせない様に伝えるかで最初はとても悩みました。色々考えた末、SDGsの解説をテキストでしっかりする反面、周りの風景にアニメーションをつけて賑やかな雰囲気にする事で、閲覧意欲が上がる様にしました。素材はほぼ全て自作したのでとても時間がかかりましたが、プログラミングで思い描いていた通りに動いてくれた時には大きな達成感が得られて楽しかったです。
今後も様々な授業を通して、プログラミングのスキルを上げていけたらと思っています。


【優秀賞(ゴールド)】地球にやさしく!

Earth

作者のコメント:今回のテーマは「持続可能な世界の実現に向けて」ということで、SDGsの17の目標から
「13.気候変動に具体的な対策を」を宣伝しようと思いこの作品を制作しました。気候変動に対して私たちが日常でできる小さなことを、簡単に確認してもらえるように場面ごとに2択が出る作品になっています。場面の切り替えやポイント管理が大変で、想像しているものを表現するのはとても難しかったのですが、これまでの授業やインターネットで調べたこと、友人からの教えによりなんとか形にすることができました。まだ理解できていない部分も多いですが、様々な表現ができるようにこれからも勉強に励みたいと思います。


【優秀賞(ゴールド)】クリーンエネルギー

CleanEnergy

作者のコメント: 地球温暖化が進んでいる世の中において、エネルギーをクリーンにするというテーマは私たちにとって大変身近な問題でもあり、改善していかなければいけない問題だと思いこのテーマを選びました。この作品のテーマは世界全体が取り組まなければいけないことと、私たちが日々の生活で取り組むことが出来るエネルギーの節約についてを、アニメーションとスライド形式によって分かりやすく伝えるということです。私にとって初めてのプログラミングだったので、頭の中のイメージを作品として再現することはとても難しく大変苦労しました。今後もたくさんのプログラミング技術を吸収して、スキルの向上をしていきたいと思います。


【優秀賞(ゴールド)】分別ごみ拾い

Game

作者のコメント:至ってシンプルなゲームシステムです。しかし、細部までこだわり抜いた作品でもあります。「持続可能な世界の実現に向けて」ということで、スコアが上がるにつれて晴れていく空は、私たちが向かう明るい未来とリンクしています。この作品は、母の「最近はお肉のトレイも洗ってプラスチックごみで捨てているから燃えるごみの袋が軽い」という何気ない発言から生まれました。この作品の着想を与えてくれた母、私が理解できるまで質問に回答してくださった先生、そして試運転に付き合ってくれた友人たち、ついでに直接は関与していないけれど父に、この場を借りて感謝を伝えさせていただきます。長くなりましたが、この経験を自信として、より一層楽しみながら、精進していきます。


【優秀賞(シルバー)】節電

Saving

作者のコメント:「持続可能な開発目標」SDGsの七つ目の目標「エネルギーをみんなに、そしてクリーンに」より、節電を推奨するアニメーションスライドを作成しました。このスライドの一番の特徴として、キーボードの上下キーを電源スイッチに見立て、ONにした場合とOFFにした場合で場面が切り替わるようにプログラムしています。節電を行うことによって様々な方面に対して良い影響があるということが伝わっていたら嬉しいです。
自分が作りたいものを実際に再現することはとても難しく、試行錯誤しながらかなり時間をかけて完成させた作品なので、この経験を生かし、今後も引き続き知識を蓄えながら更に発展した作品を作れるよう努力していきたいと思います。


デザイン専攻の2年生の後期に開講されている「プログラミング論及び演習」という授業を昨年度に引き続き紹介します。この授業で使用するプログラミング言語は、2014年度から従来のC言語からJavaScriptに変更しまして2015年度は2年目となります。2015年度から私(藤村)と非常勤の山崎大助先生が授業を担当しております。

本年度は、JavaScriptの基礎を学んだ後、jQueryライブラリやp5.jsライブラリの活用方法などを学びました。p5.jsはJavaScriptでアニメーションや音楽を扱いやすくする新しいライブラリで、2015年度から導入しました。ちなみに、p5.jsについてはこちらにも記事があります。

授業の最後の3回では、授業で学んだ技術を駆使して自由にWebアプリを制作しました。以下に3つの作品を紹介します。HTML5対応のPC版ブラウザ(Chrome, Firefox, Microsoft Edge等)で閲覧した場合には、以下の画像をクリックすると、別ウインドウが開き、実際に操作することができます。

最初の作品は、マウスで画面上をクリックして隠されたヒントを読み、解読して部屋から脱出するゲームです。これを作成した学生によりますと脱出ゲームとしては難易度が低いそうですが、脱出ゲームに慣れていない人にとってはかなり難しいと思います。10分で解ければ天才かも?

脱出ゲーム
escape

次の作品はお絵かきツールです。PCに保存されている任意の画像を背景画像としてアップロードすることができ、お絵かき後、キャンバスを右クリックして画像をダウンロードすることができます。ちょっと手書きを加えたいときにとても便利ですね。

お絵かきボード
drawpict

最後の作品は以下の画像から想像できますようにキーボードです。PCのキーボードがキーボードとして:-)音楽を演奏することができますし、ドラムや音量や音程を変化させるイコライザーの機能もあります。詳しく説明しなくても使えると思いますので、是非、演奏してみて下さい。zキーを押すと音楽も流れます。

キーボード
music

この授業では、このようにjQueryやp5.jsのライブラリを使って、脱出ゲーム、お絵かき、キーボードといった幅広いWebアプリを自由に制作することができました。3年生、4年生では、この経験を生かして、本格的な作品制作にチャレンジして欲しいと思います。