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

18914 ワード
kintoneSIGNPOST キントーン kintone kintone テキストリンク

はじめに

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

やりたいこと

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

元アプリ

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

仕様

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

事前準備

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無いです気になる方は修正してください
  • そして例によって塗装用ローラーもつくってます