Blog

Rails 5.1 + Matter.js を使ったデモシステム作った

こんにちは。システム屋まそおの舩原です。

表題の通り、デモシステム作りました。
以下がそのデモシステムの URL です。

https://dropping-containers.herokuapp.com/

どんなシステムかと言うと、
誰かがサイトにアクセスすると
空からコンテナが落ちてきます。

こんな感じ。

落下するコンテナ動作イメージ

指やマウスでコンテナを動かせます。



LOLIPOP!マネージドクラウド で動かしたかった

このデモサイト、本当は LOLIPOP!マネージドクラウド で動かすつもりでした。

しかし、まだベータ版という事で、 動かせなくても問題ないのですが、 rails と yarn が同じコンテナに出来なったために動かせませんでした。 node.js だけ、 rails だけならとても簡単そうでした。



技術メモ

Matter.js という2D物理エンジンを使用しています。

またデザインはbootstrap を使用しています。

ここらを rails 5.1 からの機能の yarn:install で一つにまとめられています。

サイトのソースコードを見ていただくと css と javascirpt の外部ファイルが、それぞれ一つづつという事が分かって頂けけるのではないでしょうか。

また、だれかがアクセスしたというのは、 ActionCable という機能で実現しています。

LOLIPOP!マネージドクラウド には要望出しておいたので、対応したら、その時また記事書こうと思います!