ipoca忘年会でアプリを作りました！！

メンバーズブログ 2016/01/15

# ipoca忘年会アプリを作成！！！

開発の中本です。今回は、忘年会を盛り上げるために作った「抽選会のゲーム」についてお話をします。 弊社では、毎月飲み会があるほか、大きな区切りの時には色々な社内イベントがあり、先月末は忘年会がありました。一年を締めくくる大事なイベントですので、年末で忙しい時期ではありますが、 開発チームとしても貢献すべく忘年会専用の抽選ゲーム作りをしました。 今回はそのゲームに使用した技術の一部を紹介したいと思います！

## システム概要

それではまず、このゲームの大まかな概要を説明いたします。 ・参加者はアプリ(iOSもしくはAndroid)をダウンロードし、ユーザー情報を登録します。 ・その後、完全にランダムな数字の抽選番号をアプリ側に保存します。 ・抽選の際には、その番号をブラウザベースのスロットゲームに表示し当選したら対象の景品と交換を行います ちなみに、このブラウザベースのスロット抽選画面は弊社のインターンの学生に作ってもらいました！！インターンのみなさん、とてもよく頑張りました。 今回は、作成したゲームのうちサーバーサイドの環境構築とmysqlの抽出結果から戻り値をjsonで返しアプリ側(iOS)で表示する部分までを簡単に紹介したいと思います。

## 環境構築

サーバーサイドでは、[cloud9](https://c9.io)というクラウド上で使えるideを使用しました。

※ cloud9はnode.js以外にもphpやrubyの環境を作る事ができます。 フリーアカウントですとprivate環境が1つ作れます。 node.jsベースで作成し、主な環境は下記の内容になります。 テンプレートエンジンとしてexpressを使用しdbは使い慣れているmysqlを使用しました。 – サーバー環境 – OS Ubuntsu – node.js (v4.1.1) – express – mysql-wrapper まずは、必要なモジュールを下記コマンドを用いてインストールしていきます。

npm install mysql

インストールされると下記の結果が表示されます。

mysql@2.10.0 /home/ubuntu/.nvm/versions/
node/v4.1.1/lib/node_modules/mysql ├── bignumber.js@2.1.2 └── readable-stream@1.1.13 (string_decoder@0.10.31, inherits@2.0.1, isarray@0.0.1, core-util-is@1.0.2)

このままではmysql server をスタートさせようとすると良くあるsocketエラーが表示される場合があります。

ERROR 2002 (HY000): Can’t connect to local MySQL server through socket ‘/var/run/mysqld/mysqld.sock’ (2)

下記のコマンドで設定変更を行い再起動させましょう。

sudo ln -s var/run/mysqld/mysqld.sock /tmp/mysql.sock sudo /etc/init.d/mysql start

次にnode.jsからmysqlを実行するために必要なモジュール[mysql-wrapper](https://www.npmjs.com/package/mysql-wrapper)をインストールします。

npm install mysql-wrapper

ここまでで環境設定は完了です。

## サーバーからデータベースの値をjson形式で返す

次にmysqlに接続しjsonを返して見ましょう。 mysql-wrapperを使用するためにデータベースの設定情報を作成します。 公式ドキュメントにもありますが、ここでmysql-wrapperの簡単な説明をすると、 まずDBの情報を変数に格納します。 その変数に対して、queryというメソッドを実行すると接続が行われ第1引数のSQLが実行されます。 SQLの実行結果は、コールバック関数の戻り値として返されます。(err=エラーの場合,rowsには抽出結果が入っています。) 下記にサンプルコードを記述します。

// DBへの接続情報 var con = mysql({ host : ”, // 接続先のホスト user : ”, //ユーザー名 最初はroot password : ”, //パスワード 最初はないことが多い database : ” //DB名 最初はないので適当に作っておきましょう }); // 実行するSQLを記述します。 var UserID = ‘SELECT id, name, is_valid, status FROM user;’; // 処理が成功したらjsonを返します。 con.query(UserID, function(err, rows){ var userData = JSON.stringify(rows); res.writeHead(200, { ‘Content-Type’: ‘application/json’, ‘Access-Control-Allow-Origin’: ‘*’ }); res.write(JSON.stringify(rows),encoding=’utf8′); res.end(); }) ※ rowsにはSQLの実行結果が配列で入ってきます。

## iOSで作成したjsonを取得し表示してみる

先ほど作成したjsonをiOS側で取得し、表示させてみます。 今回はswiftで作成するので[Alamofire](https://github.com/Alamofire/Alamofire)を使用して表示させてみます。

override func viewDidLoad() { super.viewDidLoad() Alamofire.request(.GET, requestUrl).responseJSON {response in let json = response.result.value; let jsonDict = json as! NSDictionary; let electNum = jsonDict[“name”] as! String; let user_name :String! = name; self.userName.text = user_name; } }

AlamofireでgetでAPIを取得しています。 Alamofireでリクエストに成功した場合には、responseにの値をNSDictionaryに変更します。

# 忘年会当日！！！！！

このスロットゲームの作成を行い写真にあるように、ipocaのメンバーで大いに盛り上がりました。 スロットはほぼ全員何らかの景品があたりました。 ちなみに私も超高級日本酒があたりました！

# 最後に有志募集！！！！！

さて、最後にここまで読んでいただいた方にメッセージがあります。 弊社ipocaでは、人材を募集しています。 正直、まだまだエンジニア、デザイナーが足りていません。自分のスキルが伸ばせる環境を探している方や新しいことにチャレンジしたい方には、魅力的な環境なはずです。 新しい技術もどんどん取り入れる環境ですので、いままでやりたかった技術や挑戦を弊社ipocaの開発で試すこともできます！

また、弊社のエンジニアの半数は外国の方やリモートでお仕事をしたりと自分のライフスタイルに即した働き方ができます。 ぜひやる気のあるエンジニアやデザイナーさん、一度弊社に訪れてみてください！社長に会ってください！ ipocaのwantedlyをチェック！ 読んでいただきありがとうございました！