# AdaloのImage Pickerでデータベースの画像をデフォルト値で呼び出す方法 **URL:** \ **Category:** Adalo\ **Tags:** バックエンドデータベース\ **Created:** [2022 年 9 月 29 日午後 8:25 UTC](https://www.nocode-faq.com/t/topic/3198 "2022-09-29T20:25:12Z")\ **Posts on this page:** 15\ **Page:** 1
**Author:** ![Toshi\_CraftSoundStud](https://sea2.discourse-cdn.com/flex020/user_avatar/www.nocode-faq.com/toshi_craftsoundstud/32/4733_2.png) [@Toshi\_CraftSoundStud](https://www.nocode-faq.com/u/Toshi_CraftSoundStud)\ **Post date:** [2022 年 9 月 29 日午後 8:25 UTC](https://www.nocode-faq.com/t/topic/3198/1 "2022-09-29T20:25:13Z")
AdaloでImage Pickerを実装して、データベースにある画像を更新しようとしています。 Image Pickerには元からデータベースに入っている画像を表示できないよう仕様に見えますが、ここにデータベース内にある既存画像を表示する方法はあるでしょうか？ 回避策として下の絵の様にImage Pickerの上にImageでデータベースの画像を重ねた表示を作っていますが、あまり直感的ではありません。 ![image](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/9/9b8d8b4791ef6cb1a1d6b5aa96a1f4063ff8e938.png) もう一つの回避策として、Formを使ったデータベース更新を試したのですが、userのデータベースはUpdate項目が選択できるのですが、他のデータベースだとCreateしか出てきません。 これは、Adaloの仕様でしょうか？それともどこかの設定ミスでしょうか？ ![image](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/a/af7717553098daae2757f503d2916b263fcd0cc3.png) ![image](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/e/e16809aae4f63a33030483e920062311bf34bf17.png) 基本的な項目かとは思うのですが、すみませんが、教えて頂けるとありがたいです。 よろしくお願いいたします。 ---
**Author:** ![muku](https://sea2.discourse-cdn.com/flex020/user_avatar/www.nocode-faq.com/muku/32/6603_2.png) [@muku](https://www.nocode-faq.com/u/muku)\ **Post date:** [2022 年 9 月 30 日午前 2:02 UTC](https://www.nocode-faq.com/t/topic/3198/2 "2022-09-30T02:02:32Z")
@Toshi_CraftSoundStud さん > 回避策として下の絵の様にImage Pickerの上にImageでデータベースの画像を重ねた表示を作っていますが、あまり直感的ではありません。 ここなのですが、レイヤーを３つに分けることで表現できます。 1番下：image （データベースに入っている画像） 真ん中：image2（Image Pickerで選択した画像） → if there is no image の際に dont show anythig に設定しておく →Crop image に設定することで image picker のcropできない問題も解消されます！ 1番上：image picker →edit style から opacityを０に設定しておく と何も選択していない状態では、元のDBに入っている画像 画像を選択すると選択した画像が表示されるようになります＾＾ > もう一つの回避策として、Formを使ったデータベース更新を試したのですが、userのデータベースはUpdate項目が選択できるのですが、他のデータベースだとCreateしか出てきません。 Updateできますよ〜 Updateしたいデータを引っ張ってくる必要があるため、 以下の手順が必要です。 ①フォームを配置しているスクリーンの一つ前に、リストなどデータを選択するスクリーンを配置 ②データを選択する動作を作成し、フォームを配置したスクリーンにリンクさせる 上記を設定することで選択したデータのUpdateができるようになります＾＾ ---
**Author:** ![muku](https://sea2.discourse-cdn.com/flex020/user_avatar/www.nocode-faq.com/muku/32/6603_2.png) [@muku](https://www.nocode-faq.com/u/muku)\ **Post date:** [2022 年 9 月 30 日午前 2:43 UTC](https://www.nocode-faq.com/t/topic/3198/3 "2022-09-30T02:43:17Z")
一応画像も添付いたしますので、 参考にされてみてください〜！ > レイヤーを3つに分けて既存データの画像を表示する方法 ①必要な要素を配置する →ここではみやすいようにずらしてますが、 重ねて配置した方がずれないと思いますので、重ねて配置してあげてください。 →image1にはDBの写真が表示されるように設定してあげてください。 ![adalo1](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/3/340c32d7dab436cd00bfd2883d8f4704777ddbc3.png) ②image2にImage pickerで選択した画像が表示されるように また、何も選択していない時は何も表示しないように設定します。 ![adalo2](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/2/27a5f95e8e36a136d1a061ce0415bc1e9e3ad0b7.png) ③image picker が透明になるように設定して完了です！ ![adalo3](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/1/1e4ce194515aeb0fed4cfd05fbe2582fce45fcb6.png) > データベースをUpdateする方法 ①Updateしたいデータを選択するリストを作成し、 フォームを配置しているスクリーンにLINKさせるます。 ![adalo4](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/a/a5dce06910b6185f137f221ba27415fb57e62207.png) ②フォームを配置しているスクリーンのフォームの設定を開くと Update Current DB名 と出るのでここを選択し、Update項目を指定してあげてください！ ![adalo5](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/f/f53ea1fd2557f6b6d748d52c77f34b37bd6c849d.png) ---
**Author:** ![Toshi\_CraftSoundStud](https://sea2.discourse-cdn.com/flex020/user_avatar/www.nocode-faq.com/toshi_craftsoundstud/32/4733_2.png) [@Toshi\_CraftSoundStud](https://www.nocode-faq.com/u/Toshi_CraftSoundStud)\ **Post date:** [2022 年 9 月 30 日午前 10:01 UTC](https://www.nocode-faq.com/t/topic/3198/4 "2022-09-30T10:01:12Z")
mukuさん、 早速ありがとうございます！ サンプル画像む付けて頂き感謝いたします！ ①3層に重ねるのは、全く考えもしなかったです。 試してみて、無事できました！ ②間にスクリーンを1枚挟むのですね。 確かに、UPDATEの時にどのレコードを更新したいのか特定が必要ですものね。 こちらも試してみます。 ご丁寧に色々ありがとうございました！ また躓いたら質問させてください🙇‍♂️ ---
**Author:** ![muku](https://sea2.discourse-cdn.com/flex020/user_avatar/www.nocode-faq.com/muku/32/6603_2.png) [@muku](https://www.nocode-faq.com/u/muku)\ **Post date:** [2022 年 9 月 30 日午前 11:34 UTC](https://www.nocode-faq.com/t/topic/3198/5 "2022-09-30T11:34:19Z")
設定できたみたいでよかったです＾＾ また何かあれば質問お待ちしてます＾＾ ---
**Author:** ![kinari](https://sea2.discourse-cdn.com/flex020/user_avatar/www.nocode-faq.com/kinari/32/6625_2.png) [@kinari](https://www.nocode-faq.com/u/kinari)\ **Post date:** [2022 年 10 月 1 日午前 1:51 UTC](https://www.nocode-faq.com/t/topic/3198/6 "2022-10-01T01:51:01Z")
> [@Toshi\_CraftSoundStud](#): > > もう一つの回避策として、Formを使ったデータベース更新を試したのですが、userのデータベースはUpdate項目が選択できるのですが、他のデータベースだとCreateしか出てきません。 > これは、Adaloの仕様でしょうか？それともどこかの設定ミスでしょうか？ User以外のテーブルについても正しくリンクアクションの設定がされていれば、Updateかけられますよ！ ---
**Author:** ![Toshi\_CraftSoundStud](https://sea2.discourse-cdn.com/flex020/user_avatar/www.nocode-faq.com/toshi_craftsoundstud/32/4733_2.png) [@Toshi\_CraftSoundStud](https://www.nocode-faq.com/u/Toshi_CraftSoundStud)\ **Post date:** [2022 年 10 月 1 日午前 4:37 UTC](https://www.nocode-faq.com/t/topic/3198/7 "2022-10-01T04:37:48Z")
kinariさん、 ありがとうございます。 正しいリンクアクションというのは、mukuさんがおっしゃっている事と同じでしょうか？ ---
**Author:** ![kinari](https://sea2.discourse-cdn.com/flex020/user_avatar/www.nocode-faq.com/kinari/32/6625_2.png) [@kinari](https://www.nocode-faq.com/u/kinari)\ **Post date:** [2022 年 10 月 1 日午前 4:50 UTC](https://www.nocode-faq.com/t/topic/3198/8 "2022-10-01T04:50:13Z")
そうですね！もうすでに言及されてましたね💦失礼しました！ ---
**Author:** ![Toshi\_CraftSoundStud](https://sea2.discourse-cdn.com/flex020/user_avatar/www.nocode-faq.com/toshi_craftsoundstud/32/4733_2.png) [@Toshi\_CraftSoundStud](https://www.nocode-faq.com/u/Toshi_CraftSoundStud)\ **Post date:** [2022 年 10 月 1 日午前 4:52 UTC](https://www.nocode-faq.com/t/topic/3198/9 "2022-10-01T04:52:31Z")
kinariさん、 気にかけて頂き、ありがとうございます。 頑張りまっす💪😊 ---
**Author:** ![Toshi\_CraftSoundStud](https://sea2.discourse-cdn.com/flex020/user_avatar/www.nocode-faq.com/toshi_craftsoundstud/32/4733_2.png) [@Toshi\_CraftSoundStud](https://www.nocode-faq.com/u/Toshi_CraftSoundStud)\ **Post date:** [2022 年 10 月 2 日午後 8:40 UTC](https://www.nocode-faq.com/t/topic/3198/10 "2022-10-02T20:40:20Z")
image pickerにデータベースの画像を表示する方法で、DBの画像に比べて、image pickerで掴んだ画像が小さい場合、後ろにDBの画像が見えてしまう事を防げないかでつまずいております。 ![Artist_DB+picker](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/7/789d035d97cc574892174058ca53f02d2c71a6d4.png) 少し見づらいですが、手前がimage pickerに入れた写真（正方形）、後ろがDBにある写真（長方形）。 写真の見映え上の問題でimage cropingはDon’t Cropを使っております。 対策した手段はいくつかありますが、どれも思うように動いていません。 対策① 中間層のimage pickerの写真を表示するimageにバックグラウンドを付けて、image pickerが空でない時のみ表示する様にVisibleを変更。 ![Artist_ImagePickerSometime](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/5/5a8857825a9df58d6ab60f2ebf3b06c8c6268982.png) 結果：Previewでimage pickerが空の時に下に配置された要素が画像エリアに侵食してしまう。 ![Artist_ImagePickerSometimePreview](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/f/fc0c576546ec3737511fc79cdbe9e3bb0d888738.png) 対策② 中間層のimage pickerの写真を表示するimageのバックグラウンドを無しに戻して、その後ろにRectangleを挟み、image pickerが空でない時のみ表示する様にVisibleを設定。 ![Rectangle付Develop_pickerあり](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/7/77e1e00cf77fab5d76d4eddee91332c7819b4852.png) 写真の「Rectangle17」その役割を担っています。 結果：対策①と同じ ![Rectangle付Preview](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/6/62c1084bd8501e7c93b42f22b049d2e4059d4fd5.png) image pickerに画像が入れば問題なく表示されます（Rectangleの色は実験用にグレーに設定） ![Rectangle付Preview_pickerあり](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/b/bd946faec3d4ce756d134e5614ec06fe8bbf6e6a.png) 何か良い方法があれば教えてください。 よろしくお願いします。🙏 ---
**Author:** ![muku](https://sea2.discourse-cdn.com/flex020/user_avatar/www.nocode-faq.com/muku/32/6603_2.png) [@muku](https://www.nocode-faq.com/u/muku)\ **Post date:** [2022 年 10 月 3 日午前 3:06 UTC](https://www.nocode-faq.com/t/topic/3198/11 "2022-10-03T03:06:58Z")
@Toshi_CraftSoundStud さん その場合は、 2階層目のイメージの背景色をスクリーンと同じ色に設定してあげてください＾＾ （前の回答でいうimage2に当たるものです） ![Adalo](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/5/55e4987ddba1b1e347dd63420c0017302f2bb5cd.png) そうするとこんな感じで表示されます〜 ![Adalo２](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/a/a87270ebf4fa8015c39b0ca9afd48ba958d0d150.png) ---
**Author:** ![Toshi\_CraftSoundStud](https://sea2.discourse-cdn.com/flex020/user_avatar/www.nocode-faq.com/toshi_craftsoundstud/32/4733_2.png) [@Toshi\_CraftSoundStud](https://www.nocode-faq.com/u/Toshi_CraftSoundStud)\ **Post date:** [2022 年 10 月 3 日午前 9:24 UTC](https://www.nocode-faq.com/t/topic/3198/12 "2022-10-03T09:24:43Z")
mukuさん、 今回もsuper quickな返信ありがとうございます！ 早速試してみました。 ところが、DBの画像を入れ替えた状態で、もう一度同じ画面に入ると、中間層に入れたBackgroundがDBの画像を隠してしまうようです。 ![image](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/0/03bc7f3c121493aacd0c74d0ea406181286f97d0.png) if there’s no image…で Don’t show anuthing を選択しているのですが、backgroundは表示してしまうという事でしょうか？ 何度もすみません。 よろしくお願いします🙏 ---
**Author:** ![muku](https://sea2.discourse-cdn.com/flex020/user_avatar/www.nocode-faq.com/muku/32/6603_2.png) [@muku](https://www.nocode-faq.com/u/muku)\ **Post date:** [2022 年 10 月 4 日午前 2:18 UTC](https://www.nocode-faq.com/t/topic/3198/13 "2022-10-04T02:18:34Z")
とんでもないです！ おや… ごめんなさい私の確認漏れですね… Back Groundは表示されてしまうみたいですね＞＜ こうなってくると、 2つのImageの大きさを正方形など考えうる画像のサイズに最初から合わせてイレギュラーが生まれないようにするというような対処療法しか思いまたりません…申し訳ありません… ---
**Author:** ![Toshi\_CraftSoundStud](https://sea2.discourse-cdn.com/flex020/user_avatar/www.nocode-faq.com/toshi_craftsoundstud/32/4733_2.png) [@Toshi\_CraftSoundStud](https://www.nocode-faq.com/u/Toshi_CraftSoundStud)\ **Post date:** [2022 年 10 月 4 日午前 10:50 UTC](https://www.nocode-faq.com/t/topic/3198/14 "2022-10-04T10:50:41Z")
mukuさん、 今回も早々にご返信頂いてありがとうございます！ やはり諦められず(笑)、色々と試してみましたところ、対策が見つかりましたので共有します。 最初に3層構造を試したコメントで記述した"sometime visible"を使う方法ですが、これを効かせる層と内容を変更しました。 上記では、中間層に仕掛けをして、最下層のDBから引っ張ってきた写真を隠す手法を試しましたが、ここでsometime visibleを使うとcropされたときにレイアウトが崩れるという問題が起きました。 今回は、DBから引っ張ってきた最下層のimageにsometime visibleを適用する方法を試しました。 前回は「image pickerが空じゃなくなったら最下層の写真を隠す」という方法を使いましたが、 今回は「image pickerが空の時だけDBの写真を表示する」と変更しました。 ![image](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/8/88b844c5b47dd1c496bf9dc2bf258ef71901ccd7.png) 前回と今回でレイアウト崩れに差が出る理由が分かりませんが、とりあえずこれで何回かページを行き来しても動いているので大丈夫そうです。 ---
**Author:** ![muku](https://sea2.discourse-cdn.com/flex020/user_avatar/www.nocode-faq.com/muku/32/6603_2.png) [@muku](https://www.nocode-faq.com/u/muku)\ **Post date:** [2022 年 10 月 5 日午前 2:58 UTC](https://www.nocode-faq.com/t/topic/3198/15 "2022-10-05T02:58:54Z")
おお〜 設定ができたみたいで何よりです＾＾ 共有ありがとうございます！ また一つ勉強になりました✨