Mi in progress

研究者の道ではなく、エンジニアになることを決意した人のブログ。

clipboard.jsを使って、ColorImportCatchというWebアプリを作りました

今日は人生初のwebアプリを作りました。

その名もColorImportCatchです!

ColorImportCatch

 

1. 概要

ColorImportCatchは、

・最大10色のパレットを、HEXコードを入力するだけで見ることができる

・パレットをクリックするだけでクリップボードにコピーできる

というツールです。

f:id:mi_progress_oOo:20160710182945p:plain

 

2. 作ろうと思ったきっかけ

ボタンや背景などの色を微調整するとき、

「この前の前に書いてみたHEXコードの色がよかったな...あれ、どの色だっけ??」

「この絶妙な色の違いを比較したいな」

「色をクリックするだけでクリップボードにコピーできればいいのに...」

という思いが沸々と沸き起こりました。

 

実は、色をクリックするだけでクリップボードにコピーできるサイトはあります。

Flat UI Colors 

でも、自分でカスタマイズしたパレットの色をクリップボードにコピーできるサイトはありません。

 

なければ作ればいいじゃない。

 

というわけで作りました。

 

3. 作り方

先日のバイトで、「実装に悩んだ時は、出来そうな部分から作っていけばいい」ことを学びました。今回もこの学びを活かして開発を進めました。「指定した色のパレット表示」と、「そのパレットをクリックするとクリップボードにコピー」を同時に実装するのは難しそうだったので、まずは、

・HEXコードを入力すると、パレットを表示してくれるサイト

・パレットをクリックすると、そのHEXコードをクリップボードにコピーしてくれるサイト

をまずは別々に作ってみました。その後、この2つの機能をうまく合わせられるように微調整を行いました。

 

4. ハックした点

初心者の私が、「ここはちょっと頭使ったな」と思ったコードについてお話します。

(4-1) テキストボックスで入力したHEXコードを、指定場所の背景色にする

テキストボックスの値を取得するやり方は簡単に見つかりました。

[JavaScript] テキストボックスの値を取得する

問題は、この取得した文字をどのように指定場所の背景色の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); });

という感じです。

 

生まれて初めて、構想から実装まで一人でやった記念すべきwebアプリです。

めちゃくちゃ楽しかったです!!!!!!!

もっと高度なアプリが作れるように、これからもプログラミングの勉強頑張ります(`・ω・)b