Repositories

https://github.com/yataro-fujinaga/network-animation

参加学生

藤永弥太郎

作品紹介

どのような作品か

通信プロトコル（TCP、UDP）によるデータのやり取りを
Web アニメーション技術（Canvas）を用いて視覚的に表現する。

作品のターゲット

ネットワーク分野の実務経験がないエンジニア
Web アプリケーションやゲームの制作経験はあるが、ネットワークにおける技術基盤の理解が十分でないエンジニア
これからプログラミングを勉強する新人エンジニア

作品の魅力

従来のテキストによる説明では、専門用語や抽象的な表現の理解が難しく
特に初学者にとって、前提知識が必要となる専門用語やコンテキストを理解する必要がある抽象的な表現は
学習の大きな支障になりうる。

そこで本作品では、テキストではなくアニメーションによる図解を採用することよって
学習者の前提知識や経験によらない通信プロトコルの説明を実現した。

使用した技術

Canvas API
Web アニメーションの作成

Vuetify
UI の作成

Typescript
使用したプログラミング言語

苦労した点・工夫した点

苦労した点は「アニメーションのサイズの設定」である。
アニメーションを作成するために使用した「Canvas API」では相対値によるサイズの設定ができない。
そのため、アニメーション内の各要素のサイズを把握しながら作成する必要があった。

工夫した点は「アニメーションとテキストの比較」である。
テキストによる説明とアニメーションによる図解を比較することで両者の長所、短所を示すことができた。

新たな発見

本作品では、通信プロトコルに関するテキストの説明をアニメーションの図解で代替しより直感的な説明の実現を試みた。
しかし開発を通して、アニメーションの図解では表現できない説明（固有名詞、専門用語）が存在し
テキストによる説明とアニメーションの図解は対立関係ではなく、お互いの足りないものを補い合う、補完関係にあることが分かった。

使用した画像

Spider icons created by Smashicons - Flaticon

2022年度秋学期の関連作品