【kintone】＊プラグイン＊ツールチップを表示するプラグイン

kintoneの一覧/登録/編集/詳細画面上でツールチップを表示させるプラグインを作成しました。

各アプリ上のJavaScript上にツールチップを表示するソースコードを記載していましたが、ツールチップを表示するアプリやフィールドが増加した結果メンテ性に難があり、プラグイン化しました。

せっかくプラグイン化したんだから使ってもらいたいと思い公開しております。

■note

1. このプラグインは、tippyjsライブラリを利用しています。
2. ソースコードは、GitHubにて[MIT license]にて公開しています。ご自由にお使いください。
3. 動作環境は、デスクトップのみでモバイル対応はしていません。
4. ブラウザは、Google Chrome 87.0.4280.141〜のみ動作を確認しています。IE等の動作確認していません。
5. 不具合・要望等あればコメント頂ければ確認します。※確認しますが、対応については期待しないでください。
6. 当プラグインは無料です。ご自由にお使いください。※利用にあたり問題が発生しても保証出来ませんので予めご了承ください。
7. エラーチェックやテストは不十分かもしれません。無料ということでご了承ください。
8. 使ってみた感想とか頂けるとすごく嬉しいです。
9. よろしくない点などありましたらご指摘頂けますと幸いです。

■DEMO

■ダウンロード

■使い方について

※ダウンロードされたZIPファイルをkintoneのプラグインに反映する部分については省略します。公式のこちらを参照ください。

0．事前準備

0-1．登録・編集・詳細画面上でツールチップを表示したい場合

①　ツールチップを表示したい場所にスペースフィールドを配置します。
例）以下のスクリーンショットで赤枠で囲っている部分にスペースを追加しました。
※複数ツールチップを表示させたい場合は、①〜③の手順を繰り返して設定します。

②　配置したスペースフィールドの右メニューから「設定」を押下して、「スペースの設定」画面を開きます。

③　要素IDにアプリ上で一意（ユニーク）となる文字列を設定して保存後、フォームを保存します。
例）以下のスクリーンショットの場合は、「tippyjs-kintone-test-1」と入力しました。

0-２．一覧画面上でツールチップを表示したい場合

※一覧画面上でツールチップを表示する場合、表示させる一覧をレコード一覧の表示形式「カスタマイズ」で作成してください。

①　カスタマイズ一覧のHTML入力欄にツールチップを表示するための入れ物（HTMLの要素）を配置して保存します。
例）以下のスクリーンショット赤枠で囲っている部分が入れ物の記載例となります。「div」「span」「p」どれでも問題ございません。
必ず要素内にidを設定しておいてください。例えば「div」の場合だと「tippyjs-kintone-test-2」がidに該当します。

１．プラグインの設定

１-１．プラグインの設定画面を開きます。

１-2．登録・編集・詳細画面のツールチップを設定します。

「①編集画面/詳細画面で表示するツールチップの情報を設定します。」直下のテーブルにツールチップの情報を設定します。
このテーブルには、予めアプリ上に設定保存されたスペースフィールド且つ要素IDが設定済の対象のみが表示されます。

①　TIPS名

ツールチップを表示するためのボタンの名前になります。ツールチップはマウスオーバーで表示されるように設定されます。

②　TIPSの要素

「i」または「a」から選択できます。「a」を選択した場合のみツールチップ兼ハイパーリンクが設定されます。
ハイパーリンク先は、「リンク先(a要素の場合)」欄に設定します。

③　TIPSの表示位置

ツールチップをマウスオーバーした際に表示する位置を選択します。ツールチップの入れ物を配置した場所によっては、設定値通りの位置には表示されませんのでご了承ください。

④　TIPSの内容

マウスオーバーした際に表示させたい内容を登録します。複数行における入力も可能です。

⑤　リンク先(a要素の場合)

TIPSの要素で「a」を選択した場合のみ入力値が画面上にも反映されます。ツールチップを押下した際に設定されたハイパーリンク先を別タブで表示します。

設定例）
リンク先にはYahoo!のトップページのハイパーリンクを設定しています。

１-３．一覧画面のツールチップを設定します。

「②一覧画面上で表示するツールチップ情報を設定します。」直下のテーブルにツールチップの情報を設定します。
このテーブルは設定が無い場合の初期値は行がありませんでの、以下のスクリーンショットの赤枠「tips追加」ボタンを押下することで新規でツールチップの設定行を追加することができます。

「0-2．」の手順で要素を３つ作成したため以下のスクリーンショットでは３行分入力欄を追加しています。
基本的に入力する内容は、「①編集画面/詳細画面で表示するツールチップの情報を設定します。」直下のテーブルと同様ですが、「スペース要素id」と「tips削除」ボタンのみ異なります。

①　スペース要素id

予め一覧画面（カスタマイズ）のHTML入力欄に設定しているidを入力します。
「0-2．」を例を参考にした場合、以下のスクリーンショットのように入力します。

②　tips削除

