テーブル結合（JOIN）が、
A5m2のクエリーデザイナ機能で、
設定できることを
はじめて知ったので、
使い方をメモ。
外部キーから、主キーへ
ドラッグandドロップする。
すると、
設定されるそうです。
⑨プラグイン「Elementor」を使って、計算ツールを設置しよう
こんにちは、ITのえんぴつです。
こちらは、計算ツールの作り方連載全9回の第9回の記事となります。
計算ツールの作り方連載全目次はこちら
eigo-gayomenai-engineer.hatenablog.com
前回は、⑧検証の設定をしてみました。
本記事では、⑨プラグイン「Elementor」を使って、計算ツールを設置してみましょう。
1. 固定ページ
- 固定ページを新規登録します。
- タイトルを入力します。
- 本文は、「Elementerで編集」をクリックします。
2. プラグイン「Elementor」
固定ページレイアウト「Elemterキャンバス」を設定する
- 左下の歯車をクリック
- 設定＞一般設定＞固定ページレイアウト「Elementerキャンバス」を選びます
ブロック「 Calculated Fields Form」を追加する
- 右上のマークをクリックします。
- 要素の検索ボックスへ「calc」と入力します。
- 見つかったら、画面の方へドラッグします。
- select form(フォームを選択)で、先ほど作ったフォームを設定します。
- 上部に余白を追加したいので、
高度な設定 ＞ レイアウト ＞ パディング 上を設定します。
ページの上部へシェイプ区切りを追加する
- 次は、セクションの真ん中を選択します。
- スタイル＞シェイプ区切り＞タイプを本
- テンプレートの説明文が水色なので、
- 色＞水色にします。
レイアウト＞コンテンツ幅を設定する
レスポンシブプレビューの確認する
実際のページにて、動作確認する
以上、⑨プラグイン「Elementor」を使って、計算ツールを設置してみました。
3.おわりに
今回は、計算ツールの作り方のご紹介しました。
作り方は、様々な選択肢があるかと思うのですが、今回は、ワードプレスのプラグインを利用して作ってみました。
メールや決算機能などが必要のない計算ツールを作るときは、こちらのプラグインの無料版の範囲で作ることができます。デザインを少し整えたかったため、CSSを追加しましたが、JavaScriptは不要でした。
計算ツールをさくっと作りたい場面がありましたら、使ってみてください。
最後に、プラグイン「Calculated Fields Form」を開発して下さった方、素敵な計算ツールを利用させていただきました。ありがとうございました。
4.参考リンク
- CFF - Calculated Fields Form
- 『Calculated Fields Form』の使い方と設定方法 | メルプラ
- 「Calculated Fields Form」（自動見積・計算）プラグインの使い方 ① 基本設定 | ツッチーブログ
前はこちら
⑧検証の設定をしよう
こんにちは、ITのえんぴつです。
こちらは、計算ツールの作り方連載全9回の第8回の記事となります。
計算ツールの作り方連載全目次はこちら
eigo-gayomenai-engineer.hatenablog.com
前回は、⑦フォームの設定をしてみました。
本記事では、⑧検証の設定をしてみましょう。
ITのえんぴつ
この機能では、Calculated Fields Formのエラーメッセージがカスタマイズできます。
エラーメッセージのデフォルト言語は、英語です。そのため、日本語に変更します。
1. 「検証の設定」があるセクションへ移動します。
フォームの設定箇所の下部にあるメニューバーの「」をクリックするか、画面の少し下までスクロールします。
2. エラーメッセージを翻訳します。
英語を日本語に変更します
設定が終わったら、「変更内容を保存」をクリックします。
エラーメッセージ一覧
| # | 検証内容 | メッセージ |
|---|---|---|
| 1 | 「必須」テキスト | この項目は必須です。 |
| 2 | 電子メールです テキスト | 有効なメールアドレスを入力してください。 |
| 3 | 有効なキャプチャですテキスト | 有効なキャプチャコードを入力してください。 |
| 4 | は有効な日付です (mm/dd/yyyy) テキスト | この形式で有効な日付を入力してください（mm / dd / yyyy） |
| 5 | は有効な日付です (dd/mm/yyyy) テキスト | この形式で有効な日付を入力してください（dd / mm / yyyy） |
| 6 | は数字です テキスト | 有効な数値を入力してください。 |
| 7 | 「数字のみ」テキスト | 数字のみ入力して下さい。 |
| 8 | 「最大以下」テキスト | {0}以下の値を入力してください。 |
| 9 | 「最小以上」のテキスト | {0}以上の値を入力してください。 |
| 10 | 「無効な通貨」テキスト | 有効な数値を入力してください。 |
| 11 | 「最大長/文字数」テキスト | {0}文字以内で入力してください。 |
| 12 | 「最小長/文字数」テキスト | {0}文字以上入力してください。 |
| 13 | 「等しい」テキスト | 同じ値をもう一度入力してください。 |
| 14 | 「これらのファイル拡張子を受け入れる」テキスト | 有効な拡張子の値を入力してください。 |
| 15 | 「KB単位の最大アップロードサイズ」テキスト | 選択したファイルが大きすぎます。最大値は{0}kBです。 |
| 16 | 「電話番号」テキスト | 無効な電話番号です。 |
| 17 | 「無効なクーポン」テキスト | 無効なクーポンコードです。 |
3. 入力値制限・チェックの表示を確認します
確認①形式：「有効な数値を入力してください。」
半角空白の場合
ひらがなの場合
全角数字の場合
確認②最小：「{0}以上の値を入力してください。」
最小値の1つ下 (マイナス)の場合
最小値 (ゼロ)の場合
最小値の1つ上の場合
確認③最大：「 {0}以下の値を入力してください。」
以下も最小と同様の確認をします。（最小と同様のため、略）
- 最大値の1つ下の場合
- 最大値 の場合(最大桁)
- 最大値の1つ上の場合
以上、⑧検証の設定をしてみました。
前はこちら
次はこちら
⑦フォームの設定をしよう
こんにちは、ITのえんぴつです。
こちらは、計算ツールの作り方連載全9回の第7回の記事となります。
計算ツールの作り方連載全目次はこちら
eigo-gayomenai-engineer.hatenablog.com
前回は、⑥フィールド3列目を設定してみました。
本記事では、⑦フォームの設定をしてみましょう。
1. フォーム名
フォーム名を設定します。上部に表示されます。
2. 説明
説明を設定します。フォーム名の下に表示されます。
3. フォームテンプレート「4」
テンプレートは全部で14種類あります。その事例を以下に記します。
ITのえんぴつ
くろねこ
既存デザインが14種類から選べるんだね。
デフォルトのテンプレートを使用
テンプレート1
テンプレート2
テンプレート3
テンプレート4
テンプレート5
テンプレート6
テンプレート7
テンプレート8
テンプレート9
テンプレート10
テンプレート11
テンプレート12
テンプレート13
テンプレート14
4. フォームデザインのカスタマイズ
上のテンプレートで、気になる箇所などは、こちらのカスタマイズで調整できます。
今回は、テンプレート6を利用して、主に、こちらの点を調整しました。
具体的な設定項目はこちらになります。
/*======================== 1. 画面サイズ共通 ==========================*/ /* 1. 項目「価格」「サイズ」「原価率」 文字位置 右寄せ */ #fieldname4_1, #fieldname5_1, #fieldname9_1, #fieldname10_1, #fieldname15_1 { text-align: right; } /* 2. プレースホルダー 文字色 灰 */ ::placeholder { color: #ddd; } /* 3. 項目「原価率」 タイプ「概要」 ラベル「(空白)」 高さ 設定 （理由：空ブロック要素の対策） */ .fields>label { min-height: 1px; } /*======================== 2. 画面サイズが741px以上 ==========================*/ @media screen and (min-width:741px) { /* 1. 要素「br」 非表示 */ .br-sp { display: none; } } /*======================== 3. 画面サイズが740px以下 ==========================*/ @media screen and (max-width:740px) { /* 1. フォーム「タイトル」 位置 中央揃え */ #formheader_1 h2{ text-align:center; } /* 2. 4カラム「ラベル」「フォーム」 横 30:65 */ .column4 label { float: left; width: 30%; } .column4 .dfield { display: inline-block; width: 65%; } }
以上、⑦フォームの設定をしてみました。
前はこちら
次はこちら
⑥フィールド3列目を設定しよう
こんにちは、ITのえんぴつです。
こちらは、計算ツールの作り方連載全9回の第6回の記事となります。
計算ツールの作り方連載全目次はこちら
eigo-gayomenai-engineer.hatenablog.com
前回は、⑤フィールド2列目を設定してみました。
本記事では、⑥フィールド3列目を設定してみましょう。
1. 2列目を複製します
2. タイプ「概要」を変更します
| 項目 | 値 |
|---|---|
| フィールドラベル | 原価率 |
3. 以下の3個を消します
| 項目 | 値 |
|---|---|
| フィールドラベル | 商品名 |
| 項目 | 値 |
|---|---|
| フィールドラベル | 価格 |
| 項目 | 値 |
|---|---|
| フィールドラベル |
サイズ |
4. 2で作成したフィールドラベル「原価率」を2つ複製します
| 項目 | 値 |
|---|---|
| フィールドラベル |
| 項目 | 値 |
|---|---|
| フィールドラベル |
5. タイプ「計算フィールド」を追加します
| 項目 | 値 |
|---|---|
| フィールドラベル | |
| 方程式 | PREC((fieldname9* (fieldname5/fieldname10) /fieldname4)*100,1) |
PREC関数
値を小数点以下1桁に丸めるために、利用しています。この関数は、四捨五入になります。
例：
PREC（10.3333333, 1） → 10.3
PREC（10.555, 1） → 10.6
参考：
［公式サイトCFF-よくある質問(FAQ)］CFF - FAQ
ITのえんぴつ
イメージ図 方程式と画面の関係
以上、⑥フィールド3列目を設定してみました。
前はこちら
次はこちら
⑤フィールド2列目を設定しよう
こんにちは、ITのえんぴつです。
こちらは、計算ツールの作り方連載全9回の第5回の記事となります。
計算ツールの作り方連載全目次はこちら
eigo-gayomenai-engineer.hatenablog.com
前回は、④フィールド1列目を設定をしてみました。
本記事では、⑤フィールド2列目を設定してみましょう。
1. 1列目を複製します
右下の複製マークをクリックします
複製するときに、メッセージボックスが表示された場合は、「OK」を押します。
メッセージボックスの内容
内容は、計算フィールドを使っている場合は、計算フィールドの設定も同じく複製されますが、大丈夫ですか？という旨が書いてあります。
ITのえんぴつ
2. 複製した項目は、以下に変更します
タイプ「概要」
| 項目 | 値 |
|---|---|
| フィールドラベル | 市場 |
タイプ「価格」
| 項目 | 値 |
|---|---|
| 事前に定義された値 | 128 |
タイプ「サイズ」
| 項目 | 値 |
|---|---|
| 事前に定義された値 | 100 |
以上、⑤フォームの設定2列目を追加してみました。
前はこちら
次はこちら
④フィールド1列目を設定しよう
こんにちは、ITのえんぴつです。
こちらは、計算ツールの作り方連載全9回の第4回の記事となります。
計算ツールの作り方連載全目次はこちら
eigo-gayomenai-engineer.hatenablog.com
前回は、③フィールド種類をご紹介しました。
本記事では、④フィールド1列目を設定してみましょう。
- 1. 最初のフィールドをすべて削除します
- 2. タイプ「Div」を追加します
- 3. タイプ「概要」を追加します
- 4. タイプ「1行のテキスト」を追加します
- 5. タイプ「通貨」を追加します
- 6. 先程のタイプ「通貨」を複製して、ラベル「サイズ」を作ります
1. 最初のフィールドをすべて削除します
右下のゴミ箱マークを押すと、削除できます。
2. タイプ「Div」を追加します
| 項目 | 値 |
|---|---|
| 列 | 4列 |
3. タイプ「概要」を追加します
| 項目 | 値 |
|---|---|
| フィールドラベル | ふるさと納税 |
4. タイプ「1行のテキスト」を追加します
| 項目 | 値 |
|---|---|
| フィールドラベル | 商品名 |
| フィールドサイズ | 大きい |
| 事前定義された値 | 鶏肉もも |
| 事前定義された値をプレースホルダーとして使用します | ✓ |
5. タイプ「通貨」を追加します
| 項目 | 値 |
|---|---|
| フィールドラベル | 価格 |
| フィールドサイズ | 大きい |
| 最小 | 0 |
| 最大 | 999999999 |
| 通貨記号 | |
| 通貨 | 円 |
| セントを許可しない | ✓ |
| 動的にフォーマットして | ✓ |
| 事前に定義された値 | 10,000 |
6. 先程のタイプ「通貨」を複製して、ラベル「サイズ」を作ります
| 項目 | 値 |
|---|---|
| フィールドラベル | サイズ |
| 通貨 | |
| セントを許可しない | |
| 小数点以下2桁 | ✓ |
| 事前に定義された値 | 3,000 |
以上、④フィールド1列目を設定してみました。
前はこちら
次はこちら