ノーコードツール「Bubble」で、ワンクリックでクリップボードに文章や現在閲覧中のページURLをコピーする実装方法を紹介します。
無料プラグイン「Air Copy to clipboard」のアクションを使えば、誰でもすぐ簡単に作れるのでぜひこの記事を見ながら実際に手を動かしてチャレンジしてみてくださいませ！
動画解説バージョンはこちら！
なお、ノーコードBubbleの概要については以下の記事で解説しています。
【公認代理店が解説】ノーコードツールBubbleとは？使い方やデメリット、料金を解説
また、本メディアを運営する「EPICs株式会社」は、ノーコードを活用したアプリ・システム開発を行っております。大手ノーコードツールであるBubbleからも、公式代理店として認定されています。
従来のスクラッチ開発に比べ、ノーコードツールを活用した開発には以下のメリットがあります。
- 開発期間をおよそ1/3に抑えられる → 検証や新規事業に向いている
- 開発費用をおよそ1/3に抑えられる → 浮いた費用を別の領域に利用できる
- リリース後の改修スピードも早い → PDCAを早く回せる
日本最大級のノーコード開発実績を持つ弊社なら、高度なものもスピーディーに開発することが可能です。ぜひご相談ください。
- 日本最大級のノーコード開発実績 → 高度な開発もスピーディー
- 複数のノーコードツールに対応 → 最適なツール選びで開発費用・期間を最大限抑えられる
- マーケティングまで支援が可能
プロが無料で提案
実装イメージ
「テキストをコピーする」ボタンを押したら、長文テキストをクリップボードにコピーしたり、「UUIDをコピーする」ボタンを押したら一意の文字列をコピーしたり、「閲覧中のページURLをコピーする」ボタンを押したら現在閲覧中のページURLをクリップボードにコピーする機能が今回の実装イメージです！
このTipsを応用すれば、たとえばチャットルームで個別メッセージをワンクリックでコピーする実装も可能かと思います。
Bubbleのクリップボードコピー機能の実装手順
以下の手順で実装します。
- プラグイン「Air Copy to clipboard」をインストール
- 「コピーする」ボタンを設置する
- コピーする対象にIDを付与する
- コピーするボタンをクリックした時のワークフローを設定する
プラグイン「Air Copy to clipboard」をインストール
まずは、肝心要のプラグイン「Air Copy to clipboard」をプラグイン追加ページで検索してインストールしましょう。
「コピーする」ボタンを設置する
次に、コピーしたい対象テキストやコピーするボタンを設置します。
デモページではコピーしたテキストをすぐにコピペして確認できるよう、MultilineInputエレメントも設置してます。
コピーする対象にIDを付与する
ボタンを押したときにクリップボードにコピーさせたい対象のテキストエレメントに、上記のようにてきとうなIDを付与します。
IDは各エレメントのAppearanceタブの一番下のほうにある「ID Attribute」に入力します。
コピーするボタンをクリックした時のワークフローを設定する
最後に、コピーするボタンをクリックした時のワークフローを設定しましょう。
プラグイン「Air Copy to clipboard」のアクションで、Copy to clipboard from elementを選択します。
Element ID欄に、コピー対象のテキストエレメントに付与したIDを入力します。
ボタンをクリックしたときにクリップボードに対象エレメントの文章をコピーする機能はこれで実装完了です！
おまけで、現在開いているページURLをコピーさせたいときは、プラグイン「Air Copy to clipboard」のアクションで、Copy to clipboard from static textを選択します。
そして、Text to copyにInsert dynamic dataで、「This URL」をセットしてあげれば完成です！
このアクションに続けてワークフローStep2で「コピーしました！」というアラートメッセージをAlertエレメントとShow messageを使って表示させることもできます。
