最短でマッチングアプリを作る

イントロ

今回は私が一番最初に作ったWEBアプリについて紹介したいと思います。
それがこちら

せとがわまさおマッチングアプリ

アプリトップ画面

せとがわまさおマッチングアプリ！！

つまり、私とのマッチング率が分かるアプリです！
と偉そうに言ったものの、ただの検定アプリです。設問に答えていくと、回答に点数が振られていて、最終的にその合計がマッチング率として表示されるという単純なアプリです。

アプリの画面遷移

少し工夫した点として、他のユーザーがどの選択肢を選んだかグラフに表示される機能があります。

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

最初は「検定アプリを作りたい」と思ったのですが、検定アプリを作れるほど詳しい分野がなかったので、

自分のことについての検定にすればいいじゃん！
それをマッチングアプリって呼べば面白いじゃん！

と閃き作りました。作成した当時はペアーズが出始めた頃で「マッチングアプリ」がバズワードでした。

システム構成

システム構成はLAMPで作っております。
すなわち
OS：Linux
WEBサーバー：Apache
DB：MySQL
言語：PHP
です。
他のユーザーの回答を貯めておく必要があるためデータベースが必要です。

このアプリを動かしてみたい方はまず、自分の環境でXAMPPをインストールしてみるとよいでしょう。
Apache、MySQL、PHPが一気にインストールして便利です。
macでもwindowsでもすぐに環境を構築できます。

XAMPPの使い方

インターネットに公開したい方はPHPとMySQLが使えるレンタルサーバーを借りてプログラムを配置するとよいでしょう。
私はさくらインターネットの一番安いプランで公開しています。

プラン比較 - レンタルサーバーはさくらインターネット

githubにソースは公開しているので、クローンするかZIPでダウンロードして下さい。
https://github.com/setogawamasao/matching-app

githubからZIPでダウンロードする手順

プログラム解説

フォルダ構成

アプリのフォルダとファイルの構成は以下のようになっています。
├─css
│  style.css
├─DB　
│  ddl.txt　→データベースにテーブルを作るときのSQL
├─xml
│  question.xml　→設問に関する情報
├─img
│  省略　→設問に表示する画像たち
│ animation.js　→TOP画のアニメーション用JavaScript
│ dbConfig.php　→DB接続設定
│ dbConnectTest.php　→DB設定(デバッグ用)
│ index.php　→TOP画面
│ question.php　→質問
│ result.php　→結果
│ otherUsersAnswer.php　→他ユーザーの結果

自分の好きな質問・画像を設定したい

自分の好きな質問・画像にしたい方はxmlフォルダのquestion.xmlを編集してください。ここでほとんどの設定をすることができます。

<?xml version="1.0" encoding="utf-8"?>
<rss>
<!-- インデックスを合わせるためのダミーデータ -->
  <question>
    <questionText></questionText>
    <nextFormAction></nextFormAction>
    <imageName></imageName>
    <answer1Text></answer1Text>
    <answer1Point></answer1Point>
    <answer2Text></answer2Text>
    <answer2Point></answer2Point>
    <answer3Text></answer3Text>
    <answer3Point></answer3Point>
  </question>
<!-- question1 -->
  <question>
    <questionText>同時にやってたら、どの番組を選ぶ？</questionText>
    <nextFormAction>question.php</nextFormAction>
    <imageName>retro-tv-with-static-on-screen_4460x4460.jpg</imageName>
    <answer1Text>お笑い番組</answer1Text>
    <answer1Point>20</answer1Point>
    <answer2Text>ジャニーズ特番</answer2Text>
    <answer2Point>0</answer2Point>
    <answer3Text>ディズニー映画</answer3Text>
    <answer3Point>0</answer3Point>
  </question>
<!-- question2 -->
  <question>
    <questionText>私物はピンク色が多い</questionText>
    <nextFormAction>question.php</nextFormAction>
    <imageName>sandrachile-259666-unsplash.jpg</imageName>
    <answer1Text>はい</answer1Text>
    <answer1Point>0</answer1Point>
    <answer2Text>いいえ</answer2Text>
    <answer2Point>10</answer2Point>
    <answer3Text></answer3Text>
    <answer3Point></answer3Point>
  </question>

