レコード詳細画面でパワーポイントファイルをプレビューするサンプルを作成しました．
デモ
レコード詳細画面でパワーポイントファイルをプレビューします．
プレビュー用の画像はレコード保存時に自動作成します． 画像の作成には数秒から数十秒の時間がかかります．
ConvertAPIの準備
パワーポイントファイルを画像ファイルに変換するために，ConvertAPIを利用しています． まず，ユーザ登録を行います． APIを1500秒まで無料で利用できます． 1ファイルでおよそ数秒から数十秒消費します．
登録後，認証情報ページで「Secret」の値を確認してメモします．
kintoneフォーム設定
コード
JavaScript
下記を順に読み込みます．
- https://unpkg.com/@kintone/rest-api-client@1.1.0/umd/KintoneRestAPIClient.min.js
- https://unpkg.com/convertapi-js/lib/convertapi.js
- https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/js/swiper.min.js
- sample.js
・sample.js
3行目の「ConvertAPIの認証用の秘密キー」は，認証情報ページでメモした値を用います． アプリ閲覧者は秘密キーも閲覧できるので，取り扱いにはご注意ください．
(function(){"use strict";varsecret='\*\*\*\*\*';//ConvertAPIの認証用の秘密キーvarpreviewWidth='500px';//プレビューの表示サイズvarpowerpointField='パワーポイント';//パワーポイントフィールドのフィールドコードvarimageTableField='画像URLテーブル';//画像URLテーブルフィールドのフィールドコードvarimageField='画像URL';//画像URLフィールドのフィールドコードvarspaceField='space';//スペースの要素IDkintone.events.on(['app.record.create.submit.success','app.record.edit.submit.success',],function(event){varpowerpointRecordValue=event.record[powerpointField].value[0];if(!powerpointRecordValue)return;varclient=newKintoneRestAPIClient();returnclient.file.downloadFile({fileKey:powerpointRecordValue.fileKey}).then(function(fileData){varconvertApi=ConvertApi.auth({secret});varparams=convertApi.createParams();params.add('File',newFile([fileData],powerpointRecordValue.name));returnconvertApi.convert('pptx','png',params);}).then(function(response){returnclient.record.updateRecord({app:event.appId,id:event.recordId,record:{[imageTableField]:{value:response.dto.Files.map(function(file){return{value:{[imageField]:{value:file.Url}}};})}}});});});kintone.events.on(['app.record.detail.show',],function(event){kintone.Promise.all(event.record[imageTableField].value.map(function(row){varxhr=newXMLHttpRequest();xhr.open('GET',row.value[imageField].value);xhr.responseType='blob';varpromise=newkintone.Promise(function(resolve){xhr.addEventListener('load',function(){resolve(URL.createObjectURL(xhr.response));});});xhr.send();returnpromise;})).then(function(urls){varswiperContainer=document.createElement('div');varswiperWrapper=document.createElement('div');varswiperButtonPrev=document.createElement('div');varswiperButtonNext=document.createElement('div');swiperContainer.classList.add('swiper-container');swiperWrapper.classList.add('swiper-wrapper');swiperButtonPrev.classList.add('swiper-button-prev');swiperButtonNext.classList.add('swiper-button-next');swiperContainer.style.width=previewWidth;urls.forEach(function(url){varswiperSlide=document.createElement('div');swiperSlide.classList.add('swiper-slide');varimage=document.createElement('img');image.setAttribute('src',url);image.style.width='100%';swiperSlide.appendChild(image);swiperWrapper.appendChild(swiperSlide);});swiperContainer.appendChild(swiperWrapper);swiperContainer.appendChild(swiperButtonPrev);swiperContainer.appendChild(swiperButtonNext);kintone.app.record.getSpaceElement(spaceField).appendChild(swiperContainer);newSwiper('.swiper-container',{navigation:{nextEl:'.swiper-button-next',prevEl:'.swiper-button-prev',}});});});kintone.events.on(['app.record.detail.show','app.record.create.show','app.record.edit.show',],function(event){kintone.app.record.setFieldShown(imageTableField,false);});})();
CSS
下記を読み込みます
※kintoneフォーム設定修正しました．（2021/03/02）