Bubbleでクリップボードに文章やページURLをコピーする機能を作る方法

ノーコードツール「Bubble」で、ワンクリックでクリップボードに文章や現在閲覧中のページURLをコピーする実装方法を紹介します。

無料プラグイン「Air Copy to clipboard」のアクションを使えば、誰でもすぐ簡単に作れるのでぜひこの記事を見ながら実際に手を動かしてチャレンジしてみてくださいませ!

動画解説バージョンはこちら!

なお、ノーコードBubbleの概要については以下の記事で解説しています。

【公認代理店が解説】ノーコードツールBubbleとは?使い方やデメリット、料金を解説

目次
無料で資料をダウンロード

ノーコード開発お役立ち資料3点セット

計100ページ近い大ボリュームでノーコード開発について解説

  • ノーコード開発会社の選び方
  • EPICsのノーコード受託開発の特徴
  • 支援実績・事例集

    氏名

    法人名

    メールアドレス

    電話番号

    送信ボタンを押すことで、個人情報の取扱いについてに同意したとみなされます

    実装イメージ

    「テキストをコピーする」ボタンを押したら、長文テキストをクリップボードにコピーしたり、「UUIDをコピーする」ボタンを押したら一意の文字列をコピーしたり、「閲覧中のページURLをコピーする」ボタンを押したら現在閲覧中のページURLをクリップボードにコピーする機能が今回の実装イメージです!

    このTipsを応用すれば、たとえばチャットルームで個別メッセージをワンクリックでコピーする実装も可能かと思います。

    Bubbleのクリップボードコピー機能の実装手順

    以下の手順で実装します。

    1. プラグイン「Air Copy to clipboard」をインストール
    2. 「コピーする」ボタンを設置する
    3. コピーする対象にIDを付与する
    4. コピーするボタンをクリックした時のワークフローを設定する

    プラグイン「Air Copy to clipboard」をインストール

    ロゴがイケてる!

    まずは、肝心要のプラグイン「Air Copy to clipboard」をプラグイン追加ページで検索してインストールしましょう。

    「コピーする」ボタンを設置する

    デモのElements Tree
    左記のビジュアル

    次に、コピーしたい対象テキストやコピーするボタンを設置します。

    デモページではコピーしたテキストをすぐにコピペして確認できるよう、MultilineInputエレメントも設置してます。

    コピーする対象にIDを付与する

    ボタンを押したときにクリップボードにコピーさせたい対象のテキストエレメントに、上記のようにてきとうなIDを付与します。

    IDは各エレメントのAppearanceタブの一番下のほうにある「ID Attribute」に入力します。

    コピーするボタンをクリックした時のワークフローを設定する

    最後に、コピーするボタンをクリックした時のワークフローを設定しましょう。

    Plugins > Copy to clipboard from element

    プラグイン「Air Copy to clipboard」のアクションで、Copy to clipboard from elementを選択します。

    Element ID欄に、コピー対象のテキストエレメントに付与したIDを入力します。

    ボタンをクリックしたときにクリップボードに対象エレメントの文章をコピーする機能はこれで実装完了です!

    おまけで、現在開いているページURLをコピーさせたいときは、プラグイン「Air Copy to clipboard」のアクションで、Copy to clipboard from static textを選択します。

    Plugins > Copy to clipboard from static text

    そして、Text to copyにInsert dynamic dataで、「This URL」をセットしてあげれば完成です!

    このアクションに続けてワークフローStep2で「コピーしました!」というアラートメッセージをAlertエレメントとShow messageを使って表示させることもできます。

    【日本最大級のノーコード開発実績】
    無料でアプリ・システム開発の相談を受付中

      氏名

      法人名

      メールアドレス

      日中繋がりやすい電話番号

      お問い合わせ詳細 ※分かる範囲でご記入ください

      フォームの送信によりGoogleのプライバシーポリシー利用規約に同意したものとみなされます。

      日本最大級のノーコード開発実績!アプリ・システム開発サービス
      「勉強になった!」「役に立った!」と思っていただけたら、是非シェアもお願いします!
      ノーコード開発ツールを使ったアプリ・システム開発にお困りですか?
      1からの開発も、途中からの開発も、お気軽にEPICsにご相談ください!
      著者・監修者
      大熊滉希
      日本最大級のノーコード開発実績を誇るEPICs株式会社の代表。株式会社DRAFT役員として新規事業のコンサルティングに従事した後、EPICsを創業。ノーコード開発の顧問として上場企業に支援も行っている。
      監修者
      石森裕也
      EPICs株式会社CTO。サイバーエージェントのグループ会社での経験を経てEPICsに参画した。これまでで100件以上のノーコード開発に従事。開発経験は10年。
      目次