【kintone】＊ポータルカスタマイズ＊季節の情報を追加してお洒落してみる。

JavaScript
2021.01.03

kintoneのポータル画面をカスタマイズして、社内のkintone利用頻度の向上を検討しています。
そのための案として実装したものです。

仮に参考にされる方がいた場合に、ソースコードに誤りがありましたらごめんなさい。モチロン責任も持てませんので悪しからず。
プログラムに関する指摘や質問などは頂けると嬉しいのでくださると感激です。

ポータル画面はカスタマイズしないと結構味っけないです。
とは言え、初っ端から難しいのもちょっと…なので、ポータル画面のトップ「kintone」のロゴの右側に雑学的な情報を表示してお洒落してみようと思います。

業務と関係のないことがいいよね。でも生活には関わっているもので普段あまり気にしていないものがいいよね。
鬼滅の刃が流行っているし、大雑把な月の満ち欠けとかも見れると、「あ、そうなんだ〜」って気に留める何かになるかな。

表示させる内容について
  1. 二十四節気（立春とかです。いわゆる1年を24個に分割した季節の情報）
  2. 上弦、下弦、新月、満月の情報
  3. その他のイベントの情報（元旦とか八十八夜）
実装にあたり気をつけたこと
  1. 出来るだけシンプルなものを作る。（おいおい発展させていくかもしれませんが最初はできるだけシンプルなものを作る）
  2. 1日に実行できるAPIリクエスト数(1アプリにつき10,000件)にカウントされない方法を検討する。
  3. 表示させる内容についてはメンテナンスしやすいようにしたい。（少なくとも毎回プログラムを更新するようなことはしたくない。）
表示させる内容について

APIリクエスト数の上限を気にしなくて良いように、表示させる内容は、スペースのお知らせから取得することにしました。
※スペース情報の取得APIは、2021/1/2時点では、リクエスト数にカウントされません。詳しくは公式のヘルプページを参照してください。

そのため、新しいスペースを作成します。（お知らせ部分を利用するためアプリは作成しません。）
スペース名はなんでもOKです。ピープルについては、今回のカスタマイズで追加する文字列を表示させたいメンバーを投入しておきます。
お知らせ部分は、kintoneシステム管理者またはcybouzu.com共通管理者出ないと編集できないので、メンバーに編集されてしまう恐れはない想定です。

具体的に以下のようなものを用意しました。
わた氏は、「メッセージ」というスペースを用意しました。会社ではなく個人の環境で作成したため、ピープルは、わた氏（nononosuque）のみです。
今回のカスタマイズの肝になるのは「お知らせ」の内容になります。
この内容をポータル画面を表示した年月日に合わせて、部分的に切り取り表示させようと思います。

例えばポータルを表示した日が1月1日〜1月4日までの場合は、
「【元旦】HAPPY　NEW　YEAR！！-br-２０２１年もよろしくお願いします！！」が表示されます。
1月5日〜1月20日までの場合は、
「【小寒】寒さが一段と厳しくなりましたね！-br-外にお出かけの際は、防寒に気をつけて！６日は下弦、１３日は新月です。」が表示されます。

表示させる内容の書き方（ルールについて）

スペースの「お知らせ」の内容をJavaScriptで取得するにあたり、書き方のルールを予め決めました。
1行目の内容を例にとって説明します。
2021/01/01【元旦】HAPPY　NEW　YEAR！！-br-２０２１年もよろしくお願いします！！*

①　表示させる初めの年月日(数字は半角で「/」で区切る) ：2021/01/01
　　⇨本文を表示する開始年月日を設定します。
②　本文：【元旦】HAPPY　NEW　YEAR！！-br-２０２１年もよろしくお願いします！！*
　　⇨「kintone」のロゴ右に表示させたい文字列を設定します。
　　　　-br-：JavaScriptの中で<br>=改行に置き換えます。
　　　　*：行の境目。JavaScriptの中で本文の終了文字として判断するために使用しています。
　　　　　そのため、ロゴ横には表示させない文字となります。

JavaScriptのソースコードについて

「kintone_portal_customize.js」
描き方に不味い部分や改善した方が良い点あればご指摘ください。
ポータル画面を表示する際に発火させる必要があるので、「portal.show」を使用しています。
また、今回「kintone」のロゴ右に表示させるためにロゴの要素の親要素である「.gaia-header-header-logo」の要素を取得しています。
※親要素のクラス名は、2021/1/2時点で確認したものです。詳細はデベロッパーツールにて確認ください。
　テストがしやすいように日付の比較を数値化して行っています。

