JavaScriptプログラムに関する各種メモ書き:タグ「HTML5」での検索

クリックでクリップボードにコピーするボタンを作るjQueryプラグイン【clipboard.js】

● clipboard.js

https://zenorocha.github.io/clipboard.js/

このclipboard.jsは Flashを使用しません。 そのかわり Safari には未対応となっています。

● 使い方

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.5.5/clipboard.min.js"></script>
<script>
$(function () {
var clipboard = new Clipboard('.clip_copy_btn');
});
</script>
<input type="text" id="clip_copy_1" value="XXXXX">
<button class="clip_copy_btn" data-clipboard-target="#clip_copy_1" >クリップボードにコピーする</button>

です。

No.1000
01/26 21:27

edit

フォーム
jQuery
HTML5

ドラッグ&ドロップで複数ファイルアップロード + 進捗(プログレスバー)表示する Dropzone.js

● Dropzone.jsを使ってドラッグ&ドロップアップロード + 進捗バー

ファイルアップロードシステムを作るには Dropzone が簡単で便利です。 以下の様な特徴があります。

・jQueryを必要としない。(共存可能です。以下の例ではjQueryと併用します。)
・ドラッグ&ドロップでファイルアップロードが行える
・非同期でファイルアップロードが行える
・ファイルアップロード中の進捗バーを表示することが出来る

使い方は簡単です。

1. ファイルのダウンロード と用意

必要なファイルは

dropzone.js (ダウンロード)
dropzone_config.js (自分で作成)
dropzone_upload.php (自分で作成)
dropzone.css (自分で作成)

です。

・ dropzone.js

https://raw.githubusercontent.com/enyo/dropzone/master/dist/dropzone.js ( .jsファイル)
からダウンロードして保存します。

・ dropzone_config.js

dropzone_config.jsは以下のように作成しておきます (※要追加) のところは適宜追加すること。

$(document).ready(function() {
$('#image_drop_area').dropzone({
	url                          : './js/dropzone_upload.php',
	paramName                    : 'file',
	maxFilesize                  : 999 , //MB
	addRemoveLinks               : true ,
	previewsContainer            : '#preview_area' ,
	thumbnailWidth               : 50 , //px
	thumbnailHeight              : 50 , //px
	dictRemoveFile               :'[×]' ,
	dictCancelUpload             :'キャンセル' ,
	dictCancelUploadConfirmation : 'アップロードをキャンセルします。よろしいですか?' ,
		uploadprogress:function(file, progress, size){
		file.previewElement.querySelector("[data-dz-uploadprogress]").style.width = "" + progress + "%";
	},
	success:function(file, rt, xml){
		// それぞれのファイルアップロードが完了した時の処理(※要追加)
		file.previewElement.classList.add("dz-success");
		 $(file.previewElement).find('.dz-success-mark').show();
	},
	processing: function(){
		// ファイルアップロード中の処理(※要追加)
	} ,
	queuecomplete: function(){
		// 全てのファイルアップロードが完了した時の処理(※要追加)
	} ,
	dragover: function( arg ){
		$('#' + arg.srcElement.id).addClass('dragover');
	} ,
	dragleave: function( arg ){
		$('#' + arg.srcElement.id).removeClass('dragover');
	} ,
	drop: function( arg ){
		$('#' + arg.srcElement.id).removeClass('dragover');
	} ,
	error:function(file, _error_msg){
		var ref;
		(ref = file.previewElement) != null ? ref.parentNode.removeChild(file.previewElement) : void 0;
	},
	removedfile:function(file){
		delete_hidden('dropzone_files[]',file.xhr.response);
		var ref;
		(ref = file.previewElement) != null ? ref.parentNode.removeChild(file.previewElement) : void 0;
	} ,
	canceled:function(arg){
	} ,
	previewTemplate : "\
	<div class=\"dz-preview dz-file-preview\">\n\
	  <div class=\"dz-details\">\n\
	    <div class=\"clearfix\">\n\
	      <img class=\"dz-thumbnail\" data-dz-thumbnail>\n\
	      <div class=\"dz-success-mark\" style=\"display:none;\"><i class=\"fa fa-2x fa-check-circle\"></i></div>\n\
	    </div>\n\
	    <div class=\"dz-progress\"><span class=\"dz-upload\" data-dz-uploadprogress></span></div>\n\
	    <div>\n\
	      <div class=\"dz-filename\"><span data-dz-name></span></div>\n\
	      <div class=\"dz-my-separator\"> / </div>\n\
	      <div class=\"dz-size\" data-dz-size></div>\n\
	      <div class=\"dz-error-message\"><span data-dz-errormessage></span></div>\n\
	    </div>\n\
	  </div>\n\
	</div>\n\
	"
});
});

