ITのえんぴつ

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

テーブル結合(JOIN)- A5M2の使い方 - クエリーデザイナ機能

テーブル結合(JOIN)が、

A5m2のクエリーデザイナ機能で、

設定できることを

はじめて知ったので、

使い方をメモ。

 

外部キーから、主キーへ

ドラッグandドロップする。

 

A5M2のクエリデザイナー機能で、テーブル結合を作成する手順_デザイナ

 

すると、

設定されるそうです。

 

A5M2のクエリデザイナー機能で、テーブル結合を作成する手順_SQL

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


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

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

 

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

 

eigo-gayomenai-engineer.hatenablog.com

 

前回は、⑧検証の設定をしてみました。

本記事では、⑨プラグイン「Elementor」を使って、計算ツールを設置してみましょう。

プラグイン「Elementor」を追加するスクリーンショット

1. 固定ページ

  1. 固定ページを新規登録します。
  2. タイトルを入力します。
  3. 本文は、「Elementerで編集」をクリックします。

固定ページの本文編集にて、プラグイン「Elementor」を利用するスクリーンショット

2. プラグイン「Elementor」

固定ページレイアウト「Elemterキャンバス」を設定する

  1. 左下の歯車をクリック
  2. 設定>一般設定>固定ページレイアウト「Elementerキャンバス」を選びます

プラグイン「Elementor」で設定>一般設定>固定ページレイアウト「Elemterキャンバス」を選ぶスクリーンショット

ブロック「 Calculated Fields Form」を追加する

  1. 右上のマークをクリックします。
  2. 要素の検索ボックスへ「calc」と入力します。
  3. 見つかったら、画面の方へドラッグします。

プラグイン「Elementor」で要素の検索ボックスへ「calc」と入力しているスクリーンショット

  1. select form(フォームを選択)で、先ほど作ったフォームを設定します。

プラグイン「Elementor」でselect form(フォームを選択)で、先ほど作ったフォームを設定するスクリーンショット

  1. 上部に余白を追加したいので、
    高度な設定 > レイアウト > パディング 上を設定します。

高度な設定 > レイアウト > パディング 上を設定するスクリーンショット



ページの上部へシェイプ区切りを追加する

  1. 次は、セクションの真ん中を選択します。
  2. スタイル>シェイプ区切り>タイプを本
  3. テンプレートの説明文が水色なので、
  4. 色>水色にします。

 

プラグイン「Elementor」でページの上部へシェイプ区切りを追加するスクリーンショット

レイアウト>コンテンツ幅を設定する

プラグイン「Elementor」でコンテンツ幅を設定しているスクリーンショット

レスポンシブプレビューの確認する

  1. 最後に、下のブラウザのようなアイコンをクリックします
  2. PC、タブレットスマートフォンの表示を確認します。
  3. 終わったら、更新を押します。

プラグイン「Elementor」でレスポンシブプレビューの確認しているスクリーンショット

実際のページにて、動作確認する

プラグイン「Calculated Fields Form」とプラグイン「Elementor」を利用して作成した計算フォームにて、、動作確認をするスクリーンショット

以上、⑨プラグイン「Elementor」を使って、計算ツールを設置してみました。

3.おわりに

今回は、計算ツールの作り方のご紹介しました。

作り方は、様々な選択肢があるかと思うのですが、今回は、ワードプレスプラグインを利用して作ってみました。

メールや決算機能などが必要のない計算ツールを作るときは、こちらのプラグインの無料版の範囲で作ることができます。デザインを少し整えたかったため、CSSを追加しましたが、JavaScriptは不要でした。

計算ツールをさくっと作りたい場面がありましたら、使ってみてください。

最後に、プラグイン「Calculated Fields Form」を開発して下さった方、素敵な計算ツールを利用させていただきました。ありがとうございました。

4.参考リンク

 

前はこちら

⑧検証の設定をしよう

 

⑧検証の設定をしよう


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

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

 

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

 

eigo-gayomenai-engineer.hatenablog.com

 

前回は、⑦フォームの設定をしてみました。

本記事では、⑧検証の設定をしてみましょう。

f:id:eigo-gayomenai-engineer:20211014171218p:plain
ITのえんぴつ

この機能では、Calculated Fields Formのエラーメッセージがカスタマイズできます。

エラーメッセージのデフォルト言語は、英語です。そのため、日本語に変更します。

 

1. 「検証の設定」があるセクションへ移動します。

