チュートリアルプラグインマニュアル

このプラグインでできること

チュートリアルプラグインは、kintoneアプリの画面上に操作ガイドを表示するプラグインです。
レコードの登録画面・編集画面・詳細画面で、フィールドを1つずつハイライトしながら説明文を表示できます。
また、フィールドのラベル横に「？」アイコンを設置し、クリックで説明を表示することもできます。
設定はすべて設定画面で行うため、JavaScriptの記述は不要です。

チュートリアルプラグインの紹介ページを見る

主な機能は次のとおりです。

登録画面・編集画面・詳細画面ごとに、独立したステップ（ガイドの1画面分）を設定できます
ステップでは「フォーカス」「クリック」「入力」の3種類の動作を指定できます
ガイドの対象は、kintoneのフィールドから選ぶ方法と、画面上の要素を指定する方法の2通りです
フィールドのラベル横に、常時表示のツールチップ（吹き出しヘルプ）を設置できます
アプリのフォームに配置済みのフィールドから、ステップを一括で作成できます
登録画面・編集画面・詳細画面の間で、設定をコピーできます
ステップの順序は、ドラッグ操作で入れ替えられます
ガイドを起動するボタンの名前・文字サイズ・表示位置を変更できます
各画面への初回アクセス時は、ガイドが自動で開始します
説明文にはHTMLタグを記述できます

動作環境・前提条件

2-1. 対応環境

PC（デスクトップ）版のkintoneに対応しています
モバイル版（スマートフォン・タブレット向け画面）には対応していません

⚠️ モバイル版の画面では、ガイドもツールチップも表示されません。

2-2. 対応する画面

このプラグインが動作する画面は、次の3つです。

画面	説明
登録画面	レコードを新規に追加する画面
編集画面	既存のレコードを編集する画面
詳細画面	1件のレコードの内容を表示する画面

⚠️ 一覧画面は対象外です。一覧画面ではガイドもツールチップも表示されません。

2-3. 事前に必要な設定

ガイドを表示したいアプリに、このプラグインを追加しておきます
ガイドの対象にするフィールドは、あらかじめアプリのフォームに配置しておきます

⚠️ 設定画面の「ターゲット」に表示されるフィールドは、フォームに配置済みのものだけです。フォームに配置していないフィールドは選択できません。

設定手順

3-1. 設定画面を開く

ガイドを設定したいアプリを開きます。
「アプリの設定」を開きます。
「プラグイン」を開きます。
一覧から「チュートリアルプラグイン」の歯車アイコンをクリックします。

設定画面が開きます。

チュートリアルプラグインの設定画面。左にメニュー、右に設定エリアが表示される

設定画面は、次の要素で構成されています。

場所	名称	役割
画面上部	「設定保存」	設定を保存し、アプリに反映します
画面上部	「操作説明」	設定画面自体の使い方をガイド表示します
画面上部右端	✕アイコン	設定画面を閉じます
画面左側	メニュー	設定する画面を切り替えます
画面右側	設定エリア	選択中のメニューの内容を表示します

3-2. 設定する画面を選ぶ

左側のメニューには、次の4項目が並んでいます。

メニュー	内容
「登録画面」	登録画面で表示するステップを設定します
「編集画面」	編集画面で表示するステップを設定します
「詳細画面」	詳細画面で表示するステップを設定します
「その他設定」	開始ボタンや配色など、全画面共通の設定を行います

設定画面の左メニューで、設定したい画面をクリックします。

右側の表示が、選択した画面の設定に切り替わります。

💡 ステップは画面ごとに独立して保存されます。登録画面の設定は、編集画面には反映されません。

3-3. ステップをまとめて作成する（フィールド一括登録）

ステップが1件も登録されていない状態では、画面中央にボタンが表示されます。
フォームのフィールドを上から順にステップ化する場合は、ここから作成します。

ステップが1件もないときに表示される「新規ステップ追加」「フィールド一括登録」などのボタン

