新規投稿
フォローする

パワーポイントファイルをプレビュー

レコード詳細画面でパワーポイントファイルをプレビューするサンプルを作成しました.

デモ

レコード詳細画面でパワーポイントファイルをプレビューします.

プレビュー用の画像はレコード保存時に自動作成します. 画像の作成には数秒から数十秒の時間がかかります.

ConvertAPIの準備

パワーポイントファイルを画像ファイルに変換するために,ConvertAPIを利用しています. まず,ユーザ登録を行います. APIを1500秒まで無料で利用できます. 1ファイルでおよそ数秒から数十秒消費します.

登録後,認証情報ページで「Secret」の値を確認してメモします.

kintoneフォーム設定

コード

JavaScript

下記を順に読み込みます.

・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)

1

2件のコメント

Avatar
Genji

タイプミスがあります: 画像URL フィールドは "添付ファイル" ではなく, "リンク" タイプです.

正しい kintoneフォーム設定:

フィールド名 フィールドタイプ フィールドコード (要素ID) 親要素
パワーポイント 添付ファイル パワーポイント  
画像URLテーブル テーブル 画像URLテーブル  
画像URL リンク 画像URL 画像URLテーブル
  スペース space  

 

1
Avatar
江田篤史

Genjiさん

ご指摘ありがとうございます.
記事修正いたしました.

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