<JavaScript>クリップボードにコピーするボタン作ってみた
クリップボードにコピーできるものを作ってみた
今回はテキストをクリップボードに書き込むやつを作ってみました。
なんでかって言うと特に深い理由はありません。
やってみたかっただけです。
目次
- 使うフレームワーク
- 実際に作ってみたコード
- 参考資料
1.使うフレームワーク
今回使うフレームワークはこんなものです。
clipboardjs
これを使うことで簡単にクリップボードにコピーするのを容易にする事ができるって感じです。
2.実際に作ってみたコード
2.1 必ずやること
- scriptの呼び出し
以下のコードを使って呼び出します。
<script src="https://cdn.jsdelivr.net/clipboard.js/1.5.3/clipboard.min.js"></script>
これに関しては定型文だと思って使えばいいかなって感じです。
2.2 実験用に作成したhtmlの概要
- 入力するフォームを作る
今回はサンプルとして、入力フォームに入っている文字列をコピーする機能を実装してみます。
ということでまずはフォームを作ります。
コピーするところを1つに指定できないといけないので対象のタグにはid属性を付けます。
<input id="text" type="text">
うーん、そのまんまって感じ。
ひねりもクソもないですね。
- コピーするためのボタンを作る
実際にコピーするためのボタンを作ります。
まずはコードから
<button id="cp" data-clipboard-target="#text">copy</button>
とりあえず1つに定まっててほしいのでidをつけます。
また、clipboardにわたすところのidを属性に記述する必要があるので"data-clipboard-target"にそのidを記述します。(今回だと#text)
2.3 実験用に作成したJSの概要
2.3.1 単純にクリップボードにコピー
まずはコピーしてみます。
単純にコピーするためのコードは下のようになります。
<script type="application/javascript"> var clipboard = new Clipboard('#cp'); clipboard.on('success', function(e) { e.clearSelection(); }); </script>
このコードでは#cpをクリックするとクリップボードにコピーするオブジェクトを作成して、コピーを行います。
実際にコピーが成功すると選択を解除することのできるようにしてあります。
また、実行結果のステータスメッセージが成功のときは選択を解除するようにしておくといいみたいです。
2.3.2 コピーしてフォームを空にする(cutする)
inputタグと、textareaタグについてはフォームの中身を切り取りすることも可能です。
切り取りをするときには以下のようにボタンのコードを修正することで可能になります。
<button id="ct" data-clipboard-action="cut" data-clipboard-target="#text">cut</button>
data-clipboard-action属性にcutを指定することで、切り取りをすることが可能になります。
3.参考資料
<bootstrap>cardを使っていい感じに見えるようにする
(連続してますがbootstrapネタ) (重ねていいますが、ざっくり記述する予定です)
cardを使った見やすくする方法
このエントリを書いた背景
- cardコンポーネントの大まかな使い方をまとめて見れるようにしたい
カスタムするときにどうしたらいいかの参考にしたい
そもそもcardコンポーネントで何ができる
ざっくりいうと見た目を美しくできる
- 属性ごとに情報を分けて表示できる
cardコンポーネントの使い方
基本の使い方
基本的なコードの書き方はこんな感じ
<div class="card"> <div class="card-body"> <div class="card-title"> <h5>card sample</h5> </div> <div class="card-text"> <p>This is a card sample.</p> </div> </div> </div>
複数のカードを並べる
複数のカードを並べるときは個々のカードをcard-groupクラスでくくることでまとめて扱えます。２つのときのサンプルを下の方にかきました。
<div class="card-group"> <div class="card"> <div class="card-body"> <div class="card-title"> <h5>card sample</h5> </div> <div class="card-text"> <p>This is a card sample.</p> </div> </div> </div> <div class="card"> <div class="card-body"> <div class="card-title"> <h5>card sample</h5> </div> <div class="card-text"> <p>This is a card sample.</p> </div> </div> </div> </div>
gorupにすると横の隙間がなく、ビッタリ並んで配置されるんですがgroupの部分をdeckにすると隙間を持って並べられます。
<div class="card-deck"> <div class="card"> <div class="card-body"> <div class="card-title"> <h5>card sample</h5> </div> <div class="card-text"> <p>This is a card sample.</p> </div> </div> </div> <div class="card"> <div class="card-body"> <div class="card-title"> <h5>card sample</h5> </div> <div class="card-text"> <p>This is a card sample.</p> </div> </div> </div> </div>
カード内の見た目を整える
タイトルを強調する
カードのタイトルになる部分を表示する方法としてはcard-headerクラスでヘッダーにする文を囲むとヘッダー表示ができます
<div class="card"> <div class="card-header"> <p>This is card header.</p> </div> <div class="card-body"> <div class="card-title"> <h5>card sample</h5> </div> <div class="card-text"> <p>This is a card sample.</p> </div> </div> </div>
カードの中身を中央寄せにする
カードの中身を全部中央寄せにすることもできます。
<div class="card text-center"> <div class="card-header"> <p>This is text-center.</p> </div> <div class="card-body"> <div class="card-title"> <h5>card sample</h5> </div> <div class="card-text"> <p>This is a card sample.</p> </div> </div> </div>
カードの幅を変える
style属性にwidthを記述してサイズ変更できます。 ここのサンプルは省略
参考資料
<bootstrap>ボタンにまつわるエトセトラ
(特に何書くか決めてないけど書きたいからってのりで書き始めた)
(深夜テンションなので変なところがあってもお許しを)
bootstrapを使うときの備忘録(ちょいちょいこういうエントリが続く気がします)
bootstrapでのボタン
なんでこれ書いてるか
- bootstrapを使うことがあるから
- bootstrap4系の日本語のリファレンス少ないから
//リファレンスと言えるほどの内容はないです
buttonでできるデザイン
about
bootstrapでボタンを整形するときはbuttonタグのclassにbtn,btn-$Button_typeをつけるとできます。
ホバーするとグレーになります。
$Button_typeの名称と背景色は以下の表の通りです。
| $Button_type | 色 |
|---|---|
| primary | 青 |
| secondary | グレー |
| success | 緑 |
| danger | 赤 |
| Warning | 黄 |
| info | 水(黒目) |
| Dark | 黒 |
| link | 白 |
サンプルコード
<button class="btn btn-primary">button sample</button>
実際の画像
このあとのサンプルですべてのボタンの色を順に使っていきます。
aタグ inputタグでの利用
aタグやinputタグでも同じようなボタンを作れます
<a href="#" class="btn btn-secondary">a tag sample</a> <input type="button" class="btn btn-success" value="input tag sample">
outlineの表示
枠線の色を変更して表示することも可能
classをbtn-outline-$Button_typeでアウトラインの表示になります。
<button class="btn btn-outline-danger">button sample</button>
サイズの変更
classにbtn-lgと書くと大型化、btn-smとかくと小型化が可能
<button class="btn btn-warning btn-lg">button sample</button> <button class="btn btn-info">button sample</button> <button class="btn btn-dark btn-sm">button sample</button>
classにbtn-blockをつけるとその要素内で最大の横幅を使ってbuttonを作れます。
<!--画面を2分割したときのそれぞれのフルの横幅にbuttonを生成--> <div class="container"> <div class="row"> <div class="col-md-6"> <button class="btn btn-link btn-block">block sample</button> </div> <div class="col-md-6"> <button class="btn btn-primary btn-block">block sample</button> </div> </div> </div>
ボタンの有効、無効化
ボタンを有効化するときはclassにactive, aria-pressed="true" を記載する必要があります。デフォルトでactiveなのでどうしても明示する必要があるときでもなければ使うことはないと思います。そのかわり、無効化は使うことがある気がします。
<!--有効化--> <button class="btn btn-secondary active" aria-pressed="true">active sample</button> <!--無効化--> <button class="btn btn-secondary" disabled>disable sample</button>
同じボタンのタイプ(secondary)を使っていますが2つめのボタンが無効化されて色が変わっています。
ボタンのグループ化
radioボタンとかの複数から選ぶやつをボタンの見た目にすることも可能です。
そのときは複数のボタンを一つの塊にして表示することが可能です。
<div class="btn-group btn-group-toggle" data-toggle="button"> <label class="btn btn-success active"> <input type="radio" name="option" id="op1" autocomplete="off" ckecked>option1 </label> <label class="btn btn-success"> <input type="radio" name="option" id="op2" autocomplete="off">option2 </label> <label class="btn btn-success"> <input type="radio" name="option" id="op3" autocomplete="off">option3 </label> </div>
参考資料
getbootstrap.com
