皆さん、ピープル機能を活用していますか？ kintone上で他人にメッセージを送ったり、自分用のメモを書いたりできて便利ですよね。 今回は、スレッド上にピープルへのメモボタンを設置するサンプルを紹介します。
※chrome拡張を利用しているので、chromeユーザーしか利用できません。
サンプル
スレッド上にピープルへのメモボタンを設置します。 ボタンをクリックすると、新しいタブで自分のピープルを開いて、コメントの内容と引用元が入力された状態にします。
※投稿された直後のコメントにはメモボタンを設置しません。 ボタンを表示したい場合は、ページを読み込みなおしてください。
コード
chrome拡張を利用します。 読み込み方法は下記などを参考にしてください。 https://qiita.com/querykuma/items/b41cd108e5df25ebbfda#chrome-で動かす
〇ファイル構成
下記を全て同じ階層に置きます。
・manifest.json
・content-thread.css
・content-thread.js
・content-people.js
・event.js
・manifest.json
{"name":"kintone people share","version":"1.0.0","manifest\_version":2,"description":"Share thread posts to people.","background": {"scripts": ["event.js"],"persistent":false},"content\_scripts": [{"matches": ["https://\*.cybozu.com/k\*"],"include\_globs": ["\*#/space/\*/thread/\*"],"js": ["content-thread.js"],"css": ["content-thread.css"]
}, {"matches": ["https://\*.cybozu.com/k\*"],"include\_globs": ["\*#/people/user/\*"],"js": ["content-people.js"]
}],"permissions": ["https://\*.cybozu.com/k\*","tabs"]
}
・content-thread.css
.people-share{margin-left:16px;display: inline-block;height:24px;color:#888;
}
.people-share:hover{color:#6f6f6f;
}
・content-thread.js
location.href='javascript: document.body.dataset.userCode = kintone.getLoginUser().code, null';newMutationObserver(()=\>{constcommentElements=document.getElementsByClassName('ocean-ui-comments-commentbase');if(!commentElements.length)return;[].forEach.call(commentElements,commentElement=\>{constactionButtons=commentElement.getElementsByClassName('ocean-ui-comments-commentbase-actions')[0];if(actionButtons.getElementsByClassName('people-share').length)return;constshareButton=document.createElement('a');constshareButtonWrapper=document.createElement('li');shareButton.innerHTML='メモ';shareButton.classList.add('people-share');shareButton.addEventListener('click',()=\>{chrome.runtime.sendMessage({user:document.body.dataset.userCode,originUrl:commentElement.getElementsByClassName('ocean-ui-comments-commentbase-time')[0].getElementsByTagName('a')[0].getAttribute('href'),space:document.getElementsByTagName('h2')[0].innerText,thread:document.getElementsByClassName('ocean-space-thread-name')[0].innerText,content:commentElement.getElementsByClassName('ocean-ui-comments-commentbase-text')[0].innerHTML});});shareButtonWrapper.appendChild(shareButton);actionButtons.appendChild(shareButtonWrapper);});}).observe(document.body,{childList:true,subtree:true});
・content-people.js
chrome.runtime.onMessage.addListener(request=\>{letpasted=false;constevent=document.createEvent("HTMLEvents");event.initEvent('focus',true,true);newMutationObserver(()=\>{consteditor=document.getElementsByClassName('ocean-ui-editor-field')[0];if(!editor||pasted)return;constquoteFrame=`\<div\>${Array.from(Array(50)).reduce((text)=\>text+'>', '')}\</div\>`;constquoteLink=`\<div\>引用元: \<a href="${request.originUrl}"\>${request.space} - ${request.thread}\</a\>\</div\>`;editor.innerHTML=quoteFrame+request.content+quoteLink+quoteFrame;pasted=true;}).observe(document.getElementsByClassName('ocean-ui-comments-commentform-form')[0],{childList:true,subtree:true});document.getElementsByClassName('ocean-ui-comments-commentform-textarea')[0].dispatchEvent(event);});
・event.js
chrome.runtime.onMessage.addListener(request=\>{constpeopleUrl='https://\*\*\*\*.cybozu.com/k/#/people/user/'+request.user;//「\*\*\*\*」はkintoneのサブドメインchrome.tabs.create({url:peopleUrl,},tab=\>{newPromise(resolve=\>{lettimer=setInterval(()=\>{chrome.tabs.get(tab.id,tab=\>{if(chrome.runtime.lastError){console.log(chrome.runtime.lastError.message);clearInterval(timer);return;}if(tab.status==='complete'&&(tab.url===peopleUrl||tab.pendingUrl===peopleUrl)){clearInterval(timer);resolve();}});},1000);}).then(()=\>{chrome.tabs.sendMessage(tab.id,request);});});});