【サーバーサイド】無料サーバー(XFREE)×javascript×PHPで簡易版SNSを実装する

2020年5月7日

こんばんは、てぃってぃ（嫁）の夫です。

「無料サーバーでサーバーサイドのプログラム（PHP）が実装できるか？」を調べてみたいと思います。Windows、Linux、どちらでもローカル環境であれば、IISやApacheで簡単に試すことが出来ますが、クラウドを使ってやってみたい！という方向けです。

PHPを利用して、簡易版SNS（Twitter）のようなものが作れるか、試してみましょう。今時のSNS実装の主流はRubyですが、まずは仕組みの勉強という点で多いに役に立つと思います。

先に、本記事通りに実装したページは以下に公開していますので、ご欄ください。

http://kt2525family.php.xdomain.jp/

本記事の技術関連キーワード

簡易版SNSと言えども、フロントエンド、サーバーサイドの両方の技術が必要なので、WEBサーバー、HTML（CSS）、javascript、PHP、データベース（DB）、…と、かなりたくさんの技術要素が必要になります。本記事にたくさんの技術が詰まっています（10,000文字以上）ので、以下キーワードを調べたい方も参考にしてください。

・SNS

・無料サーバー（XFREE）

・HTML × javascript × PHPの連携

・XMLHttpRequest

・MySQL

・mysqli（PHP5.5～）

・PHPからDBへアクセス

1. サーバーサイドの基礎知識

1-1. 一般的なSNSの仕組みとは

TwitterやFacebookの様に、SNSと呼ばれる様なWebサービスは、必ずサーバーサイドのプログラムが必要になります。サーバーサイドとは、サーバー上で動作する、という意味です。一方、ユーザー側の処理（スマホの画面処理等）はフロントエンドと呼ばれます。

SNSを始めとした、一般的なWebサービスの構図は以下の様になっています。たとえばTwitterを想像してください。

無料サーバー（XFREE)、HTML、javascript、PHPでWebサービス(SNS)をプログラミング（システム構成）

Twitterの例で続けます。

① Twitterを起動したら皆さんのツイートがタイムラインに流れます。このときはサーバーからデータを取得して、それを皆さんの端末（クライアントマシン）にて表示しています。クライアントからのデータ要求に対しデータを返す処理がサーバーサイドでの実装になります。ちなみに、古いエンジニアは、サーバーからデータを取得する流れを「下り」と呼んだりします。

② ツイートをした場合、クライアントが持っている書き込みデータをサーバーに送信（投稿）します。クライアントからのデータ更新に対しそれを受理してサーバーデータに保存する処理がサーバーサイドでの実装になります。

サーバーサイドのプログラムは、名前の通りサーバーPC内に実装する必要があります。また、上記の例にもれず、基本的にはサーバー側のPCのハードディスクを使用するため、一般的には無料のサーバーではサーバーサイドプログラムを実装することは許可されていない場合が多いと思われます。

また、サーバーサイドのプログラミング言語の代表が「PHP」になります。つまり「無料　PHP　サーバー」とググれば、探すことが出来ます。

1-2. PHPを無料で実装できる「XFREE」

そして、上記の通りググると一番上に出てくる、かつ同じような記事でも結構オススメされているのが「XFREE」（https://www.xfree.ne.jp/）です。画像は2020年4月現在のものです。

無料サーバー（XFREE)、HTML、javascript、PHPでWebサービス(SNS)をプログラミング（Xサーバー）

ブログを運営されている方は、「WordPress機能」をご利用している方もいるかもしれませんが、本記事で扱うのは、サーバーサイドプログラムを実装できる「PHP・MySQLサーバー機能」です。 どうやら容量1GBまでは無料で利用できるみたいです。

ということで、本記事では「XFREE」の「PHP・MySQLサーバー機能」にて、簡単なPHPを組んでみることにします。

※ 他にPHPを許可している無料レンタルサーバーがあれば、そちらでもかまいません。他に無料レンタルサーバーを調べてみると「XREA Free」等がありました。また、プラットフォーム自体の提供を行う「Heroku」というサービスもあります。目的はWebサービスの実装なので、最低PHPとデーターべース（DB）が用意されていれば実現可能です。サーバーは気に入った所を利用してください。

