新規投稿
フォローする

添付ファイルに添付した複数の画像を読み込む

スライドショー形式だと拡大縮小する事が出来ないので

スライドショーにせず、添付ファイルにアップロードした画像を

別タブで開き拡大縮小し閲覧できる方法を探しています。

 

http://qiita.com/YoshihikoTakeuchi/items/fe721a4a6b9654e8d2f3

上記URLを参考に詳細画面にPDFをプレビューをする事ができました。

似たような形でjpgがプレビューするものを作成したいと思っています。

 

上記URLを参考に下記URLを吐き出して、リンクする事で

スライドショーせず別タブで開く形まではたどり着いたのですが

添付ファイルに複数の画像をアップした場合は最初の画像しか表示されません…。
 
blob:https://******.cybozu.com/*****************85838949
 
 
テーブルを作り1つの添付ファイルにつき1つの画像でもいいのですが
今後の拡張性を考えて、どうにかできればと思っています。
 
 
添付ファイルに画像を複数アップロードし
blob:http:から始まるURL形式にし、別タブで開いたりするのは困難でしょうか。
 
宜しくお願い致します。
0

6件のコメント

Avatar
カキ氷

Toshiさん

 

「javascript 別タブで開く」とかで検索しても結構ヒットしますよ。

参考URLのコードを元にすると、以下のようにすればいけます。

このwndow.open()で第二引数で'_blank'を指定すると別タブになります。

promise.done(function(pdfData) {
var url = window.URL || window.webkitURL;
var imageUrl = url.createObjectURL(pdfData);
window.open(imageUrl,'_blank');
});
0
Avatar
Toshi

かき氷さん

 

早速の回答有難う御座います。

別タブで開く事は実装できました。

ですが、添付ファイルに複数のjpgをアップロードした場合

blob:https://******.cybozu.com/*****************85838949

上記URLの形式にしても最初の画像しか表示されません。

 

この部分をなんとか解決できればと試行錯誤しているのですが

行き詰まってしまい、難航しています。

 

もしご存知でしたらお力添えいただけますと幸いです。

 

 

0
Avatar
カキ氷

Toshiさん

>最初の画像しか表示されません。

参考記事のコードを見ると、添付ファイルフィールドにある1つ目のファイルしか取得していません。

 

  var space = kintone.app.record.getSpaceElement('space');
 var fileKey = record.file.value[0].fileKey;  ←ココでindex0番目を指定している。
 var fileUrl = '/k/v1/file.json?fileKey=' + fileKey;

 

方法としてはこれを繰り返しで処理する必要があります。

promiseの繰り返しについては以下が参考になりそうです。

https://teratail.com/questions/32412

カキ氷により編集されました
0
Avatar
Toshi

かき氷様

 

迅速な回答有難う御座います。

ご指摘いただきました通り仕組みを理解する事ができました。

promiseで読み込みしなおすとなると根本的に作り直す必要がありますね…。

「promise」そのものの存在を知らなかった為、下記URLを参考に作成しておりますがspaceのボタンできずに難航しております。

http://qiita.com/rex0220/items/ba644c916ff2c46fdd48

暫く実装は難しそうですが、試行錯誤してみます。

 

0
Avatar
Toshi

複数の画像読み込みは、後々付与していこうと思うのですが

下記のソース(ほとんど変えていませんが…)スペースの部分に

blob:https://******.cybozu.com/*****************85838949

とURLが吐き出されるようにはなりました。

 

これをスペースにリンクとして「ボタン」にするにはどのような記述が必要なのでしょうか。

https://cybozudev.zendesk.com/hc/ja/articles/201952870-%E7%AC%AC3%E5%9B%9E-%E3%83%AC%E3%82%B3%E3%83%BC%E3%83%89%E8%A9%B3%E7%B4%B0%E3%81%AB%E3%82%82%E3%83%9C%E3%82%BF%E3%83%B3%E3%82%92%E8%A8%AD%E7%BD%AE%E3%81%97%E3%82%88%E3%81%86-

などを参考にHTMLを付与したりと試したのですが実装する事ができませんでした。

ご教示いただけますと幸いです。

 

(function() {
'use strict';

function getFile(url) {
var df = new $.Deferred();
var xhr = new XMLHttpRequest();

xhr.open('GET', url, true);
xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
xhr.responseType = 'blob';

xhr.onload = function(e) {
if (this.status === 200) {
df.resolve(this.response);
}
};

xhr.send();
return df.promise();
}

kintone.events.on('app.record.detail.show', function(event) {
var record = event.record;

var space = kintone.app.record.getSpaceElement('space');
var fileKey = record.file.value[0].fileKey;
var fileUrl = '/k/v1/file.json?fileKey=' + fileKey;

var promise = getFile(fileUrl);
promise.done(function(pdfData) {
var url = window.URL || window.webkitURL;
var imageUrl = url.createObjectURL(pdfData);
var preview = imageUrl;
$(space).append(preview).css('height', '500');
});
});

0
Avatar
Toshi

自己解決致しました。

結合と記述形式を見直して実装できました。

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