設定画面の中央で、「フィールド一括登録」をクリックします。

フォームに配置されている順に、ステップが自動で作成されます。

自動で作成される説明文は、フィールドの種類によって次のように変わります。

フィールドの種類	自動で入る説明文
選択系のフィールド（ラジオボタン、チェックボックス、複数選択など）	「（フィールド名）を選択してください」
添付ファイル	「（フィールド名）をアップロードしてください」
上記以外	「（フィールド名）を入力してください」

「フィールド一括登録」で、フォームの順にステップが作成された状態

💡 自動で入る説明文はあくまで目安です。作成後に自由に書き換えられます。

💡 フィールドコードが「レコード番号」「作成者」「作成日時」「更新日時」「更新者」「カテゴリー」「ステータス」のフィールドは、一括登録の対象から自動的に除外されます。フィールドコードを変更している場合は除外されないため、不要なステップは作成後に削除してください。

⚠️ 「フィールド一括登録」のボタンは、ステップが1件もないときだけ表示されます。すでにステップがある状態でやり直したい場合は、先に「一括削除」でステップを削除してください。

3-4. ステップを1件ずつ追加する

3-4-1. 最初の1件を追加する

設定画面の中央で、「新規ステップ追加」をクリックします。

表の中に、ステップが1行追加されます。

「新規ステップ追加」で、ステップが1行追加された状態

3-4-2. 2件目以降を追加する

追加したい位置の1つ上の行で、右端の＋アイコンをクリックします。

クリックした行のすぐ下に、新しいステップが1行追加されます。

行の右端にある＋アイコン（追加）と−アイコン（削除）

💡 ステップが1件でも存在すると、「新規ステップ追加」のボタンは表示されなくなります。以降の追加は、行の＋アイコンから行います。

3-5. ステップの各項目を設定する

1行が1ステップに対応します。各列の意味は次のとおりです。

列名	内容
「アクション」	そのステップで何をするかを選びます
「タイプ」	ガイドの対象の指定方法を選びます
「ターゲット」	ガイドの対象そのものを指定します
「表示設定」	ガイドとツールチップのどちらで使うかを選びます
「説明文 / 入力内容」	吹き出しに表示する文章、または自動入力する値を記述します

3-5-1. 「アクション」を選ぶ

設定したい行の「アクション」で、動作を選択します。

「アクション」の選択肢（フォーカス／クリック／入力）

選択できる動作は次の3つです。

選択肢	動作
「フォーカス」	対象をハイライトし、吹き出しで説明文を表示します
「クリック」	対象を自動でクリックし、次のステップへ進みます
「入力」	対象のフィールドに、指定した値を自動で入力します

💡 「クリック」は、タブの切り替えなど、画面の状態を変えたいときに使います。説明の吹き出しは表示されません。

⚠️ 「アクション」を「フォーカス」に変更すると、「表示設定」の「チュートリアル」に自動でチェックが入ります。

⚠️ 「アクション」を「クリック」または「入力」に変更すると、「表示設定」の「ツールチップ」のチェックは自動で外れます。

3-5-2. 「タイプ」を選ぶ

設定したい行の「タイプ」で、対象の指定方法を選択します。

「タイプ」の選択肢（フィールド／要素）

選択肢	内容
「フィールド」	kintoneのフィールドを一覧から選びます
「要素」	画面上の要素を、id属性やclass属性で指定します

💡 通常は「フィールド」を選びます。kintoneの標準ボタンなど、フィールド以外を対象にしたい場合に「要素」を使います。

3-5-3. 「ターゲット」を指定する

「タイプ」の選択によって、入力方法が変わります。

「タイプ」が「フィールド」の場合

設定したい行の「ターゲット」のドロップダウンをクリックします。
対象にしたいフィールドを選択します。

「タイプ」が「フィールド」のときは、ドロップダウンからフィールドを選ぶ