該当の行の設定情報を削除する場合にボタンを押下します。
設定画面で「保存」ボタンを押下するまでは有効ではありませんのでご注意ください。
※設定が保存済のツールチップは、スペース要素id欄が編集不可となります。

設定例）

１-４．ツールチップのCSS情報（背景色及び文字色）を設定します。

以下のスクリーンショットはデフォルトの値になります。
手元で操作できる項目は多くありませんが、ご自由に設定してください。

①　TIPS

TIPSの要素で「i」が設定されているツールチップボタンが対象です。
通常時及びマウスアウトされた場合の文字色・文字サイズ・背景色を設定・入力できます。

②　TIPS:hover

TIPSの要素で「i」が設定されている場合のツールチップボタンが対象です。
マウスオーバーされた場合の文字色・文字サイズ・背景色を設定・入力できます。

③　TIPS-LINK

TIPSの要素で「a」が設定されているツールチップボタンが対象です。
通常時及びマウスアウトされた場合の文字色・文字サイズ・背景色を設定・入力できます。

④　TIPS-LINK:hover

TIPSの要素で「a」が設定されている場合のツールチップボタンが対象です。
マウスオーバーされた場合の文字色・文字サイズ・背景色を設定・入力できます。

１-５．プラグインの設定を保存します。

設定画面の一番下に配置されている以下のスクリーンショット赤枠で囲んでいる「保存」ボタンを押下します。
ボタン押下後に「設定内容を保存しました。」とポップアップが表示されます。
「OK」を押下するとアプリの設定画面が表示されます。

１-６．アプリを更新します。

アプリの設定画面にてアプリを更新します。

２．設定情報のインポート/エクスポート

２-1．設定情報をエクスポートする。

①　「⓪CSVファイルインポート」欄の下に配置されているリストからエクスポートしたい設定を選択します。初期値は「参照/編集画面」になっています。選択対象を確認して「EXPORT」ボタンを押下します。

②　保存のポップアップが起動するので、任意の場所に保存します。ファイル名はわかりやすいように変更していただいてもOKです。
デフォルトでは、以下の様になります。

参照/編集画面の場合：DETAIL_YYYYMMDDHHMMDD.csv
一覧画面の場合：LIST_YYYYMMDDHHMMDD.csv
CSVの場合：CSV_YYYYMMDDHHMMDD.csv
※ YYYYMMDDHHMMDDの部分はエクスポートする年月日時分秒になります。

③　保存したファイルの中身は以下の様になっています。

一覧画面/CSVも同様のcsvファイルを吐き出します。この後説明するインポートでcsvファイルの内容を取り込むことができます。
そのため、このファイルを編集してインポートすることでも設定値を更新可能です。※更新後は「保存」ボタンの押し忘れに気をつけてください。

以下のスクリーンショットは、上例の一覧の場合のエクスポート結果になります。
複数のツールチップの設定を行う場合は、必ず１つのツールチップの最終に「*」マークを記載してください。

以下のスクリーンショットでも次のツールチップが存在する場合は、その直前に「”*”」マークが記載されています。

以下のスクリーンショットは、上例のCSVの場合のエクスポート結果になります。

２-２．設定情報をインポートする。

①　2-1.でエクスポートしたCSVファイルか、2-1．に記載された内容で作成されたCSVを用意します。
設定を読み込みたい対象を以下スクリーンショットの赤枠のリストから選択します。初期値は「参照/編集画面」です。

②　以下スクリーンショットの赤枠「ファイルを選択する」を押下するか、「ここにファイルをドロップしてください。」の位置にインポートするファイルをドラッグ＆ドロップします。

③　この例では「２−１．」で挙げた３ファイルを以下のように変更したものを実際にアップロードしています。

参照/編集画面

一覧画面

CSV

④　選択又はドラッグ＆ドロップすると以下のように確認メッセージが表示されますので問題なければOKを選択します。
確認メッセージ上に更新先の設定情報が記載されているので、更新先が誤っていないか確認してください。

⑤　３ファイルとものインポートした場合は下記スクリーンショットのような状態になります。
以前の設定内容を変更していることがわかります。赤枠の部分に読み込んだファイルの情報が表示されます。
設定情報を適用する場合は、忘れずに「保存」ボタンを押下してください。

⑥　反映結果（一覧画面）

背景色や文字色やサイズが変更されていることがわかります。

※「tippyjs-kintone-test-3」は、TIPS表示位置を「left」に設定していますが、ツールチップを表示している要素が画面左端に配置されているため、ツールチップは左側に表示されず右側に表示されています。

■今後の展開（全て予定です）

1. 設定画面で設定できる項目を増やす
2. インポートする際にファイル名の先頭文字列でインポート先を自動で判別機能
3. エクスポートに全てを追加
4. ツールチップを表示できる範囲の拡大
5. 詳細のみ登録時のみツールチップを表示するといった表示対象の選択機能
6. モバイル対応

■更新履歴

日付	更新内容
2021/01/30	ブログにて公開