(function(){
  'use strict';

  /**
   * kintoneポータル画面表示時に発火するイベント
   */
  kintone.events.on('portal.show', function(event){

    // kintoneポータル画面の「kintone」と記載されている部分を取得する
    const KINTONE_TITLE_ELEMENT = document.querySelectorAll('.gaia-header-header-logo')[0];

    let seasonsInfo;
    let seasonMessage = '';

    // ポータル画面を開くときの年月日を取得して比較のために数値化
    const TODAY = new Date();
    const YEAR = TODAY.getFullYear();
    const MONTH = ('00' + (TODAY.getMonth() + 1)).slice(-2);
    const DAY = ('00' + TODAY.getDate()).slice(-2);
    const TODAY_NUM = Number(YEAR + MONTH + DAY);

    // スペースの「お知らせ」に設定されている情報を取得する
    // 引数には、作成したスペースのIDを設定してください。（以下の11が該当）
    return getSeasonInfo(11)
    .then((res) => {
      if(res === null){
        // 取得時にエラーが発生
      }else{
        // 自動で設定されてしまうdiv要素などを取り除いて、「*」で配列化する
        seasonsInfo = 
        res.replace(/<\/div>/g,'')
        .replace(/<\/span>/g,'')
        .replace(/<\/font>/g,'')
        .replace(/<div>/g,'')
        .replace(/<div([\w =\"-:;])*>/g,'')
        .replace(/<span([\w =\"-:;])*>/g,'')
        .replace(/<br([\w =\"-:;])*>/g,'')
        .replace(/<font([\w =\"-:;])*>/g,'')
        .replace(/<br>/g,'')
        .split('*');
      }
    })
    .then(() => {
      // 配列化した「お知らせ」本文を１行ごとにループ処理する
      seasonsInfo.forEach((val) => {
        // 本文から年月日を取得
        const MESSAGE_DATE = val.slice(0,10);
        const MESSAGE_DATE_NUM = Number(MESSAGE_DATE.replace(/\//g,''));

        // 今日が本文から取得した年月日と同じか以降の場合は、本文から年月日を除く表示する内容を取得する。
        if(TODAY_NUM >= MESSAGE_DATE_NUM){
          seasonMessage = val.slice(10);
        }
    });
  })
  .then(() => {
    
    // 該当する年月日がなかった場合は、固定文言を表示する。
    if(seasonMessage === ''){
        seasonMessage = 'おはようございます！こんにちわ！-br-本日も１日よろしくお願いします！！';
    }

    // 表示するための要素を作成して、取得した表示内容を設定
    const DIV = document.createElement('div');
    DIV.insertAdjacentHTML(
      'afterbegin'
      ,seasonMessage.replace(/-br-/g,'<br>')
    );
    DIV.classList.add('div-season-message');

    // 「kintone」ロゴの右側に作成した要素を追加する
    KINTONE_TITLE_ELEMENT.appendChild(DIV);
  });
});

/**
 * スペースの本文に設定した季節などの情報を取得する
 * @param {*} spaceId 
 */
const getSeasonInfo = function(spaceId){
  return new kintone.Promise(function(resolve,reject){

    const PARAM = {
      id:spaceId
    };

    // スペースの情報を取得します
    kintone.api(kintone.api.url('/k/v1/space',true),'GET',PARAM,function(res){
      resolve(res['body']);
    },function(error){
      reject(null);
    });
  });
};

})();
CSSのソースコードについて

「kintone_portal_customize.css」

/* ポータルカスタマイズ
「kintone」ロゴ右に季節情報などを表示する要素 */
.div-season-message{
    display: inline-block;  /*横並びにするために指定*/
    color: black;
    background: -webkit-linear-gradient(0deg, black, #FF8C00, #FF0080); /*一色だと味気ないのでカラフルに*/
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: bold;
    margin-left: 20px;
    margin-top: -15px;
    vertical-align: middle;
    max-width: 600px;   /*あまり長い文の場合で横幅指定がない場合、レイアウトが大きく崩れてしまうため*/
}
カスタマイズの設定について

JavaScriptとCSSを「kintoneシステム管理」>「JavaScript / CSSでカスタマイズ」の中でそれぞれアップロードして追加して「保存」ボタンを押下します。PC用のCSSファイルにURL指定で追加されているCDNのfontawesomeはとりあえず使っていないのでなくてもOKのはすです。文字だけだと味気ないかと思い後々使ってみようと考えていたために設定されています。（SVGでもいいかと思ってます。）

実際に実装してみた

下図の通り「kintone」のロゴ横にスペースの「お知らせ」欄に設定した情報が表示されています。
アニメーションとか設定すれば強調されるんでしょうが、とりあえずグラデーションだけかけています。
個人的には、これだけでもお洒落かなと思っています…が、妻いわく、わた氏は全くセンスが無いそうなので信用すると危険です。

記事作成時（2021年1月2日）時点では、上図の内容が表示されています。
1月5日になると次の行の内容に切り替わります。
（【小寒】寒さが一段と厳しくなりましたね！外にお出かけの際は、防寒に気をつけて！６日は下弦、１３日は新月です。）

表示する内容は、スペースの「お知らせ欄」を更新することで、プログラムを弄らずとも変更・更新が可能です。
尚、過去分はどんどん消していく運用でいいかなあと思っています。
想定通り、APIのカウントもされていない事を確認済みです。

所感

悪くない！メンテも描き方のルールはあるけどそんなに難しくない。
新月に満月に上弦とか下弦とか！鬼滅見ていた人は、ハッとそうなんだ！と思う情報が表示される。
そして、kintoneのポータルを見ることで今の季節って二十四節気だと、そうなんだなあって考えられるのも素敵なのでは？

比較的簡単にkintoneのポータル画面をカスタマイズ出来たのではと思っています。
会社の方でも反映させて、皆の反応を楽しんでみよう…。反応ない可能性も微レ存ですけど。
反応も見て、もうちょっとカスタマイズしていきたい所存。

お粗末様でした。ここまで見てくださった方がいればありがとうございました。
nononosuque.

参考サイト様
  1. kintoneヘルプ
  2. スペース情報の取得（cybozu developer network）
  3. JavaScript正規表現について
  4. CSSグラデーション
おまけ

スペースの「お知らせ」に設定している内容です。

2021/01/01【元旦】HAPPY　NEW　YEAR！！-br-２０２１年もよろしくお願いします！！*
2021/01/05【小寒】寒さが一段と厳しくなりましたね！-br-外にお出かけの際は、防寒に気をつけて！６日は下弦、１３日は新月です。*
2021/01/20【大寒】暦上では1年で最も寒い日だそうです！-br-暖かい飲み物でホッとしましょう。２１日は上弦。２９日は満月です。*
2021/02/03【立春】暦上では春だそうです！春の気配感じますか？-br-2日は節分でしたね。豆まきしましたか？５日は下弦。１２日は新月です。*
2021/02/18【雨水】氷も溶けて水となる時季ですね！まだまだ寒い。-br-２０日は上弦。２７日は満月です。*
2021/03/05【啓蟄】’’けいちつ’’と読むそうです。-br-冬籠していた虫たちが起き出す時季だそうです。！６日は下弦。１３日は新月です。*2021/03/20【春分】寒さも峠を越して温和な気候になってきましたか？-br-２１日は上弦。２９日は満月です。春分の日を挟んだ前後７日間を「春の彼岸」と言うそうです。*
2021/04/04【清明】新しい年度の始まりですね。！桜見とか行きましたか？-br-４日は下弦。１２日は新月です。*
2021/04/20【穀雨】農家さんにとっては種蒔きの時季ですね！-br-5月1日は八十八夜です！２０日は上弦。２７日は満月です。*
2021/05/05【立夏】暦上ではもう夏だそうです。夏の気配感じましたか？-br-１２日は新月です。２０日は上弦です。*
2021/05/21【小満】農家さんにとっては田に苗を植える準備をする時季ですね！-br-２６日は満月、翌月の２日は下弦です。*
2021/06/05【芒種】’’ぼうしゅ’’と読むそうです。麦を収穫して田植えを始める時季だそうです。-br-１０日は新月で金環日食です。１８日は上弦です。*
2021/06/11【夏至】この日を境に次第に日脚が短くなっていくそうです。梅雨ですね。-br-２５日は満月、翌月の２日は下弦です。

更新履歴

2021/1/4 JavaScript内で「お知らせ」の本文を取得した後にHTML要素をリプレイス関数で値無しに置き換えている部分を修正。
リプレイス対象に以下を追加
　.replace(/<\/span>/g,”)
　.replace(/<span([\w =\”-:;])*>/g,”)
　.replace(/<br([\w =\”-:;])*>/g,”)
以下のリプレイスを修正
　修正前）.replace(/<div([\w =\”-:])*>/g,”)
　修正後）.replace(/<div([\w =\”-:;])*>/g,”)

2021/1/4 JavaScript内で「お知らせ」の本文を取得した後にHTML要素をリプレイス関数で値無しに置き換えている部分を修正。
リプレイス対象に以下を追加
　.replace(/<\/font>/g,”)
　.replace(/<font([\w =\”-:;])*>/g,”)　　

コメント

タイトルとURLをコピーしました