カテゴリー内の他の記事

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の下にサンプルソースコードがあります。サンプルソースコードを参考にしながらダイアログを表示する関数を作成します。

ソースコード

動作確認

 

 

記事に関するフィードバック

記事のコメント欄は記事に対するフィードバックをする場となっております。
右の記事フィードバックのためのガイドを参照してコメントしてください。
記事のリンク切れなど、気になる点がある場合も、こちらのフォームからフィードバックいただけますと幸いです。

Avatar
Misaki

初歩的な質問ですみません。

動作確認画面にある、「ノートPC申請の注意事項」ボタンは、どうやって配置するのでしょうか?

よろしくお願いいたします。

Avatar
大島 知之

2022/9/2時点のご報告です。

本ページの 「JavaScript/CSSの設定」-「JSEdit for kintoneお使いの場合」から
jQueryおよびpopModalのライブラリを選択し、掲載のソースコードを
そのままコピー&ペーストで実装しましたが、ダイアログが正しく表示されませんでした。
次の画面キャプチャのように、画面の最下部に付け足されるようにダイアログの内容が表示されます。


JSEdit for kintoneのプラグイン設定画面のライブラリからjQueryおよびpopModalを外し、
本ページの「JSファイルをアップロードする場合」を参考に
JavaScript URL、CSS URL、jQuery URLを直接指定すると
本ページの「動作確認」と同じ正常な表示・動作になりました。


恐らく、JSEdit for kintoneのライブラリで自動的に選択されるpopModalのバージョンの
JavascriptとCSSの組み合わせでは正常に動作しないのではないかと思われます。

Avatar
cybozu Development team

大島 知之 様

お世話になっております。cybozu developer network 運営局です。

フィードバックをありがとうございます。内容を確認させていただきます。

サインインしてコメントを残してください。