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に以下のコードをコピペしてください。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
/* サンプル計算アプリ */ 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つに分類できます。
ちなみに、3行目の処理で、固定ページ「sample_cal」の時だけ、計算処理や入力フォームが処理されるようにしています。(ここで、手順1で入力したスラッグを使っています。)
・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アプリ作成にチャレンジしてみてください!
それでは!
スポンサーリンク