先日、kintoneユーザーのお客様から以下のようなご要望をいただきました。
「kintoneに登録された商品に関するデータと画像を利用して、ホームページ上に商品情報を表示させたい。」「同一ページ上で申し込みフォーマットも表示させたい。」
kintone連携サービス「フォームブリッジ」と「kViewer」を利用することで、kintone内の必要な情報を外部にそのまま公開し、kintoneに自動で情報が登録されるWebフォームを作成可能です。
そこで本記事では、kViewerでkintone内の商品情報を公開するカードビューを作成する方法と、フォームブリッジで申し込みフォームを作成する方法を紹介します。
kintone内のデータを利用して、顧客が閲覧するホームページを充実させたいとお考えの方は、ぜひ参考にしてください。
kintone(キントーン)は、ビジネスアプリ作成のクラウドツールで、サイボウズ株式会社が運営するサービスです。 業務で生じる多量なデータやそれに伴うコメントなどを一元管理でき、最近はCMでもよく見かけるようになりました。 今回[…]
kintone内に保存されたデータをkViewerでホームページ上に表示
kViewerとはkintone内の情報を外部に公開するためのツールです。
通常、kintone内の情報はkintoneアカウントを持つ人しか閲覧できません。
しかし、kViewerでビューを作成することで、kintoneアカウントを持たない人でもkintone内の情報を見られるようになります。
kintone内の情報を外部公開する際に、逐一データを移し替える手間がかからず、業務効率が大幅にアップします。
kViewer（ケイビューワー）とは、kintoneライセンスを持たないアルバイトや取引先の方に、kintoneの情報を共有するkintone連携サービスです。 「kViewerって何ができるの？」「導入するメリットは？」などの疑問に[…]
以下で、kintoneのアプリ（自社商品一覧）に保存されている商品情報を、kViewerのカードビューでホームページに表示させる手順を見ていきましょう。
まずは、kViewerにログインし、「ビューの作成」に進みます。
ビューの一覧の中から、カードビューの「作成」をクリックします。
カードビューの管理名を入力し、kintoneアプリ（自社商品一覧）のURLを入力します。
kintoneアプリのURLとは、アプリのトップ画面に表示されるhttps://(サブドメイン).cybozu.com/k/xxx/の形式のURLです。
アプリのURLを入力すると、「APIトークンはこちらのURLから生成できます。」という表示が出てくるため、クリックします。
kintoneアプリのAPIトークン生成画面に移るため、「生成する」をクリックします。
アクセス権の「レコード閲覧」にチェックが入っていることを確認したら、APIトークンをコピーし、「保存」してアプリの更新まで行います。
再びkViewerの画面に戻るため、コピーしたAPIトークンを貼り付け、「作成」に進みます。
コンテンツの配置を選択し、レイアウトを調整します。
メインコンテンツを設定します。まずは、レイアウトを選びます。
次に、コンテンツの設定を行います。
画像コンテンツ、コンテンツ、補足コンテンツごとに表示するフィールドの内容や位置などを調整します。
設定が終わったら「保存」をクリックします。
必要に応じて、レコードの詳細画面を設定します。
その他、必要な機能があれば設定を行います。
なお、「プレビュー」から作成したビューの仕上がりを確認できます。
最後に「公開する」をクリックすれば、カードビューの完成です。
ビューを公開すると、iframe用の埋め込みコードが自動生成されます。
「コードをクリップボードにコピーする」をクリックし、埋め込みたいホームページ内のHTMLコードにコピーしたコードを貼り付ければ、ホームページ内にビューが表示されます。
フォームブリッジで申し込みフォームを作成してホームページ上に表示
次に、フォームブリッジで申し込みフォームを作成し、商品情報のカードビューを表示したホームページ上に載せる手順を説明します。
フォームブリッジとは、kintoneに連携したWebフォームを作れるツールです。
ノンプログラミングでお問い合わせフォームやアンケートなど、高度なWebフォームを作成できます。
フォームブリッジで作成したWebフォームへの回答は、自動でkintoneに保存されます。
顧客やユーザーが入力した内容を逐一移し替える必要がありません。
フォームブリッジを通じて、kintoneアカウントを持たない人でも、直接kintoneにデータを登録できるようになります。
皆さん、フォームブリッジはご存知でしょうか？kintoneと連動するWebフォームで、kintoneアカウントがなくてもレコード追加ができるサービスです！ kintoneのスタンダードコースを契約しているなら、ぜひ利用してほしいの[…]
以下で、フォームブリッジで申し込みフォームを作成する方法を見ていきましょう。
はじめに、申し込みフォームの回答内容を記録するkintoneアプリを用意しておきます。
フォームブリッジにログインし、+マークから「フォームの作成」に進みます。
「新しいフォームをつくる」の「はじめから作成」をクリックします。
kintoneアプリのURL欄に、kintoneアプリのトップ画面に表示されるhttps://(サブドメイン).cybozu.com/k/xxx/の形式のURLを入力します。
URLを入力すると、「APIトークンはこちらのURLから生成できます。」という表示が出てくるため、クリックします。
kintoneアプリのAPIトークン生成画面に移るため、「生成する」をクリックします。
アクセス権の「レコード追加」にチェックが入っていることを確認したら、APIトークンをコピーし、「保存」してアプリの更新まで行います。
再びフォームブリッジに戻り、先ほどコピーしたAPIトークンを貼り付けて、「保存」します。
フォームの編集を行います。
「フィールド」より、表示したいフィールドを追加したり、表示したくないフィールドを削除したりします。
最後に画面最下部の「保存」を忘れずにクリックしてください。
フォームの色や回答完了画面の文言など、必要な設定を行います。
フォームにはあらかじめエラー通知メールが設定されています。
必要に応じて内容を変更してください。
最後に「編集中の設定をフォームに反映」させます。
なお、プレビューよりフォームの仕上がりを確認可能です。
最後に「公開する」をクリックして、フォームの完成です。
カードビューを表示したホームページ上に申し込みフォームを載せる場合、「外部サイトに埋め込む」に進みます。
iframe用の埋め込みコードが自動生成されているため、「コードをクリップボードにコピーする」をクリックします。埋め込みたいホームページ内のHTMLコードに、コピーしたコードを貼り付ければ、ホームページ内にフォームが表示されます。
kintoneを使ってホームページで商品閲覧〜購入まで
今回はkViewerでkintone内の商品情報を公開するカードビューを作成する手順と、フォームブリッジで申し込みフォームを作成する手順を解説しました。
kintone連携サービスを活用することで、必要な情報を一つにまとめて、ホームページの内容を充実させられます。顧客が商品を閲覧し、購入するまでのフローをスムーズにすることで、売上アップも期待できます。
30日間の無料お試しは何度でも可能なのでぜひ、kintone連携サービスをご体験ください。
