cybozu developer network

カテゴリー内の他の記事

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

ソースコード

動作確認

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

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

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 運営局です。

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

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