Spreadsheetで作成した文章を、簡単にコピー＆ペーストする

# 目次
**Qiitaの記事をSpreadsheetで管理する**
[1.Spreadsheetで作成した文章を簡単に、コピー＆ペーストしやすくする](https://qiita.com/tk20211228/items/ca994f300fbbe8fa371b)　←本記事
[2. Spreadsheetで作成したシート名をハイパーリンクの一覧で出力する](”https://qiita.com/”)
[3. Spreadsheetに、Markdown記法の支援ツールをサイドバーで作成する](”https://qiita.com/”)

# 結論
:::note info
作成した文章を、 HtmlServiceを使用してテキストボックスに入力する。
select()、execCommand( )で作成したコピーボタンで、作成した文章を取得し、そのままQiitaに投稿する。
:::
:::note warn
Qiitaの記事をSpreadsheetで管理する**メリット**
・メリット①：過去に作成した記事をすぐに確認できる。
・メリット②：フォーマットを決めておくことで、日々のアウトプットを作成しやすくなる。
・メリット③：コピーボタンでコピー＆ペーストする作業が、短縮化される。
:::

![processing_file (21).gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2441785/4d4af3af-3313-84da-8923-c2abb1d4135a.gif)


# サンプルコード
```javascript:meun.gs
function onOpen() {
  const ui = SpreadsheetApp.getUi();
     ui.createMenu('custom_menu')
       .addItem('記事を出力', 'createReport')
       .addToUi()
}
```
```javascript: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,'出力結果');
}
```
```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: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">
```
```javascript: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>
```


###### 参考資料
コピーボタン

https://fuuno.net/web02/copy/copy.html

textareaのサイズを固定する方法
※知識不足でよくわからなかったが、resizeプロパティをcssファイルに設定しても固定することができなかった。
　（textarea）要素に直接、resizeプロパティを入力し対応。

https://www-creators.com/archives/2496