kintoneカスタマイズ。表示した画像にリンクを設定する。

アプリの画面内に配置した画像にリンクを設定する。
画像を配置する。
配置した画像にリンクを設定する。

アプリの画面内に配置した画像にリンクを設定する。

前回kintoneカスタマイズ。任意の位置に画像を表示する。でアプリ内の任意の位置に画像を表示するカスタマイズを例示しました。

今回は配置した画像にリンクを設定してみます。

画像を配置する。

まずは画像を配置します。コードは前回javascriptとCSSを流用します。
画像をリンクにするのでそのための画像を用意しました。

javascript



  const imgPos = document.createElement('img');

  imgPos.id = 'pos_img';

  imgPos.src = 'https://www.gotop.co.jp/_wp/wp-content/uploads/2022/10/img_gotop.png';

  imgPos.className = 'img_position';



  document.getElementById('record-gaia').appendChild(imgPos);

CSS



  position:fixed;

  bottom:20px;

  right:20px;

これでアプリ内右下固定で画像が表示されます。

配置した画像にリンクを設定する。

a要素のオブジェクトを作成し、属性を設定します。
最後にa要素の子要素として作成したimg要素を追加します。



  const anchorTop = document.createElement('a')

  anchorTop.href = 'https://www.gotop.co.jp';

  anchorTop.target = '_blank';



  anchorTop.appendChild(imgPos);

単純にアンカーを追加すると入力中のレコード画面が閉じてしまうので、 anchorTop.target = ‘_blank’; で新しいタブで開くように設定しましょう。

アプリの内容が複雑な時や、ゲストユーザーが複数入ってくるようなアプリから、簡単にオンラインマニュアルを見せるような使い方が考えられます。
ボタンを複数配置したり、リンク先をPDFファイルにすることも可能です。

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

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

さまざまな方や企業の多様なニーズにお応えする「エスコートン」サービスの提供を開始しました。
お悩みに合わせた3つのサービスメニューをご用意しました。