STUDIOでコピーボタンを作ろう！
WRITER
とま
お米と同じくらいトマトを食べてしまう人。
ゲームしながら絵を描いたりしている。
明けましておめでとうございます、とまです。
今年もよろしくお願いいたします。
さて、今回は趣味で触っているSTUDIOについてちょっとしたテクニックを紹介していきたいと思い筆を執りました。
ということで、いきなり本題へ。
STUDIOについて
まず、「STUDIOって何！？」という方はとりあえずこちらからサイトに飛んでみてください。ざっくり言うと、ノーコードでWEBサイトをデザイン・制作・公開できる日本のWeb制作プラットフォームです。もっと噛み砕いて言えば、視覚的にサイトを作ることが出来る大変便利なツールです。
私はこのSTUDIOさんを使って趣味の範囲で自分用のサイトを作ってみたりしています。
ただ、STUDIOさんは視覚情報だけでサイトを作れるというメリットの反面、コードに触ることが出来ないというデメリットも抱えております。コードを触るのは絶対に不可能！というわけではないのですが、コードを調整しようにもちょっと工夫が必要で、色々と調べる羽目になりました…。
今回の記事は、その調べたことをざっくり共有しちゃうよ！という感じの内容です。ゆるく行きます。
ちなみに、STUDIOでコードを触るには課金する必要がありますので、無料会員の方は出来ない手法となっております。予めご了承ください。
コピーボタンの作り方
では早速。
まずはイメージ画像ですが、こんな感じ。
これは簡易的に作ったテキストとコピーボタンの羅列です。
（分かり易いように、一応レイヤーの状態も載せています）
まだ見た目だけ作っただけなので、この時点ではボタンを押しても何の反応もありません。
ここから、「右のコピーボタンを押下することで、左の文字を取得できる」という機能付け足していきます。
1. IDを設定する
まずは各パーツにIDを指定していきます。
画像の例では、テキストパーツを選択して、右のメニューで設定タブを選んでID欄を設定しています。
（入力は小文字英数字しか受け付けていないようです）
これを全パーツに対して行います。
カスタムコードを書く
テキストツールでもなんでも良いので、とりあえずコードを書きます。
が、今回は私が書いたコードをざっくり共有しちゃうので、そのまま使ってもOKです！
ご自分の環境と設定したIDを加味していい感じに改変して使ってください。
<script>
function textCopy(targetId) {
const targetElement = document.getElementById(targetId);
if (!targetElement) return;
const textToCopy = targetElement.value || targetElement.innerText;
navigator.clipboard.writeText(textToCopy).then(function() {
// ポップアップ通知を表示
showToast("コピーしました！ : " + textToCopy);
});
}
// ポップアップ通知自動で消えるようにする
function showToast(message) {
// すでに表示されている通知があれば削除（連打対策）
const oldToast = document.getElementById('copy-toast');
if (oldToast) oldToast.remove();
// 通知用の要素を作成
const toast = document.createElement('div');
toast.id = 'copy-toast';
toast.innerText = message;
// スタイルの設定（ここで見た目を調整）
Object.assign(toast.style, {
position: 'fixed',
bottom: '20px',
left: '50%',
transform: 'translateX(-50%)',
backgroundColor: 'rgba(0, 0, 0, 0.8)',
color: '#fff',
padding: '10px 20px',
borderRadius: '8px',
fontSize: '14px',
zIndex: '9999',
transition: 'opacity 0.5s'
});
document.body.appendChild(toast);
// 2秒後に消える処理
setTimeout(function() {
toast.style.opacity = '0'; // じわっと消す
setTimeout(function() {
if (toast.parentNode) toast.parentNode.removeChild(toast);
}, 500); // アニメーションが終わったら要素を消す
}, 2000); // 2000ミリ秒（2秒）表示
}
// --- ボタンの登録処理 ---
const btnCopy1 = document.getElementById('copybutton1');
if (btnCopy1) btnCopy1.onclick = function() { textCopy("text1"); };
const btnCopy2 = document.getElementById('copybutton2');
if (btnCopy2) btnCopy2.onclick = function() { textCopy("text2"); };
const btnCopy3 = document.getElementById('copybutton3');
if (btnCopy3) btnCopy3.onclick = function() { textCopy("text3"); };
</script>カスタムコードをSTUDIOに設定する
今回はページ単位で設定していきたいと思います。（コピーボタンだしね）
画像の通り、作業領域外をクリックすることで右のメニュー領域にそのページの設定項目が表示されます。
「サイト」タブを選んだら、カスタムコード欄の「<body>内の末尾」というところに、カスタムコードを貼り付けてください。
<head>はページが読み込まれる前に実行される処理を記載するところ、
<body>はページが読み込まれた後に実行される処理を記載するところです。
今回のコピーボタンはページ内部のボタンIDを参照するので、ページが読み込まれた後にコードを実行したいんですよね。なので<body>にコードを記載します。
ボタンの見た目上の動きを設定する
これでボタン自体は動くようになり、テキストはコピーできるようになりました。
コピーできると画面下部にポップアップが2秒ほど表示されて自動で消えるはずです。
ただこのままだとボタンを押した感が無いので、最後にそこだけ調整していきます。
コピーボタンを選択して、右メニューの右上「条件スタイル」から「クリック中」を選択します。
「変形」タブの「変形」欄で画像のように設定します。
これで、クリック中はボタンが5px下にズレるので、押してる感が出ます。
以上でコピーボタンの完成です！🎉
諸事情からコピーボタンを必要としていたので、私と似たような境遇の方にこの情報が届くと良いな！と思っています。カスタムコード設定は本当にややこしかったので…猿にも分かる解説が欲しいんだよ…。
また何か思いついたらSTUDIOの記事を書くかもしれませんが、基本的にSTUDIOのことはStudio Communityを見に行くのがおすすめです！多くの有識者たちがもっとお洒落なボタンの作り方を公開してくれたりしています。大変ありがたい。
ということでこの辺で。
記事を読んでいただきありがとうございましたー！
