12月9日のkintoneアップデートで、モバイル版カスタマイズビューが実装されました。 以前ナレッジノートでご紹介したEChartsなど、モバイル対応したJSライブラリを使ったカスタマイズビューであれば、非常に簡単にモバイル版に移行できます。 バシバシ移行して、モバイル版の利便性を上げていきましょう。
サンプル
EChartsを使って3D棒グラフを作ろうを例にモバイル版対応してみます。
1. モバイル版のカスタマイズビューを有効にする
モバイル対応させる一覧について、「一覧を表示する範囲」を「PC版とモバイル版で表示する」にします。
2. カスタマイズファイルをコピー&ちょっと変更
「PC用のJavaScriptファイル」を元に「スマートフォン用のJavaScriptファイル」を作成します。
kintone APIは一部、PCとスマートフォンで記述が違うので記述を変更します。 対応表はこちらになります。
・sample-mobile.js
(function(){"use strict";vargetAllRecords=function(records){varlimit=500;records=records||[];returnkintone.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){returngetAllRecords(records);}else{returnrecords;}});};kintone.events.on('mobile.app.record.index.show',function(event){//変更if(event.viewName!=='3Dグラフ')return;getAllRecords().then(function(records){vardom=document.getElementById("echarts");varmyChart=echarts.init(dom);varmonths=[1,2,3,4,5,6,7,8,9,10,11,12];varoffices=['札幌','東京','名古屋','大阪','福岡'];vardata=months.reduce(function(accumulator,month,xIndex){returnaccumulator.concat(offices.map(function(office,yIndex){return[xIndex,yIndex,Number((records.find(function(record){returnrecord.月.value==month&&record.支社.value==office;})||{売上:{value:0}}).売上.value)];}));},[]);varoption={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」は共通なので先に登録しておきます。