GAS(GoogleAppsScript)を使ってみる　#004

# はじめに
　え、このシリーズ[#003](https://qiita.com/koichiro-h/items/ee273608f9d529eb105f)で終わったんじゃ無かったのかって？ええ、続きます( ´艸｀)
まだネタがあったので少なくとも#005までは続けます(`・ω・)

# 概要
スプレッドシート出社記録を付けているのだが、この表何と手作り(* ´艸｀)ｸｽｸｽ
無くなったら新たに作成するのですが、、、（コピペと日付直しと祝祭日のセルカラー変更と～などちまちました操作が必要）

面倒なので自動化します！(`・ω・´)

…というのが[#001](https://qiita.com/koichiro-h/items/6ae372bade13f1ca889e)から続けてきた事です。

## GAS(GoogleAppsScript)を使ってみるシリーズ一覧
\#001. [Calendar.getEvents(startTime, EndTime)の挙動がおかしい報告](https://qiita.com/koichiro-h/items/6ae372bade13f1ca889e)
\#002. [リハビリ出社記録表作成支援ツールの総括](https://qiita.com/koichiro-h/items/5391362cba0d103cbf67#_reference-58f207f493fffb992a13)
\#003. [トリガーの失敗例とソース修正](https://qiita.com/koichiro-h/items/ee273608f9d529eb105f#_reference-121516ea3f462ea13b28)
いまここ☞\#004. [セルの書式設定の細かいお話](https://qiita.com/koichiro-h/items/aa6c1e37fd51f671aa89#_reference-e5dd43fb30505570b1e8)
\#005. [jQueryとTimePickerをユーザプロンプトとして出力するお話](https://qiita.com/koichiro-h/items/521501302558e112efba#_reference-818310df9326a6fe6b56)
\#006. [リファクタリングとクラス設計のお話](https://qiita.com/koichiro-h/items/18e15eb383b4f7a8b08b)

---
　
# 今回の課題
　所感欄の書式設定がデフォのままだったのでそこまでMain処理でやってしまう(`・ω・´)

## 詳しく言うと…

![書式設定が.png](https://qiita-image-store.s3.amazonaws.com/0/136977/4b61bf67-2a39-950f-a077-b3be390938c5.png)

上記の図の赤い部分が課題で、緑色にしたいということ。

これには
1. 垂直位置を上にする
2. 水平位置を左寄せにする
3. テキストを折り返す
としなければなりません。

これを毎週分ポチポチ手でやるのは面倒です(;´Д`)

と、いうことで[#003](https://qiita.com/koichiro-h/items/ee273608f9d529eb105f#%E3%82%A8%E3%83%A9%E3%83%BC%E7%99%BA%E7%94%9F)のprintFormatOfWeek関数の最後に処理を盛り込むことにした。


# 検討
## 1. 垂直位置を上にする
Rangeクラスの中で当たりをつける。ふむ、垂直位置は多分[コレ(setVerticalAlignment(alignment))](https://developers.google.com/apps-script/reference/spreadsheet/range#setVerticalAlignment(String))だろう。

(リファレンス本文引用)
> ```js
 var ss = SpreadsheetApp.getActiveSpreadsheet();
 var sheet = ss.getSheets()[0];
 var cell = sheet.getRange("B2");
 cell.setVerticalAlignment("middle");
 ```

これでB2セルの値の表示高さを真ん中に出来る。また、alignmentは文字列型で以下の3つ、またはnullを許容するようなので、要件通りtopとする。

> alignment	String	The alignment, either **'top'**, **'middle'** or **'bottom'**; a **null** value resets the alignment.

## 2. 水平位置を左寄せにする
1. と同じくセルをアレコレする振る舞いなのでやっぱりRangeクラスであたりを付ける。うん、[コレ(setHorizontalAlignment(alignment)
)](https://developers.google.com/apps-script/reference/spreadsheet/range#sethorizontalalignmentalignment)ですね。

(リファレンス本文引用)
> ```js
 var ss = SpreadsheetApp.getActiveSpreadsheet();
 var sheet = ss.getSheets()[0];
 var cell = sheet.getRange("B2");
 cell.setHorizontalAlignment("center");
``` 

これでB2セルの値の左右を真ん中に出来る。また、alignmentは文字列型で以下の3つ、またはnullを許容するようなので、要件通りleftとする。
> alignment	String	The alignment, either **'left'**, **'center'** or **'normal'**; a **null** value resets the alignment.

## 3. テキストを折り返す
これも同じくRangeクラスから。[コレ(setWrap(isWrapEnabled))](https://developers.google.com/apps-script/reference/spreadsheet/range#setwrapiswrapenabled)かな？

(リファレンス本文引用)
> ```js
 var ss = SpreadsheetApp.getActiveSpreadsheet();
 var sheet = ss.getSheets()[0];
 var cell = sheet.getRange("B2");
 cell.setWrap(true);
``` 

こうすることでB2の折り返しを有効に出来るらしい。

、、、が結果変わらなかったorz...

そこでもう一つの[コチラ(setWrapStrategy(strategy))](https://developers.google.com/apps-script/reference/spreadsheet/range#setwrapstrategystrategy)が気になるお年頃...

(リファレンス本文引用)
> Sets the text wrapping strategy for the cells in the range.
> ```js
 // Sets all cells in range B2:D4 to use the clip wrap strategy.
 var sheet = SpreadsheetApp.getActiveSheet();
 var range = sheet.getRange("B2:D4");
 range.setWrapStrategy(SpreadsheetApp.WrapStrategy.CLIP);
``` 

> strategy	*WrapStrategy*	The desired wrapping strategy.

だそうだ。折り返しの種類がいくつかあるから選べと。
[WrapStaretegy](https://developers.google.com/apps-script/reference/spreadsheet/wrap-strategy)についても調べてみた。

(リファレンス本文引用)
>Enum WrapStrategy
An enumeration of the strategies used to handle cell text wrapping.

> |  Property  |  Type  | Description |
| ---- | ---- | ---- |
|  WRAP  |  Enum  | Wrap lines that are longer than the cell width onto a new line. Single words that are longer than a line are wrapped at the character level.|
|  OVERFLOW  |  Enum  | Overflow lines into the next cell, so long as that cell is empty. If the next cell over is non-empty, this behaves the same as CLIP. |
|  CLIP| Enum | Clip lines that are longer than the cell width. |

うーんCLIPとWRAPの違いがあんま分からないけれど、OVERFLOWで無ければよさそうだよね(∩´∀｀)∩

# 実装
( ´-` ).oOと、いうことで下記コードが完成した

```js
function printFormatOfWeek() {
  var range = sh.getRange( sh.getDataRange().getLastRow() + 2, 1, 8, 9 ); // 出力先のRange
  range.setBorder( true, true, true, true, true, true );
  var horizontalAlignments = [
    [ "center", "center", "left", "left", "left", "left", "left", "left", "left" ]
  ];
  range.setHorizontalAlignment( "center" );
  range.offset( 8, 0, 1, 9 ).setHorizontalAlignments( horizontalAlignments );
  
  var youbi = sh.getRange( range.getRow(), range.getColumn(), 1, 2 ); // '曜日'
  youbi.merge()
  .setValue( '曜日' );
  
  youbi.offset( 0, 2, 1, 1 ).setValue( '日' );
  youbi.offset( 0, 3, 1, 1 ).setValue( '月' );
  youbi.offset( 0, 4, 1, 1 ).setValue( '火' );
  youbi.offset( 0, 5, 1, 1 ).setValue( '水' );
  youbi.offset( 0, 6, 1, 1 ).setValue( '木' );
  youbi.offset( 0, 7, 1, 1 ).setValue( '金' );
  youbi.offset( 0, 8, 1, 1 ).setValue( '土' );

  var tsukihi = youbi.offset( 1, 0 ); // '月日'
  tsukihi.merge().setValue( '月日' );
  
  var yotei = tsukihi.offset( 1, 0, 2, 1 )
  .merge().setValue( '予定' ) 
  yotei.offset( 0, 1, 1, 1 ).setValue( '出社時間' );
  yotei.offset( 1, 1, 1, 1 ).setValue( '退社時間' );

  var zisseki = yotei.offset( 2, 0, 2, 1 )
  .merge().setValue( '実績' )
  zisseki.offset( 0, 1, 1, 1 ).setValue( '出社時間' );
  zisseki.offset( 1, 1, 1 ,1 ).setValue( '退社時間' );

  var taichomen = zisseki.offset( 2, 0, 1, 2 )
  .merge().setValue( '体調面' );
  
  var shokan = taichomen.offset( 1, 0, 1, 2 )
  .merge().setValue( '所感' )

  shokan.offset( 0, 2, 1, 7)
  .setHorizontalAlignment( 'left' )
  .setVerticalAlignment( 'top' )
  .setWrapStrategy( SpreadsheetApp.WrapStrategy.CLIP)
  .setWrap( true );
  
  return range;
}
```

大抵のメソッドが処理結果と共に自身を返すため、極力メソッドチェーンにしてみました(`・ω・´)

# 結果
　ちょっと見づらいけど左寄せ、上詰め、折り返しになっている(∩´∀｀)∩

![成功.png](https://qiita-image-store.s3.amazonaws.com/0/136977/a647f4d8-6fd7-7e01-a3ca-9b14a4096d66.png)

# 次回予告
 次回は予定時刻の入力支援を実装します(\`・ω・´)
ちょっと高度な使い方として、GASの中でjQueryを実装してみようと試みます(\`・ω・´)
軽めのテストでは成功したのですが、上手く行かなかったら試行錯誤内容や失敗結果を載せます...(;ﾟДﾟ)