kintoneでHTMLの操作 画像の表示で視認性の向上
kintoneでHTMLの操作 画像の表示で視認性の向上
kintoneをカスタマイズして、ページの一部を改変することが可能です。
アプリの中に画像を貼り付けてみましょう。
複数のマスタアプリがあるような場合、似たような見た目になることが多いと思います。
アプリを表現する画像を表示することで、誤入力を防ぐことができます。
スペースフィールドに画像を表示
アプリを開いたときにそのアプリを認識させるための画像を目立つように表示させましょう。
今回は「アプリ１」という画像をスペースフィールドに表示させます。
画像を公開するウェブサーバーは別途ご用意ください。今回は 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ソリューションサービスのページをご覧ください。
さまざまな方や企業の多様なニーズにお応えする「エスコートン」サービスの提供を開始しました。
お悩みに合わせた3つのサービスメニューをご用意しました。