💡 テーブル（サブテーブル）そのものと、テーブル内のフィールドも一覧に表示されます。

⚠️ 「アクション」が「入力」の場合、選択できるフィールドは限られます。文字列（1行）、文字列（複数行）、数値、日付、時刻、リンクのみが一覧に表示されます。

「タイプ」が「要素」の場合

設定したい行の「ターゲット」の入力欄に、対象要素のid属性またはclass属性を入力します。

入力欄には「#test .element」というヒントが表示されています。

「タイプ」が「要素」のときは、入力欄にid属性やclass属性を入力する

記述例は次のとおりです。

記述例	意味
`#target`	id属性が target の要素
`.__target`	class属性に __target を含む要素
`#target > ul`	id属性が target の要素の直下にある ul 要素
`.__target:eq(2)`	条件に一致する要素のうち3番目（0から数えます）

💡 :eq(番号) は、指定の末尾にだけ書けます。途中に書いた場合は正しく対象を探せません。

⚠️ 要素の指定は、kintoneの画面構成に依存します。kintoneのアップデートで画面構成が変わると、対象が見つからなくなる場合があります。

3-5-4. 「表示設定」を選ぶ

「表示設定」には、2つのチェックボックスがあります。

チェックボックス	内容
「チュートリアル」	チェックを入れると、ステップ式のガイドに含まれます。外すとガイドから除外されます
「ツールチップ」	チェックを入れると、フィールドのラベル横に「？」アイコンが表示されます

ガイドに含めたい場合は、「チュートリアル」にチェックを入れます。
ラベル横に常設の説明を出したい場合は、「ツールチップ」にチェックを入れます。

「表示設定」の「チュートリアル」と「ツールチップ」のチェックボックス

⚠️ 「ツールチップ」は、「タイプ」が「フィールド」のときだけ選択できます。「タイプ」が「要素」の場合、または「アクション」が「クリック」「入力」の場合は、チェックボックスが操作できない状態になります。

💡 両方にチェックを入れることもできます。その場合、ガイドでも表示され、ラベル横の「？」アイコンからも同じ説明を確認できます。

3-5-5. 「説明文 / 入力内容」を記述する

設定したい行の「説明文 / 入力内容」の欄に、文章を入力します。

「アクション」の選択によって、この欄の意味が変わります。

「アクション」	この欄に書く内容
「フォーカス」	吹き出しに表示する説明文
「入力」	フィールドに自動入力する値
「クリック」	入力できません（欄が操作不可になります）

入力欄には「HTMLの記載も可能」というヒントが表示されています。
説明文にはHTMLタグを記述できます。

記述例は次のとおりです。

記述例	表示結果
`<strong>必須項目です</strong>`	太字で表示されます
`<div>1行目</div><div>2行目</div>`	改行して表示されます
`<span style="color: red;">注意</span>`	赤字で表示されます
`<a href="https://example.com" target="_blank">詳細</a>`	リンクとして表示されます

⚠️ 説明文に記述したHTMLは、そのまま画面上で動作します。ガイドの吹き出しでは <script> タグも実行されます。社内で内容を確認したうえで記述してください。

3-6. ステップの順序を並び替える

ガイドは、表の上から順に実行されます。

並び替えたい行の左端にあるドットのアイコンにマウスカーソルを合わせます。
そのまま移動したい位置までドラッグします。
マウスのボタンを離します。

行の順序が入れ替わります。

左端のドットのアイコンをドラッグして、ステップの順序を入れ替える

3-7. ステップを削除する

3-7-1. 1件だけ削除する

削除したい行の右端にある−アイコンをクリックします。

その行が削除されます。

3-7-2. すべて削除する

表の右上にある「一括削除」をクリックします。

選択中の画面のステップが、すべて削除されます。

表の右上の「一括削除」と、行ごとの＋／−アイコン