★★★省略★★★

<!-- 結果コメント -->
  <resultText>せとがわまさおとは違った感性をお持ちです。<![CDATA[<br>]]>一緒に居ることで、自分には無いものを発見できるかもしれません。</resultText>
  <resultText>せとがわまさおと似た感性をお持ちです。<![CDATA[<br>]]>ストレスを感じることなく、一緒に居ることができます。</resultText>
  <resultText>せとがわまさおと相性ピッタリです!<![CDATA[<br>]]>すぐにツイッターからせとがわまさおに連絡しましょう!<![CDATA[<br><div style="text-align:center"><a href ="javascript:ImageUp();">ツイッターへGO</a></div>]]></resultText>
</rss>

タグの内容通りですが、下記のように設定して下さい

<questionText>→質問を設定して下さい
<nextFormAction>→ここは修正せずquestion.php
<imageName>→質問に表示する画像
<answer1Text>→一つ目の選択肢
<answer1Point>→一つ目の選択肢を選んだ時の点数
<answer2Text>→二つ目の選択肢
<answer2Point>→二つ目の選択肢を選んだ時の点数
<answer3Text>→三つ目の選択肢
<answer3Point>→三つ目の選択肢を選んだ時の点数

選択肢は最大３つまでです(4つ設定するとエラー)
点数は100点になるよう、計算してしてください

点数に応じたコメントは<resultText>に設定してください
点数の下限と上限は以下のように
ダウンロードしたZIPの中にあるresult.phpで設定してください。

  // 結果コメントの取得
  if($sumScore <= 40){
    $comment = $xmlData->resultText[0];
  }else if(40 < $sumScore && $sumScore <= 70){
    $comment = $xmlData->resultText[1];
  }else if(70 < $sumScore && $sumScore <= 100){
    $comment = $xmlData->resultText[2];
  }

私のアプリでは、0から40点、40点から70点、70点から100点の3段階で設定しています。

環境構築

PHP

プログラムをサーバーに設定する手順は
「契約したレンタルサーバー名」　PHP　公開
などでググれば出てくると思います。
さくらインターネットの場合はこちら　　

【初心者の方へ】ホームページ公開までの流れを説明します | さくらのホームページ教室

mysql

mysqlの設定は少し難しいので注意してください。
基本的にすべての操作はphpMyAdminというブラウザからDBを操作できる機能がありますので、phpMyAdminから行ってください。
phpMyAdminの開き方はレンタルサーバーによって異なりますのでググってみてください。
以下3つのことをやる必要があります。
①DB作成
②ユーザー作成
③テーブル作成

それぞれの設定値はダウンロードしたZIPの中にあるdbConfig.phpの値と同じものにしてください

<?php
  $dsn = 'mysql:host=localhost;dbname=matchingApp;charset=utf8';
  $user = 'matchingAppUser';
  $password = 'password';
?>

上記の設定だと、
DBの名前がmatchingApp
ユーザー名がmatchingAppUser
ユーザーのパスワードがpassword
※これは例ですので、自由に設定してください。

それでは一つずつ説明していきます。
①DB作成
phpMyAdminの右のメニューから、新規作成を選んで、DB名を入力して作成ボタンを押してください。

phpMyAdminでDBの作成

②ユーザー作成
phpMyAdminの「権限タブ」から「ユーザーアカウントを追加する」をクリック

phpMyAdminでユーザー作成1

ユーザー名とパスワードを追加して、実行ボタンを押すとユーザーが作成されます。
※実行ボタンはスクロールの一番下にあるので注意

phpMyAdminでユーザー作成2

③テーブル作成
テーブル作成は同じくphpMyAdminの「SQLタブ」からを開いて
ダウンロードしたZIPの中のDBフォルダにあるddl.txtをそのままコピペして実行ボタンを押してください。テーブル作成されます

phpMyAdminでテーブル作成

最後に

以上で説明は終わりです。
ぜひ自分のマッチングアプリを作ってみてください。
ここまで読んでいただきありがとうございました！！