ノーコードツール「Bubble」でチャット内画像をクリック時にポップアップで拡大表示する方法を紹介します。
実装方法をざっくりいうと、チャット内画像をクリック＝＞ポップアップを表示＝＞ポップアップに画像データをDisplay dataで流し込むです。
今回はおまけでポップアップ内でダウンロードアイコンをクリックしたら画像がダウンロードされる機能もつけましたのでぜひお試しくださいませー！
動画解説バージョンはこちら！
また、本メディアを運営する「EPICs株式会社」は、ノーコードを活用したアプリ・システム開発を行っております。大手ノーコードツールであるBubbleからも、公式代理店として認定されています。
従来のスクラッチ開発に比べ、ノーコードツールを活用した開発には以下のメリットがあります。
- 開発期間をおよそ1/3に抑えられる → 検証や新規事業に向いている
- 開発費用をおよそ1/3に抑えられる → 浮いた費用を別の領域に利用できる
- リリース後の改修スピードも早い → PDCAを早く回せる
日本最大級のノーコード開発実績を持つ弊社なら、高度なものもスピーディーに開発することが可能です。ぜひご相談ください。
- 日本最大級のノーコード開発実績 → 高度な開発もスピーディー
- 複数のノーコードツールに対応 → 最適なツール選びで開発費用・期間を最大限抑えられる
- マーケティングまで支援が可能
プロが無料で提案
実装イメージ
二者間のチャットルームにおいて送信された画像をクリックすると、クリックした画像を拡大表示させたものを内包したポップアップを表示。左上のバツアイコンをクリックもしくはポップアップ外側をクリックしたときにポップアップを閉じます。右下のダウンロードアイコンをクリックしたときにプラグイン「File Downloader」の機能で画像をPCもしくはスマホにダウンロードさせます。
今回の構造（Elements tree）は以下の通り。
主にPopUpエレメント（閉じるアイコン用のGroup、拡大画像表示用のImage、ダウンロードアイコン用のGroup）、RepeatingGroup（チャット相手が送信したメッセージを表示するGroupと自分が送信したメッセージを表示するためのGroup）が必要です。
今回使用するワークフローの完成形は以下です。
Bubbleで画像ポップアップ表示の実装手順
BubbleでLINE風の画像ポップアップ表示を実現するのは以下の手順で実装できます。
※チャットのRepeatingGroupの解説はこの記事の主題ではないので割愛させていただきます。
- Popupエレメントを設置する
- チャット内画像クリック時のワークフローを設定する
Popupエレメントを設置する
まず、画面にPopupエレメントを設置します。ポイントはType of contentをBASICの「image」に設定することです。
Layoutタブでの横幅設定やConditonalタブでのレスポンシブ設定に関しては上の添付画像を参考によしなに調整してくださいませ。
サンプルではデバイス幅が425以下のときはいっぱいに見せたかったのでWidthを90%にしています。逆にデフォルトでは100%とかにするとポップアップが大きすぎてカッコ悪いのでWidthを24%くらいで抑えてます。
チャット内画像クリック時のワークフローを設定する
ポップアップの準備完了したら次はチャット内画像をクリックしたときのワークフローを設定します。
上の添付画像のように、チャット内画像をクリックしたときに、Element ActionsのShowを使ってPopupエレメントを表示させてあげます。
次にStep2で、Element ActionsのDisplay dataを使ってPopupエレメントにチャットの画像データを流し込んであげます。
サンプルのような感じでチャット相手の送信メッセージと自分の送信メッセージを別々のGroupで管理している場合はそれぞれクリックしたときのワークフローを組んでください。
おまけ：ポップアップ内の画像ダウンロード機能
番外編。ポップアップで拡大表示させた画像をワンクリックでダウンロードさせたい方向けのカスタマイズ。
実装には無料のプラグイン「File Downloader」が必要です。
ポップアップ内にIconエレメントでダウンロードアイコンを設置してクリック時のワークフローを以下のように設定します。
「File Downloader」をインストールするとPluginsの中に「Download file」というアクションが追加されるのでそれを使う感じです！
