WordPressでかんたんWebアプリを作る方法
こんにちは、koheiです。
先日、別のサイトでWordPress上に簡単Webアプリを作って公開しました。
簡易財務分析ツール
実は、WordPressというシステムは、少しPHPなどを勉強すれば簡易的な計算アプリぐらいなら作れちゃいます。
そこで今回は、WordPress上で簡単計算アプリを作る方法を紹介します。
今回の例では、以下のような平均点を出す超簡単アプリを作成してみましょう。
サンプル計算アプリ
1.Webアプリ用の固定ページを追加
まずは、Webアプリ用の固定ページを作成します。
WordPress管理画面の「固定ページ」から「新規作成」をクリックします。
Webアプリのタイトルを入力し、スラッグを入力します。（スラッグの入力欄が無い時は、WordPress画面の上部に表示オプションがありますので、スラッグにチェックが入っているか確認してください。）
※今回は、スラッグは、「sample_cal」と入力しています。
タイトルとスラッグを入力したら、公開を押します。
ページの内容は、functions.php上に書くので、ここでは未記入でOKです。
2.functions.phpにコードを追加
計算アプリの概要
次に、functions.phpに計算処理や、入力フォームのコードを入力していきます。
その前に、今回作る計算アプリの簡単な概要を説明します。
以下の図のように、まずはWebクライアント上で、各教科の点数を入力します。入力したものをPOSTメソッドというものを使って、Webサーバー上へ渡します。
Webサーバー上で平均点を計算したら、計算結果のHTMLをWebクライアントに返すという流れです。
コード
functions.phpに以下のコードをコピペしてください。
/* サンプル計算アプリ */
function page_from_calsample($content) {
if( is_page( 'sample_cal' )) //固定ページ「sample_cal」の時だけ処理させる
{
/* PHPで計算処理を組み込む */
if( $_POST['cal_bottom'] == '計算')
{
$avarage_data = ($_POST["ca_1"] + $_POST["ca_2"] + $_POST["ca_3"] + $_POST["ca_4"])/4;
}
?>
<!-- 入力フォーム -->
<form name="form1" method="post" action="<?php echo str_replace( '%7E', '~', $_SERVER['REQUEST_URI']); ?>">
<h2>サンプル計算アプリ</h2>
<p>国語</p>
<input type="number" name="ca_1" size="8" value="<?php echo $_POST["ca_1"]?>">
<p>算数</p>
<input type="number" name="ca_2" size="8" value="<?php echo $_POST["ca_2"]?>">
<p>理科</p>
<input type="number" name="ca_3" size="8" value="<?php echo $_POST["ca_3"]?>">
<p>社会</p>
<input type="number" name="ca_4" size="8" value="<?php echo $_POST["ca_4"]?>">
<p>平均点を計算します。計算ボタンを押してください</p>
<input type="submit" name="cal_bottom" value="計算" class="keisan_buttom">
</form>
<!-- 計算結果表示 -->
<h2>計算結果</h2>
<p>平均点は、<?php echo $avarage_data; ?>です。<p>
<?php
}
else
{
return $content;
}
}
add_filter('the_content', 'page_from_calsample');
コード解説
コードは大きく分けて、計算処理、入力フォーム、計算結果表示と３つに分類できます。
ちなみに、3行目の処理で、固定ページ「sample_cal」の時だけ、計算処理や入力フォームが処理されるようにしています。（ここで、手順１で入力したスラッグを使っています。）
・formタグでpostメソッドを指定し、入力した数値をWebサーバーへ渡しています。（12行目）
・各教科の点数を入力させるため、inputタグで入力ボックスを作っています。（14〜21行目）
・計算ボタンの処理です。（24行目）
ここで、POSTメソッドで通知された値から平均点を計算しています。
POSTメソッドで値を取得するには、$_POST[“name”]と記載します。
nameは、inputタグで指定された各教科のnameになります。（ca_1,ca_2,ca_3,ca_4)
計算処理で、$avarage_dataに計算した結果が格納されていますので、その値を表示させています。（29行目）
最後に
いかがでしたか？
今回はすごく簡単なアプリでしたが、POSTメソッドの使い方や、PHPのコードを勉強すれば、もう少し複雑なアプリも作れると思います。
WordPressでブログを書くだけじゃなく、色んなWebアプリが作れるようになれば可能性が広がっていきますね。
みなさんもぜひ、WordPress上でWebアプリ作成にチャレンジしてみてください！
それでは！
