一応動的に画像の 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をまとめた表