⚠️ 「一括削除」で削除されるのは、そのとき選択している画面のステップだけです。他の画面のステップは残ります。

⚠️ 削除の確認メッセージは表示されません。クリックすると即座に削除されます。誤って削除した場合は、「設定保存」を押さずに設定画面を閉じてください。

3-8. 他の画面の設定をコピーする

登録画面と編集画面のように、内容が似ている画面では、設定をコピーできます。

設定画面の左メニューで、コピー先の画面をクリックします。
画面中央のボタンから、コピー元の画面のボタンをクリックします。

コピー元のステップが、そのまま複製されます。

表示されるボタンは、選択中の画面によって変わります。

選択中の画面	表示されるボタン
「登録画面」	「編集画面をコピー」／「詳細画面をコピー」
「編集画面」	「登録画面をコピー」／「詳細画面をコピー」
「詳細画面」	「登録画面をコピー」／「編集画面をコピー」

⚠️ コピーのボタンは、コピー先の画面にステップが1件もないときだけ表示されます。すでにステップがある場合は、先に「一括削除」で削除してください。

⚠️ 詳細画面には入力欄がありません。登録画面から詳細画面へコピーした場合、「入力」アクションのステップは意図どおりに動作しません。コピー後に不要なステップを削除してください。

3-9. 「その他設定」を設定する

開始ボタンの見た目や、ガイド全体の動作を設定します。

設定画面の左メニューで、「その他設定」をクリックします。

設定項目が5つ表示されます。画面上部には、現在の設定内容のプレビューが表示されます。

「その他設定」の画面。左側に開始ボタンと吹き出しのプレビューが表示される

各項目の内容は次のとおりです。

項目名	内容	初期値
「開始ボタン名」	チュートリアル開始ボタンの表示名	チュートリアル
「ボタン名サイズ」	チュートリアル開始ボタンのフォントサイズ	9
「開始ボタンの位置」	チュートリアル開始ボタンの位置を設定	右下
「背景色」	チュートリアル/ツールチップの背景色	#FFFFFF
「要素探索最大時間（ms）」	対象の要素を探索する際の最大探索時間	2000

3-9-1. 「開始ボタン名」を変更する

「開始ボタン名」の入力欄に、表示したい文字を入力します。

画面上部のプレビューに、入力した文字が反映されます。

「開始ボタン名」の入力欄

3-9-2. 「ボタン名サイズ」を変更する

「ボタン名サイズ」の入力欄に、数値を入力します。

単位はピクセルです。数値が大きいほど、ボタンの文字が大きくなります。

「ボタン名サイズ」の入力欄

3-9-3. 「開始ボタンの位置」を変更する

「開始ボタンの位置」のドロップダウンで、表示位置を選択します。

「開始ボタンの位置」のドロップダウン

選択できる位置は次の5つです。

選択肢	表示位置
「左上」	画面の左上に固定表示されます
「左下」	画面の左下に固定表示されます
「右上」	画面の右上に固定表示されます
「右下」	画面の右下に固定表示されます
「ヘッダー」	画面上部のヘッダー内に表示されます

💡 「左上」「左下」「右上」「右下」を選ぶと、丸いボタンが画面に固定表示されます。「ヘッダー」を選ぶと、kintone標準のボタンに近い横長の形で表示されます。

3-9-4. 「背景色」を変更する

「背景色」の左側にある色のパネルをクリックします。
カラーピッカーで色を選択します。

「背景色」の色のパネルをクリックすると、カラーピッカーが開く

右側の入力欄に、選んだ色のカラーコードが表示されます。
カラーコードを直接入力することもできます。

💡 ここで設定した色は、ガイドの吹き出しとツールチップの両方に適用されます。個別に色を変えることはできません。

⚠️ 説明文は濃い色の文字で表示されます。背景色に濃い色を指定すると、文字が読みにくくなります。

3-9-5. 「要素探索最大時間（ms）」を変更する

