新規投稿
フォローする

スレッドのコメントを自分のピープルにメモ

皆さん、ピープル機能を活用していますか? 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';
new MutationObserver(() => {
  const commentElements = document.getElementsByClassName('ocean-ui-comments-commentbase');
  if(!commentElements.length) return;
  [].forEach.call(commentElements, commentElement => {
    const actionButtons = commentElement.getElementsByClassName('ocean-ui-comments-commentbase-actions')[0];
    if(actionButtons.getElementsByClassName('people-share').length) return;
    const shareButton = document.createElement('a');
    const shareButtonWrapper = 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 => {
  let pasted = false;
  const event = document.createEvent("HTMLEvents");
  event.initEvent('focus', true, true );
  new MutationObserver(() => {
    const editor = document.getElementsByClassName('ocean-ui-editor-field')[0];
    if(!editor || pasted) return;
    const quoteFrame = `<div>${Array.from(Array(50)).reduce((text)=>text+'&gt;', '')}</div>`;
    const quoteLink = `<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 => {
  const peopleUrl = 'https://****.cybozu.com/k/#/people/user/' + request.user; //「****」はkintoneのサブドメイン
  chrome.tabs.create({
    url: peopleUrl,
  }, tab => {
    new Promise(resolve => {
      let timer = 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);
    });
  });
});
0

0件のコメント

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