一応動的に画像の 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をまとめた表
データインポート時の注意事項
レコード番号をキーにする場合、存在しないレコード番号がファイルのキーの列にあると、ファイルを読み込めません。レコード番号を追加してしまった場合は、読み込み時にチェックを外してキー扱いしないようにして読み込みます。
ルックアップしている項目のあるアプリーションへのインポートでは、ルックアップ先の照合項目を重複不可にしておく必要があります。これを考えた時、一般的なテーブル設計にのっとって、コードを重複不可にしておいて、照合をコードで行うようにエンドユーザに指導する必要がありますね。
重複不可にしていないルックアップデータをインポートしようとすると、ルックアップのコードと参照内容はインポートされませんが、その他の一般項目の内容は正しくインポートされます( インポートする際に警告が表示されますが、そんなに目立つ警告表示では無いので注意が必要です )
なので、トークンを生成して
※ エキスパートモードで表示しています
アーカイブとカテゴリページはこのように簡単に設定できますが、タグページは HTML 設定を直接変更して、以下の『タグページでのみ表示される内容』の記述方法で設定する必要があります
