• line

kintoneでHTMLの操作 画像の表示で視認性の向上

kintone SI

kintoneでHTMLの操作 画像の表示で視認性の向上

kintoneをカスタマイズして、ページの一部を改変することが可能です。
アプリの中に画像を貼り付けてみましょう。

複数のマスタアプリがあるような場合、似たような見た目になることが多いと思います。
アプリを表現する画像を表示することで、誤入力を防ぐことができます。

アプリ画面

スペースフィールドに画像を表示

アプリを開いたときにそのアプリを認識させるための画像を目立つように表示させましょう。
今回は「アプリ1」という画像をスペースフィールドに表示させます。
画像を公開するウェブサーバーは別途ご用意ください。今回は gotop.co.jp を使用しています。

アプリの設定画面

スペースフィールドを配置し、任意のスペースIDを設定します。今回は spc_img としました。
このスペースフィールドに画像を表示するコードを作成し、”レコードの作成・表示イベント”に設定します。
以下にサンプルを提示します。

  const app_img = kintone.app.record.getSpaceElement(‘spc_img’);
  const image = document.createElement(‘img’);
  image.src = ‘https://www.gotop.co.jp/_wp/wp-content/uploads/2021/11/img_app1.jpg’;
  app_img.appendChild(image);

getElementId で取得するよう解説しているページがありますが、getSpaceElement を使用してください。
該当のスペースフィールドに画像が貼り付けられます。

フィールドの変更による変化

アプリ内に画像が表示されました。

アプリ内画像表示の応用

似たようなアプリが複数ある場合の取り違え防止、という観点でアプリ毎にラベル画像を貼る、という想定でサンプルをご提案しました。
応用方法としては、レコードのステータスに応じて異なる画像を出す、設定日と本日を比較して数日以内であれば特定の画像を表示する、といった使用法が浮かびます。

要件に応じて応用法を検討してみてください。


ゴートップではkintoneを活用した業務の効率化のご相談を承っております。
現在の業務に課題を抱えている方は是非ゴートップにお問い合わせください。

詳しくは当社kintoneソリューションサービスのページをご覧ください。


お問い合わせ

  • line

お問い合わせ

お気軽にお電話ください。

0120-98-0016