popModalを使ってアプリの説明をきれいにまとめよう！

はじめに

kintone アプリ開発者にとって、アプリの運用ルールをどこで管理するかはひとつの悩みです。
ユーザーが気づきやすいところに書いておかないと、新しいメンバーが失敗をしてしまうことがありそうです。

たとえば申請系のアプリの場合、「一般設定」の「アプリの説明」に申請ルールを書いておくのは良い方法です。
しかし、申請ルールの情報量が多い場合はどうでしょう？
説明文が長く、画面が煩雑になってしまいますね。
このようなケースのために、popModal を使ってアプリの説明文をうまくまとめる方法をご紹介します。

popModal とは

popModal は、5 種類のモーダルウインドウを表示できる jQuery ライブラリです。
今回はその中でも dialogModal（lightbox 系モーダル）を紹介します。

詳細は popModal のホームページ をご参考ください。

アプリの準備

ノート PC 申請アプリを例に説明します。

申請の注意点や PC 利用者の労働形態による申請条件分岐などを 3 ページに分けて表示したいです。
フォームの内容は今回の実装には直接関係しないため、自由に設定して OK です。

JavaScript / CSS の設定

アプリの JavaScript / CSS 設定画面には、次の URL を指定します。

• JavaScript URL：https://js.cybozu.com/popmodal/1.19/popModal.min.js
• CSS URL          ：https://js.cybozu.com/popmodal/1.23/popModal.min.css
• jQuery URL      ：https://js.cybozu.com/jquery/2.1.4/jquery.min.js

※ 2016 年 8 月の執筆時点で、JavaScript と CSS の両方とも version1.23 を指定した場合にプログラムが動かないことを確認したため、動作確認が取れたバージョンの組み合わせを記載しています。
※ Cybozu CDN の最新の情報は Cybozu CDN をご確認ください。

dialogModal の使い方

• ダイアログのタイトル、本文とフッターの表示スペースを用意するには、それぞれ class="dialogModal_header" 、class="dialogModal_content" 、class="dialogModal_footer の div 要素を作成します。
  
• 今回は 3 ページに分けて表示したいので、上記の表示スペースを 3 つ作ります。
• popModal の ホームページ を開き、「dialogModal」タブをクリックします。
  Examples の default params のサンプルコードを参考にし、ダイアログを表示する関数を作成します。

ソースコード

動作確認