・ dropzone_upload.php

dropzone_upload.phpは以下のように作成しておきます

<?php
$ds = DIRECTORY_SEPARATOR;
$store_folder = dirname(__FILE__) . $ds . '..' . $ds . 'data' . $ds . 'tmp' . $ds;
// echo $store_folder;
if (!empty($_FILES)) {
	$temp_file = $_FILES['file']['tmp_name'];
	$ext = get_ext($_FILES['file']['name']);	// ファイル名から拡張子を取得
	$target_file = basename($_FILES['file']['tmp_name'].$ext);
	$ja_file     = $_FILES['file']['name'];
	$target_file_fullpath =  $store_folder . $target_file;
	umask(0);									// 権限(パーミッション)を厳格にしたい時はこちらを変更
	move_uploaded_file($temp_file, $target_file_fullpath);
	echo "{$target_file}\t{$ja_file}";		// 英語ファイル名[TAB]日本語ファイル名 を返す
}

//========== _get_ext mime-typeを調べて拡張子を返す
function get_ext($file_name){
	$p = pathinfo($file_name);
	if ( isset($p['extension']) ){
		return '.'.$p['extension'];
	}
	else{
		return '';
	}
}

・ dropzone.css

dropzone.cssは以下のように作成しておきます

#image_drop_area {
	text-align: center;
	padding: 20px 0;
	height: 70px;
	width: 100%;
	color: #666;
	background-color: #f9f9f9;
	border: 4px dotted #bbb;
}
.dragover {
	color: #111               !important;
	background-color: #f1f1f1 !important;
	border: 4px dotted #777   !important;
}
.dz-preview {
	margin: 5px 0;
	padding: 10px;
	float: left;
	background-color: #F5F5F5;
	border-radius: 5px;
}
.dz-details {
	padding: 0;
}
.dz-filename , .dz-size, .dz-my-separator , .dz-remove {
	font: 11px "Lucida Grande", Lucida, Verdana, sans-serif;
}
.dz-filename , .dz-my-separator, .dz-size , .dz-error-message {
	float: left;
}
.dz-my-separator {
	width: 20px;
	text-align: center;
}
.dz-size {
	margin-top: 1px;
}
.dz-progress {
	width: 500px;
}
.dz-progress .dz-upload {
	display: block;
	border: 5px solid #1E9BFF;
	border-radius: 2px;
}
.dz-remove {
	float: left;
	margin-left: 5px;
}
.dz-thumbnail {
	margin-bottom: 3px;
}
.fa-check-circle:before {
	color: #93C54B;
}
.dz-thumbnail , .dz-success-mark {
	display: block;
	float: left;
}
.dz-success-mark {
	height: 25px;
	margin-left: 5px;
}

2. htmlファイルからdropzoneを読み込み

(formタグのactionは dropzone_upload.phpである必要はありません。通常のフォーム送信CGIでOKです。)

<html>
<head>
<meta charset="UTF-8">
<title>dropzone test</title>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="dropzone.js"></script>
<script src="dropzone_config.js"></script>
<link href="dropzone.css" type="text/css" rel="stylesheet" />
</head>
<body>
<form action="XXXXXX.XXX">
    <div id="image_drop_area" >ここにアップロードファイルをドロップ</div>
    <div id="preview_area" class="dropzone-custom"></div>
</form>
</body>
</html>

以上です。

No.982
02/04 16:14

edit

HTML5
フォーム
jQuery
Ajax
画像

入力途中のフォーム内容を保存して自動的に復元する 『Sisyphus.js』

『Sisyphus.js』はフォームへの入力途中に「戻るボタン」を押して画面遷移した場合や「リロード」ボタンを押した時に自動的に値をローカルDBに保存して復元してくれるjQueryプラグインです。

HTML5のローカルDBを使用しますので Windows IE は 8以上が必要です。 それ以外のモダンブラウザは全て問題なく動作します。

■ Sisyphus.js

http://sisyphus-js.herokuapp.com/

■ 使い方( input type="hidden" 以外の全てのフォームを自動で記憶する。)

<form id="FM">
</form>
$(function(){
	$( "#FM" ).sisyphus( {
		locationBased: false,
		excludeFields: $('input[type="hidden"]'),
		autoRelease: false
	} );
});
No.974
09/09 15:00

edit

フォーム
jQuery
HTML5

フォームのプレースホルダーをjQueryで再現する

HTML5のプレースホルダー(placeholder : 入力例)はブラウザによって挙動が違うためイマイチ使い勝手がよくありません。
そこでjQueryで同様のことを実現します。
さらに、フォーカス時に入力例が消えて、フォーカスが外れると入力例が再び表示される仕様にします。

