プラグイン

メーカー

トヨクモ株式会社

kintoneプラグイン「kViewer」と「フォームブリッジ」を活用した『マイページ』の作り方

2025.03.25

「kintoneを活用してみたいけど、そもそもマイページってどんな機能があるの？」

「kintoneには多くのプラグインがあり、どれを使用してよいか分からない」

「kintoneを使用してマイページの作成方法を知りたい」

kintoneの活用または、マイページの作成について上記のようにお悩みではありませんか。

kintoneを活用するとノーコードでアプリを作成できますが、さらに便利に活用するなら「マイページ」機能が効果的です。

「マイページ」とは、ユーザーごとに専用の情報を表示・管理できる個別ページです。

本記事では、kViewerとフォームブリッジを活用したマイページの作り方を、初心者にも分かりやすく丁寧に解説しています。

情報の一元管理や業務効率の向上、ペーパーレス化・脱Excelを検討している方は、ぜひご参考ください。

＜マイページ作成に必要なツール＞

kintone：スタンダードコース以上
フォームブリッジ：プレミアムコース以上
kViewer：プレミアムコース以上

＜マイページ作成の所要時間＞

15分程度とそこまで時間をかけずに作成できます。

そもそもkintoneで作成できる「マイページ」とは？
kintoneプラグイン「kViewer」と「フォームブリッジ」を活用した『マイページ』の作成手順
kintoneで「マイページ」を作成し業務の効率化を図りましょう

そもそもkintoneで作成できる「マイページ」とは？

kintoneの「マイページ」とは、ユーザーごとに専用の情報を表示・管理できる個別ページのことを指します。

たとえば、設定により会員情報や申請状況、過去の履歴など、閲覧者に応じて表示内容を切り替えることが可能です。

kintone単体では実現が難しいこの機能も、外部サービスである「kViewer」や「フォームブリッジ」と連携するとノーコードで構築できます。

業務の効率化や顧客対応の質の向上、情報の一元管理などに役立ち、多くの企業が導入しています。

kintoneプラグイン「kViewer」と「フォームブリッジ」を活用した『マイページ』の作成手順

kViewerとフォームブリッジを活用した「マイページ」の作り方は、以下のとおりです。

kintoneで「マイページ」アプリ生成する
「マイページ」アプリとkViewerを連携させる
フォームブリッジで、「マイページに連携するフォーム」をつくる

それぞれ以下で解説していきます。

kintoneで「マイページ」アプリ生成する

kintoneで「マイページ」アプリ生成するには以下の手順で行います。

kintoneを開き、アプリの（＋）ボタンをクリックする
アプリの作成方法を選択する
kintoneでアプリを作成する
各フィールドの「フィールド名」・「フィールドコード」を設定する
設定タブから「APIトークン」を生成する

それぞれ以下で詳しく解説していきます。

1.kintoneを開き、アプリの（＋）ボタンをクリックする

kintoneでアプリを作成する際は、「＋」をクリックするとアプリ作成の画面に移行します。

2.アプリの作成方法を選択する

アプリの作成は以下5つの方法を用いて行います。

はじめから作成
Excelを読み込んで作成
CSVを読み込んで作成
テンプレートファイルを読み込んで作成
他のアプリを再利用

なお、今回は「はじめから作成」の方法でアプリを作成していきます。

3.kintoneでアプリを作成する

kintoneでアプリを作成する際は、以下のフィールドを使用します。

アプリ名　会員
会員番号（数値）
氏名（文字列）
Email（文字列）
マイページURL（リンク）など

4.各フィールドの「フィールド名」・「フィールドコード」を設定する

kintoneのフィールドとは、アプリの入力フォームで使われるデータ項目です。データベースの「カラム（列）」に相当し、アプリ内のレコード（データの1行）に情報を入力するための枠のようなものです。

例えば、顧客管理アプリを作る場合、以下のフィールドを設定します。

顧客名
電話番号
メールアドレス
契約開始日
契約金額など

5.設定タブから「APIトークン」を生成する

今回は、「レコード閲覧」「レコード追加」「レコード編集」「レコード削除」にチェックをいれました。

※　kintoneのアプリは開いたままにしておきましょう。

もしくは、アプリURLとAPIトークンをどこかにコピーしておくと、作業をスムーズに進められます。また、サンプルデータも数件入れておく必要があります。

なお、マイページURLは不要です。

「マイページ」アプリとkViewerを連携させる

「マイページ」アプリとkViewerを連携させるには以下の手順で行います。

kViewerを開く
kViewer上でkintoneアプリのURLをコピペする
Myページビューを選択する
kintoneアプリのURLとAPIトークンを入力し、「Myページビュー作成」をクリックする
レコード詳細画面でフィールドを選択し「保存」と「公開」をクリックする
マイページURLのデータをダウンロードする
kintoneのアプリに、ダウンロードしたマイページURLのデータを読み込ませる
「参照」でデータを選択し、「読み込む」をクリックする
MyページURLを選択する
完成したマイページを確認する

それぞれの手順の詳細を以下で解説していきます。

1.kViewerを開く

kViewerを開くためには、「Toyokumo kintone App」の「サービス」から「kViewer」を選択しましょう。

なお、画像は使用版の画面になるため、製品版の画面と異なる場合があるためご注意ください。

2.kViewer上でkintoneアプリのURLをコピペする

7.kViewer上で、さきほど作ったkintoneアプリのURLをコピペします。

『5.設定タブから「APIトークン」を生成』でも説明したように、kintoneのアプリ作成画面のURLをkViewerにペーストします。

3.Myページビューを選択する

URLを入力するとビューを選択する画面になるため、「Myページビューを作成」を選択します。

4.kintoneアプリのURLとAPIトークンを入力し、「Myページビュー作成」をクリックする

9.kintoneアプリのURLとAPIトークンを入力し、「Myページビュー作成」を押します。

マイページを作成するためには、以下の2点を入力しましょう。

kintoneアプリのURL
APIトークン

上記の入力後「Myページビューを作成」をクリックします。

次の画面が表示される

「Myページビューを作成」をクリックすると、上記の画面が表示されます。

マイページは自社の好みにカスタマイズできますが、今回はマイページの活用に欠かせない最低限の設定を解説します。

「設定画面」と「今回の設定箇所」

マイページの設定には「基本の設定」と「詳しい設定」の2種類があります。

また、次項では最低限設定しておきたい「レコード詳細」について解説します。

5.レコード詳細画面でフィールドを選択し「保存」と「公開」をクリックする

11.レコード詳細画面で、表示するフィールドを選択し、「保存」と「公開」を押す。

レコード詳細画面では、マイページに必要なフィールドを入力します。

なお、今回はすべて選択しています。

6.マイページURLのデータをダウンロードする

7.kintoneのアプリに、ダウンロードしたマイページURLのデータを読み込ませる

13.kintoneのアプリに、12でダウンロードしたマイページURLのデータを読み込ませます。

kintoneの画面に移動し、右上にある「⋯」をクリックして、「ファイルから読み込む」を選択します。

8.「参照」でデータを選択し、「読み込む」をクリックする

「参照」で連携したいデータを選択し、「読み込む」をクリックします。

9.MyページURLを選択する

MyページでURLを選択する手順は以下のとおりです。

「レコード番号一括更新のキー」に✔をいれる
「マイページ」で「MyページURL」を選択する
「読み込む」を押す

【読み込み完了を確認】

ファイルの読み込み後、マイページに目的のURLが入力されているか確認しましょう。

10.完成したマイページを確認する

ここまでの工程を行うと、マイページの完成です。

フォームブリッジで、「マイページに連携するフォーム」をつくる

フォームブリッジで、「マイページに連携するフォーム」をつくる際の手順は以下のとおりです。

右上の9本点を展開させ、フォームブリッジを選択する
2フォームを作成」を押し、次の画面で、作成方法を選択する
アプリの「URL」と「APIトークン」を入力し「保存」をクリックする
フォームの内容を設定する
「kViewerと連携する」をクリックする
「公開」をクリックする
kViewerに戻り、会員マイページをクリックする
「詳しい設定」を選び「FormBridge連携」をクリックする
kintoneのアプリに戻り、マイページURLを開く
マイページ完成

