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 です。
１番のポイントが、Formulaに計算式を入れる箇所です。
BMIの計算式が BMI＝体重(kg) ÷ {身長(m) Ｘ 身長(m)} ですので。
入力値としては weight / (height * height) ということになります。
weight とheightは上記で定義したIDです。
そして最後に忘れてはいけません「Save」を押下してください。
記事にBMI計算ツールを貼り付ける
さて記事で見れるようにしましょう。簡単です。
JazzyFormのGeneralタブにショートコードがあるので、コピペして記事に貼り付ければ終わりです。
実際にBMI計算ツールを使ってみましょう
BIM計算ツール
身長、体重を入力して。。。ガリガリだ。。。
お疲れ様です～！
まとめ
作成してみていかがだったでしょうか。
アイディアさえ出せれた様々なWebアプリの作成可能だと思います。
機能的にもCSSを追加できたり、入力制限ができたりと盛りだくさんなので超絶簡単だけどソレナリのWebアプリが作れるんではないでしょうか。
ちなみにJazzy Formsで「Windows Server 2019 ライセンス計算ツール（価格まで算出可能）」というのを作ったところ、１日100PVくらいの人気な記事になっています。ドロップダウン等も使っているので参考にしてください。
コメント