DP1|情報学の専門知識|オブジェクト指向技術

:自身が提出した課題の概要

オブジェクト指向技術では、オブジェクト指向言語であるJavaScriptを使ってプログラミングを行い、最終的にそれらの知識に基づいて、インタラクティブなECサイトの設計・実装を行った。最終課題のECサイトでは「天気を売る」という空想を設定し、ユーザーがわくわくしたショッピングができるように、サイト全体の雰囲気を「とにかく可愛い」になるようにカラフルにデザインした。また、Webページのロード時間がわくわくを阻害する原因にならないように、シングルページで作成し、:hover機能でさらなるわくわくを追求している。

▼ECサイトのトップ

スクリーンショット 2024-04-15 15.02.45.png

▼お天気を多角的に閲覧できる

スクリーンショット 2024-04-15 15.04.00.png

▼多様な単語から検索できる

スクリーンショット 2024-04-15 15.03.16.png

スクリーンショット 2024-04-15 15.03.31.png

ソースコード:そらもよう

https://docs.google.com/document/d/1J1WjLq4ZccLxolQpBkWw-oXOhSDdRLPauts30yZl9QM/edit

:取り組み、工夫した点、気づきや学び、反省

私が制作した最終課題のECサイト『そらもよう』は前述した通り、空想を設定したものである。現代において、「天候を操る」ましてや「天気を売る」という行為は未だ不可能であるが、だからこそ『情報とそれを扱う原理・機構・人間、社会への応用に関する知識』という観念において、「もし〇〇だったら、こう思うだろう。そしてこうあって欲しい」という純粋な欲から創作意欲を奮い立たせ、情報技術を応用させることができる。そして、実際に作ろうという気になれるのではないだろうか。たかだかECサイト風情の『そらもよう』を作ったからといって、実際に天候を操れた訳ではない。しかし、私のこの作品(情報技術を応用したモノ)を誰かが見た時、または未来の自分が見返した時、天候を操るという空想を受け継ぐ可能性がある。言い換えるならば、情報技術というものは「あったらいいなこんな世界」という空想を他人と共有し、現実にする技術なのである。  『そらもよう』を制作している際に工夫した点としては、オンラインストアの検索ボックスで「快晴」や「晴天」、「せいてん」、「Sunny」など天気を表す言葉を入れれば基本的に検索結果が表示されるように工夫しています。これは、データベースにnameGroupという要素を作り、この要素を用いて検索ボックスでデータを取得することで成り立っている。例えば快晴であれば "nameGroup": "快晴天かいせいてんClearSunny"とすることで、快晴を連想させる多様な単語から検索ができるようにしている。  また、コーディングの面では、Vue.jsのv-ifを用いてシングルページの遷移を行うことに苦労した。ただ遷移させるだけなら、v-on:clickで変えた変数をJavaScriptのfunctionに持って行かず、直接v-ifで遷移を起こせば良いと考えていた。しかし、それだと遷移以外のことができなくなってしまったため、一旦JavaScriptのfunctionに落としてから、functionの中からv-ifに遷移の命令を送ったり、URLを作成したりしてupdateProducts()に渡すことで、データベースの情報を出力するなど多様な動作を可能にした。今となっては簡単そうに思えるが、作成当時はこの作業を行うだけでも3日程かかっており、コーディング中にコメントアウトで//頭、//口などとメモして、JavaScriptの動作を人間の動作に例えて考える工夫をした。

DP1|情報学の専門知識|ユーザインタフェース

:自身が提出した課題の概要

この授業の最終課題は、テーマとして「アフターコロナ」が設定されており、「コロナ禍とアフターコロナで一体何が変わるのか、そこで活用できるUIとは何か」を4人グループで考え発表した。  私の班では、コロナ後は「強制的に外に出される機会が多くなる」という予想を前提にし、①長引いたコロナ禍の影響からの身体的な衰え。②精神的なダルさ。③家にいる楽しさを体感してしまったこと。④「人とすれ違っても大丈夫なのか」といった不安。これら4つを”ついで感覚”で解消するゲーム『ぷらっと天下統一』、通称『天ぷら』を生み出しFigmaでプロトタイプを作成した。

▼天ぷらのゲームシーン

スクリーンショット 2024-04-15 15.09.29.png

スクリーンショット 2024-04-15 15.09.46.png

スクリーンショット 2024-04-15 15.10.09.png

スクリーンショット 2024-04-15 15.10.24.png

スクリーンショット 2024-04-15 15.10.36.png

Figma:ぷらっと天下統一https://www.figma.com/proto/QoG2DpunJl2ZyeYkwPWu9x/天ぷら_プロトタイプ?node-id=3-6&starting-point-node-id=3%3A6

:取り組み、工夫した点、気づきや学び、反省