画像URLを使ってフィールドに画像を表示しちゃおう！

公開日：2023-12-09

カスタマイン初㊗️のアドベントカレンダー

Customine Advent Calendar 2023の9日目の記事です。

‍

‍

私がアールスリーに転職して半年が経ちました。(はやい…！)

今回は、この半年で実はこんなことにも使えたのかー！！！と一番驚き感動し、

こういう実は…があるからカスタマインたまらんよなぁ?となった「やること」をご紹介します。笑

‍

本来の使い方

ご紹介するやることは「テーブルデータを表示できる一覧画面を作成する」です！

みなさん、テーブルを一覧画面で表示させたいとき、使っていただいているでしょうか？

‍

◎こんなことができるよ

‍

基本機能の一覧

‍

カスタマインありの一覧

‍

できることカタログの中で動画でも紹介しているので、こちらでも是非ご覧ください★

【できることカタログ】26.テーブルも見える一覧

‍

意外な使い方

では本題。

‍

実はこのやること、テーブルデータを一覧画面で見られるようにするだけでなく、なんとリッチエディターの装飾を保持したままの内容を一覧画面で見られるらしいのです…

みなさん、知ってましたか？！

‍

そもそも、設定するときにテーブルを選択しなくてもいいとかなんとか…

「え？！？！」と驚きましたが、カスタマインのパラメーター見て、確かに！！と納得しました(笑)

‍

一覧に表示するフィールドを選択する画面

‍

今まで必然的にテーブルを選択していたので、選択しない選択肢があるなんて驚きです(ちょっと何言ってるかよく分からなくなってきた)

‍

というわけで、リッチエディターフィールドを追加してみます。

フィールド選択でリッチエディターも追加した

‍

おおおおおおおおおおおおおお！もうこれだけで感動←

‍

でも今回はこれだけじゃ終わりません。

そうです。ココに画像URLを使って、画像を表示させちゃおー！というのが本記事のタイトルです。

‍

需要ある？

‍

まず画像URLとか言ってますが、正式名称はなんでしょう？(分かっていない)

httpから始まって、.pngとか.jpegとか画像の拡張子で終わる奴らの事を言いたいです。

kintoneの公式ヘルプにもちょっと記載があったので、参考にしてみてください。

kintoneヘルプ：kintoneから共有フォルダー内のファイルにアクセスできますか？

‍

なんでURLで表示させたいの？添付ファイルじゃだめ？

ってところについては、出来るだけkintoneのディスク使用量押さえられたらなぁ…と思った時に、URLが取得&表示できたら最高じゃね？と。

‍

そこでちょっと調べました。同じことやりたい人いるのかしら？？

そして…いました！！！(結構昔だけどw)

少し内容違うけど、要件満たせそうじゃないかな～

‍

そして、ExcelとかGoogleスプレッドシートにはImage関数があるので、kintoneでも似たようなことをやりたいのです！！

‍

まずは動きを確認

‍

画像URLを入れると、リッチエディターフィールドに画像が表示されます。

これを一覧で見ると…

こんな感じ！

これをマスターにして、ルックアップで商品選択(画像URLも取得)→数量入力→金額決定→Stripeで決済とか夢広がるわ～?

なんて思っている今日この頃ですww

‍

在庫管理とか？備品申請とか？社員マスタとか？そんなものにも使えそうな予感?

‍

設定方法

‍

リッチエディターに画像を表示するためのやることはたった１つだけ。

やること「フィールドに値をセットする」です。

‍

セットする値はHTMLのimgタグです。

リッチエディターフィールドは、HTMLをセットすることにより装飾した状態で値を入力させることができます?

ですので、今回は<img src=”${画像URL}”>という値をリッチエディターフィールドにセットします。

※フィールドコード：画像URL　というフィールドに画像のURLが入力されます。

‍

そして、やること「テーブルデータを表示できる一覧画面を作成する」を使って、一覧にリッチエディターフィールドの装飾を保持したまま表示させます。

‍

以上、２アクションで終了です(笑)

‍

さいごに

‍

いかがでしたでしょうか？

ディスク使用量を使わずに、画像を表示させる方法の紹介でした！

‍

画像URLが取得できる環境とそうでない環境があると思いますので、万人受けどころか使用できる人は限られてくるとは思いますが、リッチエディターフィールドが一覧でも見られることや、HTMLを使用すると装飾された値をセットすることができるなど、カスタマイズをしていく中で少しでもヒントになりましたら嬉しいです。

‍

残念ながら、HTMLの書き方などは弊社のサポート対象外となりますので、あしからず。

‍

ちなみに、今回使用した画像たちはこちらでGet出来ます?

まだ #おし恋 を知らないそこのあなた！是非一度ご覧くださいませ～?☆

‍

おしごとと恋に革命を！

‍

それでは残り16記事…???

最後までアドベントカレンダー楽しみましょう～?

‍

akaneでした！皆様、良いお年を～～～