フォームの設定箇所の下部にあるメニューバーの「」をクリックするか、画面の少し下までスクロールします。プラグイン「Calculated Fields Form」の「検証設定」があるセクションへ移動するスクリーンショット

2. エラーメッセージを翻訳します。

英語を日本語に変更します

プラグイン「Calculated Fields Form」エラーメッセージを翻訳するスクリーンショット

設定が終わったら、「変更内容を保存」をクリックします。

プラグイン「Calculated Fields Form」検証の設定が終わったら、「変更内容を保存」をクリックするスクリーンショット

エラーメッセージ一覧

# 検証内容 メッセージ
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. 入力値制限・チェックの表示を確認します

確認①形式:「有効な数値を入力してください。」

半角空白の場合

プラグイン「Calculated Fields Form」の検証の確認「半角空白」

ひらがなの場合

プラグイン「Calculated Fields Form」の検証の確認「ひらがな」

全角数字の場合

確認②最小:「{0}以上の値を入力してください。」

最小値の1つ下 (マイナス)の場合

プラグイン「Calculated Fields Form」の検証の確認「最小値の1つ下 (マイナス)」

最小値 (ゼロ)の場合

プラグイン「Calculated Fields Form」の検証の確認「最小値  (ゼロ)」

最小値の1つ上の場合

プラグイン「Calculated Fields Form」の検証の確認「最小値の1つ上」

確認③最大:「 {0}以下の値を入力してください。」

以下も最小と同様の確認をします。(最小と同様のため、略)

  • 最大値の1つ下の場合
  • 最大値 の場合(最大桁)
  • 最大値の1つ上の場合

以上、⑧検証の設定をしてみました。

 

前はこちら

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

次はこちら

⑨検証の設定をしよう

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


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

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

 

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

 

eigo-gayomenai-engineer.hatenablog.com

 

前回は、⑥フィールド3列目を設定してみました。

本記事では、⑦フォームの設定をしてみましょう。

 

プラグイン「Calculated Fields Form」のフォーム設定を紹介するスクリーンショット1

プラグイン「Calculated Fields Form」のフォーム設定を紹介するスクリーンショット2

1.  フォーム名

フォーム名を設定します。上部に表示されます。

2.  説明

説明を設定します。フォーム名の下に表示されます。

3.  フォームテンプレート「4」

テンプレートは全部で14種類あります。その事例を以下に記します。

使用しているテンプレートや、作成物(文字数が多いときなど)によって、レイアウトが少し崩れるときもあります。
相性のよいテンプレートを選んだり、文字数を見直すと、CSSの微調整などの手間が省けます。 
f:id:eigo-gayomenai-engineer:20211014171218p:plain
ITのえんぴつ
くろねこ
既存デザインが14種類から選べるんだね。

デフォルトのテンプレートを使用

プラグイン「Calculated Fields Form」のデフォルトを使用

テンプレート1

プラグイン「Calculated Fields Form」のテンプレート1を使用

テンプレート2

プラグイン「Calculated Fields Form」のテンプレート2を使用

テンプレート3

プラグイン「Calculated Fields Form」のテンプレート3を使用

テンプレート4

プラグイン「Calculated Fields Form」のテンプレート4を使用

テンプレート5

プラグイン「Calculated Fields Form」のテンプレート5を使用

テンプレート6

プラグイン「Calculated Fields Form」のテンプレート6を使用

テンプレート7

プラグイン「Calculated Fields Form」のテンプレート7を使用

テンプレート8

プラグイン「Calculated Fields Form」のテンプレート8を使用

テンプレート9

プラグイン「Calculated Fields Form」のテンプレート9を使用

テンプレート10

プラグイン「Calculated Fields Form」のテンプレート10を使用

テンプレート11

プラグイン「Calculated Fields Form」のテンプレート11を使用

テンプレート12

プラグイン「Calculated Fields Form」のテンプレート12を使用

テンプレート13

プラグイン「Calculated Fields Form」のテンプレート13を使用

テンプレート14

プラグイン「Calculated Fields Form」のテンプレート14を使用

4.  フォームデザインのカスタマイズ

上のテンプレートで、気になる箇所などは、こちらのカスタマイズで調整できます。

今回は、テンプレート6を利用して、主に、こちらの点を調整しました。

  • 数値項目は、文字位置を右寄せにする
  • プレースホルダーは、文字色を薄める
  • スマホの時は、改行位置・レイアウトなどを調整する