■ 動作デモはこちら

HTML

<div style="position:relative;" >
<input type="text" class="placeholder_check">
<span class="placeholder">http://</span>
</div>

JS

$(function(){
$(".placeholder_check").each(function(){
if( $(this).val() ){
  $(this).next(".placeholder").hide();    
}
});
$(".placeholder_check").focus(function(){
  $(this).next(".placeholder").hide();
});
$(".placeholder").click(function(){
  $(this).prev(".placeholder_check").focus();
});
$(".placeholder_check").blur(function(){
  if($(this).val() == "") {
    $(this).next(".placeholder").show();
  }
});
});

CSS

.placeholder {
	display: block;
	white-space:pre;
	position: absolute;
	top: 9px;
	left: 30px;
	color: #bbb;
}

参考 : http://hack.aipo.com/?p=3005

添付ファイル1
No.964
07/23 09:54

edit

添付ファイル

jQuery
フォーム
HTML5

JavaScript(jQuery)でギターのタブ譜を表示する

JavaScript(jQuery)でギターのタブ譜を表示するライブラリ。以下のようなものがありました

vexflow

http://www.vexflow.com

gregjopa/HTML5-Guitar-Tab-Player

https://github.com/gregjopa/HTML5-Guitar-Tab-Player
タブ譜と五線譜が両方表示されます。
再生ボタンを押して演奏することもできます。

HTML5 Guitar Tab Player

http://www.codeproject.com/Articles/834206/HTML-Guitar-Tab-Player
旋律用ギタータブ譜。再生ボタンを押して演奏することもできます。

acspike/ChordJS

https://github.com/acspike/ChordJS
ギターコードの指板画像を表示する。

No.945
09/14 00:43

edit

jQuery
HTML5

JavaScriptでクリップボードを操作する【zeroclipboard】

クリップボードを操作できるJavaScriptライブラリ【zeroclipboard】

http://code.google.com/p/zeroclipboard/

解説:http://d.hatena.ne.jp/replication/20110405/1302014971

HTML5のClipboard API

http://www.w3.org/TR/clipboard-apis/

No.791
04/18 14:10

edit

HTML5

HTML5のClient-side database(JavaScript Database)のSQL文サンプル

テーブルの作成

CREATE TABLE `test_dt ` (
  test_id   INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT,
  test_name  TEXT    NOT NULL ,
)

データのINSERT

INSERT INTO
test_dt ( test_name, test_date ) 
VALUES ( "日本語データのテスト" , datetime("now","localtime") )

テーブルの削除

DROP TABLE test_dt;

No.730
05/02 11:42

edit

Database
HTML5

HTML5のClient-side database storage(JavaScript Database)を試す

HTML5で導入されるClient-side databaseが使用できるブラウザは以下の通り

( 一部ブラウザではHTML5未対応でも GoogleGears をインストールすると使えます。)

http://gears.google.com/

Win + IE6,7,8(Gears使用)
Win + Firefox3.6(Gears使用)
Win + Chrome(Gears使用)
Win + Opera10以降
Mac + Safari 3.1 , Safari 4以降
Mac + Chrome

使用できないのは

Mac + Firefox 3.6(Google Gears 未対応)
Mac + Opera 10.10(Google Gears 未対応)

だけですね。


サンプルソース

<!DOCTYPE html>
<html lang="ja">
<head>
    <script src="http://gear5.googlecode.com/hg/src/javascript/gear5.js"></script>
    <script type="text/javascript" src="jkl-dumper.js"></script> 
	<title>HTML 5 DB</title>
	<meta charset="utf-8" />
</head>
<body>
<script>
var db;
  try {
    if (window.openDatabase) {
      db = window.openDatabase("sampledb", "1.0", "Sample Database", "1048576");
      if (!db) {
        alert("データベースストレージが使えません。");
      }
      else{
        alert('db ok');
      }
    } else {
      alert("データベースストレージはサポートされていません。");
    }
  } catch (error) {
    // ...
  }
