スライドショー形式だと拡大縮小する事が出来ないので
スライドショーにせず、添付ファイルにアップロードした画像を
別タブで開き拡大縮小し閲覧できる方法を探しています。
http://qiita.com/YoshihikoTakeuchi/items/fe721a4a6b9654e8d2f3
上記URLを参考に詳細画面にPDFをプレビューをする事ができました。
似たような形でjpgがプレビューするものを作成したいと思っています。
上記URLを参考に下記URLを吐き出して、リンクする事で
スライドショーせず別タブで開く形まではたどり着いたのですが
添付ファイルに複数の画像をアップした場合は最初の画像しか表示されません…。
blob:https://******.cybozu.com/*****************85838949
テーブルを作り１つの添付ファイルにつき１つの画像でもいいのですが
今後の拡張性を考えて、どうにかできればと思っています。
添付ファイルに画像を複数アップロードし
blob:http:から始まるURL形式にし、別タブで開いたりするのは困難でしょうか。
宜しくお願い致します。
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');
});
かき氷さん
早速の回答有難う御座います。
別タブで開く事は実装できました。
ですが、添付ファイルに複数のjpgをアップロードした場合
blob:https://******.cybozu.com/*****************85838949
上記URLの形式にしても最初の画像しか表示されません。
この部分をなんとか解決できればと試行錯誤しているのですが
行き詰まってしまい、難航しています。
もしご存知でしたらお力添えいただけますと幸いです。
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
かき氷様
迅速な回答有難う御座います。
ご指摘いただきました通り仕組みを理解する事ができました。
promiseで読み込みしなおすとなると根本的に作り直す必要がありますね…。
「promise」そのものの存在を知らなかった為、下記URLを参考に作成しておりますがspaceのボタンできずに難航しております。
http://qiita.com/rex0220/items/ba644c916ff2c46fdd48
暫く実装は難しそうですが、試行錯誤してみます。
複数の画像読み込みは、後々付与していこうと思うのですが
下記のソース(ほとんど変えていませんが…)スペースの部分に
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’);
});
});