2. サーバーの設定（XFREE）

XFREEを使用した場合の、サーバーの設定を記載します。XFREEでなくても、レンタルサーバーにはある程度は共通した設定が存在するはずですので、ざっと流し読みしてください。

2-1. 無料サーバー登録

早速、「無料レンタルサーバーご利用申し込み」より登録してみましょう。

無料サーバー（XFREE)、HTML、javascript、PHPでWebサービス(SNS)をプログラミング（Xサーバー申し込み）

サーバー利用手順は以下になります。１分もあれば登録できるほど簡単です。

① 申し込みメールアドレスの登録

② 会員情報（個人情報）の登録

③ 管理パネルからサーバーID登録（URL）… 詳細は後述

③のサーバーIDですが、URLの一部になるので、慎重に登録します。私は実験用のサーバーなので、「kt2525family」にしておきました。

無料サーバー（XFREE)、HTML、javascript、PHPでWebサービス(SNS)をプログラミング（サーバーID）

サーバーIDが登録できると、無料レンタルサーバーが使用可能になりますので、「PHP・MySQL」を選択します。

無料サーバー（XFREE)、HTML、javascript、PHPでWebサービス(SNS)をプログラミング（PHP・MySQL）

そして注意すべき点が

「利用期限までに利用期限を更新しないとサーバーアカウントが凍結される」

ということです。無料がゆえの当然の制約ですね。

PHP・MySQLが利用可能になったので、「管理パネルログイン」からログインすると、管理パネルのページにアクセスできます。

2-2. サーバー設定

XFREEの場合の管理画面は以下写真の通りです（2020年現在のもの）。

無料サーバー（XFREE)、HTML、javascript、PHPでWebサービス(SNS)をプログラミング（PHP・MySQL管理パネル）

XFREEでなくても、PHPを許可しているサービスは大抵同じような設定項目があると思います。

本業Webエンジニアでない方は、ここでクエッションマークが100個ぐらい出ると思います。簡単にですが、用語説明をしておきましょう。おそらくエックスサーバーでなくても、似たような設定が飛び交っていると思うので。

用語 内容
MySQL サーバーPC内のデータベース（DB）の事。ユーザーが投稿する大量のデータを管理しています。Twitterであれば、各ユーザー毎の投稿を管理しています。理解必須です。
PHP サーバーサイドプログラムのこと。ユーザーはPHPを介してサーバーのDBにアクセスし、データを取得します。理解必須です。
php.ini PHPの動作設定を行うファイルのこと。理解は後からでいいです。
パスワード制限 ベーシック認証を設定できます。Webページにアクセスしたときにユーザー名／パスワードを要求するように出来ます。会員制にする場合に利用できます。
FTP ファイル転送のこと。Webページや動作させるPHPファイルをアップロードしたり編集したりする際に使用します。

2-3. アクセスの確認

さて、いよいよWebサイトにアクセスしてみましょう。

まずは自分のWebサイトにアクセスしてみましょう。XFREEの場合は、以下のURLにてアクセスできるはずです。

「http://（登録したサーバーID）.php.xdomain.jp/」

※ 例えば私のテストサイトの場合は「http://kt2525family.php.xdomain.jp/」になります。

このようなページが表示されたと思います。

無料サーバー（XFREE)、HTML、javascript、PHPでWebサービス(SNS)をプログラミング（index.html）

基本的にWebサイトは、ドメイン名だけを入力してアクセスした場合、「index.html」というファイルをローディングして表示させるようになっています。

Webページの編集は、エックスサーバーの場合は「FTPアカウント設定」→WebFTPの「ログイン」で、ファイルマネージャーに進むことが出来ます。鉛筆マークでファイルを開けば、オンラインでファイルを編集することも可能です。

無料サーバー（XFREE)、HTML、javascript、PHPでWebサービス(SNS)をプログラミング（FTP）

無料サーバー（XFREE)、HTML、javascript、PHPでWebサービス(SNS)をプログラミング（FTP2）

例えば、index.htmlを開けば「このウェブスペースへは、まだホームページがアップロードされていません」という文言が見つかると思います。これが、Webブラウザにて表示させているページになっているのが分かるかと思います。

