Jazzy Formsを活用して超絶簡単なWebアプリをWordPressで作ってみた

WordPressで超簡単なWebアプリを作成する方法をご紹介します。

Jazzy Formsというプラグインの機能を活用するのでJazzy Formsさえインストールすれば可能なのでハードルがかなり低いです。

WebアプリというとJavaだのアパッチだのSQLだの思い浮かべてしまって、拒否反応を起こす方がいますが肩の力を抜いていただければと思います。

Jazzy Formsのインストール

WordPressを利用しているのであれば、説明は不要かと思いますが、念のため説明をします。
ダッシュボードにあるプラグインの新規追加を選択します。

右上の検索BOXに「Jazzy」と入力してください。

Jazzy Formsをインストールして有効化してください。

ダッシュボードに「Forms」が追加されていればOKです。

実際にBMI計算Webアプリを作って見る

さて実際によくある参考例で全く面白くないんですが、BMIを計算するWebアプリを作成してみたいと思います。

BMI計算ツールの作成

ダッシュボードのFormsを押下します。

New Form Title にタイトルを記入します。
BMI Calculator と記入しています。

構造として、左側にあるオブジェクトを右側にドラッグ&ドロップしてパラメータを記入しています。
下の図では、入力する「Input」のオブジェクトをドラッグ&ドロップしています。
他にもチェックボックスや、ラジオボタン、ブルダウン等、一通りWebの入力で必要な機能がそろっていますので、作成したいツールによって使い分けてください。

体重を入力するボックスを作成します。
Titleは実際に画面上で表示されます。IDはBMIの計算時に利用する変数です。
様々な微調整が可能ですが、一旦下図のように入力してください。

身長を入力するボックスを作成します。
容量は体重と同じです。

BMIを計算するオブジェクトのパラメータ設定です。
オブジェクトは左側から「OutPut」を選択してください。上記の体重、身長はInput です。
1番のポイントが、Formulaに計算式を入れる箇所です。
BMIの計算式が BMI=体重(kg) ÷ {身長(m) X 身長(m)} ですので。
入力値としては weight / (height * height) ということになります。
weight とheightは上記で定義したIDです。

そして最後に忘れてはいけません「Save」を押下してください。

記事にBMI計算ツールを貼り付ける

さて記事で見れるようにしましょう。簡単です。

JazzyFormのGeneralタブにショートコードがあるので、コピペして記事に貼り付ければ終わりです。

実際にBMI計算ツールを使ってみましょう

BIM計算ツール

身長、体重を入力して。。。ガリガリだ。。。

お疲れ様です~!

まとめ

作成してみていかがだったでしょうか。

アイディアさえ出せれた様々なWebアプリの作成可能だと思います。
機能的にもCSSを追加できたり、入力制限ができたりと盛りだくさんなので超絶簡単だけどソレナリのWebアプリが作れるんではないでしょうか。
ちなみにJazzy Formsで「Window Server 2016計算ツール」というのを作ったところ、1日100PVくらいの人気な記事になっています。ドロップダウン等も使っているので参考にしてください。

 

Pocket
LINEで送る

スポンサーリンク

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です