データベース設計文書
なんか問題がある?心配しないで、答えは全部ここにいる。
全サイト検索

埋め込むWebパーツ

Ragicには非常に便利な埋め込むWebパーツの機能があり、Webサイトにフォームを埋め込むことや、リンクを送信することができます。 これらの埋め込み機能は、フォームを作成した時点で使用することができます。

つまり、ウェブページ上で埋め込んだフォームが入力し、提出されると、その内容はデータベースに保存され。ウェブサイトに埋め込まれたフォームを利用して、お客様がデータを利用したり、データベース全体を閲覧したりすることもできるのです。

データベースを埋め込む

埋め込み機能を利用するには、ツールこのフォームを埋め込むをクリックします。

Webサイトの埋め込みパーツは、以下の6種類があります。

各プラグインには、それぞれ独自の設定インターフェースがあります。

設定が完了すると、HTMLコードスニペットが提供されます。このコードを、シートを埋め込みたいウェブサイトに貼り付けることができます。また、埋め込みシートにアクセスするための直接リンクQRコードを共有することも可能です。

さらに、RagicはWordPressでの埋め込みもサポートしています。

埋め込むWebパーツ

どの埋め込むパーツを使用するかは、用途に応じて決めてください。下の表は、各タイプの埋め込むパーツの簡単説明です(パーツ名をクリックすると詳細な説明を見ることもできます)ので、目的に応じてどの埋め込むパーツを使用するか決めてください。

パーツ名 機能
1. データベースの閲覧 サイトユーザーがこのフォームに記載されている権限内の情報を閲覧できます。
2. データベース内検索 サイトのユーザーが、フィールドの下でフィルタリングすることによって、探しているレコードを検索できます。
3. フォームの記入 ウェブサイトのユーザーに入力フォームを提供し、ユーザーが提出したデータをデータベースに保存します。
4. 検索エンジン ウェブサイトユーザーがキーワードでデータベースを検索できます。
5. データベース検索&閲覧 サイトユーザーは、フィールドでフィルタリングし、同じ画面で結果を表示します。
6. 直接埋め込み Ragicのフォームインターフェイスを直接Webに埋め込みます。

埋め込み方法を選択したら、カスタムCSSを追加して各埋め込み機能に変更を加えることも可能です。

1. データベースの閲覧

データベースの閲覧を使用すると、ウェブサイトのユーザーが、アクセス権を持つシート内のすべてのレコードを閲覧できます。必要に応じて、データベース全体を公開することも可能です。

ユーザーはページ内のレコードをクリックして、リストページやフォームページと同様に、詳細情報を確認できます。

詳細設定

レイアウトタイプ

以下の3つのレイアウトを利用できます。

テーブルレイアウト:レコードがリストページに似た形式で表示されます。

格子レイアウト:選択されたフィールドに基づき、レコードが1行ずつ表示されます。テキスト上にマウスを置くと、そのテキストの元フィールドが表示されます。ドロップダウンメニューを使用して対応するフィールドを変更できます。

アルバムレイアウト:画像がサムネイルとして表示され、レコードがグリッド形式で配置されます。ブロックレイアウトと同様に、テキスト上にマウスを置くと対応するフィールドを変更できます。

設定 説明
1ページのレコード表示数 1ページに表示するレコード数を設定します。
コメントを表示 レコード内のコメントを表示するかどうかを設定します。
ログアウトボタンを表示 ログアウトボタンを表示するかどうかを設定します。
全てのレコードの合計 レコードの合計計算バーを表示するかどうかを設定します。
デフォルトフィルタを適用 シートに設定されたデフォルトフィルタを適用するかどうかを設定します。
シート名表示 シート名を表示するかどうかを設定します。

2. データベース内検索

データベース内検索を使用すると、設定したフィールド条件に基づいてレコードを検索できます。必要に応じて精密モード文字自動完成を有効にすることも可能です。

デフォルト検索フィールドを設定をクリックすると、検索に使用するフィールドやその順序を変更できます。

検索フィールドのフィールドタイプはフォームページ上のものと一致します。たとえば、選択フィールドは検索ページでドロップダウンリストとして表示されます。

検索条件を送信すると、次のステップで設定するデータベースのレイアウトタイプに従って一致するレコードが表示され、ユーザーはそれらのレコードをクリックして詳細情報を確認できます。

詳細設定

設定

説明

