# URLを画像表示させる方法について

**URL:** <https://community.cybozu.dev/t/topic/540>\
**Category:** kintone 開発相談\
**Created:** [2017 年 9 月 13 日午前 7:10 UTC](https://community.cybozu.dev/t/topic/540 "2017-09-13T07:10:47Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![Legacy\_Account1890](https://avatars.discourse-cdn.com/v4/letter/l/7ba0ec/32.png) [@Legacy\_Account1890](https://community.cybozu.dev/u/Legacy_Account1890)\
**Post date:** [2017 年 9 月 13 日午前 7:10 UTC](https://community.cybozu.dev/t/topic/540/1 "2017-09-13T07:10:47Z")

</div>

文字列（1行）にapiから入ってきた画像のURLを「レコードの詳細を表示する」画面ではURLの表示ではなくサムネイル表示させたいのですが、どうやれば表示できるか教えていただけませんでしょうか。

---

<div class="post-metadata">

**Author:** ![Legacy\_Account1821](https://avatars.discourse-cdn.com/v4/letter/l/d07c76/32.png) [@Legacy\_Account1821](https://community.cybozu.dev/u/Legacy_Account1821)\
**Post date:** [2017 年 9 月 14 日午前 12:51 UTC](https://community.cybozu.dev/t/topic/540/2 "2017-09-14T00:51:57Z")

</div>

ススムさんこんにちは。

[https://developer.cybozu.io/hc/ja/community/posts/115010384026-%E7%94%BB%E5%83%8F%E3%81%AE%E8%A1%A8%E7%A4%BA%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6](https://developer.cybozu.io/hc/ja/community/posts/115010384026-%E7%94%BB%E5%83%8F%E3%81%AE%E8%A1%A8%E7%A4%BA%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6)

の、江田さんの回答が参考になるかと思います。

---

<div class="post-metadata">

**Author:** ![Legacy\_Account1890](https://avatars.discourse-cdn.com/v4/letter/l/7ba0ec/32.png) [@Legacy\_Account1890](https://community.cybozu.dev/u/Legacy_Account1890)\
**Post date:** [2017 年 9 月 14 日午前 2:39 UTC](https://community.cybozu.dev/t/topic/540/3 "2017-09-14T02:39:55Z")

</div>

Shotaro様

&nbsp;お世話になっております。

ススムです。

&nbsp;

江田さんの回答が参考になるとのことでしたが、

ちょっと分からなかったため再度、ご説明させていただきます。

たとえば、APIでフィールド（文字列1行）に以下のURLが入ってきた時に

詳細画面ではURLの表示ではなく画像の表示をしたいのですが。

[http://wws.tv-asahi.co.jp/doraemon/cast/img/doraemon.jpg](http://wws.tv-asahi.co.jp/doraemon/cast/img/doraemon.jpg)

---

<div class="post-metadata">

**Author:** ![Legacy\_Account1821](https://avatars.discourse-cdn.com/v4/letter/l/d07c76/32.png) [@Legacy\_Account1821](https://community.cybozu.dev/u/Legacy_Account1821)\
**Post date:** [2017 年 9 月 14 日午前 3:49 UTC](https://community.cybozu.dev/t/topic/540/4 "2017-09-14T03:49:28Z")

</div>

ススムさん

文字列１行フィールドは、受け取ったURLの文字列を表示させて（必要であれば）

他に設置したスペースフィールドに、画像を表示させる、というのはいかがでしょうか？

---

<div class="post-metadata">

**Author:** ![Legacy\_Account1890](https://avatars.discourse-cdn.com/v4/letter/l/7ba0ec/32.png) [@Legacy\_Account1890](https://community.cybozu.dev/u/Legacy_Account1890)\
**Post date:** [2017 年 9 月 14 日午前 4:22 UTC](https://community.cybozu.dev/t/topic/540/5 "2017-09-14T04:22:54Z")

</div>

**[Shotaro](https://community.cybozu.dev/hc/ja/profiles/619856384-Shotaro-Matsuda)さま**

&nbsp;

\>文字列１行フィールドは、受け取ったURLの文字列を表示させて（必要であれば）

\>他に設置したスペースフィールドに、画像を表示させる、というのはいかがでしょうか？

→この方法はどのように行えばよろしいでしょうか。

※受け取ったURLは毎回必ず画像表示させる必要があります。

---

<div class="post-metadata">

**Author:** ![Legacy\_Account1821](https://avatars.discourse-cdn.com/v4/letter/l/d07c76/32.png) [@Legacy\_Account1821](https://community.cybozu.dev/u/Legacy_Account1821)\
**Post date:** [2017 年 9 月 14 日午前 7:51 UTC](https://community.cybozu.dev/t/topic/540/6 "2017-09-14T07:51:51Z")

</div>

ススムさん

受け取ったURLの値を文字列１行フィールドに入れる処理と一緒に、

上記リンク先のカスタマイズのやり方で、スペースフィールドに画像表示させればいいかと思います。

---

<div class="post-metadata">

**Author:** ![Legacy\_Account1890](https://avatars.discourse-cdn.com/v4/letter/l/7ba0ec/32.png) [@Legacy\_Account1890](https://community.cybozu.dev/u/Legacy_Account1890)\
**Post date:** [2017 年 9 月 14 日午前 8:13 UTC](https://community.cybozu.dev/t/topic/540/7 "2017-09-14T08:13:51Z")

</div>

[Shotaro](https://community.cybozu.dev/hc/ja/profiles/619856384-Shotaro-Matsuda)さま

&nbsp;

色々と教えていただきまして、ありがとうございます。

結局、文字列１行フィールドにURLが入ったらスペースに画像として表示させるようにしました。

ですが、詳細画面で画像を見ると、画像がスペースの枠より大きいとスペースの枠にスクロールがついてしまい、

とても見づらく、勝手に画像が縮小するようにはならないでしょうか。

&nbsp;

ちなみにjavascriptは以下でおこなっています。

&nbsp;

(function () {  
“use strict”;

function displayscratch5(event) {

var record = event[‘record’];

if (record[‘url5’][‘value’] === undefined){return;}  
if (record[‘url5’][‘value’].length == 0){return;}

var scratch5\_image\_Url = record[‘url5’][‘value’];  
scratch5\_image\_Url = scratch5\_image\_Url.replace(‘http://’,‘https://’);  
scratch5\_image\_Url = scratch5\_image\_Url.replace(‘watch?v=’,‘embed/’);

var elscratch5 = document.createElement(‘div’);  
elscratch5.setAttribute(‘id’, ‘dsp\_scratch5’);  
elscratch5.setAttribute(‘name’, ‘dsp\_scratch5’);

var elIframe = document.createElement(‘iframe’);  
elIframe.setAttribute(‘src’, scratch5\_image\_Url);  
elIframe.setAttribute(‘style’, ‘width: 550px; height: 555px’);  
elIframe.setAttribute(‘frameborder’, ‘0’);  
elscratch5.appendChild(elIframe);

var el = kintone.app.record.getSpaceElement(‘scratch5’);  
el.appendChild(elscratch5);

var elParent = el.parentNode;  
elParent.setAttribute(‘style’, ‘width: 550px; height: 555px’);  
}

kintone.events.on(‘app.record.detail.show’, displayscratch5);  
})();

&nbsp;

&nbsp;

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex015/uploads/cybozu/original/1X/d5c841c3c5a6cb66eed514001c1b45147c9e1f4f.png) [@system](https://community.cybozu.dev/u/system)\
**Post date:** [2024 年 9 月 9 日午前 7:25 UTC](https://community.cybozu.dev/t/topic/540/8 "2024-09-09T07:25:30Z")

</div>

クローズされました: 2024 年 9 月 9 日午前 7:25 UTC

このトピックはベストアンサーに選ばれた返信から 3 日が経過したので自動的にクローズされました。新たに返信することはできません。