目次
Qiitaの記事をSpreadsheetで管理する
1.Spreadsheetで作成した文章を簡単に、コピー＆ペーストしやすくする ←本記事
2. Spreadsheetで作成したシート名をハイパーリンクの一覧で出力する
3. Spreadsheetに、Markdown記法の支援ツールをサイドバーで作成する
結論
作成した文章を、 HtmlServiceを使用してテキストボックスに入力する。
select()、execCommand( )で作成したコピーボタンで、作成した文章を取得し、そのままQiitaに投稿する。
Qiitaの記事をSpreadsheetで管理するメリット
・メリット①：過去に作成した記事をすぐに確認できる。
・メリット②：フォーマットを決めておくことで、日々のアウトプットを作成しやすくなる。
・メリット③：コピーボタンでコピー＆ペーストする作業が、短縮化される。
サンプルコード
meun.gs
function onOpen() {
const ui = SpreadsheetApp.getUi();
ui.createMenu('custom_menu')
.addItem('記事を出力', 'createReport')
.addToUi()
}
main.gs
function createReport(){
const mainsheet = SpreadsheetApp.getActiveSpreadsheet();
const ui = SpreadsheetApp.getUi();
const sheetValues = mainsheet.getRange("A1:A").getValues();
let textareaValues = '';
for(i=0; i<sheetValues.length; ++i){
textareaValues += sheetValues[i] + '\n';
}
const output = HtmlService.createTemplateFromFile('create');
output.inputValues = textareaValues;
const html = output.evaluate().setSandboxMode(HtmlService.SandboxMode.IFRAME)
.setWidth(800)
.setHeight(390);
ui.showModelessDialog(html,'出力結果');
}
create.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<?!= HtmlService.createHtmlOutputFromFile('css').getContent(); ?>
</head>
<body>
<div align="center">
<Form>
<textarea class="form-control" style="resize: none;"><?= inputValues ?></textarea>
<button type="button" class="btn btn-outline-success m-3" onclick="copy()">テキストを全てコピーする</button>
<button type="button" class="btn btn-outline-secondary m-3" onclick="google.script.host.close()">閉じる</button>
</Form>
</div>
</body>
<?!= HtmlService.createHtmlOutputFromFile('js').getContent(); ?>
</html>
css.html
<style>
textarea {
width:700px;
height:310px;
}
</style>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
js.html
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
rossorigin="anonymous"></script>
<script>
function copy() {
var text = document.getElementsByTagName("textarea")[0];
text.select();
document.execCommand("copy");
}
</script>
参考資料
コピーボタン
textareaのサイズを固定する方法
※知識不足でよくわからなかったが、resizeプロパティをcssファイルに設定しても固定することができなかった。
（textarea）要素に直接、resizeプロパティを入力し対応。