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

今回やること

　一覧表示での「初見」「鑑賞種別」の表示が、コードをそのまま表示していた為に意味が分かりずらかったので、コードの変換を行い意味が分かる表示にします。

プログラムの修正

###「初見」の変換
　次の様にコードを変換します。
　　　0→いいえ ／ 1→はい
　変換のパターンが単純で固定的なので、フィルタ（filtersオプション）を使用します。

Vuejs.html

　filters:にconvFirstLookを追加します。

<script>
　　：
　var app = new Vue({
  el: '#app',
　　　　：
  filters: {
　　　　：
    },
    convFirstLook: function(flag) {
      return (flag == 0) ? 'いいえ' : 'はい';
    }
  },
　　　　：

Index.html

　HTMLでの一覧表示の「初見」列で、Vuejs.html に追加したconvFirstLook使用します。

          <td class="col04">{{ record[3] | convFirstLook }}</td>

以前の記述

          <td class="col04">{{ record[3] }}</td>

###「鑑賞種別」の変換
　スプレッドシートの［鑑賞種別］シートのデータを使用して、コードを変換します。

　動的に処理できる様に、データ（dataオプション）に配列として取り込みます。

Vuejs.html

　data:にviewingTypes（配列）を追加します。
　methods:にconvViewingTypeを追加します。
　　※filters:では、data:の値を参照できないので、methods:を使用します。

<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()（サーバ側の処理）を追加します。

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()（クライアント側の処理）を追加します。

<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使用します。

          <td class="col04">{{ convViewingType(record[4]) }}</td>

以前の記述

          <td class="col04">{{ record[4] }}</td>

Vuejs.html

　data:のviewingTypesに動的にデータをセットする為、mounted:とdoChangeYear（methods:）にgetViewingTypes()の実行を追加します。

<script>
　　：
var app = new Vue({
  el: '#app',
　　　：
  },
  mounted: function() {
　　　　：
    getViewingTypes(this.selectedYear);
  },
　　　　：
  },
  methods: {
　　　　：
    doChangeYear: function() {
　　　　　：
      getViewingTypes(this.selectedYear);
    },

css.html

　「初見」と「鑑賞種別」の列幅ならびに一覧表全体の幅を広げます。

<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>

結果

　「初見」と「鑑賞種別」の表示が変換されました。

◆前の記事 GASでWebアプリ｢映画鑑賞記録｣を作る⑬
◆次の記事 GASでWebアプリ｢映画鑑賞記録｣を作る⑮

◆索引 GASでWebアプリ｢映画鑑賞記録｣を作る《索引》