3. 簡易版SNSを実装する

【STEP1】トップページのレイアウト（GUI）を作成する

まずは、Twitterの様なSNS風のトップページのレイアウト（中身は後回しで見た目だけ作ることを『ガワ』と呼んだりします）を作ってみましょう。

元々のindex.htmlはバックアップを取っておくことを推奨します。壊れたときに元に戻せなくなりますので、開発作業の鉄則です。

ユーザーの投稿数だけ箱を表示する仕組みにしたいですが、まずは箱を5個表示してみましょう。箱の数を動的に変更させる必要があるので、HTML＋javascriptで実装します。

まず、index.htmlの<head>内に、各種レイアウトを定義するCSSを記述します。具体的には、以下を追加します。

index.html
/* 投稿スペース */
.user-container {
width : 600px;
padding : 10px;
align : left;
border : 1px solid;
border-color : #eeeeee;
}

/* 投稿ボタン */
.comment-button {
display: inline-block;
margin: 2px;
padding: 3px 15px;
border-radius: 10px;
text-decoration: none;
color: #FFF;
background-color: #4646ff;
transition: .4s;
}

/* みんなの投稿(1コメント) */
.comment {
width : 600px;
margin : 3px;
padding : 10px;
border : 1px solid;
border-radius : 10px;
border-color : #eeeeee;
background-image: linear-gradient(45deg, #dbdcf4 0%, #f0f8ff 100%);
}

次に<body>内を、ガッサリ以下の様に書き換えてください。

index.html
<br />
<!– 投稿フォーム 開始 –>
<div align="center">
<div class="user-container">
<p><b>今なにしてる？</b></p>
<!– TODO PHPの実装必要 –>
<form action="comment_post.php" method="post">

<table>
<!– コメント入力欄 –>
<tr><td>
<input type="text" name="user-comment" size="80″>
</td></tr>
<!– 「投稿する」ボタン –>
<tr><td>
<div align="right">
<input type="submit" value="投稿する" class="comment-button" />
</div>
</td></tr>
</table>
</form>
</div>
</div>
<!– 投稿フォーム 終了 –>
<br />
<br />
<!– みんなの投稿 表示 –>
<h2>みんなの投稿一覧</h2>
<br />
<script type="text/javascript">
// <TODO>投稿数。DBから動的に取得出来るのが目標。
var user_comment_num = 5;

// 投稿データを表示するループ
document.writeln(“<div align=\"center\">");
for (let count = 0; count < user_comment_num; count++)
{
// <TODO>投稿コメント。DBから動的に取得出来るのが目標。
var user_comment = “ユーザーが書いたコメント";

// SNSチックに箱を表示
document.writeln(“<div class=\"comment\">");
document.writeln(user_comment);
document.writeln(“</div>");
}
document.writeln(“</div>");
</script>
<!– みんなの投稿 終了 –>

このindex.htmlをアップロードし、再度Webページにアクセスすると、以下の様な見た目になったと思います。

無料サーバー（XFREE)、HTML、javascript、PHPでWebサービス(SNS)をプログラミング（トップページ[step1]）

本記事内では「仕組みを理解する」という意味で、レイアウトはこの程度にします。

※ 見た目は先ほどの<head>内に定義したデザインやbody内でいくらでもいじることが出来ます。WEBデザインについては、CSS等でいくらでも情報が出てくるので、ググってください。

そして、<TODO>と記載した箇所が、コメント投稿を受け付けたり、データをDBから取得するサーバーサイドの処理になります。「1-1」で説明した「サーバーマシン」側の処理です。

【STEP2】DB（データベース）にテーブルを作成する

DBのアクセス部分を作る前に、ユーザーからの投稿データを管理するDB（データベース）を作成する必要があります。XFREEを使ってる場合は「MySQL」になります。ちなみに、他のメジャーなDBとしては「Oracle」「PostgreSQL」やAndroid向け「SQLite」等が存在します。

データベースの基礎知識

DBの構成は、DBによって違いますが、一般的には以下の様な構図をしています。

データベース

├　スキーマ1

├ テーブル1

├ テーブル2

：

ユーザーの投稿データは、1投稿ごとにテーブルに「レコード」として保存し、そのデータを画面表示時に読み込むことを目的に、DBを構築しましょう。

データベースの構築手順(XFREE)

以下、XFREEの場合の手順（MySQL×phpMyAdmin）を記載します。

(1) 「データベース」→「MySQL設定」→「MySQL追加」より、データベースを追加します。私の場合は、「kt2525family_sns」にしました。文字コードは「UTF-8」のままで良いです。

無料サーバー（XFREE)、HTML、javascript、PHPでWebサービス(SNS)をプログラミング（DB]）