プラグイン「Calculated Fields Form」のフォームデザインのカスタマイズした箇所

具体的な設定項目はこちらになります。

/*========================
   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列目を設定しよう

次はこちら

⑧検証の設定をしよう

 

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


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

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

 

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

 

eigo-gayomenai-engineer.hatenablog.com

 

前回は、⑤フィールド2列目を設定してみました。

本記事では、⑥フィールド3列目を設定してみましょう。

1.  2列目を複製します

プラグイン「Calculated Fields Form」で作成している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

 
f:id:eigo-gayomenai-engineer:20211014171218p:plain
ITのえんぴつ

プラグイン「Calculated Fields Form」で計算式をセットしているスクリーンショット

イメージ図   方程式と画面の関係

プラグイン「Calculated Fields Form」で設定する計算式と画面プレビューの関係図のスクリーンショット

以上、⑥フィールド3列目を設定してみました。

 

前はこちら

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

次はこちら

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

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


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

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

 

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

 

eigo-gayomenai-engineer.hatenablog.com

 

前回は、④フィールド1列目を設定をしてみました。

本記事では、⑤フィールド2列目を設定してみましょう。

1.  1列目を複製します

右下の複製マークをクリックします

複製するときに、メッセージボックスが表示された場合は、「OK」を押します。

 

プラグイン「Calculated Fields Form」の複製ボタンを押したときに、表示されたメッセージボックス

 メッセージボックスの内容 

内容は、計算フィールドを使っている場合は、計算フィールドの設定も同じく複製されますが、大丈夫ですか?という旨が書いてあります。

 
f:id:eigo-gayomenai-engineer:20211014171218p:plain
ITのえんぴつ

2.  複製した項目は、以下に変更します

タイプ「概要」

項目
フィールドラベル 市場

タイプ「価格」

項目
事前に定義された値 128

タイプ「サイズ」

項目
事前に定義された値 100

プラグイン「Calculated Fields Form」の複製ボタンした後、それぞれの値を変更した様子のスクリーンショット

以上、⑤フォームの設定2列目を追加してみました。

 

前はこちら

④フォーム1列目を設定しよう

次はこちら

⑥フォーム3列目を設定しよう

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


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

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

 

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

 

eigo-gayomenai-engineer.hatenablog.com

 

前回は、③フィールド種類をご紹介しました。

本記事では、④フィールド1列目を設定してみましょう。

1. 最初のフィールドをすべて削除します

右下のゴミ箱マークを押すと、削除できます。

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

2.  タイプ「Div」を追加します

項目
4列

WordPressのプラグイン『Calculated Fields Form』のフィールドタイプ「Div」を設定しているスクリーンショット

3.  タイプ「概要」を追加します

項目
フィールドラベル ふるさと納税

WordPressのプラグイン『Calculated Fields Form』のフィールドタイプ「概要」を設定しているスクリーンショット

4.  タイプ「1行のテキスト」を追加します

項目
フィールドラベル 商品名
フィールドサイズ 大きい
事前定義された値 鶏肉もも
事前定義された値をプレースホルダーとして使用します

WordPressのプラグイン『Calculated Fields Form』のフィールドタイプ「1行のテキスト」を設定しているスクリーンショット1

WordPressのプラグイン『Calculated Fields Form』のフィールドタイプ「1行のテキスト」を設定しているスクリーンショット2

5.  タイプ「通貨」を追加します

項目
フィールドラベル 価格
フィールドサイズ 大きい
最小 0
最大 999999999
通貨記号  
通貨
セントを許可しない
動的にフォーマットして
事前に定義された値 10,000

WordPressのプラグイン『Calculated Fields Form』のフィールドタイプ「通貨」を設定しているスクリーンショット1

WordPressのプラグイン『Calculated Fields Form』のフィールドタイプ「通貨」を設定しているスクリーンショット2

6.  先程のタイプ「通貨」を複製して、ラベル「サイズ」を作ります

項目
フィールドラベル サイズ
通貨  
セントを許可しない  
小数点以下2桁
事前に定義された値 3,000

WordPressのプラグイン『Calculated Fields Form』のフィールドタイプ「通貨」を設定しているスクリーンショット3

WordPressのプラグイン『Calculated Fields Form』のフィールドタイプ「通貨」を設定しているスクリーンショット4

以上、④フィールド1列目を設定してみました。

 

前はこちら

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

次はこちら

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