[途中]サーモンランマッチングサービスを作ろうとしてみる

データベース設計

データベース設計はこんな感じ。

称号やランクを登録して、という感じです。オプション機能はBoolean型で判別すれば良いのでなるべくデータ量を減らしました。

活動内容なども実際には文字列が入るのですが、データベースに突っ込むと容量を圧迫するのでデータベースにはTypeの数字だけを代入しておいて実際にどういった扱いにするかはフロントエンドで行います。

+-----------------+-------------+------+-----+---------+-------+
| Field           | Type        | Null | Key | Default | Extra |
+-----------------+-------------+------+-----+---------+-------+
| title           | int(11)     | YES  |     | NULL    |       |
| rank            | int(11)     | YES  |     | NULL    |       |
| code            | varchar(32) | YES  |     | NULL    |       |
| activity        | int(11)     | YES  |     | NULL    |       |
| restriction     | int(11)     | YES  |     | NULL    |       |
| starttime       | int(11)     | YES  |     | NULL    |       |
| endtime         | int(11)     | YES  |     | NULL    |       |
| halfplay        | tinyint(1)  | YES  |     | NULL    |       |
| talk            | tinyint(1)  | YES  |     | NULL    |       |
| listenonly      | tinyint(1)  | YES  |     | NULL    |       |
| rankrestriction | tinyint(1)  | YES  |     | NULL    |       |
+-----------------+-------------+------+-----+---------+-------+
11 rows in set (0.01 sec)

なにかカラムを追加してみる

+-------+------+-------------------+----------+-------------+------------+------------+----------+------+------------+-----------------+
| title | rank | code              | activity | restriction | starttime  | endtime    | halfplay | talk | listenonly | rankrestriction |
+-------+------+-------------------+----------+-------------+------------+------------+----------+------+------------+-----------------+
|     4 |    4 | SW-6892-4817-0396 |     NULL |        NULL | 1525842000 | 1525874400 |        1 |    1 |          1 |            NULL |
+-------+------+-------------------+----------+-------------+------------+------------+----------+------+------------+-----------------+
1 row in set (0.00 sec)

とりあえずえむいーさんの情報を追加してみた。これをSpl@Net2側で表示できるかを試さなくてはいけない。

そのためにはまず、

  1. データベースからデータを引っ張ってきてJSONに変換
  2. JSONに変換したデータをSpl@Net2上に表示

という手続きを踏まなければいけない。

JSONに変換する部分は何回かやってきた部分なのでそんなに難しくはないはず。PHPでPDOを使って接続すればデータを簡単に取得できるはずだ。それをjson_encode()に与えてやればいいのでここは問題ない。

次のJSONをSpl@Net2上に表示する処理だが、これはDataTablesを使えば一番手っ取り早いように思う。他にも選択肢はアリそうだが、これでいいんじゃないかと。

APIを用意した

やることは3つだけ。丁寧に解説します!!!

index.php

サーモンランの募集要項をDBに書き込んでおいて、それをJSON形式に変換するところ。

PDOの接続部分のパスワードとユーザ名はもちろん自分のものを使ってください。

Rewriteの有効化

ただしこのままではAPIとして機能しない。.htaccessをindex.phpと同じディレクトリに置いておくことによってAPIっぽく動作する。

ただし、apacheのrewrite機能を有効にする必要がある。

sudo a2enmod rewrite
sudo service apache2 restart

apacheの再起動を忘れないように。

.htaccess

RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^ index.php [QSA,L]

Datatables

ajaxを使って非同期でデータを読み込みます。

DBには必要最低限の情報しか書かれていないので、それをJavascript側で人間が読んで意味のわかる形に変換します。

renderという要素が使えるのでそれを使います。これが意外と難しくて時間がかかってしまいました。

Javascript側で変換することでPHPでMySQLを使うときにCONCATとかいうめんどくさそうな関数を呼び出さなくて済みます。

$(function(){
  $(document).ready(function() { 
    $.ajax({
      url: "/api/salmonrun"
    })
      .then(
        function(data){
          // DBからの情報を変換
          var st = new Date(data[0].starttime * 1000).toLocaleTimeString().substring(0,5);
          var ed = new Date(data[0].endtime * 1000).toLocaleTimeString().substring(0,5);
          
          // データを書き込みます
          $("#salmonrun").DataTable( {
            ajax: {
              url: "/api/salmonrun",
              dataSrc: ''
            },
            columns: [
              { data: "title"  },
              { data: "code"  },
              { data: "code"  },
              { data: "activity"  },
              { render: function(){
                return st+"-"+ed;
              } },
              { data: "talk"  },
              { data: "talk"  }
            ]
          } );
        },
        function(){
          alert("ERROR");
        }
      )
  } );
} );

シェアする