GASでWebアプリ｢映画鑑賞記録｣を作る⑭ ／ コードを変換して表示する

# 今回やること
　一覧表示での「初見」「鑑賞種別」の表示が、コードをそのまま表示していた為に意味が分かりずらかったので、コードの変換を行い意味が分かる表示にします。
![旧一覧画面.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/510221/54d2927a-0eff-ca91-e1c2-c717eb2547e4.png)

# プログラムの修正
###「初見」の変換
　次の様にコードを変換します。
　　　`0`→`いいえ` ／ `1`→`はい`
　変換のパターンが単純で固定的なので、フィルタ（filtersオプション）を使用します。
#### Vuejs.html
　`filters:`に`convFirstLook`を追加します。

```javascript
<script>
　　：
　var app = new Vue({
  el: '#app',
　　　　：
  filters: {
　　　　：
    },
    convFirstLook: function(flag) {
      return (flag == 0) ? 'いいえ' : 'はい';
    }
  },
　　　　：
```
#### Index.html
　HTMLでの一覧表示の「初見」列で、**Vuejs.html** に追加した`convFirstLook`使用します。

```html
          <td class="col04">{{ record[3] | convFirstLook }}</td>
```
```:以前の記述
          <td class="col04">{{ record[3] }}</td>
```
###「鑑賞種別」の変換
　スプレッドシートの［鑑賞種別］シートのデータを使用して、コードを変換します。
![［鑑賞種別］シート.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/510221/38985c0d-a758-60d0-e60f-995f93d513ca.png)
　動的に処理できる様に、データ（dataオプション）に配列として取り込みます。
#### Vuejs.html
　`data:`に`viewingTypes`（配列）を追加します。
　`methods:`に`convViewingType`を追加します。
　　※`filters:`では、`data:`の値を参照できないので、`methods:`を使用します。

```javascript
<script>
　　：
var app = new Vue({
  el: '#app',
  data: {
　　　　：
    viewingTypes : [],
　　　　：
  },
　　　　：
  methods: {
　　　　：
    },
    convViewingType: function(val) {
      let res = '';
      for(const viewingType of this.viewingTypes) {
        if(val == viewingType[0]) {
          res = viewingType[1];
          break;
        }
      }
      return res;
    },
```
#### ViewingRecord.gs
　［鑑賞種別］シートからデータを取得する処理：`getViewingTypes()`（サーバ側の処理）を追加します。

```javascript
function getViewingTypes(year) {
  var fileId = getFileIdFromYearSettings(year);
  var sheet = SpreadsheetApp.openById(fileId).getSheetByName('鑑賞種別');
  var lastRow = sheet.getLastRow();
  var results = sheet.getRange(3, 3, (lastRow - 2), 2).getValues();
  Logger.log('results: ' + results);
  
  return results;
}
```
#### javascript.html 
　サーバ側の処理で取得した［鑑賞種別］シートのデータを、`viewingTypes`（`data:`）にセットする処理：`getViewingTypes()`（クライアント側の処理）を追加します。

```javascript
<script>
　　：
  function getViewingTypes(year) {
    google.script.run.withSuccessHandler(
      function(v, element) {
        var viewingTypes = [];
        for(let viewingType of v) {
          viewingTypes.push(viewingType);
        }
        app.viewingTypes = viewingTypes;
      })
      .withFailureHandler(
        function(msg, element) {
          showError(msg);
        })
      .withUserObject(this)
      .getViewingTypes(year);
  }
```
#### Index.html
　HTMLでの一覧表示の「鑑賞種別」列で、**Vuejs.html** に追加した`convViewingType`使用します。

```html
          <td class="col04">{{ convViewingType(record[4]) }}</td>
```
```:以前の記述
          <td class="col04">{{ record[4] }}</td>
```
#### Vuejs.html
　`data:`の`viewingTypes`に動的にデータをセットする為、`mounted:`と`doChangeYear`（`methods:`）に`getViewingTypes()`の実行を追加します。

```javascript
<script>
　　：
var app = new Vue({
  el: '#app',
　　　：
  },
  mounted: function() {
　　　　：
    getViewingTypes(this.selectedYear);
  },
　　　　：
  },
  methods: {
　　　　：
    doChangeYear: function() {
　　　　　：
      getViewingTypes(this.selectedYear);
    },
```
#### css.html
　「初見」と「鑑賞種別」の列幅ならびに一覧表全体の幅を広げます。

```css
<style>
  table#resultList {
    width: 1150px;
  }
　　　：
  }
  .head04 {
    width: 75px;
    height: 50px;
    text-align: center;
  }
  .head05 {
    width: 75px;
    height: 50px;
    text-align: center;
  }
　　　：
  }
  .col04 {
    width: 75px;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
  }
  .col05 {
    width: 75px;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
  }
　　　：
</style>
```
# 結果
　「初見」と「鑑賞種別」の表示が変換されました。
![新一覧画面.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/510221/734db188-6532-cff0-bfe0-24c6a62e79ca.png)
**◆前の記事** [GASでWebアプリ｢映画鑑賞記録｣を作る⑬](https://qiita.com/pump33/items/c43166e3f5f2f57c34b0)
**◆次の記事** [GASでWebアプリ｢映画鑑賞記録｣を作る⑮](https://qiita.com/pump33/items/844d6bead8b911d898c6)

**◆索引** [GASでWebアプリ｢映画鑑賞記録｣を作る《索引》](https://qiita.com/pump33/items/8ded0e6fd3c336e705f4)