情報デザイン専攻では、はじめてプログラミングを学ぶ1年生向けに「プログラミング入門」という授業があります。ほぼ全員がプログラミング未経験から取り組み、プログラミングの基礎を学びます。2022年度はProcessingをJavaScriptで書けるようにしたライブラリp5.jsを導入して3年目となりました。p5.jsは自分の手元に開発環境が整っていなくても、Webブラウザ上でコーディングや共有が簡単にできるという利点があります。またアニメーション等の表現がしやすいことでも知られています。

2022年度も最後の3回の授業時間を使ってプログラミングコンテストを実施しました。これまでの結果をまとめたアーカイブサイトはこちらからご覧ください。

2022年度のプログラミングコンテストのテーマは「新時代」にしました。『ONE PIECE FILM RED』の主題歌として話題となったAdoさんの「新時代」は「世界中の人々を現実世界から解放する」ことを表現しているとのことですが、この曲に限らず、近年、様々な分野で従来の枠組みを取り払う挑戦的なできごとが増えてきているように感じられます。Adoさんの楽曲にとらわれず、自由な発想で自分なりの「新時代」を、アニメーション又はインタラクティブメディアで表現することに取り組んでもらいました。抽象的な課題に苦戦した学生が多かったですが、かなりレベルの高い技術や、工夫の凝らされた作品が多く寄せられました。今年も各クラスからノミネートされた代表作品から、教員3名による審査によって、優秀賞(ゴールド)2件、優秀賞(シルバー)3件を選出しました。次の通りご報告いたします。

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

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


【優秀賞(ゴールド)】Don’t stop thinking

Don't stop thinking

作者のコメント:初回の授業からこのコンテストでゴールド賞を取るのが目標だったので、それが達成できとても嬉しいです。まだまだ作りたいゲームやこの作品でも諦めたことがあるので、これからも作品制作を通じて技術を向上させたいです。
さて、この作品はエビデンス1に書いてある「新技術の台頭により人間の道徳心が失われていく」を核に作成しました。新時代への印象が全くなかった時に読んだ評論文からアイディアを得ました。またこのことを回避するには、道徳心が失われないように思考するべきだと考えました。そのことを最後のエンド4で自分なりに頑張って表現しました。
この作品はエンドが4つあります。ぜひ全てのエンドをご覧ください。


【優秀賞(ゴールド)】SEARCH 新時代 -新時代について、スマホで調べてみよう!

SEARCH_newage

作者のコメント:私が作ったのは、新時代についてスマホで検索しよう!というテーマの作品です。新時代は1つだけではなく、さまざまな可能性があるのだというメッセージを伝えたくて作りました。検索結果をどうやって表現するかとても悩んだのですが、Googleで検索した際に「もしかして:〇〇?」と表示される機能からインスピレーションを受けて、自分の作品に活用しました。また、今回作品を作るにあたって、ページの切り替えやボタンを押したときのアニメーションを一番意識しました。自然でなめらかな動きにするのは大変でしたが、納得のいく作品にすることができたと思います。自力でコードを書いて作品を作り上げたという達成感や経験を、これからのプログラミングの授業にも活かしていきたいです。


【優秀賞(シルバー)】バーチャル・アイドル

virtual_idol

作者のコメント:この作品は、将来VRが発達した世界で仮想世界でのアイドルとして活動する女性を描いた作品になっています。テーマが「新時代」ということだったので、誰もが理想の自分になり、発信できる世界をイメージして作りました。作品作成にあたり、ペンライトを動かしたり、クリックする度に色を変えたりするところは苦労しました。また、最初はただ物語を読み進めるだけのものにしようと考えていましたが、物足りなさを感じ、最後にミニゲームを追加しました。ミニゲームの難易度も簡単すぎないように調整しました。最終的には満足いく仕上がりになったので良かったです。今後も授業でプログラミングを学んで、面白い作品をたくさん作っていきたいです。


【優秀賞(シルバー)】repaint

repaint

