ITのえんぴつ

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

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

こんにちは、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】

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

 

 

 

【絵文字】✩˚色別・検索ワード-Win/Mac/Android/iPhone-

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

各環境で色が違う絵文字

この記事では、WindowsMac、パソコンやスマートフォンなどの別の環境で、絵文字の表現や色が同じ絵文字をまとめました。

別の環境で開いた絵文字が、表示や色が変わって、困った経験がある方、参考にしてみてください。

WindowsやMacなどで表示や色が違う絵文字のサンプル例。蝶々は、Windowsの場合、茶色っぽくなっており、Appleの場合は青っぽくなっている。お花は、windowsの場合は白く、Appleの場合は黄になっている。

各環境で色が同じ絵文字

絵文字一覧は、キーワード付きなので、メモアプリの「Notion」のアイコンの絵文字入力フォームなどで検索キーワードを入力すると、すぐ見つけることができます。

WindowsやMacなどで表示や色が同じ絵文字のサンプル例。フラミンゴは、Windowsの場合もAppleの場合も、ピンクで同じ色になっている。

 

💖レッド系

レッド系をまとめました。

# 絵文字 日本語 英語
1 🍒 さくらん cherries
2 🍫 チョコレート chocolate bar
3 🎈 風船 balloon
4 🍿 ポップコーン popcorn
5 🍓 いちご strawberry
6 🌹 バラ rose
7 💄 リップスティック lipstick
8 🚒 消防車 fire engine

💗ピンク系

ピンク系をまとめました。

# 絵文字 日本語 英語
1 🦩 フラミンゴ flamingo
2 🩰 バレエシューズ ballet shoes
3 🍥 なると fish cake with swirl
4 🌸 cherry blossom
5 🌷 チューリップ tulip
6 🐽 豚の鼻 pig nose

🧡オレンジ系

オレンジ系をまとめました。

# 絵文字 日本語 英語
1 🥕 にんじん carrot
2 🍊 みかん tangerine
3 🦊 キツネ fox
4 🎃 ジャック・オ・ランタン jack-o-lantern

💛イエロー系

イエロー系をまとめました。

# 絵文字 日本語 英語
1 🍋 レモン lemon
2 🐝 bee
3 🍯 蜂蜜 honey
4 🌜 顔つき下弦の月 last quarter moon face
5 👑 王冠 crown
6 🐤 ひよこ baby chick

💚グリーン系

グリーン系をまとめました。

# 絵文字 日本語 英語
1 🍈 メロン melon
2 🍀 クローバー clover
3 🐢 かめ turtle
4 🌲 常緑樹 evergreen tree
5 🥝 キウイ kiwi fruit
6 🐸 カエル frog
7 🥑 アボカド avocado
8 🍏 青りんご green apple

💙ブルー系

ブルー系をまとめました。

# 絵文字 日本語 英語
1 🐟 fish
2 🌐 地球 子午線・経線 globe with meridians
3 🐬 潮吹きクジラ spouting whale
4 👖 ジーンズ jeans
5 💧 しずく droplet
6 🐳 クジラ Whale
7 🧢 キャップ billed cap

🤎ブラウン系

ブラウン系をまとめました。

# 絵文字 日本語 英語
1 🍮 カスタード custard
2 🧸 テディベア Teddy bear
3 🥞 ホットケーキ Pancake
4 🥨 プレッツェル pretzel
5 🦉 フクロウ owl
6  🧱 レンガ brick

🤍ホワイト系

ホワイト系をまとめました。

# 絵文字 日本語 英語
1 🦢 スワン swan
2 🧂 salt
3 🛁 バスタブ bathtub
4 🍼 ミルク baby bottle
5 💭 吹き出し thought balloon

まとめ

可愛い絵文字を色別にご紹介しました!参考になれば幸いです。:)

参考