完全一致モード シートが公開されていない場合でも、完全一致条件でレコードを検索できるようにします。詳細情報や使用例については、こちらの記事を参照してください。
文字自動完成 検索条件入力時に文字自動完成を有効にするかどうかを設定します。
シート名を表示 シート名を表示するかどうかを設定します。
検索フィルター設定 詳細はこちらのセクションを参照してください。

3. データベース検索&閲覧

このプラグインは、データベース検索データベースの閲覧を組み合わせたものです。データベース検索では検索後に結果ページに移動するのに対し、データベース検索&閲覧では、同じページ内で結果が表示されます。ユーザーは画面上部で検索条件を入力し、一致する結果がその下に直接表示されます。

詳細設定

設定項目

説明
レイアウトタイプ こちらのセクションをご参照ください。
1ページのレコード表示数 1ページに表示するレコード数を設定します。
コメントを表示 レコード内のコメントを表示するかどうか。
ログアウトボタンを表示 ログアウトボタンを表示するかどうか。
精密モード こちらのセクションをご参照ください。
文字自動完成 検索条件入力時にテキストのオートコンプリートを有効にするかどうか。
初期状態で全レコードを表示 検索前にアクセス可能なすべてのレコードを表示するかどうか。
自動検索 条件を入力するごとに手動検索をスキップして自動的に検索するかどうか。
検索欄を隠す 画面上部の検索欄を非表示にするかどうか。
全てのレコードの合計を表示 レコードの合計計算バーを表示するかどうか。
デフォルトフィルタを適用 シートに設定されたデフォルトフィルタを適用するかどうか。
シート名を表示 シート名を表示するかどうか。
事前入力値設定 こちらのセクションをご参照ください。

4. フォームの記入

この機能により、Webサイトの利用者がアンケートに回答したり、情報を提出したりするためのフォームを埋め込むことができます。 ユーザーがデータを完成させて送信すると、自動的にデータベースに保存されます。

フォームの記入の埋め込むWebパーツを選択すると、その埋め込むパーツが使用されたときの様子が表示されます。 上部ブロックをクリックすると、バナー、テーマカラー、フィールドの配置順など、埋め込みフォームの外観を調整することができます。(また、特別な必要がある場合は、「旧バージョンへの切り替え」を選択することができます。旧バージョンと新バージョンの違いについては、こちらのリンクをご覧ください)

4.1 バナー設定

また、「バナーをアップロード」をクリックして、ご自身のパソコンから画像をアップロードできます。推奨画像サイズは1500×300です。

4.2 背景色設定

埋め込みフォームの背景色を選択します。

フィールド順設定

より多様なデバイスでのユーザー体験向上のため、新しいデータベースフォームは、Ragicアプリに似た単一列レイアウトを採用しています。デフォルトでは、フィールドは左から右、上から下の順に配置されますが、必要に応じて手動で順番を調整することができます。フィールドをクリックし、上下矢印を使って並び替えを行ってください。変更を適用するには保存をクリックするのを忘れないでください。

事前入力値設定

フォームの特定のフィールドに入力する際に、ユーザーがデフォルト値を持ち込みたい場合、この機能を使用できます。例えば、社内研修で受講する際、該当部署のユーザーには、自社の製品や部門をすぐに持ち込めたいので、デフォルト入力値のテンプレートを設定したり、部門ごとに複数のテンプレートを設定し、使い分けたりすることができます。一度設定したテンプレートは、選択したいテンプレート(逆グレー)をクリックして、設定を保存してください

最後に、希望のテンプレートへのフォームリンクを埋め込むことで、担当者が利用できるようにします。 フォームのリンクを開くと、テンプレートに設定されている情報が事前に持ち込まれます。

子テーブルフィールドを選択すると、右側に 「ギア 」アイコンが表示されます。

クリックすると、子テーブルフィールドに値を事前入力する方法を設定できます。

「自動的にデフォルト値を持つ1行の子テーブルを作成します」を選択すると、最初の1行のみが事前入力されますが、「各子テーブル行をデフォルト値で埋めます」を選択すると、追加された子テーブルのすべての行が事前入力されます。

4.5 自由入力フィールド表示設定

自由入力フィールドは、「短いテキスト」または「長いテキスト」として表示設定が可能です。より広範なコンテンツの場合、「長いテキスト」に設定することで適切に表示できます。

4.6 選択フィールドの表示設定

