一応動的に画像の HTML を組み込む方法は、『kintoneのレコード詳細ページからAmazon商品データを参照するテクニック』に記述されています。ただ、この解説ではスマホは対応していません。ですが、単純にコードから URL を作成して商品画像表示するだけならば、以下のようにすれば簡単に実装できます。
PC 用 JavaScript
// *****************************************
// (function(){実行コード})() は JavaSript
// におけるブロックの実行
// *****************************************
(function() {
"use strict";
kintone.events.on('app.record.detail.show', function(event){
// スペース
var Space_LargeImg = kintone.app.record.getSpaceElement('Large_Image');
// event 内のレコード情報より
var No_Image = event.record.No_Image.value;
// スペースのレイアウト幅を画像が超え無いようにする
var image_css = '<style>.user_image {max-width: 200px; height: auto;}</style>';
// 画像表示
Space_LargeImg.innerHTML = image_css + '<img class="user_image" src="http://winofsql.jp/image/test/' + No_Image + '.png">';
});
})();
フォームの編集で、画像表示用の『スペース』を設置しておきます。これは、PC でのみ有効で、設定できる内容は、JavaScript から参照できる 要素ID のみとなります。なので、ここは英数字で『Large_Image』と定義しています。また、画像が大きいとフォームレイアウトが崩れるので、固定で 200px に設定しています。
スマホ 用 JavaScript
// *****************************************
// (function(){実行コード})() は JavaSript
// におけるブロックの実行
// *****************************************
(function() {
"use strict";
kintone.events.on('mobile.app.record.detail.show', function(event){
// スマホ用ヘッダスペース
var Space_LargeImg = kintone.mobile.app.getHeaderSpaceElement();
// event 内のレコード情報より
var No_Image = event.record.No_Image.value;
// デバイスの最大幅を画像が超え無いようにする
var image_css = '<style>.user_image {max-width: 100%; height: auto;}</style>';
// 画像表示
Space_LargeImg.innerHTML = image_css + '<img class="user_image" src="http://winofsql.jp/image/test/' + No_Image + '.png">';
});
})();
スマホでは、スペース項目は使用できませんが、ヘッダの下を自由に使えるのでそこに画像を表示します。また、最大幅を 100% にする事によって、大きな画像は横幅いっぱいで、スマホの表示幅より小さい画像はそのまま表示されます。最初の一覧で表示される項目は、アプリの設定画面の『レコードタイトル』で選択します
関連する kintone ドキュメント
PC画面で使用できるAPI,スマートフォンのみで利用できるAPI,両方で利用できるAPIをまとめた表
