SharePointのリンクをTeamsとMarkdown(Backlog)に貼りたい

## 目的

* SharePointはファイルのパスとファイルのリンクなどを共有するのがすごい手間
　(なにか知らない標準機能があるのかもだけど)
* なんとかしたい
* クリップボードからうまく貼り付けられると素敵
* 貼り付けたいのはTeamsとBacklog(Markdown)


## 方法

調べたら同じようなことを考えている人はいて
基本的にはこちらの方のページのブックマークレットを使えばOK
（とても、ありがたかったです）

https://www.meganii.com/blog/2022/05/16/getting-document-path-in-share-point-by-bookmarklet/

## より自分が使いやすく
ただ、これだと、Teamsに貼ったときにおかしくなる（ファイルが複数ある場合、ファイル名が横一列になる）
なので、ちょっと修正


これでTeamsに貼るといいかんじ

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/15907/1368caf6-f4a6-bc0c-d200-a80b06a7732c.png)


```javascript
javascript: (async () => {
  const selectedItems = [...document.querySelectorAll('div.is-selected')].map(x => x.ariaLabel.split(',')[0]);
  const site = location.pathname.split('/')[2];
  const docList = location.pathname.split('/')[3];
  const id = new URLSearchParams(location.search).get('id') || new URLSearchParams(location.search).get('RootFolder');
  const path = id ? id.split('/').slice(3).join('/') : docList;
  const baseurl = `${location.origin}/sites/${site}`;
  const url = `${baseurl}/_api/web/GetFolderByServerRelativeUrl('${path}')/Files`;
  const response = await fetch(url, {
    headers: {
      'Content-Type': 'application/json',
      'Accept': 'application/json;odata=verbose'
    }
  });
  const files = await response.json();
  let text = `<${baseurl}/${path}>\n`;
  let html = `<a href="${baseurl}/${path}">${baseurl}/${path}</a><br />`;
  for (let file of files.d.results) {
    const ext = file.Name.split('.').pop();
    const docUrl = /docx?|pptx?|xlsx?/.test(ext)
      ? `${baseurl}/_layouts/15/Doc.aspx?sourcedoc={${file.UniqueId}}`
      : `${baseurl}/${path}/${file.Name}`;
    console.log(file.Name, file.LinkingUri, file.UniqueId, docUrl);
    if (selectedItems.length === 0 || selectedItems.includes(file.Name)) {
      text = text + docUrl + '\n';
      html = html + `*&nbsp;${file.Name}<a href="${docUrl}"></a><br />`;
    }
  }
  const blob = new Blob([html], { type: "text/html" });
  const richTextInput = new ClipboardItem({ "text/html": blob });
  await navigator.clipboard.write([richTextInput]);
  prompt('HTML形式としてファイルパスをコピーしました。テキスト形式の場合は以下のテキストをコピーしてください。', text);
})();
```



## よりさらに自分が使いやすく（最終版

でもBacklogにtext形式を貼り付けるとURLがうまくリンクにならない。。

というわけで、さらに修正したもの