(2) MySQL一覧にDBが追加されたと思います。

無料サーバー（XFREE)、HTML、javascript、PHPでWebサービス(SNS)をプログラミング（DB2）

(3) 次に、DBにユーザーを追加します。どのDBでもそうですが、DBにはアクセスユーザーの設定をしないとアクセスすることが出来ません。一般的には以下の様にユーザーを追加します。

（r＝読み込み可能、w＝書き込み可能の意味）

ユーザー区分 スキーマ テーブル レコード
管理者 r/w r/w r/w
一般ユーザー r

ただし、今回の例ではユーザーがデータを投稿したら、それをそのままDBにレコード保存できるようにするため、一般ユーザーもレコードの書き込み権限（w）を与える必要があります。…ということで、面倒なので、今回は管理者ユーザーだけで話を進めます。

XFREEの場合は「MySQLユーザ設定」でユーザーを追加します。

とりあえず「_1」というユーザーを追加しておきました。

無料サーバー（XFREE)、HTML、javascript、PHPでWebサービス(SNS)をプログラミング（DB3）

(4) 「php my admin」タブをクリックして、先ほど追加したユーザー／パスワードにて、DB管理画面に接続します。

無料サーバー（XFREE)、HTML、javascript、PHPでWebサービス(SNS)をプログラミング（DB5）

(5) phpMyAdminのサービスを利用して、DBにアクセスできます。WEB経由でDBにアクセスしているためめちゃくちゃ動作が重いです。気長に操作してください。

無料サーバー（XFREE)、HTML、javascript、PHPでWebサービス(SNS)をプログラミング（DB7）

(6) 先ほど作成したデータベースを選択します（上記の画像でいうと、左メニューのkt2525family_snsです）。

データベースにテーブル追加の画面が出ますので、「user_comment」というテーブルを作成します。フィールド数（1レコード毎のカラム数）は5としておきます。

無料サーバー（XFREE)、HTML、javascript、PHPでWebサービス(SNS)をプログラミング（DB8）

(7) カラムの設定画面に移るので、以下の画像の通りに設定してください。設定できたら「保存する」を押してください。

※ 細かい設定内容の意味は割愛します。（「データベース create table」でググってください。）

無料サーバー（XFREE)、HTML、javascript、PHPでWebサービス(SNS)をプログラミング（DB9）
無料サーバー（XFREE)、HTML、javascript、PHPでWebサービス(SNS)をプログラミング（DB10）

(8) これで無事にDB「kt2525family_sns」に、テーブル「user_comment」を追加できました。

作成したばかりですが、一応確認のために、レコード検索をするSQLを実行してみましょう。タブ「SQL」を選択して、以下SQL（レコード数をカウントするSQL）を実行してください。

SELECT COUNT(*) FROM user_comment;

無料サーバー（XFREE)、HTML、javascript、PHPでWebサービス(SNS)をプログラミング（DB11）

結果に「COUNT(*) 0」と表示されていれば成功です。

このテーブルに、ユーザーからの投稿データを保存していくことになります。

以上でDBのテーブル作成は終了です。

【STEP3】PHPでDBからレコードを取得／更新する関数を実装する

【STEP2】で作成したテーブルにアクセスする仕組みを実装します（先ほどindex.htmlで<TODO>としていた部分）。PHPはサーバーサイドのプログラムなので、サーバー側のDBにアクセスすることが出来ます。実装したい処理は以下2つです。

  1.  DBから投稿データを取得する
  2.  DBへ投稿データを書込する

① DBにレコード追加するPHP

ユーザーの投稿を受け付け、DBにデータを保存するPHPを作成します。

「comment_post.php」というファイル名で、以下の様にソースコードを作成し、index.htmlと同様にアップロードします。