選択肢フィールドの選択肢が5つ未満の場合、プレビュー画面でフィールド下の「種類を変更」をクリックすることで、ドロップダウンメニューからラジオボタンに表示形式を切り替えることができます。ただし、選択肢が5つ以上の場合や、選択フィールドが子テーブルの一部、または連動選択肢フィールドである場合は、ドロップダウンメニュー形式のみが使用可能です。

他のシートから選択フィールドの場合、ドロップダウンメニューからリンクシートのリストページ形式に切り替えることが可能です。ただし、リンク先シートのリストページ内のすべてのフィールドが表示される点にご注意ください。

選択フィールドは選択順序を選択肢ランダムソートするようにも設定できます。

左下のカスタムCSSを追加をクリックして、埋め込みフォームのレイアウトをカスタムCSSで調整することも可能です。

レイアウトを設定したら、次へをクリックして、フォーム送信後にユーザーに表示されるメッセージを設定します。

4.6 応答メッセージ設定

テキスト入力ボックス上部のタブをクリックして、メッセージをプレーンテキスト形式またはHTML形式で表示するかを選択します。 - プレーンテキストを選択した場合、フォーム送信後に表示されるメッセージはプレーンテキスト形式になります。 - HTMLを選択した場合、テキストボックスにHTML構文を追加することで、リンクなどHTMLの内容が反映されたメッセージが表示されます。

を有効にすると、埋め込みフォームの下部に「人間かどうか」を確認するためのチェックボックスが表示されます。

”新たなデータを入力する”という機能のリンクを表示するオプションを有効にすると、データ送信後に新しいエントリーを作成するためのリンクが表示されます。

4.7 pfv パラメーター

埋め込みURLにpfv パラメーターを追加することで、ユーザーがフォームを完成させたときに特定のフィールドに指定値を自動入力することができます:
https://www.ragic.com/ramzawang01/forms2/4?webview&webaction=form&ver=new&pfvfieldID=value
複数のルールを設定する場合は、「&」を使用して各ルールを組み合わせます:
https://www.ragic.com/ramzawang01/forms2/4?webview&webaction=form&ver=new&pfvfieldID1=value1&pfvfieldID2=value2... 

URLは以下の4つのコンポーネントで構成されています:

1. 埋め込みツールで生成されたURL:例:https://www.ragic.com/ramzawang01/forms2/4?webview&webaction=form&ver=new

2. &pfv: パラメーター識別子

3. フィールドID:自動入力を設定するフィールドのID。例:1002358

4. 値: フィールドに自動入力する値。例:USA

これらのコンポーネントを組み合わせた例:

https://www.ragic.com/ramzawang01/forms2/4?webview&webaction=form&ver=new&pfv1002358=USA

ユーザーがこのリンクをクリックすると、指定したフィールドに指定値が自動入力されます。

5. 検索エンジン

ウェブサイトの利用者がキーワードを入力して、データベースの内容を検索することができます。

検索結果は、3.1.1 で設定した表示方法で表示されます。 また、検索者はリストやフォームのページと同じように、検索したデータをクリックして詳細内容を見ることができます。

6. 直接埋め込み

上記の埋め込み方法とは異なり、直接埋め込みでは、Ragicと全く同じユーザーインターフェイスをWebページに埋め込むことができます。 ただし、ユーザー向けに公開フォームを設計しない場合、ユーザーがアカウントにアクセスするにはログインする必要があります。

さらに、フォームから新規レコードを作成左部の検索機能を表示上部ボタンを表示コメントを表示という4つの機能を提供するかどうかを設定することができます。

設定後は、コードをカットしてWebページに貼り付けることで、Ragicを埋め込むことができます。

全文検索機能でデータを探すには、右上の虫眼鏡アイコンを使います。

アクセス権限

埋め込みで使用する場合の利点としては、埋め込みフォームの権限はRagicフォームで設定したものと同じになるため、ユーザー用のアカウントを購入する必要がなく、フォームを公開するだけで訪問者が使用できます。

そのため、フォームのアクセス権限が公開に設定されていない場合、ログインしていない訪問者は、サイト上にログイン要求画面を表示します。

(データベース検索&閲覧が例外)

データベース検索&閲覧精密モードデータベース内検索精密モードは、ユーザーがフォームのパーミッションを開くことなく、完全一致の条件でデータを照会できるよう、特別に設定されています。

一番上に戻る 目次

無料でRagicを始める

Googleアカウントに登録