対象の要素が画面に表示されるまで、プラグインは一定時間待機します。
この待機時間の上限を設定する項目です。

「要素探索最大時間（ms）」の入力欄に、数値を入力します。

「要素探索最大時間（ms）」の入力欄

単位はミリ秒です。1000ミリ秒が1秒にあたります。

💡 ルックアップや関連レコード一覧など、表示に時間がかかる要素を対象にする場合は、値を大きくしてください。

⚠️ 指定した時間内に対象が見つからない場合、そのステップは飛ばされ、次のステップに進みます。ガイドが途中で止まることはありません。

3-10. 設定を保存する

設定画面の上部で、「設定保存」をクリックします。

設定画面の上部にある「設定保存」ボタン

「設定を更新しました」というメッセージが表示されます。

💡 キーボードの Ctrl キーを押しながら S キーを押しても保存できます。

⚠️ 「設定保存」を押すと、アプリへの反映（変更を反映）まで自動で実行されます。別途「変更を反映」を押す必要はありません。反映が完了するまで、画面はそのままお待ちください。

⚠️ 保存せずに設定画面を閉じると、編集内容は失われます。

3-11. 設定画面の使い方を画面上で確認する

設定画面には、設定画面自体の使い方を案内する機能があります。

設定画面の上部で、「操作説明」をクリックします。

設定画面の各項目が順にハイライトされ、説明が表示されます。

「操作説明」で、設定画面の各項目が順にハイライトされる

💡 「操作説明」の途中で、メニューの切り替え（「登録画面」→「その他設定」）が自動で行われます。編集中の内容が消えることはありません。

⚠️ 「登録画面」にステップが1件もない状態で「操作説明」を始めると、説明の途中で「新規ステップ追加」が自動でクリックされ、ステップが1件追加されます。不要な場合は、終わったあとに削除してください。

3-12. 設定画面を閉じる

設定画面の上部右端にある✕アイコンをクリックします。

直前の画面に戻ります。

操作手順

ここからは、設定したガイドを実際に利用する側の操作を説明します。

4-1. 初回アクセス時に自動で始まる

登録画面・編集画面・詳細画面に初めてアクセスすると、ガイドが自動で開始します。
画面が暗くなり、最初の対象がハイライトされます。

初回アクセス時に自動で始まったガイド

💡 自動起動は、アプリごと・画面ごとに1回だけです。一度ガイドを開始すると、次回以降は自動で開始しません。

⚠️ 自動起動の記録は、利用者のブラウザーに保存されます。ブラウザーや端末を変えると、再び自動で開始します。

⚠️ 自動起動をやり直すための設定項目はありません。2回目以降は、開始ボタンから起動してください。

4-2. チュートリアルを自分で起動する

ガイドはいつでも起動できます。方法は2つあります。

開始ボタンから起動する

開始ボタン（初期設定では画面右下）をクリックします。

ガイドが最初のステップから開始します。

画面の隅に表示される開始ボタン（初期設定では右下）

キーボードから起動する

Ctrl キーを押しながら O キーを押します。

ガイドが最初のステップから開始します。

💡 開始ボタンの上にマウスカーソルを合わせると、「Ctrl + O」というヒントが表示されます。

⚠️ 開始ボタンは、「表示設定」の「チュートリアル」にチェックが入ったステップが1件以上ある画面にのみ表示されます。

4-3. チュートリアル中の操作

ガイドの実行中は、対象がハイライトされ、その近くに吹き出しが表示されます。

ガイドの吹き出し。「前へ」「次へ」と✕アイコンが表示される

吹き出しには、次のボタンが表示されます。

ボタン	動作	表示条件
「前へ」	1つ前のステップに戻ります	2ステップ目以降で表示されます
「次へ」	次のステップに進みます	最後のステップ以外で表示されます
「完了」	ガイドを終了します	最後のステップで表示されます
✕アイコン	ガイドを途中で終了します	常に表示されます

