ITのえんぴつ

Google Blockly開発者ツールやIT・プログラミングを研究して発信するブログ

③フィールド種類のご紹介


こんにちは、ITのえんぴつです。

こちらは、計算ツールの作り方連載全9回の第3回の記事となります。

 

計算ツールの作り方連載全目次はこちら

 

eigo-gayomenai-engineer.hatenablog.com

 

前回は、②新しいフォームを追加してみました。

本記事では、③フィールド種類をご紹介します。

 

f:id:eigo-gayomenai-engineer:20211014171218p:plain

ITのえんぴつ

フィールドは、「項目」や「領域」という意味になります。

事例 … フォーム画面のテキストフィールド

 → 文字を1行だけ入力できる入力欄(の部品)

今回使うタイプは、5種類です

翻訳 説明
1行のテキスト 1行のテキスト入力項目
通貨

金額の入力項目。

表示設定あり

  • 3桁毎に区切り記号(カンマ)
  • 金額記号(円)
  • 小数点2桁以下
概要 概要等の表示項目。入力項目の表示も可能
計算フィールド 計算結果の表示項目。
DIv

複数項目のグループ化。

横並びレイアウト (1カラム~4カラム) ができます。

プラグイン「Calculated Fields Form」のフォーム追加画面で、今回使う5種類タイプをマークしているスクリーンショット

項目タイプ「通貨」に対して、項目名「サイズ」を設定した理由

 項目タイプ「通貨」は、管理画面に、「小数点以下2桁」という設定項目があったからです。 
f:id:eigo-gayomenai-engineer:20211014171218p:plain
ITのえんぴつ

くろねこ
項目タイプ「番号」は、値を入力すると、小数点が9桁の入力ができたよ。多すぎるよ~。 

 

プラグイン「Calculated Fields Form」のフィールド「通貨」と「番号」小数点比較

 

以上、③フィールの種類をご紹介しました。

 

前はこちら

②新しいフォームを追加しよう

次はこちら

④フィールド1列目を設定しよう

②新しいフォームを追加しよう

こんにちは、ITのえんぴつです。

こちらは、計算ツールの作り方連載全9回の第2回の記事となります。

 

計算ツールの作り方連載全目次はこちら

 

eigo-gayomenai-engineer.hatenablog.com

 

前回は、①作成環境と概要をご紹介しました。

本記事では、②新しいフォームを追加してみましょう。

 

f:id:eigo-gayomenai-engineer:20211014171218p:plain

ITのえんぴつ
ちなみに、フォームとは、テキスト形式などの入力欄がある画面などを指します。
身近な例 … Google フォーム、見積シミュレーション
 

 

画面表示は、日本語に翻訳して進めます。

1.プラグイン「Calculated Fields Form」のTOPページを表示します

プラグイン「Calculated Fields Form」のTOPページを表示する手順のスクリーンショット

2. 新しいフォームの項目名を入力して、「追加」をクリックします

プラグイン「Calculated Fields Form」のTOPページで新しいフォームを追加する手順のスクリーンショット

3. 新しく作成したフォームの「設定」をクリックすると、次の画面へ遷移ができます

プラグイン「Calculated Fields Form」のTOPページで新しいフォームの設定ボタンを押す手順のスクリーンショット

 

以上、②新しいフォームを追加してみました。

 

前はこちら

①作成環境と概要のご紹介

 

次はこちら

③フィールド種類のご紹介

①作成環境と概要のご紹介

 

こんにちは、ITのえんぴつです。

こちらは、計算ツールの作り方連載全9回の第1回の記事となります。

手順通りに制作すると、以下のサンプルサイトと同じものが完成します。

eigo-gayomenai-engineer.hatenablog.com

 

全9回なので、1日1回進めれば、約10日目で、計算ツールが自作できます。

このページでは、①作成環境と概要をご紹介します。

1.環境

それぞれのバージョンは、こちらになります。

  • WordPress バージョン 5.9.2
  • プラグイン「Calculated Fields Form」    バージョン 1.1.51
  • プラグイン「ELEMENTOR」         バージョン 3.4.8
  • テーマ        「cocooon」バージョン           2.4.1.1

2. WPプラグイン-Calculated Fields Form-おすすめポイント

  • 計算設定がカンタン
  • 分割レイアウト(1列~4列)が可能
  • テンプレート(14種類)が豊富

3.今回の要件・計算式

きっかけ

  • ふるさと納税
  • 商品数が多くて、よく分からない
  • 普段のお買い物と比較したい
  • 原価率を計算するのが難しかった…( ˘•ω•˘ )

