見出し画像

SNSに乗せて捨てるだけなら、仮想のタピオカでいいじゃないか

イントロ


今回は過去に作ったWEBアプリの紹介します。
それがこちら

アプリトップ画面

サステナブルタピオカ!!!

二次元の物理エンジンと加速度センサーを使って、タピオカを再現しています。

いいからソースを見せろという方は以下のgithubからクローンしてください。
https://github.com/setogawamasao/matter-js-spike.git

なぜこんなものを作ったのか?

少し話は変わりますが、「Chim↑Pom」という芸術家集団をご存じでしょうか?


Chim↑Pomとは?メンバーと活動歴、代表作品について詳しく紹介
出典:https://media.thisisgallery.com/20259482

Chim↑Pomは2011年5月に渋谷駅にある岡本太郎が描いた巨大壁画『明日の神話』に福島第一原発事故の絵を付け足すという社会批判的な芸術活動を行い、話題になりました。そのほかにも当時の社会問題を批判する作品・活動を数多く行っています。

その活動を知った私は「メッセージ性のある活動かっけええええ」とめちゃくちゃインスパイアされました。(バンクシーが話題になったのもこの時期だった気がします。) そして、私だったらシステムエンジニアだから社会批判的なアプリかぁ、と超恥ずかしい妄想をしつつ、その思いはそっと心の中にしまい月日は流れました・・・そしてある日、タイムラインか2chまとめで以下のような画像を見たときにChim↑Pomにインスパイアされた感情がフラッシュバックして

「捨てるまでがタピ活」みんなで考えたい“タピオカごみ問題”
出典:https://www.buzzfeed.com/jp/sumirekotomita/what-do-we-do-with-tapioka-gomi

「SNSに乗せて捨てるだけなら、仮想のタピオカでいいじゃないか」というメッセージ性でめっちゃリアルにタピオカの動きを再現したアプリ作ったら、めっちゃChim↑Pomぽいーーーと閃き作りました。
また、SDGSやサステナブルがバズワードになり始めた頃で、これだってSDGSだろ!という皮肉も込めて「サステナブルタピオカ」という名前にしました。

システム構成

ミドルウェアはNode.js、Reactで書いております。
二次元の物理エンジンは、matter-jsを利用しております。

加速度センサーに関しては、標準のJavaScriptで用意されているライブラリを利用しています。

機能紹介

1.ストロー刺せます

ストロー刺して、かき混ぜることができます。

ストローを刺した状態

2.味を変えられます

好きな味に変えられます

ストロベリー味のタピオカ

3.パッケージを変えらえます

好きなパッケージに変えられます。

パッケージ1
パッケージ2

4.タピオカを保存してSNSに投稿できます。

左上のカメラマークを押すことで画像を保存することができます。
また、スマホ内に画像を保存したり、Twitterに投稿が可能です。

保存画面

最後に

ここまで読んでいただきありがとうございました。
恥ずかしながら「メッセージ性のあるアプリを作りたい」というのが一番最初の動機だったことを最近まで忘れてました。作り始めたら狂ったようにタピオカアプリを作って、完成したら満足して一番大事なところを説明するのを忘れていました。なので、今回まとめられてよかったです。最後に開発過程も動画にまとめていますので、良かったらこちらも見てみてください。


いいなと思ったら応援しよう!