エブリサイトでは、kintone にある製品データベースから、製品資料の検索やダウンロードをすることが可能です。
この記事では、製品資料検索 および ダウンロードページの作成と、kintone に保存されているデータを検索 および 添付ファイルをダウンロードするための設定例を紹介します。
ページ構成について
はじめに、本記事で紹介するサイトのページ構成について説明します。
設定するページとしては、「製品資料検索」と「製品資料ダウンロード」の2ページです。
ただし、実際には「製品資料ダウンロード」ページが、各製品ごとに動的にURL展開され、複数生成されます。
本記事では、できるだけ前後の内容が繋がる形で説明を進めるため、実際の設定手順とは前後するところもございますので、ご留意ください。
なお、ページごとの設定については【製品資料検索ページ】【製品資料ダウンロードページ】、各ページで同様の設定については【共通】と示しています。
画面デザイン
まず、画面デザインの設定を説明します。
ページの全体像（レイアウト）を決める部分になりますので、いったん、紙の上や他のツール等でページのデザインを検討した上で、エブリサイトの画面デザインの設定に進んでいただくとスムーズです。
今回は、完成ページの画像を元に説明します。
完成ページ図
製品資料検索ページ
製品資料ダウンロードページ
画面デザインページはこのようになっています。
製品資料検索ページ
製品資料ダウンロードページ
区切られた１つずつの四角の部分のことを「タイル」と言います。
タイルを作っていく方法については、次の記事をご覧ください。
この記事では、ウィジェット「グリッドフォーム」の指定方法をご紹介します。
ウィジェットの設定
タイルを切った時は自動的に「シンプルパネル」が設定されているので、ウィジェット編集画面でウィジェットを変更します。
【ウィジェットカテゴリ】フォーム
フォームカテゴリにあるウィジェットは、データ入力に適したレイアウトを作成できます。入力されたデータを kintone のレコードとして追加・更新する、などができます。
グリッドフォーム
ウィジェット「グリッドフォーム」は、指定した列数に分割したボックス状のレイアウトに、左上から右下へ順番にアイテムを表示することができる入力フォーム形式です。
アイテムは、今回使用する「ボタン」だけでなく、「データ入力」で入力データを受け取ったり、「テキスト表示」で固定文字を表示することも可能です。
実際の表示と設定画面は下記のようになっています。
「アイテム一覧カラム」からフォームに必要な「アイテム」をドラッグアンドドロップで「ウィジェットパラメーター入力カラム」に追加します。追加した「アイテム」を選択すると、右側に「アイテムパラメーター入力カラム」が表示されるので、「アイテム」の詳細を設定します。
「アイテムID」は kintone にレコードを追加する際のマッピングで使用しますので、kintone アプリのフィールドコードと合わせるなど、わかりやすい名称にしておくことをおすすめします。
「アイテム名」はページに表示されるラベルになります。
今回は、製品カテゴリを選択するためのボタンを「ボタン(アウトライン)」で作成し、列数を「3」としています。
接続設定
次に、接続設定について説明します。
今回は、製品資料の検索 と 選択された製品資料のダウンロードに、 kintone アプリのレコードを取得する必要があるので、「製品資料検索」と「製品資料ダウンロード」のそれぞれのページで kintone アプリとの接続設定をします。
【共通】
製品資料ダウンロードサイトは一般公開の WEB サイトになるので、「認証可否」は「認証なしで利用可」を選択します。
kintoneとの接続設定を含む、接続設定画面の操作・概要については次の記事を併せてご覧下さい。
また、「認証可否」の詳細については次の記事の「接続設定における4種類の接続可否とは」節を併せてご覧下さい。
ページ生成時処理とページ内処理 ・ログイン・接続設定について
kintone アプリの API トークンにはレコードの閲覧権限を付与します。
kintone アプリのフォームはこのように設定しています。
※フィールド名とフィールドコードは同じに設定しています。
ページ生成時処理
次に、ページ生成時処理の設定について説明します。
ページ生成時処理により、公開時に予め kintone の製品マスタアプリにあるレコードから、各製品の資料ダウンロードページを作成しておくイメージになります。
今回は、「製品資料ダウンロード」のページに設定します。
【製品資料ダウンロードページ】
全体の流れは下記のようになっています。
詳しく見ていきましょう。
まず、「接続設定」で設定した kintone の製品マスタアプリから、やること「クエリで条件を指定して kintone からレコードを取得する」でレコードを取得します。
一通りすべての製品レコードを、製品カテゴリと製品名昇順で取得するための検索条件を指定しています。
ここで記述するクエリは kintone 標準のクエリのことで、「接続設定」で設定した kintone アプリのフィールドコードを使用します。
次に、やること「レコードのリストからレコードを取り出す」で、取得した全レコードから、レコード１件ずつ処理を進める準備を行います。
次のアクションでは、やること「kintone添付ファイルを取得する」で、製品レコードの 添付ファイルフィールド（パンフレット）から、添付ファイルを取得します。この時、条件「リストから要素を取り出した時」を使うことで、各レコードに対してアクションを行うように設定しています。
その次のアクションでは、やること「添付ファイルを公開する」で、取得したファイルを公開するURLを生成しています。
以降のアクション（取扱説明書を対象とした、アクション5〜6、仕様書を対象とした、アクション7〜 8）についても同様です。
ページ内処理
次に、ページ内処理の設定について説明します。
【製品資料検索ページ】
まず、「製品資料検索」ページの全体の流れは下記のようになっています。
詳しく見ていきましょう。
まずは 製品カテゴリ のボタンを選択した時の挙動です。
「接続設定」で設定した kintone の製品マスタアプリから、やること「クエリで条件を指定して kintone からレコードを取得する」でレコードを取得します。
製品カテゴリ に合致したレコードを、製品名昇順で取得するための検索条件を指定しています。
次に、取得したレコードをウィジェット「シンプルテーブル」で設定した 製品一覧 テーブルの、製品名 のアイテム「リンクテキスト（下線なし）」へセットします。
ここで、「リンクテキスト（下線なし）」で設定した アイテムID：製品名 のサブ要素「link.href」に、リンク先 URL のセットが必要なことに注意してください。
上記を各製品カテゴリに合わせて、アクション番号3〜12で同様に設定します。
次に、検索ワードを入力し、「検索」ボタンを押した時の動きを設定します。
やること「クエリで条件を指定して kintone からレコードを取得する」を同様に使用します。
ここでのクエリは、アイテム「文字列入力（１行）」で設定した アイテムID：型式 に入力された値から、レコードを取得しています。
製品一覧 テーブルへのセットについては、製品カテゴリ の場合と同様です。
先ほどと同様に、サブ要素「link.href」へのリンク先 URL のセットを忘れないようにしましょう。
次に、「製品資料ダウンロード」ページの全体の流れは下記のようになっています。
詳しく見ていきましょう。
ページを表示した時、利用規約 に同意した場合のみ、ダウンロードを許可させたいため、アイテム「リンクテキスト（下線あり）」で設定した各資料へのダウンロードリンク と アイテム「リッチテキスト」で設定した資料ラベルはすべて、非表示にしておきます。
アイテムに指定する際に分かりやすいよう、「画面デザイン」でアイテムIDをそれぞれ設定しておきましょう。
次に、「同意して製品資料をダウンロードする」のボタンを押した時に、上で非表示にしたアイテムを表示します。
同時に、やること「ページを遷移する」で、ページ内の 各種資料 の表示位置まで遷移させます。
ページ基本設定
最後に、ページの基本設定について説明します。
冒頭で述べた通り、「製品資料ダウンロード」のページは、各製品ごとに固有のURLが動的に展開されて生成されます。
その設定方法について、説明していきます。
「製品資料ダウンロード」ページについて、下記の通りページの基本設定をします。
（補足）
1（URL展開レコード）：
「ページ生成時処理」で設定した、アクション番号1のレコード
${製品名}（ページのタイトル）：
「URL展開レコード」のフィールド（フィールドコード：製品名）
${型番}（URL）：
「URL展開レコード」のフィールド（フィールドコード：型番）
この設定で、kintone から取得した製品レコードの「型番」フィールドごとにURLが展開されるようになります。
以上で、kintoneと連携出来る製品資料ダウンロードサイトの完成です！
実際に製品資料を検索してダウンロードすると、下記のように、kintone の対応するレコード内の添付ファイルが表示されます。
最後に
エブリサイトのドキュメントページやサポートページもぜひご活用ください。