「CSVファイル」の表データを読込む
別種のプログラムの間での「表」データの受け渡しは、「CSV」ファイルを使うのが簡単で、行ごとにカンマでデータを区切ったテキストファイルの形式ですから、ツール間の互換が採り易いのは当然です。
Excel等のアプリケーションは、表へのデータ入力に関しても便利なアシストがあり、迅速に行えます。 Excelで書き込んだデータを「CSV」ファイルで出力し、それを「Blog Table ⭐」側で読み込めば、セル数が多い表の入力が快適に出来ます。 もちろん、既成のExcelデータのブログ掲載も可能です。
Excelに限らず、表のアプリケーションは、ほぼ全てCSVファイルの出力が可能でしょうから、「Blog Table ⭐」の表に「CSVファイル」を読込めると、色々と便利です。
という事で「Blog Table ⭐ Import」を作りました。「Blog Table ⭐」のサブツールで、「Blog Table ⭐ Cell Design」と同じ「Ctrl+F3」のショートカットで起動する仕様です。 これらのサブツールは、必要に応じて「ON」にする使い方で充分だと思います。
❶ 他のアプリケーションから「CSV」ファイルを出力
ここでは、Googleの「スプレッドシート」(Google Sheets:)で、ブラウザ上でサンプルの表を作りました。
「ファイル」メニュー ➔「ダウンロード」➔「カンマ区切り形式(.CSV)」を押すと、ダウンロードフォルダーに「CSV形式」の表データが保存されます。
この手順で出来た「CSVファイル」を「Import」で読込みます。 Excelや他のアプリケーションから出力した「CSVファイル」も、同じ様に扱えます。
❷ 空表を準備する
「Blog Table ⭐」を使って、「CSVファイル」を作った元表の「行数・列数」以上の空表を、ブログ編集画面に生成します。
▪「行数・列数」は余っても後で「Blog Table ⭐」で余分を整理できます。 足りない場合は、元表の一部の表として取り込まれます。
▪ 既成の「表」に CSVデータを呼込む事が出来ますが、元表の「行数・列数」の範囲が、呼込んだデータで上書きされます。
この例では、元表が 4行・4列 なので、余裕を見て 5行・5列の空表を用意しました。
❸「Blog Table ⭐ Import」を起動する
「Tampermonkey」に「Blog Table ⭐ Import」を登録して、「CSV」ファイルの読み込み時に「ダッシュボード」で、このツールを「ON」にします。
●「Ctrl+F3」のショートカットを押すと、ツールが起動します。
● ❷ で用意した「空表」を「Ctrl+左Click」で指定します。
表示されるメニューは、下の様なシンプルなものです。
●「CSVファイルを読込む」を「左Click」して、ダウンロードフォルダーの先ほど出力した「CSVファイル」を選択して読込みます。
▪ ファイル名が「.csv」(CSV形式)以外は、読み込む事ができません。
●「データを表に展開する」を「左Click」します。
元表が 4行・4列 だったので、空表の左上隅からその範囲にデータが展開されます。
従ってこの例では、右端に1列、下端に1行の余白ができています。
▪「Blog Table ⭐」を使って、この余分は削除できます。 最初から元表と同じの空表を作っておけば、余白の処理は不要です。
▪ 最上行は幅が狭いので改行されていますが、「Blog Table ⭐」で改行を無くし、デザインを整えます。
「Blog Table ⭐ Import」を利用するには
このツールは Chrome / Edge / Firefox版の拡張機能「Tampermonkey」上で動作します。 以下に、このツールの導入手順を簡単に説明します。
❶「Tampermonkey」を導入します
◎ 使用しているブラウザに拡張機能「Tampermonkey」を導入する事が必要です。
既に「Tampermonkey」を導入している場合は、この手順 ❶ は不要です。
拡張機能の導入については、以下のページに簡単な説明があるので参照ください。
❷「Tampermonkey」にスクリプトを登録します
◎「Tampermonkey」の「+」マークの「新規スクリプト」タブを開きます。
◎「新規スクリプト」には、最初からテンプレートが記入されています。 これは全て削除して、完全に空白の編集枠に 下のコードをコピー&ペーストします。
〔コピー方法〕 軽量シンプルなツール「PreBox Button 」を使うと
コード枠内を「Ctrl+左Click」➔「Copy code 」を「左Click」
の操作で、掲載コードのコピーが可能になります。
◎ 最後に「ファイル」メニューの「保存」を押すと、ツールが使用可能になります。
〔 Blog Table ⭐ Import 〕 ver. 0.1
// ==UserScript== // @name Blog Table ⭐ Import // @namespace http://tampermonkey.net/ // @version 0.1 // @description CSVファイルのデータを表に展開する「Ctrl+F3」 // @author Ameba Blog User // @match https://blog.ameba.jp/ucs/entry/srventry* // @exclude https://blog.ameba.jp/ucs/entry/srventrylist.do* // @grant none // ==/UserScript== let retry=0; let interval=setInterval(wait_target, 100); function wait_target(){ retry++; if(retry>10){ // リトライ制限 10回 1sec clearInterval(interval); } let target=document.getElementById('cke_1_contents'); // 監視 target if(target){ clearInterval(interval); main(); }} function main(){ let task=0; // 起動1・更新3・終了0 let target=document.getElementById('cke_1_contents'); // 監視 target let monitor=new MutationObserver( catch_key ); monitor.observe(target, {childList: true, attributes: true}); // ショートカット待受け開始 catch_key(); function catch_key(){ if(document.querySelector('.cke_wysiwyg_frame') !=null){ //「通常表示」から実行開始 let editor_iframe=document.querySelector('.cke_wysiwyg_frame'); let iframe_doc=editor_iframe.contentWindow.document; iframe_doc.addEventListener('keydown', check_key); document.addEventListener('keydown', check_key); function check_key(event){ if(event.keyCode==13 && iframe_doc.hasFocus()){ remove_mark(); } // 改行入力が連続マークとなるのを抑止 let gate=-1; if(event.ctrlKey==true){ if(event.keyCode==114){ event.preventDefault(); gate=1; } if(gate==1){ event.stopImmediatePropagation(); do_task(); }}} function do_task(){ if(task==0){ task=1; table_panel(); enhanced(); } else{ task=0; remove_t_panel(); remove_mark(); }}} before_end(); } // catch_key() function table_panel(){ let panel= '<div id="csv_panel">'+ '<span class="csv_button0 csv_sw">CSVファイルを読込む</span>'+ '<span class="csv_button1 csv_sw">データを表に展開する</span>'+ '<input class="csv_data_input" type="file">'+ '<span class="csv_label">展開する行列の構成</span>'+ '<div class="csv_wnc"><input id="csv_col" type="number" min="1"></div>'+ '<div class="csv_wnr"><input id="csv_row" type="number" min="1"></div>'+ '<div id="csv_first">'+ '<span id="csv_help">?</span>'+ '<div class="csv_help1">'+ 'CSVデータを展開する「table表」を<b>「Ctrl+左Click」</b>で指定してください</div>'+ '</div>'+ '<style>'+ '#csv_panel { position: fixed; top: 15px; left: calc(50% - 490px); width: 954px; '+ 'height: 27px; font-size: 14px; padding: 6px 12px; overflow: hidden; '+ 'border: 1px solid #ccc; border-radius: 4px; background: #eff5f6; z-index: 10; }'+ '#csv_panel * { user-select: none; }'+ '#csv_panel .csv_sw { position: relative; margin: 0 20px; padding: 3px 10px 1px; '+ 'top: 0; box-sizing: border-box; border: thin solid #aaa; background: #fff; }'+ '#csv_panel .csv_data_input { display: none; }'+ '#csv_panel input { position: relative; margin-right: 10px; padding: 2px 2px 0 0; '+ 'height: 27px; box-sizing: border-box; border: thin solid #aaa; }'+ '.csv_label { margin: 0 3px 0 0; }'+ '.csv_wnc, .csv_wnr { position: relative; display: inline-block; margin: 0 5px; }'+ '.csv_wnc::after { content: "列"; }'+ '.csv_wnr::after { content: "行"; }'+ '.csv_wnc::after, .csv_wnr::after { position: absolute; top: 2px; right: 12px; '+ 'padding: 3px 0 0; width: 17px; background: #fff; }'+ '.csv_wnc:hover::after, .csv_wnr:hover::after { content: ""; }'+ '#csv_col, #csv_row { width: 50px; text-align: center; }'+ '#csv_first { position: absolute; top: 0; left: 0; color: #fff; background: #2196f3; '+ 'width: 100%; padding: 10px 0; font-size: 16px; text-align: center; }'+ '#csv_help { position: absolute; top: 11px; right: 25px; padding: 2px 1px 0; '+ 'line-height: 16px; font-weight: bold; border-radius: 30px; '+ 'color: #2196f3; background: #fff; cursor: pointer; }'+ '.csv_help1 { text-align: left; margin-left: 60px; }'+ '</style>'+ '</div>'; if(!document.querySelector('#csv_panel')){ document.body.insertAdjacentHTML('beforeend', panel); } } // table_panel() function enhanced(){ let target_r=document.getElementById('cke_1_contents'); // 監視 target let monitor_r=new MutationObserver(select); monitor_r.observe(target_r, {childList: true}); // ショートカット待受け開始 select(); function select(){ if(document.querySelector('.cke_wysiwyg_frame') !=null){ //「通常表示」から実行開始 remove_mark; // Html編集後のリセット show_first(1); let editor_iframe=document.querySelector('.cke_wysiwyg_frame'); let iframe_doc=editor_iframe.contentWindow.document; if(iframe_doc){ let style_csv_if= '<style id="style_csv_if">'+ '.csv_active { box-shadow: #fff -4px 0px, #2196f3 -8px 0px !important; }'+ '</style>'; if(!iframe_doc.head.querySelector('#style_csv_if')){ iframe_doc.head.insertAdjacentHTML('beforeend', style_csv_if); } let editor=iframe_doc.querySelector('.cke_editable'); if(editor){ editor.onclick=function(event){ event.stopImmediatePropagation(); if(event.ctrlKey){ remove_mark(); if(task==1 || task==3){ let elm=iframe_doc.elementFromPoint(event.clientX, event.clientY); if(elm.closest('table')!=null){ let table_=elm.closest('table'); if(table_.id && table_.id.includes('ambt')){ table_.parentNode.classList.add('csv_active'); show_first(0); task=3; edit_table(table_); } //「セルをデザイン」 else{ remove_mark(); } //「選択終了」 }}} }}}}} // select() } // enhanced() function edit_table(table_){ let result; // 最終的な二次元配列 let editor_iframe=document.querySelector('.cke_wysiwyg_frame'); let iframe_doc=editor_iframe.contentWindow.document; let csv_col=document.querySelector('#csv_col'); let csv_row=document.querySelector('#csv_row'); let csv_button1=document.querySelector('.csv_button1'); if(task==3){ let tr_all=table_.querySelectorAll('tbody tr'); let td_all=table_.querySelectorAll('tbody td'); csv_row.value=tr_all.length; csv_col.value=td_all.length/tr_all.length; csv_reader(); csv_button1.onclick=function(event){ event.preventDefault(); if(result){ for(let r=0; r<tr_all.length; r++){ if(result[r]){ let td_tr_all=tr_all[r].querySelectorAll('td'); for(let c=0; c<td_tr_all.length; c++){ if(result[r][c]){ td_tr_all[c].textContent=result[r][c]; }}}}} else{ alert("CSVファイルを読み込んでください"); }} } // if(task==3) function csv_reader(){ let csv_button0=document.querySelector('.csv_button0'); let csv_data_input=document.querySelector('.csv_data_input'); csv_button0.onclick=function(){ csv_data_input.click(); } csv_data_input.addEventListener('click', (event)=>{ event.target.value=''; }); // 同ファイルを2回以上読める様にする csv_data_input.addEventListener('change', function(){ if(!(csv_data_input.value)){ return; } // ファイルが選択されない場合 let file_list=csv_data_input.files; if(!file_list){ return; }// ファイルリストが選択されない場合 let file=file_list[0]; if(!file){ return; }// ファイルが無い場合 else{ if(!file.name.endsWith('.csv')){ alert("「CSV形式」のファイルのみに対応します"); } else{ let file_reader=new FileReader(); file_reader.readAsText(file); file_reader.onload=function(){ let csv_data=file_reader.result; convert_array(csv_data); }}} // CSVデータを読込み }); function convert_array(str){ result=[]; let tmp=str.split('\n'); // 改行を区切り文字として行の配列を生成 for(let i=0;i<tmp.length;++i){ // 行からカンマ区切りの文字列から配列を生成 result[i]=tmp[i].split(','); }} } // csv_reader() } // edit_table() function remove_t_panel(){ document.querySelector('#csv_panel').remove(); } function remove_mark(){ if(document.querySelector('.cke_wysiwyg_frame') !=null){ //「通常表示」から実行開始 let editor_iframe=document.querySelector('.cke_wysiwyg_frame'); let iframe_doc=editor_iframe.contentWindow.document; let item=iframe_doc.querySelectorAll('.csv_active'); for(let k=0; k<item.length; k++){ item[k].classList.remove('csv_active'); }}} function show_first(n){ let first=document.querySelector('#csv_first'); let csv_help1=document.querySelector('.csv_help1'); if(first){ if(n==0){ first.style.display='none'; } else{ first.style.display='block'; csv_help1.style.display='block'; }} let csv_help=document.querySelector('#csv_help'); if(csv_help){ csv_help.onclick=function(){ let url='https://ameblo.jp/personwritep/entry-12842563216.html'; window.open(url, target="_blank"); }}} function before_end(){ let submitButton=document.querySelectorAll('.js-submitButton'); submitButton[0].addEventListener('mousedown', all_clear, false); submitButton[1].addEventListener('mousedown', all_clear, false); function all_clear(){ let editor_iframe=document.querySelector('.cke_wysiwyg_frame'); if(!editor_iframe){ //「HTML表示」編集画面の場合 alert("⛔ Blog Table が処理を終了していません\n\n"+ " 通常表示画面に戻り 編集を終了してください"); event.stopImmediatePropagation(); event.preventDefault(); } if(editor_iframe){ //「通常表示」編集画面の場合 remove_mark(); } // table編集のマークを削除 }} // before_end( } // main()
「Blog Table ⭐ Import」最新版について
旧いバージョンの JavaScriptツールは、アメーバのページ構成の変更で動作しない場合があり、導入する場合は最新バージョンをお勧めします。
●「Blog Table ⭐ Import」の最新バージョンへのリンクは、以下のページのリンクリストから探せます。