ここまで行うとマイページが完成します。こちらも確認していきましょう。

1.右上の9本点を展開させ、フォームブリッジを選択する

画面右上の9つの点をクリックし「FormBridge」を選択します。

kintone情報の設定画面がでてくるので、先ほどの会員アプリの「URL」を入れます。続いて「保存」を押します。

2.「フォームを作成」を押し、次の画面で、作成方法を選択する

「フォームを作成」をクリックすると、上記の画面が現れます。

なお、今回は「はじめから作成」を選びます。

3.アプリの「URL」と「APIトークン」を入力し「保存」をクリックする

上記のkintoneアプリURLとAPIトークンを入力し、保存をクリックします。

4.フォームの内容を設定する

自社の状況に合わせて「基本の設定」と「詳しい設定」を入力します。

なお、今回は、最低限必要な設定のみ行います。

5.「kViewerと連携する」をクリックする

22.「kViewerと連携する」を押します。（確認の表示がでてきたら、「有効化」を押します。）

「kViewerと連携する」をクリックすると、確認画面が表示されるため「有効化」を押します。

なお、画面上に、「Myページを利用」という表記などがでてきます。

「Myページを利用」にチェックします。

連携するMyページビューには、kViewerで設定したマイページ名が表示され、「保存」をクリックします。

画面転換後、右上にある「プレビュー」をクリックした際の画面は以下のとおりです。

プレビュー画面

見栄えがシンプルすぎて見づらいので、今回、簡単な微調整だけ行います。

微調整の方法は、別の記事にて、ご紹介します。

6.「公開」をクリックする

続いて、確認画面が表示されるので「公開」をクリックします。

7.kViewerに戻り、会員マイページをクリックする

右上の9本点を展開させ、kViewerを選択し、「会員マイページ」をクリックします。

8.「詳しい設定」を選び「FormBridge連携」をクリックする

会員マイページの作成方法は以下のとおりです。

詳しい設定を選択
FormBridge連携を選択
画面の転換後、「フォームブリッジと連携する」にチェックを入れる
「フォームブリッジフォームのURL」を入力する
「設置場所」を設定する
「ラベル」を入力する（今回は「入力フォーム」と記載）
微調整完了後、「保存」続いて「更新」を押す

ラベルの入力後、マークの部分でサイズや色、テイストを選択すると、自社で見やすいマイページになります。

なお、フォームのURLは、フォームブリッジから確認できます。

9.kintoneのアプリに戻り、マイページURLを開く

表示させたいマイページのURLを選択します。

なお、kViewer上で開いてもかまいません。kViewerでマイページを開く際は、数字を選択します。

10.マイページ完成

なお、「フォームボタン」を押すと、既に元データが入っていることがわかります。

kintoneで「マイページ」を作成し業務の効率化を図りましょう

kintoneで会員情報を管理し、kViewerで個別に閲覧できるマイページを作成し、フォームブリッジと連携させることで、情報の入力・更新も簡単に行えるようになります。

そのため、顧客ごとの情報管理がスムーズになり、業務効率の向上、情報の一元化、ペーパーレス化、脱Excelが実現可能です。

操作自体もノーコードで行えるため、専門知識がなくても安心して導入できます。業務改善やDXを進めたい企業にとって、非常に有効な仕組みといえるでしょう。

しかし、実際にkintoneやkViewer・フォームブリッジを活用して自社に適したマイページを作成できるのか不安に思っていませんか？

なお、ペパコミ株式会社では、マイページの作成を含めたkintone活用のサポートを行っています。

まずは以下のページから無料相談ください。

ペパコミ株式会社へ「無料相談」する

記事一覧に戻る

kViewer 2024.12.07

kintoneの連携サービス「kViewer」とは？強みや価格、導入事例まで徹底...

フォームブリッジ 2024.11.19

kintoneの連携サービス「FormBridge（フォームブリッジ）」とは？強...

kMailer 2024.12.07

kintoneの連携サービス「kMailer」とは？強みや価格、導入事例まで徹底...

Boost! Injector 2025.03.30

「kintoneのプラグイン「Boost! Injector」とは？強みや価格、...