作者のコメント:私は「自分自身の新時代」をテーマにして作成しました。
ネガティブな物事ひとつとってみても、捉え方次第でその印象はガラッとプラスに傾きます。その小さな積み重ねがエネルギーとなり一人一人にとっての新時代を巻き起こしてくれるのではないかと思いました。このような考えを題名の通り、塗り替える動作を用いることで作品に落とし込みました。彩度や図形の動く速度などを工夫することで人物の抽象的な心情の変化を表しました。私なりの新時代をこの作品で追体験していただけたら嬉しいです。


【優秀賞(シルバー)】ユメの終着点

ユメの終着点

作者のコメント:今回のテーマである「新時代」について考えたとき、スポーツや新しい技術に対してなど、様々な業界で使われる「新時代」という言葉に作品のイメージが定まらず苦戦しましたが、その共通点を探したとき、「新時代」にたどり着く過程に「大きな夢、野望」があると感じて「人の夢」に注目した作品を制作しました。
こだわりは手書きのオリジナルキャラクターです。表情をいくつか用意したこと、おまけの部屋で現実世界の日付とリンクした会話をつくることで、親しみやすいキャラクターを目指しました。全9つのエンディングごとにキャラクターのセリフも違うので、キャラクターの反応も楽しみながらプレイしていただけたら嬉しいです。
最後に、構想に時間が掛かってしまったことや、技術不足から自分の思うような作品にすることができなかったため悔しさもありますが、この悔しさをばねにして今後も技術を身につけ、面白い作品を制作したいです。


これまでのコンテストの記事は以下のリンクからご覧になれます。

情報デザイン専攻では、はじめてプログラミングを学ぶ1年生向けに「プログラミング入門」という授業があります。ほぼ全員がプログラミング未経験から取り組み、プログラミングの基礎を学びます。2021年度はProcessingをJavaScriptで書けるようにしたライブラリp5.jsを導入して2年目となります。p5.jsはProcessingをJavaScriptに移植したものなので、自分の手元に開発環境が整っていなくても、Webブラウザ上でコーディングや共有が簡単にできるという利点があります。またアニメーション等の表現がしやすいことでも知られています。

2021年度も最後の3回の授業時間を使ってプログラミングコンテストを実施しました(これまでの結果はこちらからご覧になれます。第1回コンテスト第2回コンテスト第3回コンテスト第4回コンテスト第5回コンテスト第6回コンテスト第7回コンテスト第8回コンテスト)。

2021年度のプログラミングコンテストのテーマは「ダイバーシティ」にしました。「人種、性別、年齢、障がい、国籍、民族、宗教、社会的地位、性的指向・性自認、価値観などの違いを尊重し、認め合う社会にする」という考え方を啓発するためのプロモーションアニメーション又はインタラクティブメディアの制作です。抽象的な課題に、なかなか可視化のアイデアを得られず、表現方法を模索する学生の姿が見られました。また、これまでのプログラミングコンテストの作品蓄積の影響か、年々アイデアや工夫の凝らされた作品が増えてきています。今年も各クラスからノミネートされた代表作品から、教員3名による審査によって、優秀賞(ゴールド)1件、優秀賞(シルバー)4件を選出しました。次の通りご報告いたします。

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

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


【優秀賞(ゴールド)】多種多様の妖怪相談室


YokaiCounselingRoom

作者のコメント:私は、人種、性別、障害といった目で見てわかりやすい多様性だけでなく、個人の価値判断の基準や自己評価などといった細かな内面の多様性こそ尊重されるべきだと考え、この作品を作りました。ただ、「多様性を尊重しよう!」というメッセージを表示するだけでは、プレイヤーが多様性について自分で考えなおし、明日からの行動を変えることには繋がりません。そのため、皆が皆違うことをプレイヤーが自身で実感したような気持ちになれる作品を目指しました。ナレーターが存在せず、操作指示のメッセージをキャラクターが発する場面や、hour()やminute()を使用して、現実世界の時間をキャラクターが言い当てる場面、プレイヤーが心を読まれる場面、これらを通して、プレイヤーの没入感を高めました。背景や雲、キャラクターの表情などは、すべて手書きで用意しています。絵を用意する際、画面内にあるモノの視認性を高められるように、他の授業で習ったレイアウトやコントラスト比を意識しました。

