kintoneSIGNPOSTアプリにパターン番号ランダム表示機能を追加したい

はじめに

• ｲｼｲｹﾝﾀﾛｳです。ハケをつくっている会社の兼業情シスでkintoneを触る係をしてます
• kintone認定資格は3つとも取得済です
• その他にITストラテジストやシステム監査技術者などの国家資格をいくつか取得しています
• kintoneのカスタマイズは社内向けのみで、プラグインは作ってません（作れません）
  
  

やりたいこと

kintoneSIGNPOSTでパターン番号を見てパターン名を当てるゲームのために、パターン番号をランダム表示し、その後答え合わせができるようにしたい

元アプリ

• キンコミに投稿したこちらを元にします

仕様

• 一覧画面と詳細画面にランダムにパターン番号をアラート表示するボタンを追加します
• アラートを閉じたときに、表示されたパターンの詳細画面を開きます

事前準備

• 「PC用のJavaScriptファイル」と「スマートフォン用のJavaScriptファイル」それぞれに以下を「URL指定で追加」してください（バージョンは必要に応じ適宜調整してください）
• パターン番号を表示するために kintone rest api client を使います（https://js.cybozu.com/kintone-rest-api-client/2.0.26/KintoneRestAPIClient.min.js）
• ボタンを配置するために kintone ui component v1 を使います（https://unpkg.com/kintone-ui-component/umd/kuc.min.js）
• アラート表示は SweetAlert を使います（https://js.cybozu.com/sweetalert/v2.1.2/sweetalert.min.js）
• 次のJSファイルをそれぞれに「アップロードして追加」してください

JavaScript記述

pc.js

/*
  ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ 
  ■                     kintoneSIGNPOST PC版
  ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ 
*/
(() => {
  'use strict';
/*
  ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ●
  ●         定数宣言、無名即時関数スコープ変数宣言
  ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ●
*/
  const client = new KintoneRestAPIClient();
/*
  ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ●
  ●                          イベント
  ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ●
*/
/*
  ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼
    一覧画面表示時
    詳細画面表示時
  ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲
*/
  kintone.events.on(['app.record.index.show', 'app.record.detail.show'], async (event) => {
    
    // 全レコードのレコード番号を、レコード番号の昇順で取得
    const paramGet = {
      'app': kintone.app.getId(),
      'fields': ['$id'],
      'query': 'order by $id asc'
    };
    const respGet = await client.record.getAllRecordsWithCursor(paramGet);
    
    // 全レコード数も控えておく
    const totalCount = respGet.length

    // ヘッダースペースを取得する
    let headerSpaceElement;
    if(event.type === 'app.record.index.show'){
      headerSpaceElement = kintone.app.getHeaderMenuSpaceElement();
    }else{
      headerSpaceElement = kintone.app.record.getHeaderMenuSpaceElement();
    }
    
    // ランダム表示ボタンを作る
    const buttonSwalPatternNumber = new Kuc.Button({
      text: 'ランダムにパターン番号を表示する',
      type: 'submit'
    });
    
    // ボタンをスペースに配置する
    headerSpaceElement.appendChild(buttonSwalPatternNumber);

    // クリック時の動作記述
    buttonSwalPatternNumber.addEventListener('click', event => {
      // 全レコード（0からtotalCount-1まで）からランダムに1つのパターン番号を選択する
      const patternNumber = Math.floor(Math.random() * totalCount);
      // STEP番号も伏せてパターン番号のみを表示する
      swal('●-' + ('00' + patternNumber).slice(-2)).then(() => {
        // OKクリック後に該当レコード詳細画面に遷移する
        location.href = location.origin + '/k/' + kintone.app.getId() + '/show?record=' + respGet[patternNumber].$id.value;
      });
    });
    
  });
  
})();

sp.js

/*
  ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ 
  ■             kintoneSIGNPOST SmartPhone版
  ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ 
*/
(() => {
  'use strict';
/*
  ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ●
  ●         定数宣言、無名即時関数スコープ変数宣言
  ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ●
*/
  const client = new KintoneRestAPIClient();
/*
  ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ●
  ●                          イベント
  ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ●
*/
/*
  ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼
    一覧画面表示時
    詳細画面表示時
  ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲
*/
  kintone.events.on(['mobile.app.record.index.show', 'mobile.app.record.detail.show'], async (event) => {
    
    // 全レコードのレコード番号を、レコード番号の昇順で取得
    const paramGet = {
      'app': kintone.mobile.app.getId(),
      'fields': ['$id'],
      'query': 'order by $id asc'
    };
    const respGet = await client.record.getAllRecordsWithCursor(paramGet);
    
    // 全レコード数も控えておく
    const totalCount = respGet.length

    // ヘッダースペースを取得する
    const headerSpaceElement = kintone.mobile.app.getHeaderSpaceElement();
    
    // ランダム表示ボタンを作る
    const mobileButtonSwalPatternNumber = new Kuc.MobileButton({
      text: 'ランダムにパターン番号を表示する',
      type: 'submit'
    });
    
    // ボタンをスペースに配置する
    headerSpaceElement.appendChild(mobileButtonSwalPatternNumber);

    // クリック時の動作記述
    mobileButtonSwalPatternNumber.addEventListener('click', event => {
      // 全レコード（0からtotalCount-1まで）からランダムに1つのパターン番号を選択する
      const patternNumber = Math.floor(Math.random() * totalCount);
      // STEP番号も伏せてパターン番号のみを表示する
      swal('●-' + ('00' + patternNumber).slice(-2)).then(() => {
        // OKクリック後に該当レコード詳細画面に遷移する
        location.href = location.origin + '/k/m/' + kintone.mobile.app.getId() + '/show?record=' + respGet[patternNumber].$id.value;
      });
    });
    
  });
  
})();

おわりに

• IEでは動きません
• SPのJSを先に書いたのでPC側詳細画面ボタンのmargin無いです気になる方は修正してください
• そして例によって塗装用ローラーもつくってます