チーム「アカエイ＜^-^＞を流行らせ隊」メンターによる成果物紹介jig.jpサマーインターンシップ2024
こんにちは。
今年に入ってなかなかできなかった温泉めぐりを再開したjig.jpの藤井と申します。
温泉に入るとエアコンで冷え切った体が温まり、いい汗が流れてリフレッシュできるのでおすすめです。
私は2021年の10月に入社し、投稿する時期にちょうど4年目になりました。
普段の業務ではふわっちのPC画面の保守を担当しています。
サマーインターンシップ2024ではチーム「アカエイ<^-^>を流行らせ隊」のメンターを担当しました。
メンバーはPOのなっち、よーすけ、Mizuumiの３人です。
気になるチーム名の「<^-^>」は、アイデア出しの時に密かに話題になったアカエイのポーズ(両方の手を頭の上で立てるポーズ)で、チームの中にこのポーズを流行らせたい人がいるとかいないとか....
POのなっちを中心として、気になることがあれば全員で相談して認識を揃えて楽しく開発ができました。
それでは開発したアプリを振り返ってみましょう。
アプリについて
チーム「アカエイ<^-^>を流行らせ隊」が作成したアプリは
「かいがん清爽」です。
サマーインターンシップ2024のテーマは「さわやか」でした。
汚れている海岸を自分の手で掃除することで「さわやか」な気分になり、また綺麗になった海岸を見ることでリラックスすることができるアプリを作成しました。
海岸にあるゴミを掃除していくことで、徐々に海岸が明るくなり海の波の音が聞こえてくるのが最大の特徴です。
使用技術
このアプリは、HTML、 CSS、JavaScriptで作成されています。
必要なイラストは手書きで作成し、アニメーションはHTMLのCanvas要素やCSSアニメーションで実装されています。
もっと「さわやか」なアプリに
このアプリには、よりユーザーに「さわやか」になってもらうための様々な仕掛けが散りばめられています。
その中のいくつかを紹介します。
仕掛けその1 - 掃除する道具
「掃除道具」として最初はトングを想定していました。
しかし、トングではあまりにも「さわやか」を感じないということでチームで話し合った結果、虫取り網と水鉄砲で掃除をするということになりました。
虫取り網は、よーすけが思いついてくれました。
袋がついている、かつ「さわやか」を感じるものという面でぴったりだったと思います。
水鉄砲も水を飛ばして掃除するということで、とても「さわやか」を感じるイメージにぴったりなアイテムでした。
仕掛けその2 - ゴミを掃除した時のエフェクト
ゴミを掃除した時に一番「さわやか」を感じて欲しいですよね。
そこで、虫取り網や水鉄砲のそれぞれでゴミを掃除した時に「さわやか」なエフェクトが出るようにしました。
虫取り網を使用した場合は、虫取り網を少し振りかぶってからサッと取るようなアニメーションとともに「キラキラ」と音が流れます。
この部分はCSSアニメーションで作られています。
水鉄砲を使用した場合は、画面下に置かれた水鉄砲から勢いよく水が発射され、丸太に当たると水が弾けるようなアニメーションが表示されます。
水鉄砲の水は単調には発射せず、ブルブルと震えながら出ていく感じはリアリティがありより「さわやか」な気持ちにしてくれます。
この部分はJavaScriptで複数のHTMLCanvasElementを操作して水の流れを表現しています。
虫取り網や水鉄砲のイラストと虫取り網のアニメーションはよーすけ、水鉄砲の複雑なアニメーションはMizuumiが担当してくれました。
仕掛けその3 - 掃除が進むにつれて起こる海岸の変化
掃除が進むにつれて海岸が明るくなったり波の音が聞こえてくるようになりますが、もっと「さわやか」になるためにはどうしたらいいかということをチームのメンバーで意見を出し合いました。
そこで「海の生き物たちが画面に現れてくる」という案が出てきました。
海の生物たちが現れることで、海岸が掃除されて清潔になっているということがユーザーにも体感としてわかるようになり、可愛らしい海の生き物を見て「さわやか」な気持ちになれるのでぴったりなアイデアでした。
海岸が完全に綺麗になると、カニが画面を横切ったり、イルカが海から顔を出したり、クジラが潮を吹いたりととても「さわやか」な海岸になります。
この部分はPOのなっちが生き物のイラスト作成からCSSアニメーションで生き物を動かすところまで実装してくれました。
最後に
チーム「アカエイ<^-^>を流行らせ隊」が作成したアプリ「かいがん清爽」について解説しました。サマーインターンシップ2024のテーマである「さわやか」がたくさん詰まったアプリになったと思います！
面白そう！自分もチーム開発してみたい！と思った方はぜひjig.jpのインターンシップにご応募ください。
インターンシップでお待ちしております。