CONTACT

お問い合わせ

各種お問い合わせは
こちらからどうぞ。

RECRUIT

採用情報

新卒採用・キャリア採用の
情報を掲載中です。

kintoneのコメントウィンドウ表示非表示制御

初めまして! 入社2年目のヒラ社員と申します! 有益な情報を共有していけたらと思っております、よろしくお願いします!

今回は私が実務の中で苦戦した kintoneのコメント機能をJSで最初から閉じた状態にする方法について お話しできればと思っています!

コメント機能とは?

そもそもコメント機能とはなにか...と思われる方のために説明します。

コメント機能とは、各レコードのデータでコミュニケーションを取ることができる機能 のことです。
メンション機能等もついており、通知を飛ばすこともできます!

通常はレコード詳細画面が開かれた際にコメントウィンドウが開いた状態で
表示されるような仕様になっています。

↓以下の部分がコメント機能に該当します。

ナレジズ記事の参考画像

コメントウィンドウのせいで見づらい…?

コメント機能は大変便利な機能ですが、コメントウィンドウが開いている状態だと、
上記の画像のように全体のフィールドが見えない場合があります。

↓以下は先ほどのコメントウィンドウを閉じた際の画像です。

ナレジズ記事の参考画像

URLに注目!

実は、レコード詳細画面表示時、レコード詳細画面コメントウィンドウ閉鎖時、
レコード詳細画面コメントウィンドウ再表示時ですべてURLが異なっているんです!

↓レコード詳細画面表示時

ナレジズ記事の参考画像

↓レコード詳細画面コメントウィンドウ閉鎖時

ナレジズ記事の参考画像

↓レコード詳細画面コメントウィンドウ再表示時

ナレジズ記事の参考画像

実装方法

↓ひとまずJSの全体をお見せし、以下1行ずつ解説していきます!

(function($) {
  'use strict';

  kintone.events.on('app.record.detail.show', function(event) {
    var hashParam = location.hash.substr(1).split('&');
    var paramList = {};

    hashParam.forEach( (value, index) => {
      var paramSplit = value.split('=');
      paramList[paramSplit[0]] = paramSplit[1];
    });

    if (paramList.tab == 'comments') {
      paramList.tab = 'none';
      location.hash = $.param(paramList);
    } else {
      paramList.tab = 'none';
      location.hash = $.param(paramList);
    }

  });
})(jQuery);

まずはこちら!

kintone.events.on('app.record.detail.show', function(event) {
  var hashParam = location.hash.substr(1).split('&');
  var paramList = {};

コメント機能はレコード詳細画面で使用するため、
レコード詳細画面表示時を表すイベントである
app.record.detail.showが入ります。

var hashParam = location.hash.substr(1).split(‘&’);
URLのハッシュ部分を取得し、先頭の#を除いて&で分割します。
するとhashParamは以下の要素を含む配列になります。

ナレジズ記事の参考画像

//hashParamの中身
[‘record=1’, ‘l.view=20’, ‘l.q’, ‘l.next=0’, ‘l.prev=0’]

var paramList = {};hashParamを格納する配列を初期化します。

続いてこちら!

  hashParam.forEach( (value, index) => {
    var paramSplit = value.split('=');
    paramList[paramSplit[0]] = paramSplit[1];
  });

hashParam.forEach( (value, index)
各ハッシュパラメータを処理するループ処理を書きます。
var paramSplit = value.split(‘=’);
hashParamをキーと値に分割します。
paramList[paramSplit[0]] = paramSplit[1];
分割したキーと値をparamListオブジェクトに格納します。

続いてこちら!

    if (paramList.tab == 'comments') { // ハッシュパラメータの'tab'が'comments'の場合
      paramList.tab = 'none'; // 'tab'パラメータを'none'に変更する
      location.hash = $.param(paramList); //
    }

if (paramList.tab == ‘comments’)
ハッシュパラメータの‘tab’‘comments’の場合の処理を書きます。
paramList.tab = ‘none’;
tabパラメータをnoneに変更する処理を加えます。
location.hash = $.param(paramList);
paramListを文字列に変換し、URLのハッシュを更新します。
これでコメントウィンドウ閉鎖状態の画面になります。

最後にこちら!

    else {
      paramList.tab = 'none';
      location.hash = $.param(paramList);
    }

  });
})(jQuery);

else { ‘tab’‘comments’以外の場合の処理を書きます。
paramList.tab = ‘none’;
tabパラメータをnoneに変更する処理を加えます。
location.hash = $.param(paramList);
paramListを文字列に変換し、URLのハッシュを更新します。
これでコメントウィンドウ閉鎖状態の画面になります。

確認しよう!

JSを該当のアプリに読み込ませ、レコード詳細画面を開いてみると…

ナレジズ記事の参考画像

レコード詳細画面表示時のURLがtab=noneとなっており、
コメントウィンドウが閉じた状態になっています!

フィールドを一目で見ることができ、コメントウィンドウをいちいち閉じる必要が無くなりました!

コメント

この記事へのコメントはありません。

PAGE TOP