操作方法は次のとおりです。

説明を読みます。
「次へ」をクリックします。
最後のステップまで進んだら、「完了」をクリックします。

ガイドが終了し、通常の画面に戻ります。

💡 キーボードの Enter キーを押しても、次のステップに進みます。

💡 途中でやめたい場合は、吹き出しの✕アイコンをクリックするか、画面の暗くなっている部分をクリックします。

⚠️ ガイドの実行中に Enter キーを押すと、次のステップに進みます。文章の入力中は注意してください。

💡 対象が画面の外にある場合は、自動でスクロールして表示します。画面をスクロールしたり、ウィンドウの大きさを変えたりしても、吹き出しの位置は追従します。

⚠️ 「クリック」「入力」のステップでは、吹き出しは表示されません。動作の実行後、自動で次のステップに進みます。

⚠️ 「前へ」で戻る場合、「クリック」「入力」のステップは飛ばされます。「フォーカス」のステップまで戻ります。

4-4. ツールチップで説明を確認する

「ツールチップ」を設定したフィールドには、ラベルの右側に「？」アイコンが表示されます。
ガイドを起動しなくても、必要なときだけ説明を確認できます。

確認したいフィールドのラベル横にある「？」アイコンをクリックします。
表示された吹き出しで、説明を読みます。
もう一度「？」アイコンをクリックします。

吹き出しが閉じます。

ラベル横の「？」アイコンをクリックすると、ツールチップが開く

💡 吹き出しの外側をクリックしても閉じられます。

💡 別のフィールドの「？」アイコンをクリックすると、先に開いていた吹き出しは自動で閉じます。同時に表示されるのは1つだけです。

⚠️ テーブル（サブテーブル）内のフィールドの場合、「？」アイコンは列の見出しに表示されます。行ごとには表示されません。

制限事項・注意点

5-1. 対応範囲に関する制限

PC（デスクトップ）版のみに対応しています。モバイル版の画面では動作しません
一覧画面には対応していません。設定メニューにも一覧画面の項目はありません
対象は登録画面・編集画面・詳細画面の3画面のみです

5-2. 設定に関する制限

「新規ステップ追加」「フィールド一括登録」「◯◯画面をコピー」の各ボタンは、ステップが1件もないときだけ表示されます
「フィールド一括登録」の対象は、フォームに配置済みのフィールドのみです
「フィールド一括登録」では、フィールドコードが「レコード番号」「作成者」「作成日時」「更新日時」「更新者」「カテゴリー」「ステータス」のフィールドは対象外です
「ツールチップ」は、「タイプ」が「フィールド」のステップだけで使用できます
「ツールチップ」は、「アクション」が「クリック」「入力」のステップでは使用できません
テーブル（サブテーブル）そのものをターゲットに指定した場合、ツールチップは表示されません
「アクション」が「入力」の場合、対象にできるフィールドは文字列（1行）、文字列（複数行）、数値、日付、時刻、リンクのみです
「背景色」は、ガイドの吹き出しとツールチップで共通です。個別には設定できません
ステップの削除時に、確認メッセージは表示されません

5-3. 動作に関する注意

「設定保存」を押すと、アプリへの反映（変更を反映）まで自動で実行されます
対象の要素が「要素探索最大時間（ms）」内に見つからない場合、そのステップは飛ばされます
非表示になっている要素が対象の場合も、そのステップは飛ばされます
自動起動は、アプリごと・画面ごと・ブラウザーごとに1回のみです
自動起動の記録をリセットする設定項目はありません
ガイドの実行中に Enter キーを押すと、次のステップに進みます
説明文に記述したHTMLは、そのまま画面上で動作します。ガイドの吹き出しでは <script> タグも実行されます
「タイプ」を「要素」にした場合、指定はkintoneの画面構成に依存します。kintoneのアップデートで対象が見つからなくなる可能性があります

« マニュアルの一覧に戻る