居酒屋プロジェクト

居酒屋プロジェクト

はじめに

ちょっとしたハッカソンで、WebSocketを使った連動サイトを作ってみました。

デザイナー + エンジニア(ぼく)の二人構成です。

目的

呑みたい!、居酒屋行きたい!の欲求をガチャを通して、可視化する。

ゲーム概要

スマホでガチャを引くと、居酒屋のカウンターに、ガチャで引いたアイテムが置かれます。

PCサイトの舞台は居酒屋さんです。

そこには、SPサイトにて引いた料理(ガチャ)が並びます。

ガチャ画面

某白なんとかというアプリのガチャ画面をそれっぽく作ってみたかったので、参考にしました。

Web

izakaya-project/izakaya-project-web

おかみさん側(みんなのガチャビューアー)

https://izakaya-project.herokuapp.com/

居酒屋のカウンターに、みんなが引いたガチャのアイテムが降ってきます。

おじさん側(ガチャ画面)

https://izakaya-project.herokuapp.com/ojisan

ガチャは 星2〜星4 まであります。

もちろんレモンサワーは 星4 です。

Electronアプリ

単にWebViewを使っただけですが、おかみさん側をElectronでアプリ化してみました。

izakaya-project/izakaya-project-electron

iOSアプリ

iPhone6sを買ったので、3Dタッチの部分をswiftでどう書くのか試したかったので作りました。

iOSアプリのほうはおじさん側です。

izakaya-project/izakaya-project-ios

使った技術一覧

  • node.js
  • React
  • Express
  • gulp
  • ES6
  • WebSocket
  • Pixi.js
  • Create.js

おかみさん側バックサウンド

あらかじめ決められた恋人たちへ - ディスタンス あらかじめ決められた恋人たちへの「ブレ」を iTunes で

居酒屋プロジェクト

( ・∀・)イイ!!