LoginSignup
0
0

More than 1 year has passed since last update.

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

Last updated at Posted at 2022-01-14

今回やること

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

プログラムの修正

「初見」の変換

 次の様にコードを変換します。
   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>

「鑑賞種別」の変換

 スプレッドシートの[鑑賞種別]シートのデータを使用して、コードを変換します。
[鑑賞種別]シート.png
 動的に処理できる様に、データ(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

 サーバ側の処理で取得した[鑑賞種別]シートのデータを、viewingTypesdata:)にセットする処理: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:doChangeYearmethods:)に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>

結果

 「初見」と「鑑賞種別」の表示が変換されました。
新一覧画面.png
◆前の記事 GASでWebアプリ「映画鑑賞記録」を作る⑬
◆次の記事 GASでWebアプリ「映画鑑賞記録」を作る⑮

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

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0