🤖
Chromeで別小窓にエクセルぽいの表示するブックマークレット
０．初めに
-
エクセルみたいなJavaScriptライブラリをGitHubで見つけた
myliang/x-spreadsheet: A web-based JavaScript（canvas） spreadsheet
-
Chromeでウェブサイトを見ながらメモ帳にメモすることがたまにある
-
メモだけじゃなく、合計とか計算したいときもある
-
計算結果を保存したいときもあるし、過去の計算結果を確認したいときもある
-
というわけで、簡単に計算できるChromeの小窓が欲しかった
⇒こんな感じにしたかった
-
ブックマークレットなら簡単そうだったので作った
１．作ったもの、使ったもの
- 元々のJavaScript
⇒ダウンロード、ファイル選択でローカルファイルの読み書きができます
var hhh='<html>'+
'<title>エクセルみたいの</title>'+
'<head>'+
'<link rel="stylesheet" href="https://unpkg.com/x-data-spreadsheet/dist/xspreadsheet.css">'+
'<script src="https://unpkg.com/x-data-spreadsheet/dist/xspreadsheet.js"></script>'+
'</head> '+
'<body>'+
' <button id="sv">ダウンロード</button>'+
' <input type="file" id="ld" name="file"/ accept="text/*">'+
' <div id="xspreadsheet"></div> '+
'<script>'+
' const s = x_spreadsheet("#xspreadsheet")'+
' .change(data => {'+
' console.log(data);'+
' }); '+
'var sv = document.getElementById("sv");'+
'sv.addEventListener("click",function(){'+
' var data1 = s.getData();'+
' let blob = new Blob([JSON.stringify(data1)]);'+
' let blobURL = window.URL.createObjectURL(blob);'+
' let a = document.createElement("a");'+
' a.href = blobURL;'+
' a.download="xldata.txt";'+
' document.body.appendChild(a);'+
' a.click();'+
' a.parentNode.removeChild(a); '+
'}); '+
'var ld = document.getElementById("ld");'+
'ld.addEventListener("change",function(e){'+
' var result = e.target.files[0];'+
' var reader = new FileReader();'+
' reader.readAsText( result );'+
' reader.addEventListener( "load", function() { s.loadData(JSON.parse(reader.result)); }) '+
'}); '+
'</script>'+
'</body>'+
'</html>';
var win = window.open('','','width=560,height=440');
win.document.write(hhh);
-
ブックマークレットに変換するためのWEBサービス
-
変換後のJavaScript
javascript:var hhh%3D'<html>'%2B '<title>エクセルみたいの<%2Ftitle>'%2B '<head>'%2B '<link rel%3D"stylesheet" href%3D"https%3A%2F%2Funpkg.com%2Fx-data-spreadsheet%2Fdist%2Fxspreadsheet.css">'%2B '<script src%3D"https%3A%2F%2Funpkg.com%2Fx-data-spreadsheet%2Fdist%2Fxspreadsheet.js"><%2Fscript>'%2B '<%2Fhead> '%2B '<body>'%2B ' <button id%3D"sv">ダウンロード<%2Fbutton>'%2B ' <input type%3D"file" id%3D"ld" name%3D"file"%2F accept%3D"text%2F*">'%2B ' <div id%3D"xspreadsheet"><%2Fdiv> '%2B '<script>'%2B ' const s%3Dx_spreadsheet("%23xspreadsheet")'%2B ' .change(data%3D>%7B'%2B ' console.log(data)%3B'%2B '%7D)%3B'%2B 'var sv%3Ddocument.getElementById("sv")%3B'%2B 'sv.addEventListener("click"%2Cfunction()%7B'%2B ' var data1%3Ds.getData()%3B'%2B ' let blob%3Dnew Blob(%5BJSON.stringify(data1)%5D)%3B'%2B ' let blobURL%3Dwindow.URL.createObjectURL(blob)%3B'%2B ' let a%3Ddocument.createElement("a")%3B'%2B ' a.href%3DblobURL%3B'%2B ' a.download%3D"xldata.txt"%3B'%2B ' document.body.appendChild(a)%3B'%2B ' a.click()%3B'%2B ' a.parentNode.removeChild(a)%3B'%2B '%7D)%3B'%2B 'var ld%3Ddocument.getElementById("ld")%3B'%2B 'ld.addEventListener("change"%2Cfunction(e)%7B'%2B ' var result%3De.target.files%5B0%5D%3B'%2B ' var reader%3Dnew FileReader()%3B'%2B ' reader.readAsText(result)%3B'%2B ' reader.addEventListener("load"%2Cfunction()%7Bs.loadData(JSON.parse(reader.result))%3B%7D)'%2B '%7D)%3B'%2B '<%2Fscript>'%2B '<%2Fbody>'%2B '<%2Fhtml>'%3Bvar win%3Dwindow.open(''%2C''%2C'width%3D560%2Cheight%3D440')%3Bwin.document.write(hhh)%3Bvoid(0);
２．終わりに
- エクセルオンラインでやればいいじゃん…汗
- ブックマークレットは簡単で初心者でも作れる
- ブラウザで同期されるので、他のPCでもすぐ使える
- 中身がわかるので、セキュリティの心配もない
- Chromeのタブで開いているサイト側設定の為に、上手く動かない場合もあります
とても便利だと思います
おしまい
Discussion