```javascript
javascript: (async () => {
    const selectedItems = [...document.querySelectorAll('div.is-selected')].map(x => x.ariaLabel.split(',')[0]);
    const site = location.pathname.split('/')[2];
    const docList = location.pathname.split('/')[3];
    const id = new URLSearchParams(location.search).get('id') || new URLSearchParams(location.search).get('RootFolder');
    const path = id ? id.split('/').slice(3).join('/') : docList;
    const baseurl = `${location.origin}/sites/${site}`;
    const url = `${baseurl}/_api/web/GetFolderByServerRelativeUrl('${path}')/Files`;
    const response = await fetch(url, {
      headers: {
        'Content-Type': 'application/json',
        'Accept': 'application/json;odata=verbose'
      }
    });
    const files = await response.json();
    let tem_url = `${baseurl}/${path}`;
    let text = `[${baseurl}/${path}](`+encodeURI(tem_url)+`)\n\n`;
    let html = `<a href="${baseurl}/${path}">${baseurl}/${path}</a><br />`;
    for (let file of files.d.results) {
      const ext = file.Name.split('.').pop();
      const docUrl = /docx?|pptx?|xlsx?/.test(ext)
        ? `${baseurl}/_layouts/15/Doc.aspx?sourcedoc={${file.UniqueId}}`
        : `${baseurl}/${path}/${file.Name}`;
      console.log(file.Name, file.LinkingUri, file.UniqueId, docUrl);
      if (selectedItems.length === 0 || selectedItems.includes(file.Name)) {
        text = text + `[${file.Name}](` + encodeURI(docUrl) + ')\n';
        html = html + `*&nbsp;${file.Name}<a href="${docUrl}"></a><br />`;
      }
    }
    const blob = new Blob([html], { type: "text/html" });
    const richTextInput = new ClipboardItem({ "text/html": blob });
    await navigator.clipboard.write([richTextInput]);
    prompt('HTML形式としてファイルパスをコピーしました。Markdown形式の場合は以下のテキストをコピーしてください。', text);
  })();
```

text形式をmarkdown形式のリンクに変更した

---------------------

### 最終版の実行イメージ

これを実行する。自動的にクリップボードにバイナリ形式でコピーされる（Teams貼り付け用）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/15907/287b2604-1c1c-e7ab-dc47-7a8799f77dcd.png)

これだとクリップボードの内容をTeamsに貼り付けたときは、変わらず
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/15907/1368caf6-f4a6-bc0c-d200-a80b06a7732c.png)

入力フォームの内容をコピーしてMarkDown形式を貼り付けたときは(Backlog)、こうなる
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/15907/8f9abeab-ecf8-7551-8375-f5dfc6df31a3.png)


## ブックマークレットを作る

これをこのサイトでブックマークレットにする

https://userjs.up.seesaa.net/js/bookmarklet.html

修正版を変換したbookmarketは以下

```
javascript:(async()=>{const selectedItems=[...document.querySelectorAll('div.is-selected')].map(x=>x.ariaLabel.split(',')[0]);const site=location.pathname.split('/')[2];const docList=location.pathname.split('/')[3];const id=new URLSearchParams(location.search).get('id')||new URLSearchParams(location.search).get('RootFolder');const path=id?id.split('/').slice(3).join('/'):docList;const baseurl=`${location.origin}/sites/${site}`;const url=`${baseurl}/_api/web/GetFolderByServerRelativeUrl('${path}')/Files`;const response=await fetch(url,{headers:{'Content-Type':'application/json','Accept':'application/json;odata=verbose'}});const files=await response.json();let tem_url=`${baseurl}/${path}`;let text=`[${baseurl}/${path}](`+encodeURI(tem_url)+`)\n\n`;let html=`<a href="${baseurl}/${path}">${baseurl}/${path}</a><br/>`;for(let file of files.d.results){const ext=file.Name.split('.').pop();const docUrl=/docx?|pptx?|xlsx?/.test(ext)?`${baseurl}/_layouts/15/Doc.aspx?sourcedoc={${file.UniqueId}}`:`${baseurl}/${path}/${file.Name}`;console.log(file.Name,file.LinkingUri,file.UniqueId,docUrl);if(selectedItems.length===0||selectedItems.includes(file.Name)){text=text+`[${file.Name}](`+encodeURI(docUrl)+')\n';html=html+`*&nbsp;${file.Name}<a href="${docUrl}"></a><br/>`;}}const blob=new Blob([html],{type:"text/html"});const richTextInput=new ClipboardItem({"text/html":blob});await navigator.clipboard.write([richTextInput]);prompt('HTML形式としてファイルパスをコピーしました。Markdown形式の場合は以下のテキストをコピーしてください。',text);})();
```


## 参考

https://www.meganii.com/blog/2022/05/16/getting-document-path-in-share-point-by-bookmarklet/