そろそろ React について知っておきたいと思ったのでいろいろな導入方法を見て回ったのですが、古い情報が多くサイトの説明どおりにやっても動かなかったので React とその関連ツールのインストール方法について自分なりにまとめてみることにします。
続きを読む[JS]Reactのインストールと周辺ツール(Babel, Webpack)の導入方法カテゴリー: JavaScript
[JS]画像ファイルアップロード前にプレビューを表示する
HTML 5 で追加された FileReader を利用すると JavaScript からローカルファイルの一部にアクセスすることができるようになります。一般的にはアップロードするファイルを事前にプレビューするなどの用途でよく使われます。
下記サンプルはファイル選択時に画像プレビューを表示するプログラムです。
古いブラウザでは FileReader が利用できないためその場合は何もしない点に注意して下さい。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Preview Demo</title>
<script>
document.addEventListener('DOMContentLoaded', function(){
// アップロードボタン
var fileSelector = '.image-upload';
// プレビュー画像のクラス名
var previewSelector = '.preview';
// プレビューするファイルタイプ
var fileTypes = [
'image/jpeg', 'image/jpg', 'image/png',
'image/gif', 'image/bmp'
];
if( typeof FileReader == 'undefined' ){
return;
}
var reader = new FileReader();
reader.addEventListener('load', function(event) {
preview.setAttribute('src', event.target.result);
});
var fileInputs = document.querySelectorAll(fileSelector);
for(var i = 0; i < fileInputs.length; i++){
var fileInput = fileInputs[i];
var input = fileInput.querySelector('input');
var preview = fileInput.querySelector(previewSelector);
if(!preview) return;
preview.setAttribute('data-fallback-src', preview.getAttribute('src'));
input.addEventListener('change', function(){
if(input.files && input.files[0] && fileTypes.indexOf(input.files[0].type) >= 0) {
reader.readAsDataURL(input.files[0]);
} else {
preview.setAttribute('src', preview.getAttribute('data-fallback-src'));
}
});
}
});
</script>
<style>
.image-upload .preview {
display: block;
width: 100%;
max-width: 100px;
height: auto;
}
</style>
</head>
<body>
<div class="image-upload">
<img class="preview" src="noimage.jpg" alt="Preview">
<input name="image" type="file">
</div>
</body>
</html>
[CSS, jQuery]クリックされたボタンの色を変更したり文字を書き換えたりする
ボタンをクリックした際にクリック済みを表すクラスを付ける場合は jQuery の addClass() や toggleClass() を使用すれば簡単です。
toggleClass() はクリックするごとにつけたり外したり出来ます。
<script>
$(function(){
$('.btn').on('click', function(event){
event.preventDefault();
$(this).toggleClass('active');
});
});
</script>
これでクラス名「btn」を持つ要素をクリックした際、その要素に「active」というクラスが追加されます。
クリック済みの要素の色を変えるだけなら「.btn.active」に対して CSS を書くだけで終わりです。
しかし、クリックしたらボタンの文字を書き換えたい場合、更に一工夫必要です。
javascript を使って書き換えてしまうなら jQuery の html() で変更できます。
data属性を使ってデフォルトの文字「data-text-default」、クリック後の文字「data-text-clicked」を持たせて、ボタンの状態に応じてテキストを書き換えます。
hasClass() を使うとクラス active を持っているかどうかを簡単に確認できます。
<a class="btn" data-text-default="Click" data-text-clicked="Done" href="#">Click</a>
$(function(){
$('.btn').on('click', function(event){
event.preventDefault();
$(this).toggleClass('active');
if($(this).hasClass('active')){
var text = $(this).data('text-clicked');
} else {
var text = $(this).data('text-default');
}
$(this).html(text);
});
});
変更後の文字が単純な場合や、javascript を自由に書き換えられる状態ならこれでも良いのですが、そうでない場合は CSS で切り替えを表現します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"
integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
crossorigin="anonymous"></script>
<style>
.btn
{
display: block;
width: 96px;
height: 32px;
line-height: 32px;
background-color: #3692ff;
color: #fff;
text-align: center;
}
.btn.active {
background-color: #ccc;
}
.btn > span:last-of-type,
.btn.active > span:first-of-type
{
display: none;
}
.btn.active > span:last-of-type {
display: inline;
}
</style>
<script>
$(function(){
$('.btn').on('click', function(event){
event.preventDefault();
$(this).toggleClass('active');
});
});
</script>
</head>
<body>
<a class="btn" href="#">
<span>Click</span>
<span>Done</span>
</a>
</body>
</html>
ボタン要素 <a> 内にある２つの span のうち、最初のものがデフォルトに表示され、2番めがクリック後に表示されます。
必要に応じて <span> 内で <img> などを使っても構いません。
クラス active がつけられると、最初の span が非表示にされ、２番めの span が表示されます。
CSS はやや複雑ですが、Javascript 部分はクラスをつける処理だけあればいいので簡潔に出来ます。