レコード詳細画面でパワーポイントファイルをプレビューするサンプルを作成しました.
デモ
レコード詳細画面でパワーポイントファイルをプレビューします.
プレビュー用の画像はレコード保存時に自動作成します. 画像の作成には数秒から数十秒の時間がかかります.
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"; var secret = '*****'; //ConvertAPIの認証用の秘密キー var previewWidth = '500px'; //プレビューの表示サイズ var powerpointField = 'パワーポイント'; //パワーポイントフィールドのフィールドコード var imageTableField = '画像URLテーブル'; //画像URLテーブルフィールドのフィールドコード var imageField = '画像URL'; //画像URLフィールドのフィールドコード var spaceField = 'space'; //スペースの要素ID kintone.events.on([ 'app.record.create.submit.success', 'app.record.edit.submit.success', ], function(event){ var powerpointRecordValue = event.record[powerpointField].value[0]; if(!powerpointRecordValue) return; var client = new KintoneRestAPIClient(); return client.file.downloadFile({ fileKey: powerpointRecordValue.fileKey }).then(function(fileData){ var convertApi = ConvertApi.auth({secret}); var params = convertApi.createParams(); params.add('File', new File([fileData], powerpointRecordValue.name)); return convertApi.convert('pptx', 'png', params); }).then(function(response){ return client.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){ var xhr = new XMLHttpRequest(); xhr.open('GET', row.value[imageField].value); xhr.responseType = 'blob'; var promise = new kintone.Promise(function(resolve){ xhr.addEventListener('load', function(){ resolve(URL.createObjectURL(xhr.response)); }); }); xhr.send(); return promise; }) ).then(function(urls){ var swiperContainer = document.createElement('div'); var swiperWrapper = document.createElement('div'); var swiperButtonPrev = document.createElement('div'); var swiperButtonNext = 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){ var swiperSlide = document.createElement('div'); swiperSlide.classList.add('swiper-slide'); var image = 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); new Swiper('.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)
2件のコメント
タイプミスがあります: 画像URL フィールドは "添付ファイル" ではなく, "リンク" タイプです.
正しい kintoneフォーム設定:
Genjiさん
ご指摘ありがとうございます.
記事修正いたしました.