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);
  });
});

動作確認

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