新規投稿
フォローする

スペースの投稿欄を無効化する方法について

スペースの投稿欄を無効化したいです。

kintone全体のカスタマイズで、以下のスクリプトを実装してみましたが、上手く動作しません。

 

(function() {
  'use strict';

  window.addEventListener('popstate', function(event) {
    console.log('popstate');
    var elements = document.getElementsByClassName('ocean-ui-comments-commentform');
    console.log(elements[0]);
    elements[0].style.display = 'none';
  }, {passive: true});

})();

 

クラス名が 'ocean-ui-comments-commentform' の div を display='none' で非表示にすれば良いかと思ったのですが、console.log(elements[0]); で undefinded が返ってきてしまいます。

どこをどのように修正すれば良いのでしょうか?

 

また、投稿欄を無効化するもっと良い方法があれば教えてください。

よろしくお願いいたします。

 

0

5件のコメント

Avatar
江田篤史

K.K様

お世話になっております.

CSSで実装するのが容易かと思います.

.gaia-argoui-space-spacelayout .ocean-ui-comments-commentform{
display: none;
}

 

1
Avatar
K.K

ご返答ありがとうございます。

CSSは考えていませんでした!

たしかに一番簡単にできますね!

 

もし権限によって投稿欄の使用可否を変えたい場合はやはりJSでの実装しかないでしょうか?

 

0
Avatar
江田篤史

K.K様

お世話になっております.

左様ですね.

当初のエラーについてですが,投稿欄などは非同期で生成されるため,elements[0]がundefindedとなってしまったのだと思います.

MutationObserverなどでDOMの変更を監視して実装することもできますが,JSとCSSを組み合わせる方が容易かと思います.
 
例えば,ゲストユーザーの場合に投稿欄を非表示にする場合は下記のようになります.
 
JS
(function() {
  "use strict";
  if(kintone.getLoginUser().isGuest) {
    document.body.classList.add('guest');
  }
})();

CSS

body.guest .gaia-argoui-space-spacelayout .ocean-ui-comments-commentform{
  display: none;
}

 

また,JSやCSSによって投稿欄を削除したり非表示にしても,知識のあるユーザーは復元してコメントを投稿できてしまうので注意が必要です.

0
Avatar
K.K

江田様

 

ご返答ありがとうございます。

教えていただいた方法で、やりたかったことを実現できました。

実装した内容は以下の通りです。

  • windowのload・hashchangeイベント発生時に、スペースのカスタマイズを実行する
    (popstateはIEで発生しないようなので、hashchangeにしました)
  • カスタマイズ対象スペースが表示中で、
    かつログインユーザがAdministratorsグループのメンバでない場合のみ
    bodyへクラス"user"を追加する

 

JS

(function() {
'use strict';

//
// load、hashchange発生時にスペースのカスタマイズを実行
// (popstateはIEで発生しないのでhashchange)
//
window.addEventListener('load', function(event) {
customizeSpace()
.then(function(resp) {
return event;
});
});

window.addEventListener('hashchange', function(event) {
customizeSpace()
.then(function(resp) {
return event;
});
});


//
// スペースのカスタマイズ
//
function customizeSpace() {

return new kintone.Promise(function(resolve, reject) {

// 初期化
document.body.classList.remove('user');


// スペースを表示中でない場合や
// 表示中のスペースがカスタマイズ対象でない場合は処理終了

const targetSpaceIds = [1, 3, 5]; // カスタマイズ対象スペースID
var regexp = /#\/space\//;
var hash = window.location.hash;

if (!regexp.test(hash)) { return resolve(); }

var spaceId = Number(hash.split('/')[2]);
if (isNaN(spaceId)) { return resolve(); }
if (!targetSpaceIds.includes(spaceId)) { return resolve(); }


// ログインユーザがAdministratorsグループのメンバでない場合は
// クラス「user」を追加する

var param = { "code" : kintone.getLoginUser().code };
kintone.api(kintone.api.url('/v1/user/groups', true), 'GET', param)
.then(function(resp) {
var groupNames = [];
resp.groups.forEach(function(group) {
groupNames.push(group.name);
});

if (!groupNames.includes('Administrators')) {
document.body.classList.add('user');
}

resolve();
})
});
}

})();

 

CSS

/* スペースのスレッド投稿欄 */
body.user .gaia-argoui-space-spacelayout .ocean-ui-comments-commentform{
  display: none;
}

/* スペースのスレッド、アプリ、ピープル、関連リンクの追加ボタン(+) */
body.user .gaia-argoui-widget-control-add{
display: none;
}

/* スペースのスレッド追加リンク */
body.user .gaia-argoui-space-toolbar-newthread{
display: none;
}

/* スペースのオプションメニュー(…) */
body.user .gaia-argoui-coveroptionmenubutton{
visibility: hidden;
}
0
Avatar
K.K

追加です。

 

> また,JSやCSSによって投稿欄を削除したり非表示にしても,知識のあるユーザーは復元してコメントを投稿できてしまうので注意が必要です.

 

非表示にしていてもデベロッパーツールでスタイルを変更すれば表示できてしまうのは分かるのですが、
要素を削除していても復元できるのでしょうか?(どのように復元するのでしょうか?)

0
サインインしてコメントを残してください。