作品制作の中で、障子が瞬間移動したり、どうしてもエラー表示が出てしまったりと、苦労した点も沢山ありました。しかし、この授業を通して、自分の表現したいものがどんどん作れるようになっていくのが楽しかったです。今後も学習を進めて、もっと面白い作品を制作していきたいです。


【優秀賞(シルバー)】ダイバーシティって?

What'sDiversity

作者のコメント:今回のテーマである「ダイバーシティ」からどのような作品にするべきであるか、着想に時間がかかりました。物語ではありませんが、作品を見てくださる方に対して語りかけるような表現方法を取りました。仕掛け絵本のようにひとつひとつのイラストにも注目し、操作なども楽しんでいただきたいです。この作品が、ひとりひとりの違いを認め合う社会にするための小さなきっかけとなって欲しいと考えています。

今後は更に面白い作品の制作ができるよう、プログラミングスキルの向上に励みたいと思います。


【優秀賞(シルバー)】色々な見え方

VariousWaysOfSeeing

作者のコメント:この作品は、「ダイバーシティ」というお題の中でも障がい、特に目の障がいについて取り上げました。1年生で履修した、キャリア・ディベロップメント・プログラムという授業で「ウェブアクセシビリティ」について学び、目の障がいを持つ人が意外と身近にいることを知ったことから、このテーマに決めました。全ページでなにかしらのオブジェクトを動かし、視覚的にも楽しく学ぶことが出来る様にしたところがポイントです。絵を描くことや、クイズ形式でページが進むようにプログラムすることには、とても苦労しました。この作品をきっかけに、目の障がいについての理解が少しでも深まれば嬉しいです。

シルバー受賞で悔しい思いもありますが、さらなる技術の向上を目指していきたいと思います。


【優秀賞(シルバー)】ダイバーシティについて学ぼう!

Let'sLearnAboutDiversity

作者のコメント:私は、ユーザーが選択した会話により、話を進めていくことで、ダイバーシティを知らない方にも大切さを理解してもらえるような作品を作成しました。上下に分かれている吹き出しをユーザーが選択すると、会話やスライドがそれぞれ変化する部分にも注目してもらいたいと思います。今回の作品を作成するにあたり、図形や吹き出しをクリックし、別のスライドに移動させる設定に苦労しましたが、何度も試行錯誤することで完成した作品には、達成感があります。今後も、プログラミングの授業を通して、知識や技術を身に付けていきたいと思います。


【優秀賞(シルバー)】多様性について学ぼう!!

LearnAboutDiversity

作者のコメント:「ダイバーシティを啓発する」というテーマを与えられた時、多様性についてあまりイメージが湧かず、とても難しいと感じました。そこで自分が多様性について理解を深めるところから始めました。そして学んだことを見てくださる人に少しでも伝えられるような作品を目指して制作を進めました。作品のこだわりは、「多様性」であることを重視し、何か特定のものを表す具体的なイラストをあえて多用しなかったという点です。代わりに多様性を連想させるような抽象的な図形を使って表現しました。そのほかにも余白や色の微調整、見やすいフォントを丁寧に選ぶことや分かりやすい文章を作ることに力を入れました。私の作品を通じて、多様性について理解を深めたりや多様性について考えたりするきっかけになれば幸いです。最後に、私がこの成果を出せたのはアドバイスをくれた方々のご協力があってこそのものと考えています。本当にありがとうございました。シルバーという結果でしたが、目標のクオリティに達することはできていません。これからも知識を蓄え、技術を磨いていきたいです。


情報デザイン専攻では、はじめてプログラミングを学ぶ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年生では、この経験を生かして、本格的な作品制作にチャレンジして欲しいと思います。