// select
db.transaction(
    function(tx) {
        tx.executeSql('CREATE TABLE IF NOT EXISTS AddressList(name TEXT, address TEXT)');
        var id = 12113;
        var name = 'ziddy';
        tx.executeSql("INSERT INTO AddressList VALUES (?, ?)", [id,name] ,
            function(tx, rs) { 
                alert(rs.insertId);
                var dumper = new JKL.Dumper();
                alert( dumper.dump( rs ) );
            }
        );
    } ,
    function(error) {
        alert( 'transaction error : ' + error.message');
      }
);
</script>
</body>
</html>

http://builder.japan.zdnet.com/sp/firefox-3-for-developer-2008/story/0,3800087566,20385468,00.htm

http://developer.apple.com/safari/library/documentation/iPhone/Conceptual/SafariJSDatabaseGuide/UsingtheJavascriptDatabase/UsingtheJavascriptDatabase.html

No.727
03/23 18:46

edit

Database
HTML5

外部JavaScriptやcssファイルを動的に読み込み(遅延読み込み)HTMLページ描画を高速にする

外部JavaScriptファイルを動的に読み込みWEBサイトを高速にしましょう!

JavaScriptは通常の<head></head>タグ内に記述しますが、この場合HTML描画前にJavaScript読み込みが発生し、またJavaScriptの読み込みが終わるまで待機しているので、読み込み終わりを待ってからでないとHTML描画は開始されません。

そこで外部JavaScriptファイルを動的(HTMLレンダリングと同時、またはDOM Ready時)に読み込むよう変更します。


■ 方法1-1. async をつけて読み込む

今までJavaScriptは以下のように読み込んできました。

<script src="myfile.js"></script>

これに async を追加します

<script src="myfile.js" async></script>

これで非同期読み込みとなり、「Javascript読み込み」と「HTMLページ描画」が同時に行われ、高速にページを表示することができます。

ただしasync属性の特徴として

・.js ファイル読み込み完了と同時にその .jsファイルを実行する

・実行順序がバラバラ(読み込み完了順)になる

がありますので jQuery プラグイン等 jQueryの存在が前提となるスクリプトがある場合はオススメしません

また

document.addEventListener('DOMContentLoaded', function(){
// 何かしらの処理
});

を使うときも async で読み込まれたプログラムの場合はうまく動作しませんので注意が必要です。



■ 方法1-2. defer をつけて読み込む(とりあえずJavaScriptはよくわからないけど高速化したいという方にはこちらの方をおすすめします。)

async属性の代わりにdefer属性というのもあります。

違いは

async :  .jsファイル読み込み直後に実行。『複数の .jsファイルを読み込む場合に実行順序は保証されない』
defer :  DOMツリー構築完了直後(DomReadyハンドラ前)に実行。『実行順序は保証される』

です。どちらもDOM構築を妨げない(HTMLレンダリングが高速)のは同じです。

記述方法は

<script src="myfile.js"></script>

これに defer を追加します

<script src="myfile.js" defer></script>

簡単ですのでこちらをおすすめします。


■ 方法2. 遅延読み込みスクリプトで対応する(古いけど確実なやり方)

例:3つのJavaScriptファイル『aaa.js』『bbb.js』『ccc.js』と1つのCSSファイル『test.cs』を遅延読み込みする(要:jQuery)

// dom ready時に読み込み開始(事前にjQueryを読み込ませておいてください。)
$(function(){
		alert('js load start !!! ');
		require_onload( ['aaa.js', 'bbb.js', 'ccc.js', 'test.css'] );
});

function require_onload( arg ) {
	if (is_array(arg)){
		var element = [];
		for(var i=0; i<arg.length; i++){
			if ( arg[i].match(/\.css$/) ){
				add_child_css(arg[i]);
			}
			else if ( arg[i].match(/\.js$/) ){
				add_child_js(arg[i]);
			}
			else{ alert('check url : ' + arg[i]) }
		}
	}
	else{
		if ( arg.match(/\.css$/) ){
			add_child_css(arg);
		}
		else if ( arg.match(/\.js$/) ){
			add_child_js(arg);
		}
		else{ alert('check url : ' + arg[i]) }
	}
}
function add_child_js(src){
	var element = document.createElement("script");
	element.src = src;
	document.body.appendChild(element);
}
function add_child_css(src){
	var css_element = document.createElement('link');
	css_element.type = 'text/css';
	css_element.rel  = 'stylesheet';
	css_element.href = src;
	document.body.appendChild(css_element);
}
function is_array(obj) {
	return Object.prototype.toString.call(obj) === '[object Array]';
}

これを<head>〜</head>タグ内に設置します。(</body>タグ直前でなくてもOK。)

3行目に

		alert('js load start !!! ');

があるので、読み込み開始時にアラートが表示されます。(もうその時にはHTML描画(正確にはDOM構築)が終わっていることが確認できると思います。)

実際使うときにはこの行は削除してください。

このスクリプトを使うと全てのページ描画準備が終わった段階(DOM Ready)で .js .css を読み込みに行きますので高速になります。

またページレイアウトに関係ある .css を遅延読み込みするとHTML描画とCSSスタイルの読み込み・適用が同時に行われるので画面が一瞬乱れる可能性があります。

ですのでWEBフォントの .css など レイアウトに関係ない .css を遅延読み込みするといいでしょう。

No.517
02/13 14:37

edit

高速化
HTML5