求めること

  • 原価率をカンタンにシミュレーション
  • イムリーに計算結果表示
  • メール・決済機能不要
  • Webから使えたら便利かなぁ(*ᐛ*)ᒃ✨

作成イメージ

画面「ふるさと納税の原価率かんたんシミュレーション」の計算式の関係性を記載したイメージ図

補足

f:id:eigo-gayomenai-engineer:20211014171218p:plain
ITのえんぴつ
原価率を出すための市場の条件は、特価日やブランド肉や安いスーパーやまとめ買いなど、地域差や個人差や生活スタイルがあるため、普段お買い物する時の値段やサイズを目安にすると良いかと思います。
 

パターン1 市場の(総務省統計局)鶏肉135円 の場合     40.5%

パターン2 市場の(  安いお店)鶏肉99円   の場合        29.7%

このように、原価率は、前提条件によって大きく変化することが確認できます。

※ 総務省統計局 …  総務省統計局が発表している小売物価統計調査結果の値段

 

以上、①作成環境と概要をご紹介しました。

 

前はこちら

次はこちら

 

実践編!計算ツールの作り方[WP]Calculated Fields Form

WordPressプラグイン『Calculated Fields Form』を使った計算ツールの作り方を紹介します。

 

①作成環境と概要のご紹介

②新しいフォームを追加しよう

③フィールド種類のご紹介

④フィールド1列目を設定しよう

⑤フィールド2列目を設定しよう

⑥フィールド3列目を設定しよう

⑦フォームの設定をしよう

⑧検証の設定をしよう

⑨プラグイン「Elementor」を使って、計算ツールを設置しよう

【テストケース洗い出し】ブラウザで使える自動生成ツール

 

テストケースを洗いだす手法は、多数存在します。 今回のブラウザで使える自動生成ツールは、ブラックボックステスト技法の中のペアワイズ法という組み合わせテスト技法を使って、テストケースを洗い出します。

 

こんな方へオススメ

  • テストケースを洗い出したい
  • データの組み合わせを洗い出したい
  • 大量のテストケースから、ペアワイズ法でテストケースを減らしたい
  • ブラウザで使える自動生成ツールに興味がある

テストケースを洗い出すツール

この記事では、以下のブラウザで使える自動生成ツールを使用します。

pairwiseTool

 

選んだ理由

  • 無料
  • 入力操作が簡単
  • ユーザー登録不要
  • 日本語入出力可能
  • 404エラーページではない(2022年3月時点)

です。

ブラウザツール「pairwiseTool」の操作手順

では早速試してみましょう

 

  • ステップ1 パラメータと値を入力する
  • ステップ2 (必要に応じて)制約を設定する
  • ステップ3 「ペアワイズ」または「すべての組み合わせ」の2択のボタンを選ぶ

 

  • ステップ4  クリックして保存する
  • ステップ5  ファイルを開く

おわりに

【テストケース洗い出し】ブラウザで使える自動生成ツールについて紹介しました。

ペアワイズ法の特徴上、7~9割のテストケースを洗い出せると言われています。

そのため、自動生成ツールで洗い出した後は、実際の仕様や経験や別のテスト手法などで、追加のテストケースを作成することをオススメします。

参考リンク

ふるさと納税の原価率計算ツールを作りました


ふるさと納税の原価率を計算するツールを作りました。ぱっと、計算が出来たら、プチ便利かなぁと思いました。ふるさと納税の原価率を計算する際に、よかったらご活用下さい。

 

hateneko.php.xdomain.jp

 

その計算式や経緯は、前回の記事になります。くわしくはこちら。

eigo-gayomenai-engineer.hatenablog.com

【パステルフリー素材配布】 曜日カレンダー

f:id:eigo-gayomenai-engineer:20220204211949p:plain


パステルカラーの素材を作りました。今回は、曜日カレンダーセットです。個人利用、商用利用、編集もOK。ご自由にお使いください。

 

f:id:eigo-gayomenai-engineer:20220203155422p:plain
f:id:eigo-gayomenai-engineer:20220203155425p:plain
f:id:eigo-gayomenai-engineer:20220203155428p:plain
f:id:eigo-gayomenai-engineer:20220203155431p:plain
f:id:eigo-gayomenai-engineer:20220203155433p:plain
f:id:eigo-gayomenai-engineer:20220203155436p:plain
f:id:eigo-gayomenai-engineer:20220203155438p:plain

 

利用規約

  • 使用報告/クレジット表記不要
  • 商用利用/加工/色変えOK

 

【NG】

  • 自作発言、再配布、販売
  • 違法、反社会的な内容、公序良俗に反する活動、不正・違法サイトでの使用