新規投稿
フォローする

カスタマイズビューをモバイル版に移行

12月9日のkintoneアップデートで、モバイル版カスタマイズビューが実装されました。 以前ナレッジノートでご紹介したEChartsなど、モバイル対応したJSライブラリを使ったカスタマイズビューであれば、非常に簡単にモバイル版に移行できます。 バシバシ移行して、モバイル版の利便性を上げていきましょう。

サンプル

EChartsを使って3D棒グラフを作ろうを例にモバイル版対応してみます。

1. モバイル版のカスタマイズビューを有効にする

モバイル対応させる一覧について、「一覧を表示する範囲」を「PC版とモバイル版で表示する」にします。

2. カスタマイズファイルをコピー&ちょっと変更

「PC用のJavaScriptファイル」を元に「スマートフォン用のJavaScriptファイル」を作成します。

kintone APIは一部、PCとスマートフォンで記述が違うので記述を変更します。 対応表はこちらになります。

・sample-mobile.js

(function() {
  "use strict";
  var getAllRecords = function(records){
    var limit = 500;
    records = records || [];
    return kintone.api(kintone.api.url('/k/v1/records', true), 'GET', {
      app: kintone.mobile.app.getId(), //変更
      query: 'limit ' + limit + ' offset ' + records.length
    }).then(function(response){
      records = records.concat(response.records);
      if(response.records.length === limit){
        return getAllRecords(records);
      }else{
        return records;
      }
    });
  };
  kintone.events.on('mobile.app.record.index.show', function(event){ //変更
    if(event.viewName !== '3Dグラフ') return;
    getAllRecords().then(function(records){
      var dom = document.getElementById("echarts");
      var myChart = echarts.init(dom);
      var months = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
      var offices = ['札幌', '東京', '名古屋', '大阪', '福岡'];
      var data = months.reduce(function(accumulator, month, xIndex){
        return accumulator.concat(offices.map(function(office, yIndex){
          return [xIndex, yIndex, Number((records.find(function(record){
            return record..value == month && record.支社.value == office;
          }) || {売上:{value:0}}).売上.value)];
        }));
      }, []);
      var option = {
        tooltip: {
          formatter: function(param){
            return (
              months[param.data[0]] + '月' +
              '<br>' +
              offices[param.data[1]] + '支社' +
              '<br>' +
              param.data[2] + '円'
            );
          }
        },
        visualMap: {
          max: 100000,
          inRange: {
            color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
          }
        },
        xAxis3D: {
          type: 'category',
          data: months,
          name: '月',
          nameGap: 30
        },
        yAxis3D: {
          type: 'category',
          data: offices,
          name: '支社',
          nameGap: 30
        },
        zAxis3D: {
          type: 'value',
          name: '売上',
          nameGap: 30
        },
        grid3D: {},
        series: [{
          name: '売上',
          type: 'bar3D',
          data: data,
        }]
      };
      myChart.setOption(option, true);
    });
  });
})();

「スマートフォン用のJavaScriptファイル」を登録します。
※「echarts.min.js」と「echarts-gl.min.js」は共通なので先に登録しておきます。

0

0件のコメント

サインインしてコメントを残してください。