comment_post.php
<?php

// 入力確認
$user_comment = $_POST['user-comment’];
$user_comment = mb_convert_encoding($user_comment, “UTF-8");
if (empty($user_comment))
{
echo '<p>投稿に失敗しました</p>’;
echo '<p>ERROR : コメントが空白です</p>’;
exit();
}

// DBに接続
$mysqli = new mysqli('HOSTNAME’, 'USERNAME’, 'PASSWORD’, 'DBNAME’);

// 接続結果の確認
if (mysqli_connect_errno())
{
echo '<p>投稿に失敗しました</p>’;
echo '<p>ERROR : データベースへの接続に失敗しました</p>’;
exit();
}

// レコード取得のSQL作成（最大件数を超える場合は投稿を許可しない）
$sql = “SELECT * FROM user_comment";

// SQL実行
$result = $mysqli->query($sql);

// 実行結果確認
$max = 20;
$num = $max;
if ($result)
{
$num = $result->num_rows;
}
if (!$result || $num >= $max)
{
echo '<p>投稿に失敗しました</p>’;
echo '<p>ERROR : データベースの保存件数が最大です</p>’;
$mysqli->close();
exit();
}

// 投稿データ追加のSQL文(insert)作成
$sql = “INSERT INTO user_comment (date, comment) VALUES ('".date('Y-m-d H:i:s’)."', '".$user_comment."')";

// SQL実行
$result = $mysqli->query($sql);

// 実行結果確認(デバッグ用)
// if (!$result)
// {
// echo '<p>投稿に失敗しました '.mysqli_error().'</p>’;
// }
// else
// {
// echo '<p>投稿に成功しました </p>’;
// }

// 切断
$mysqli->close();

// 元のページにリダイレクト
header(“Location: http://kt2525family.php.xdomain.jp“);
exit();
?>

DBに接続の処理「$mysqli = new mysqli('HOSTNAME’, 'USERNAME’, 'PASSWORD’, 'DBNAME’);」は、環境に合うように編集してください。HOSTNAMEがホスト名、USERNAMEがユーザー名、PASSWORDがパスワード、DBNAMEがDBの名前になります。ホスト名はXFREEの場合、以下の部分になります。

無料サーバー（XFREE)、HTML、javascript、PHPでWebサービス(SNS)をプログラミング（DB12）

また、今は最大20件まで保存できるように、「$max = 20;」という処理を入れています。ここの20を編集すれば、最大保存件数は変更できます。レコードの削除はMySQLの管理画面より行ってください。

② DBからレコード取得するPHP

先に記載しておきますが、XFREEはhtaccessの編集に制限があり、htmlファイル内でのPHP実行を許可することが出来ない（4-1.を参照）のため、かなりダサイやり方をせざるを得ません。

理想的な実装は、取得したレコードをjson形式で返し、HTML内のjavascriptでそれを受け取る方法ですが、それがXFREEでは出来ないため、DBから取得したレコードに独自の区切り文字を付与して、その区切り文字で分解する方法を取ります。

DBからレコードを取得するPHP「comment_get.php」を以下の様に作成し、アップロードします。「comment_post.php」と同じく、DB接続処理「$mysqli = new mysqli(…)」は環境に合うように編集してください。

comment_get.php
<?php
// DBに接続
$mysqli = new mysqli(HOSTNAME, USERNAME, PASSWORD, DBNAME);

// 接続結果の確認
if (mysqli_connect_errno())
{
echo '<p>取得に失敗しました</p>’;
echo '<p>ERROR : データベースへの接続に失敗しました</p>’;
exit();
}

// レコード取得のSQL作成
$sql = “SELECT comment FROM user_comment ORDER BY date DESC";

// SQL実行
$result = $mysqli->query($sql);

// 実行結果確認
$data = “";
if ($result)
{
while ($row = $result->fetch_row())
{
$tmp = mb_convert_encoding($row[0], “UTF-8");
$data = $data . $tmp . “@#KT@25#@";
}
}

// 結果格納
echo $data;

// 切断
$mysqli->close();
?>

③ index.htmlからPHPを呼び出す

最後に、作成したPHPをindex.htmlから呼び出します。（ここまで来てもうヘロヘロだと思いますが、最後の一歩です。頑張って！）

繰り返しますが、XFREEはhtaccessの編集に制限があり、htmlファイル内でのPHP実行を許可することが出来ない（4-1.を参照）のため、PHPからのDB取得結果を、かなりダサイ区切り文字で区切る方法をしています。

index.htmlの<body>タグ内を以下の様に編集してください。

index.html
<br />
<!– 投稿フォーム 開始 –>
<div align="center">
<div class="user-container">
<p><b>今なにしてる？</b></p>
<form action="comment_post.php" method="POST" accept-charset="UTF-8″>
<table>
<!– コメント入力欄 –>
<tr><td>
<input type="text" name="user-comment" size="80″>
</td></tr>
<!– 「投稿する」ボタン –>
<tr><td>
<div align="right">
<input type="submit" value="投稿する" class="comment-button" />
</div>
</td></tr>
</table>
</form>
</div>
</div>
<!– 投稿フォーム 終了 –>
<br />
<br />
<!– みんなの投稿 表示 –>
<h2>みんなの投稿一覧</h2>
<p>
<?php
$sample = “Hello World";
echo $sample;
?>
</p>
<br />
<!– 枠だけ用意してデータは後から更新 –>
<div align="center">
<div id="comment1″></div>
<div id="comment2″></div>
<div id="comment3″></div>
<div id="comment4″></div>
<div id="comment5″></div>
<div id="comment6″></div>
<div id="comment7″></div>
<div id="comment8″></div>
<div id="comment9″></div>
<div id="comment10″></div>
<div id="comment11″></div>
<div id="comment12″></div>
<div id="comment13″></div>
<div id="comment14″></div>
<div id="comment15″></div>
<div id="comment16″></div>
<div id="comment17″></div>
<div id="comment18″></div>
<div id="comment19″></div>
<div id="comment20″></div>
</div>
<script type="text/javascript">
var request = new XMLHttpRequest();
request.onload = function()
{
if (request.status == 200)
{
// PHPの結果を取得
var response_data = request.responseText;
var comment_list = response_data.split(“@#KT@25#@");

// 投稿数(最大20件まで表示する)
var user_comment_num = comment_list.length – 1;
if (user_comment_num > 20)
{
user_comment_num = 20;
}

// 投稿データを表示するループ
for (let count = 1; count <= user_comment_num; count++)
{
// 投稿コメント
var user_comment = comment_list[count – 1];

// SNSチックに箱を表示
var comment_id = “comment" + count;
var comment_data = “<div class=\"comment\">" + user_comment + “</div>";
document.getElementById(comment_id).innerHTML = comment_data;
}
}
};
request.open('GET’, 'http://kt2525family.php.xdomain.jp/comment_get.php’, true);
//request.responseType = “json";
request.send();
</script>
<!– みんなの投稿 終了 –>

これで、簡易版SNSの実装は完了です。お疲れ様でした。

コメント投稿すると青い箱が増えていくように動くかと思います。

無料サーバー（XFREE)、HTML、javascript、PHPでWebサービス(SNS)をプログラミング（DB13）

4. 備忘録（javascript、PHP、HTMLの連携）

4-1. XFREEではHTMLファイルにPHPを記述できない

これでかれこれ３日ほどハマりました。

一般的には、HTMLファイル内でPHPを動かすには、.htaccessに

「AddType x-httpd-php .html .htm」

を記述すれば動くのですが、XFREEではこの設定を追加すると

「500 Internal Server Error」

が返るようになります。

原因としては

「XFREEでは.htaccessに制限をかけているから」

です。

こちらに記載がありました。。ちくしょう・・・

www.xfree.ne.jp

まとめ

無料レンタルサーバー×javascript×PHPを駆使して、簡易SNSの様なサイトを作る方法を記載しました。記事を書きながら作ったのでかれこれ10時間ぐらいかかりましたね…。

今回はXFREEで試してみましたが、他のPHP許可しているサーバーやPaaS（heroku）などでも応用可能だと思います。基本的な概念は何を使おうが似たような作りになると思うので、参考にしていただければ幸いです。

プログラミング

Posted by てぃってぃ