スペースの投稿欄を無効化したいです。
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 が返ってきてしまいます。
どこをどのように修正すれば良いのでしょうか？
また、投稿欄を無効化するもっと良い方法があれば教えてください。
よろしくお願いいたします。
K.K様
お世話になっております．
CSSで実装するのが容易かと思います．
.gaia-argoui-space-spacelayout .ocean-ui-comments-commentform{
display: none;
}
ご返答ありがとうございます。
CSSは考えていませんでした！
たしかに一番簡単にできますね！
もし権限によって投稿欄の使用可否を変えたい場合はやはりJSでの実装しかないでしょうか？
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によって投稿欄を削除したり非表示にしても，知識のあるユーザーは復元してコメントを投稿できてしまうので注意が必要です．
江田様
ご返答ありがとうございます。
教えていただいた方法で、やりたかったことを実現できました。
実装した内容は以下の通りです。
- 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;
}
追加です。
> また，JSやCSSによって投稿欄を削除したり非表示にしても，知識のあるユーザーは復元してコメントを投稿できてしまうので注意が必要です．
非表示にしていてもデベロッパーツールでスタイルを変更すれば表示できてしまうのは分かるのですが、
要素を削除していても復元できるのでしょうか？（どのように復元するのでしょうか？）