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

フォローする

はじめに

kintoneアプリ開発者にとって、アプリの運用ルールをどこで管理するかはひとつの悩みです。ユーザーが気づきやすいところに書いておかないと、新しいメンバーが失敗をしてしまうことがありそうです。
たとえば申請系のアプリの場合、「一般設定」の「アプリの説明」に申請ルールを書いておくのは良い方法です。
しかし、申請ルールの情報量が多い場合はどうでしょう?説明文が長く、画面が煩雑になってしまいますね。
 
このようなケースのために、popModalを使ってアプリの説明文をうまくまとめる方法をご紹介します。

popModalとは

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

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

アプリの準備

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

 

JavaScript/CSSの設定

JSEdit for kintoneお使いの場合

プラグイン設定画面を開いて、「ライブラリ」からjQueryとpopModalを選択して保存します。

JSファイルをアップロードする場合

アプリの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の最新の情報はこちら

 

dialogModalの使い方

  • ダイアログのタイトル、本文とフッターの表示スペースを用意するには、それぞれclass="dialogModal_header"、class="dialogModal_content"、class="dialogModal_footerのdiv要素を作成します。

  • 今回は3ページに分けて表示したいので、上記の表示スペースを3つ作ります。 

  • popModalのホームページを開いて「dialogModal」タブをクリックして、DEFAULT PARAMSの下にサンプルソースコードがあります。サンプルソースコードを参考にしながらダイアログを表示する関数を作成します。

ソースコード

動作確認

 

 

コメント

ログインしてコメントを残してください。
Powered by Zendesk