Photo by Lukas Blazek on Unsplash
はじめに
kintone Advent Calendar 2020の記事でフィールドコードを表示するブックマークレットを紹介しました。
potara.netやってみて意外と使い所があるな、と思ったので第二弾を作成しました。今回はkintoneのグラフを画像としてダウンロード、クリップボードにコピーするブックマークレットを紹介します。
表とクロス集計表は対象外です。
できること
kintoneアプリのグラフ表示画面を開いてブックマークレットを実行するとダウンロード用とコピー用のリンクを表示します。クリックでそれぞれの処理を実行します。
ブックマークレットの作成
以下のコードを利用します。
コードをコピーしたら以下のホームページを利用してコードをMinifyします。
Minifyすると以下のコードが生成されます。
(async()=>{const e=document.querySelector("svg"),t=(new XMLSerializer).serializeToString(e),a=`data:image/svg+xml;charset=utf-8;base64,${btoa(unescape(encodeURIComponent(t)))}`,n=document.createElement("canvas");n.width=e.width.baseVal.value,n.height=e.height.baseVal.value;const o=new Image;await((e,t)=>new Promise(a=>{e.onload=(()=>a()),e.src=t}))(o,a),n.getContext("2d").drawImage(o,0,0,n.width,n.height);const c=document.createElement("div");c.style.backgroundColor="white",c.style.textAlign="center";const i=document.createElement("a");i.appendChild(document.createTextNode("[ DOWNLOAD ]")),i.href=n.toDataURL("image/png");const d=`${kintone.app.getId()}-${(()=>{const e=new Date;return`${e.getFullYear()}-${("00"+(e.getMonth()+1)).slice(-2)}-${("00"+e.getDate()).slice(-2)}_${("00"+e.getHours()).slice(-2)}-${("00"+e.getMinutes()).slice(-2)}-${("00"+e.getSeconds()).slice(-2)}`})()}.png`;i.setAttribute("download",d);const s=document.createElement("a");s.appendChild(document.createTextNode("[ COPY to CLIPBOARD ]")),s.onclick=(async()=>{const e=await new Promise(e=>n.toBlob(e));await navigator.clipboard.write([new ClipboardItem({[e.type]:e})])}),c.appendChild(i),c.appendChild(s),e.parentNode.insertBefore(c,e)})();ブックマークレットとして利用できるように先頭に「javascript:」を追加します。
javascript:(async()=>{const e=document.querySelector("svg"),t=(new XMLSerializer).serializeToString(e),a=`data:image/svg+xml;charset=utf-8;base64,${btoa(unescape(encodeURIComponent(t)))}`,n=document.createElement("canvas");n.width=e.width.baseVal.value,n.height=e.height.baseVal.value;const o=new Image;await((e,t)=>new Promise(a=>{e.onload=(()=>a()),e.src=t}))(o,a),n.getContext("2d").drawImage(o,0,0,n.width,n.height);const c=document.createElement("div");c.style.backgroundColor="white",c.style.textAlign="center";const i=document.createElement("a");i.appendChild(document.createTextNode("[ DOWNLOAD ]")),i.href=n.toDataURL("image/png");const d=`${kintone.app.getId()}-${(()=>{const e=new Date;return`${e.getFullYear()}-${("00"+(e.getMonth()+1)).slice(-2)}-${("00"+e.getDate()).slice(-2)}_${("00"+e.getHours()).slice(-2)}-${("00"+e.getMinutes()).slice(-2)}-${("00"+e.getSeconds()).slice(-2)}`})()}.png`;i.setAttribute("download",d);const s=document.createElement("a");s.appendChild(document.createTextNode("[ COPY to CLIPBOARD ]")),s.onclick=(async()=>{const e=await new Promise(e=>n.toBlob(e));await navigator.clipboard.write([new ClipboardItem({[e.type]:e})])}),c.appendChild(i),c.appendChild(s),e.parentNode.insertBefore(c,e)})();このコードをブックマークとして設定します。適当なサイトをブックマークして、ブックマークの編集からURLに貼り付けるのが簡単だと思います。
面倒な人は「 グラフのダウンロード 」をブックマックバーにドラッグ・アンド・ドロップしてください。
=>{const e=document.querySelector("svg"),t=(new XMLSerializer).serializeToString(e),a=`data:image/svg+xml;charset=utf-8;base64,${btoa(unescape(encodeURIComponent(t)))}`,n=document.createElement("canvas");n.width=e.width.baseVal.value,n.height=e.height.baseVal.value;const o=new Image;await((e,t)=>new Promise(a=>{e.onload=(()=>a()),e.src=t}))(o,a),n.getContext("2d").drawImage(o,0,0,n.width,n.height);const c=document.createElement("div");c.style.backgroundColor="white",c.style.textAlign="center";const i=document.createElement("a");i.appendChild(document.createTextNode("[ DOWNLOAD ]")),i.href=n.toDataURL("image/png");const d=`${kintone.app.getId()}-${(()=>{const e=new Date;return`${e.getFullYear()}-${("00"+(e.getMonth()+1)).slice(-2)}-${("00"+e.getDate()).slice(-2)}_${("00"+e.getHours()).slice(-2)}-${("00"+e.getMinutes()).slice(-2)}-${("00"+e.getSeconds()).slice(-2)}`})()}.png`;i.setAttribute("download",d);const s=document.createElement("a");s.appendChild(document.createTextNode("[ COPY to CLIPBOARD ]")),s.onclick=(async()=>{const e=await new Promise(e=>n.toBlob(e));await navigator.clipboard.write([new ClipboardItem({[e.type]:e})])}),c.appendChild(i),c.appendChild(s),e.parentNode.insertBefore(c,e)})();){kind=link}