Tips

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

目次

はじめに

固定リンクがコピーされました

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

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

popModalとは

固定リンクがコピーされました

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

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

アプリの準備

固定リンクがコピーされました

ノート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の使い方

固定リンクがコピーされました

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

    • class="dialogModal_header"

    • class="dialogModal_content"

    • class="dialogModal_footer

      1
2
3
4
5

      <div id="dialog_content_1" class="dialog_content" >
　<div class="dialogModal_header">タイトル</div>
　<div class="dialogModal_content">内容</div>
　<div class="dialogModal_footer">フッター</div>
</div>

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

  • popModalの ホームページ (External link) を開き、「dialogModal」タブをクリックします。
    Examplesのdefault paramsのサンプルコードを参考にし、ダイアログを表示する関数を作成します。

     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

    const showDialog = function() {
  $('.dialog_content').dialogModal({
    topOffset: 0,
    top: '10%',
    type: '',
    onOkBut: function() {},
    onCancelBut: function() {},
    onLoad: function(el, current) {},
    onClose: function() {},
    onChange: function(el, current) {}
  });
};

ソースコード

固定リンクがコピーされました

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124

/*
 * Gantt chart display of sample program
 * Copyright (c) 2016 Cybozu
 *
 * Licensed under the MIT License
*/
jQuery(($) => {
  'use strict';
  const showDialogEvent = [
    'app.record.detail.show',
    'app.record.edit.show',
    'app.record.create.show'
  ];
  kintone.events.on(showDialogEvent, (e) => {
    // 詳細画面のメニュー部分の空白要素を取得
    const myHeaderSpace = kintone.app.record.getHeaderMenuSpaceElement();
    myHeaderSpace.innerHTML = '';
    // ダイアログを表示する関数を作成
    const showDialog = function() {
      $('.dialog_content').dialogModal({
        topOffset: 0,
        top: '10%',
        type: '',
        onOkBut: function() {},
        onCancelBut: function() {},
        onLoad: function(el, current) {},
        onClose: function() {},
        onChange: function(el, current) {}
      });
    };
    // ダイアログと表示内容を用意
    const createDialogContent = function() {
      const dialog_1 =
                 $('<div id="dialog_content_1" class="dialog_content" style="display:none;">' +
                     '<div class="dialogModal_header">社員用ノートPCの申請</div>' +
                     '<div class="dialogModal_content">' +
                    'ノートPCの交換・追加が必要な方はこのアプリで申請してください。</br>' +
                     '標準機種をご要望の場合、' +
                     '標準機種一覧から選んでください。</br>' +
                      '標準機種情報の詳細は次の通りです。</br>' +
                       '<table border="1px">' +
                       '<tr><td>タイプ</td><td>Panasonic（レッツノート）</td><td>Fujitsu（ライフブック）</td></tr>' +
                       '<tr><td>サイズ</td><td> 12.1 inch</td><td> 12.5 inch</td></tr>' +
                       '<tr><td>OS</td><td>Windows 10 Pro</td><td>Windows 10 Pro</td></tr>' +
                       '<tr><td>メモリ</td><td>8 GiB</td><td>8 GiB</td></tr>' +
                       '<tr><td>ストレージ</td><td>256 GB SSD</td><td>256 GB SSD</td></tr>' +
                       '<tr><td>CPU</td><td> Core i5 6200U 2コア</td><td> Core i5 6200U 2コア</td></tr></table></br>' +
                     '標準機以外を申請した場合、ご希望の機種やスペックなどを詳しく書いたうえ、次の注意点をご確認ください。</br>' +
                     '<ul><li>故障した場合、代替機が素早きに手配できません。</li>' +
                     '<li>標準機では検証されているソフトウェアが動かないかもしれません。</li></ul>' +
                     'また、２台以上または標準機能以外をご希望の場合、上長の承認が必要となります。</br></br>' +
                     'パートナーや契約社員の場合、ノートPCを最大１台のみ申請できます。</br>' +
                     '尚、社内でのご利用のみ、社外へ持ち出しを禁止しております。</br></br>' +
                     '社外の方に貸し出す場合、次のページをご確認ください。</br>' +
                     'ノートPC利用際の注意事項についてページ3をご確認ください。' +
                     '</div>' +
                     '<div class="dialogModal_footer">' +
                         '<button class="btn btn-primary" data-dialogmodal-but="next" type="button">Next</button>' +
                         '<button class="btn btn-default" data-dialogmodal-but="cancel" type="button">Cancel</button>' +
                     '</div>' +
                     '</div>');

      const dialog_2 =
                 $('<div id="dialog_content_2" class="dialog_content" style="display:none;">' +
                     '<div class="dialogModal_header">社外の方に貸し出す場合</div>' +
                     '<div class="dialogModal_content">' +
                     'イベントの参加者に対して、' +
                     'ノートパソコンを貸し出す場合、</br>' +
                     'このアプリでの申請が必要となります。' +
                     '申請時に必要な条件は以下です。' +
                     '<ul><li>同意書を取り交わしていること</li>' +
                     '<li>運用ルールを遵守できること</li></ul>' +
                      'ノートPCを申請した方が責任を持ってPCの管理をしてください。</br>' +
                      '社外の方が指定の場所のみ使えていただけます。</br>' +
                     'お使い後になるべく早く返還してください。</br>' +
                     'また、必要な機能のみ使えるように制限します。</br>' +
                     '</div>' +
                     '<div class="dialogModal_footer">' +
                         '<button class="btn btn-default btn-left" data-dialogmodal-but="prev" type="button">' +
                         'Back</button>' +
                         '<button class="btn btn-primary" data-dialogmodal-but="next" type="button">Next</button>' +
                         '<button class="btn btn-default" data-dialogmodal-but="cancel" type="button">Cancel</button>' +
                    '</div>' +
                 '</div>');

      const dialog_3 =
                 $('<div id="dialog_content_3" class="dialog_content" style="display:none;">' +
                     '<div class="dialogModal_header">社外に持ち出す場合の注意事項</div>' +
                     '<div class="dialogModal_content">' +
                     '持ち出しの設定を行ったPCだけ持ち出すことができます。</br>' +
                     '社外に持ち出す前に、上記の設定を行ってから、情報システム部にチェックを回してください。</br>' +
                      '故障以外での交換や追加購入が発生しないよう、慎重に選定して下さい。</br>' +
                      '二度手間を避けるため、受け取る際に足りない部品がないか確認して下さい。</br>' +
                      'PCを他の人に渡すのは禁止です。</br>' +
                       'PCの購買は情報システム部のみ行えます。</br>' +
                       '二度手間を避けるため、受け取る際に足りない部品がないか確認して下さい。</br>' +
                     '</div>' +
                     '<div class="dialogModal_footer">' +
                         '<button class="btn btn-default btn-left" data-dialogmodal-but="prev" type="button">' +
                         'Back</button>' +
                         '<button class="btn btn-primary" data-dialogmodal-but="ok" type="button">Ok</button>' +
                         '<button class="btn btn-default" data-dialogmodal-but="cancel" type="button">Cancel</button>' +
                     '</div>' +
                 '</div>');

      $(myHeaderSpace).append(dialog_1).append(dialog_2).append(dialog_3);
    };

    createDialogContent();
    // popModalのボタンと説明をフォームにあわせて揃える
    $(myHeaderSpace).css({'padding-left': '20px'});
    $(myHeaderSpace).append(
      'ノートPC利用者によって申請ルールが異なってくるため、</br>登録前に必ず<b>ノートPC申請の注意事項</b>をご確認ください！</br>');
    const myPMBtn = $('<button>', {id: 'my_PM_button', text: 'ノートPC申請の注意事項', indent: '10'});
    // マウスをボタンに当てるときのボタン色を指定
    myPMBtn.hover(function() {
      $(this).css({color: '#ececec', background: '#3498db'});
    }, function() {
      $(this).css({color: '', background: ''});
    });
    myPMBtn.on('click', showDialog);
    $(myHeaderSpace).append(myPMBtn);
  });
});

動作確認

固定リンクがコピーされました