SQLの窓

2016年05月18日


kintone で画像を表示する / PC と スマホで少し違います。PC ではスペース項目、スマホでは、スマホ用ヘッダスペースを使用します



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





posted by lightbox at 2016-05-18 14:34 | kintone | このブログの読者になる | 更新情報をチェックする
container 終わり

フリーフォントで簡単ロゴ作成
フリーフォントでボタン素材作成
フリーフォントで吹き出し画像作成
フリーフォントではんこ画像作成
ほぼ自由に利用できるフリーフォント
フリーフォントの書体見本とサンプル
画像を大きく見る為のウインドウを開くボタンの作成

CSS ドロップシャドウの参考デモ
BUTTONS (CSS でボタン)
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり