clipboard.jsを使って、ColorImportCatchというWebアプリを作りました
今日は人生初のwebアプリを作りました。
その名もColorImportCatchです！
1. 概要
ColorImportCatchは、
・最大10色のパレットを、HEXコードを入力するだけで見ることができる
・パレットをクリックするだけでクリップボードにコピーできる
というツールです。
2. 作ろうと思ったきっかけ
ボタンや背景などの色を微調整するとき、
「この前の前に書いてみたHEXコードの色がよかったな...あれ、どの色だっけ？？」
「この絶妙な色の違いを比較したいな」
「色をクリックするだけでクリップボードにコピーできればいいのに...」
という思いが沸々と沸き起こりました。
実は、色をクリックするだけでクリップボードにコピーできるサイトはあります。
でも、自分でカスタマイズしたパレットの色をクリップボードにコピーできるサイトはありません。
なければ作ればいいじゃない。
というわけで作りました。
3. 作り方
先日のバイトで、「実装に悩んだ時は、出来そうな部分から作っていけばいい」ことを学びました。今回もこの学びを活かして開発を進めました。「指定した色のパレット表示」と、「そのパレットをクリックするとクリップボードにコピー」を同時に実装するのは難しそうだったので、まずは、
・HEXコードを入力すると、パレットを表示してくれるサイト
・パレットをクリックすると、そのHEXコードをクリップボードにコピーしてくれるサイト
をまずは別々に作ってみました。その後、この2つの機能をうまく合わせられるように微調整を行いました。
4. ハックした点
初心者の私が、「ここはちょっと頭使ったな」と思ったコードについてお話します。
(4-1) テキストボックスで入力したHEXコードを、指定場所の背景色にする
テキストボックスの値を取得するやり方は簡単に見つかりました。
問題は、この取得した文字をどのように指定場所の背景色のHEXコードにすればいいのか？ということです。取得した文字は、テキストボックスへの入力の度に変化する変数です。style属性で、background-color: AAA; (AAAは定義した定数)という書き方はできないし...どうすればいいのかな？としばらく悩みました。結論から言うと、全部javascriptで書きました。そのコードを以下に示します。
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>ColorInport</title>
<style>
.btn {
text-align: center;
width: 200px;
height: 400px;
display: table-cell;
vertical-align: middle;
}
</style>
</head>
<body>
<form name="form1" id="id_form1" aciton="">
<input name="textBox1" id="id_textBox1" type="text" value="">
<input type="button" value="Exec" onclick="onButtonClick();">
</form>
<div id="output" class="btn"></div>
<script type="text/javascript">
function onButtonClick() {
target = document.getElementById("output")
target.innerText = document.forms.id_form1.id_textBox1.value;
var color = target.innerText;
target.style.backgroundColor = color;
target.style.color = 'white';
}
</script>
</body>
</html>
ポイントは、テキストボックスから取得した文字列を、変数colorで定義したことと、target.style.backgroundColor = color;で、taget(もとのもとを辿れば、id="output"で定義された場所のことです)の背景の色を変数colorにせよ、というコードにしたことです。これで無事、目的が達成されました。
(4-2) クリップボードにコピーを実装する
クリップボードにコピーを実装できるとても便利なプラグインを発見しました。
clipboard.js — Copy to clipboard without Flash
こちらのZIPファイルをDLして、デモのhtmlファイル(ルートディレクトリからのパス: clipboard.js-master/demo/target-input.html)を参考にしながら実装を行いました。
ここからがハックなのですが、パレットをクリックするとその色がクリップボードにコピーされるように見えるものの、実際にコピーしているのはテキストボックスの中身です。target-input.htmlでは、ボタンを押すとテキストボックスの中身がコピーされる仕組みなのですが、ボタンをパレットに置き換えてコーディングしてみました。
具体的には以下のとおりです(index.htmlは一部だけ掲載しています)。
index.html
<div class="form-float">
<form name="form1" id="id_form1" aciton="">
<input name="textBox1" id="id_textBox1" type="text" value="" class="textBox_style">
<input type="button" onclick="onButtonClick1();" class="btn-style">
</form>
<div id="output1" class="btn" data-clipboard-action="copy" data-clipboard-target="#id_form1"></div>
</div>
catch.js
var clipboard = new Clipboard('.btn');
clipboard.on('success', function(e) { console.log(e); });
clipboard.on('error', function(e) { console.log(e); });
clipboard.on('success', function(e) { console.log(e); });
clipboard.on('error', function(e) { console.log(e); });
という感じです。
生まれて初めて、構想から実装まで一人でやった記念すべきwebアプリです。
めちゃくちゃ楽しかったです！！！！！！！
もっと高度なアプリが作れるように、これからもプログラミングの勉強頑張ります(｀・ω・)b
