SQLの窓 イラストAC フリー素材

2019年08月20日

Firebase の Realtime Database の JSON を jQuery の $.ajax で読み込んで TABLE を作成する

Firebase の Realtime Database の JSON は、access-control-allow-origin: * を出力するので、どこからでも利用できます。


<!DOCTYPE html>
<html>
<head>
<meta content="width=device-width initial-scale=1.0 minimum-scale=1.0 maximum-scale=1.0 user-scalable=no" name="viewport">
<meta charset="utf-8">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>

<link rel="stylesheet" href="https://lightbox.sakura.ne.jp/demo/two-section.css">
<script src="https://lightbox.sakura.ne.jp/demo/number-format.js"></script>

<script>

$(function(){

	// **************************************
	// ボタン
	// **************************************
	$("#load_json").on( "click", function(){

		$.ajax({
			url: "https://プロジェクト名-xxxxx.firebaseio.com/syain.json",
			cache: false,
			data: { "name" : $("#sname").val() }
		})
		.done(function( data, textStatus ){
			console.log( "status:" + textStatus );
			console.log( "data:" + JSON.stringify(data, null, "    ") );

			// tabble 作成
			loadData( data );

		})
		// 失敗
		.fail(function(jqXHR, textStatus, errorThrown ){
			console.log( "status:" + textStatus );
			console.log( "errorThrown:" + errorThrown );
		})
		// 常に実行
		.always(function() {

		})
		;
	
	});

	// **************************************
	// このページ自身の QRコードの表示
	// **************************************
	$('#qrcode')
		.css({ "margin" : "20px 20px 20px 20px" })
		.qrcode({width: 160,height: 160,text: location.href });

});

// **************************************
// JSON => table
// **************************************
function loadData( data ) {

	$("#tbl").html("");

	// データ用
	var row_data;

	var index = 0;

	// 行のループ  ( <tr></tr> )
	$.each(data, function( key, syain ) {

		// 初回はタイトル作成
		if ( index == 0 ) {
			// テーブルに行を追加	
			row_data = $("<tr></tr>").appendTo( "#tbl" );

			$("<th></th>").appendTo( row_data ).text( "社員コード" );
			$("<th></th>").appendTo( row_data ).text( "氏名" );
			$("<th></th>").appendTo( row_data ).text( "フリガナ" );
			$("<th></th>").appendTo( row_data ).text( "給与" );
			$("<th></th>").appendTo( row_data ).text( "性別" );
			$("<th></th>").appendTo( row_data ).text( "管理者" );
			$("<th></th>").appendTo( row_data ).text( "生年月日" );

		}

		var re = new RegExp($("#sname").val());
		if ( syain.name.search(re) != -1  ) {
			// テーブルに行を追加	
			row_data = $("<tr></tr>").appendTo( "#tbl" );
	
			$("<td></td>").appendTo( row_data ).text( syain.code );
			$("<td></td>").appendTo( row_data ).text( syain.name );
			$("<td></td>").appendTo( row_data ).text( syain.furi );
			$("<td></td>").appendTo( row_data ).text( syain.kyuyo );
			$("<td></td>").appendTo( row_data ).text( (syain.sex == 0 ? "男性" : "女性"  ) );
			$("<td></td>").appendTo( row_data ).text( syain.kanri );
			$("<td></td>").appendTo( row_data ).text( syain.birthday );
		
		}

		// キーの数
		index++;
	
	});

}
</script>
</head>
<body>
	<div id="head">
		<input type="text" id="sname" name="sname">
		<input type="button" id="load_json" value="検索">
	</div>

	<div id="extend">
		<table class="table">
		<tbody id="tbl">

		</tbody>
		</table>

		<div id="qrcode"></div>
	</div>

</body>
</html>




posted by at 2019-08-20 17:52 | JavaScript | このブログの読者になる | 更新情報をチェックする

Firebase に定義した Realtime Database の API を使用して TABLE を作成する

このアプリは問い合わせとして TABLE で 一覧を作成しますが、API を使用すると容易に更新も実行する事が可能です



参考にするべきドキュメント

ウェブ上でデータリストを操作する

Firebase を JavaScript プロジェクトに追加する

<!DOCTYPE html>
<html>
<head>
<meta content="width=device-width initial-scale=1.0 minimum-scale=1.0 maximum-scale=1.0 user-scalable=no" name="viewport">
<meta charset="utf-8">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>

<link rel="stylesheet" href="https://lightbox.sakura.ne.jp/demo/two-section.css">
<script src="https://lightbox.sakura.ne.jp/demo/number-format.js"></script>

<script>

$(function(){

	// **************************************
	// ボタン
	// **************************************
	$("#load_json").on( "click", function(){

		// データベース参照
		var myFirebaseRef;

		myFirebaseRef = firebase.database().ref('syain');

		myFirebaseRef.once('value', 
			function(snapshot) {

				if ( !snapshot.exists() ) {
					alert( "データが存在しません" );
					return;
				}

				loadData( snapshot );

			},
			function(error){
				console.dir(error);
			}
		);
	
	});

	// **************************************
	// このページ自身の QRコードの表示
	// **************************************
	$('#qrcode')
		.css({ "margin" : "20px 20px 20px 20px" })
		.qrcode({width: 160,height: 160,text: location.href });

});

// **************************************
// firebase => table
// **************************************
function loadData( snapshot ) {

	$("#tbl").html("");

	// データ用
	var row_data;

	var index = 0;

	snapshot.forEach(function(data){

		var obj = data.val();
		
		// 初回はタイトル作成
		if ( index == 0 ) {
			// テーブルに行を追加	
			row_data = $("<tr></tr>").appendTo( "#tbl" );

			$("<th></th>").appendTo( row_data ).text( "社員コード" );
			$("<th></th>").appendTo( row_data ).text( "氏名" );
			$("<th></th>").appendTo( row_data ).text( "フリガナ" );
			$("<th></th>").appendTo( row_data ).text( "給与" );
			$("<th></th>").appendTo( row_data ).text( "性別" );
			$("<th></th>").appendTo( row_data ).text( "管理者" );
			$("<th></th>").appendTo( row_data ).text( "生年月日" );

		}
		

		var re = new RegExp($("#sname").val());
		if ( obj.name.search(re) != -1  ) {

			// テーブルに行を追加	
			row_data = $("<tr></tr>").appendTo( "#tbl" );

			$("<td></td>").appendTo( row_data ).text( obj.code );
			$("<td></td>").appendTo( row_data ).text( obj.name );
			$("<td></td>").appendTo( row_data ).text( obj.furi );
			$("<td></td>").appendTo( row_data ).text( obj.kyuyo );
			$("<td></td>").appendTo( row_data ).text( (obj.sex == 0 ? "男性" : "女性"  ) );
			$("<td></td>").appendTo( row_data ).text( obj.kanri );
			$("<td></td>").appendTo( row_data ).text( obj.birthday );

		}
		
		index++;

	});

}
</script>
</head>
<body>
	<div id="head">
		<input type="text" id="sname" name="sname">
		<input type="button" id="load_json" value="検索">
	</div>

	<div id="extend">
		<table class="table">
		<tbody id="tbl">

		</tbody>
		</table>

		<div id="qrcode"></div>
	</div>

<!-- https://firebase.google.com/docs/web/setup?authuser=0#add-sdks_CDN -->

<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/6.4.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/6.4.0/firebase-database.js"></script>

<!-- TODO: Add SDKs for Firebase products that you want to use
     https://firebase.google.com/docs/web/setup#config-web-app -->

<script>
  // Your web app's Firebase configuration
  var firebaseConfig = {
// *****************************************
// Firebase より取得した WEB 用 API情報
// *****************************************
  };
  // Initialize Firebase
  firebase.initializeApp(firebaseConfig);
</script>

</body>
</html>

強調部分が Firebase より取得する部分ですが、firebase-database.js の行は追加になります



posted by at 2019-08-20 17:28 | JavaScript | このブログの読者になる | 更新情報をチェックする

2019年06月28日

IE や Firefox の開発者ツールのコンソールで簡単に localStorage を見る為の1行コード

Google Chrome では、Application のタブで見る事も消す事もできますが、IE や Firefox ではコンソールから JavaScript を実行します
for(i=0;i<localStorage.length;i++){console.log(localStorage.key(i)+":"+localStorage[localStorage.key(i)])}




タグ:IE Firefox
posted by at 2019-06-28 23:02 | JavaScript | このブログの読者になる | 更新情報をチェックする

2018年02月08日

テキストエリアでタブ処理

ブラウザ上のテキストエリア( 複数行の入力 ) では、TAB キーによるタブコードの入力ができませんが、クリップボードから貼り付ける事はできます。

しかし、それでは直接ソースコードのタイプするのに苦労するのが実際です。

そこで、スクリプトを使って TAB コードの挿入を可能にし、通常のエディタのように、選択状態の内容に一括してタブコードを挿入してインデントできるようにしました。

SHIFT+TAB では 選択範囲のTAB コードを一括して削除します

実装コード
<script src="https://lightbox.sakura.ne.jp/toolbox/tabtextarea.js"></script>

<script>createTabTextArea("sample1");</script>></textarea>
<br>
<script>createTabTextArea("sample2",60,8,"myclass");</script>></textarea>

以下で入力できます。

> ここを 選択して タブキーを押す
>




タグ:javascript
posted by at 2018-02-08 12:42 | JavaScript | このブログの読者になる | 更新情報をチェックする

2017年11月10日

ブラウザ判定 : String.prototype.browser に登録して、文字列と実際のブラウザが一致したら true を返す



特定のブラウザの処理を行いたいときに使用するといいと思います
if ( "ie".browser() ) {
	// IE の処理
} 
Edge や Safari のテストは、Google Chrome の スマホエミュレータで、Microsoft LumiaiPhone を選ぶといいです。
<script>
String.prototype.browser = function() {
	var userAgent = window.navigator.userAgent.toLowerCase();
	var appVersion = window.navigator.appVersion.toLowerCase();
	var target = this.valueOf();

	if (userAgent.indexOf("msie") > -1) {
		if (appVersion.indexOf("msie 6.0") > -1) {
			return ( target == "ie6" || target == "ie" );
		}
		else if (appVersion.indexOf("msie 7.0") > -1) {
			return ( target == "ie7" || target == "ie" );
		}
		else if (appVersion.indexOf("msie 8.0") > -1) {
			return ( target == "ie8" || target == "ie" );
		}
		else if (appVersion.indexOf("msie 9.0") > -1) {
			return ( target == "ie9" || target == "ie" );
		}
		else if (appVersion.indexOf("msie 10.0") > -1) {
			return ( target == "ie10" || target == "ie" );
		}
		else {
			return ( target == "ie" );
		}
	}
	else if (userAgent.indexOf("trident/7.0") > -1) {
		return ( target == "ie11" || target == "ie" );
	}
	else if (userAgent.indexOf("edge") > -1) {
		return ( target == "edge" );
	}
	else if (userAgent.indexOf("firefox") > -1) {
		return ( target == "firefox" );
	}
	else if (userAgent.indexOf("opera") > -1) {
		return ( target == "opera" );
	}
	else if (userAgent.indexOf("chrome") > -1) {
		return ( target == "chrome" );
	}
	else if (userAgent.indexOf("safari") > -1) {
		return ( target == "safari" );
	}
	else {
		return false;
	}
}

$(function(){
	$("#browser_check,#browser_check td")
		.css({ 
			"border-collapse": "collapse", 
			"border": "1px solid #444444",
			"padding": "10px"
		 });

	$("#browser_check tr").each(function(idx){

		if ( idx == 0 ) {
			$(this).find("td").each( function(){
				$(this).text( $(this).prop("id") );
			} );
		}
		else {
			$(this).find("td").each( function(){
				if ( $(this).prop("id").replace("_","").browser() ) {
					$(this)
						.text("当たり")
						.css({"background-color": "pink"})
						;
				}
			} );
		}

	});

});
</script>
<table id="browser_check">
<tr>
	<td id="ie6"></td>
	<td id="ie7"></td>
	<td id="ie8"></td>
	<td id="ie9"></td>
	<td id="ie10"></td>
	<td id="ie11"></td>
	<td id="ie"></td>
	<td id="edge"></td>
	<td id="chrome"></td>
	<td id="firefox"></td>
	<td id="opera"></td>
	<td id="safari"></td>
</tr>
<tr>
	<td id="ie6_"></td>
	<td id="ie7_"></td>
	<td id="ie8_"></td>
	<td id="ie9_"></td>
	<td id="ie10_"></td>
	<td id="ie11_"></td>
	<td id="ie_"></td>
	<td id="edge_"></td>
	<td id="chrome_"></td>
	<td id="firefox_"></td>
	<td id="opera_"></td>
	<td id="safari_"></td>
</tr>
</table>




posted by at 2017-11-10 21:50 | JavaScript | このブログの読者になる | 更新情報をチェックする

2016年09月07日

jQuery UI の datepicker を使用した現在の日付文字列の取得 と 一般的な現在の日付文字列の加工取得処理

日付が必要な場合、既に jQuery UI が利用されているのならば、前者が簡単だと思います。jQuery UI が無い場合は、後者の処理で隠しフィールドにセットしておいて利用すると良いと思います。
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<link id="link" rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/base/jquery-ui.css">
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

<input type="text" id="mydate">
<input type="text" id="mydate2">
<script>
	var datepicker_option = {
		dateFormat: 'yy/mm/dd',
		dayNamesMin: ['日', '月', '火', '水', '木', '金', '土'],
		monthNames:  ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
		showMonthAfterYear: true,
		yearSuffix: '年',
		changeYear: true,
		showAnim: 'fadeIn'
	};

	// jQuery UI の datepicker を使用した現在の日付文字列の取得
	$( "#mydate" )
		.datepicker(datepicker_option)
		.datepicker("setDate", "0");

	// 一般的な現在の日付文字列の加工取得処理
	$( "#mydate2" )
		.val( 
			(new Date()).getFullYear() + "/" + 
			('0'+((new Date()).getMonth()+1)).slice(-2) + "/" + 
			('0'+(new Date()).getDate()).slice(-2) 
		);

</script>


posted by at 2016-09-07 17:25 | JavaScript | このブログの読者になる | 更新情報をチェックする

2016年06月11日

geolocation を使用して『都道府県選択コンボボックス』の初期値を現在の緯度・経度から選択する

2016/06/10
2016年4月ごろから、Google Chrome の仕様変更により、全て https の環境でないと geolocation が動作しなくなりました。( 参考記事 / 注 : localhost は動作します )


なので、このブログ内では動作しないので、自分のサイトにデモサンプルを設置しました。

1) 各都道府県の頭に頭文字のアルファベット追加するだけでも楽になる。
2) 今時なんだから、緯度経度から選択

HTML ページ
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
$(function(){

	$("#action").on("click",function(){
		navigator.geolocation.getCurrentPosition(function(target){
			$.get("https://lightbox.sakura.ne.jp/toolbox/g_ken.php?lat="
				+target.coords.latitude
				+"&lng="+target.coords.longitude,
				function(data){
					console.dir(data);
					console.log( data.prefectureCode );
					$("select[name='ken']").val(data.prefectureCode);
				});
		});
	});


});
</script>
</head>
<body>
<select name="ken">
	<option value="1">h 北海道</option>
	<option value="2">a 青森県</option>
	<option value="3">i 岩手県</option>
	<option value="4">m 宮城県</option>
	<option value="5">a 秋田県</option>
	<option value="6">y 山形県</option>
	<option value="7">f 福島県</option>
	<option value="8">i 茨城県</option>
	<option value="9">t 栃木県</option>
	<option value="10">g 群馬県</option>
	<option value="11">s 埼玉県</option>
	<option value="12">c 千葉県</option>
	<option value="13">t 東京都</option>
	<option value="14">k 神奈川県</option>
	<option value="15">n 新潟県</option>
	<option value="16">t 富山県</option>
	<option value="17">i 石川県</option>
	<option value="18">f 福井県</option>
	<option value="19">y 山梨県</option>
	<option value="20">n 長野県</option>
	<option value="21">g 岐阜県</option>
	<option value="22">s 静岡県</option>
	<option value="23">a 愛知県</option>
	<option value="24">m 三重県</option>
	<option value="25">s 滋賀県</option>
	<option value="26">k 京都府</option>
	<option value="27">o 大阪府</option>
	<option value="28">h 兵庫県</option>
	<option value="29">n 奈良県</option>
	<option value="30">w 和歌山県</option>
	<option value="31">t 鳥取県</option>
	<option value="32">s 島根県</option>
	<option value="33">o 岡山県</option>
	<option value="34">h 広島県</option>
	<option value="35">y 山口県</option>
	<option value="36">t 徳島県</option>
	<option value="37">k 香川県</option>
	<option value="38">a 愛媛県</option>
	<option value="39">k 高知県</option>
	<option value="40">f 福岡県</option>
	<option value="41">s 佐賀県</option>
	<option value="42">n 長崎県</option>
	<option value="43">k 熊本県</option>
	<option value="44">o 大分県</option>
	<option value="45">m 宮崎県</option>
	<option value="46">k 鹿児島県</option>
	<option value="47">o 沖縄県</option>
</select>
<input id="action" type="button" value="ブラウザの緯度経度で選択">
</body>
</html>


PHP
<?php
header( "Content-Type: application/json; Charset=utf-8" );
header( "pragma: no-cache" );
header( "Expires: Wed, 31 May 2000 14:59:58 GMT" );
header( "Cache-control: no-cache" );
header( "Access-Control-Allow-Origin: *" );

mb_internal_encoding('UTF-8');

$LIB_DIR = realpath(dirname(__FILE__).'/dgmsrc/').'/';
require_once $LIB_DIR.'Dm/Geocoder.php';
require_once $LIB_DIR.'Dm/Geocoder/Address.php';
require_once $LIB_DIR.'Dm/Geocoder/Prefecture.php';
require_once $LIB_DIR.'Dm/Geocoder/Query.php';
require_once $LIB_DIR.'Dm/Geocoder/GISCSV.php';
require_once $LIB_DIR.'Dm/Geocoder/GISCSV/Finder.php';
require_once $LIB_DIR.'Dm/Geocoder/GISCSV/Reader.php';

$addresses = Dm_Geocoder::reverseGeocode($_GET['lat'],$_GET['lng']);
print json_encode($addresses[0]);
使用した PHP ライブラリ


タグ:PHP
posted by at 2016-06-11 01:13 | JavaScript | このブログの読者になる | 更新情報をチェックする

2015年11月19日

雪を降らす snowstorm.js の 特定 DIV 内での実装

何故か、単純に指定するとズレるので、いろいろやってみました。が、どうも DIV の下で雪が止まってくれません。けっこう適当なライブラリですね。

と、思ったら snowStorm.flakeBottom = 500; を指定したらうまく行きました。

ページ全体でのデモ

ふふふふふ
雪のキャラクタを変更して、雪の結晶を使って CSS アニメーションで回転させています
<style>
@-webkit-keyframes snow-rotate {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}
@-moz-keyframes snow-rotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@-o-keyframes snow-rotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@keyframes snow-rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.mysnow {
	color:#e0e0e0!important;
	-webkit-animation: 1.85s snow-rotate steps(8) infinite;
	-moz-animation: 1.85s snow-rotate steps(8) infinite;
	-o-animation: 1.85s snow-rotate steps(8) infinite;
	animation: 1.85s snow-rotate steps(8) infinite;

}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Snowstorm/20131208/snowstorm-min.js"></script>
<div style="width:500px;overflow:hidden; margin:60px auto">
<div id="snow_container" style="width:540px;overflow:hidden;position:relative;">
<img src="https://lh3.googleusercontent.com/-om6S8qEPmiQ/VZetF28tQnI/AAAAAAAAbPc/x1aQ7Uj2QVU/s500-Ic42/143594651057721985634.jpg">
</div>
ふふふふふ

</div>
<script>
snowStorm.excludeMobile = false;
snowStorm.animationInterval = 50;
snowStorm.flakesMax = 64;
snowStorm.className = "mysnow"
snowStorm.flakeWidth = 16;
snowStorm.flakeHeight = 16;
snowStorm.snowCharacter = '&#10052;';
snowStorm.targetElement = 'snow_container';
snowStorm.flakeBottom = 500;
</script>

snowstorm.js


タグ:javascript
posted by at 2015-11-19 17:06 | JavaScript | このブログの読者になる | 更新情報をチェックする

2015年01月10日

JavaScript : ブックマークレットの作り方


<a href="javascript:var%20mylib=document.createElement('script');if(!window.NAME){mylib.setAttribute('src','URL');mylib.setAttribute('charset','shift_jis');document.body.appendChild(mylib);(function(){if(window.NAME){NAME.init();}else{setTimeout(arguments.callee);}})();}else{NAME.init();}void(mylib);"
onclick='
	alert('ブックマークバーにドロップして下さい(IEではお気に入りバー/右クリックからも可)'); 
	if (window.navigator.appName.toLowerCase().indexOf("microsoft") > -1) { 
		event.returnValue = false; 
	} 
	event.preventDefault(); 
	event.stopPropagation();
'
>ブックマークレットのスケルトン</a>

▼ JavaScript 部分を整形したもの
var mylib = document.createElement('script');
if (!window.NAME) {
    mylib.setAttribute('src', 'URL');
    mylib.setAttribute('charset', 'shift_jis');
    document.body.appendChild(mylib); 
    (function() {
        if (window.NAME) {
            NAME.init();
        } else {
            setTimeout(arguments.callee);
        }
    })();
} else {
    NAME.init();
}
void(mylib);

arguments.callee は無名関数自身なので、window.NAME がロードされるまで呼び続けられます。ロード済みの場合は、読み込まれた外部ライブラリの NAME.init(); が実行されます。ブックマークレットの二度目の実行では、既に読み込まれた外部ライブラリより実行されます

void(mylib); で、void の引数に mylib を使っているのに深い意味はありません。void(0) でもかまいません。最後に void(0) が無いと、画面が壊れてしまうから付加するのが通常です( alert 等のウインドウ処理が最後にある場合は付加しなくても動作します。)

▼ 外部スクリプト部分
if (!window.NAME) {
(
function() {
	window.NAME = 
	{
		// プロパティ
		version: 1.01
		,
		// メソッド
		init : function( ) {
			/* ここに処理を書きます */
			alert("この alert はテスト用です");
		}
	};
}
)();
}


仕込み方にもいくつかあって、ウインドウ開ける方法もありますし、IFRAME で埋め込んで配置する方法もあります。この方法は、ページの一部分を一回だけ JavaScript で変更してしまう比較的基本的な方法です。

要するに、スクリプトタグを BODY 要素の最後に追加して、そのスクリプトタグに外部の js ファイルを読み込ませてその中の処理を呼び出すものです。自分で一から書くと結構面倒で、専門知識も多く知っていないとなかなか完成まで時間がかかりますが、スケルトンを使うと必要最低限のコード追加と環境整備で実装環境を作る事ができます。

このスケルトンで注意するのは、呼び出す js ファイルは SHIFT_JIS で書くというところです(Window 環境では普通に作成する SHIFT_JIS になってしまうので)。これは、呼び出す方の記述で charset="shift_jis" を書いているからです。UTF-8 にしたい場合は、href 内のその記述部分も変更する必要があります。

後、一般的なデバッグで気を付けるのは、変更してアップロードする毎にキャッシュを削除する事です( 面倒ですけど、結局効率アップになります )。さらに、JavaScript の動的コンテンツは、ソースを単純に表示しても見る事ができないので、開発者ツールで結果を確認する必要もあります。

ブックマークレットは、表示されているページと同じセキュリティで参照されるのでたいていの事ができます。主な目的は、エンドユーザーの操作レベルでの効率を上げる事です。IE 拡張メニューや Firefox の拡張と似ていますが、後者は厳密にはセキュリティの壁があります。そのかわり、後者は OS のローカル情報にアクセスできるメリットがあります。


元来、サービス運営側はサーバーのシステムの管理上なかなかエンドユーザーの利便性にまで手をだせないものです。通常、少しの変更が多くのユーザに影響するので、慎重にならざるを得ません。ですから、この手のプラグイン的なツールは、エンドユーザ側で提案すべきものであり、サービスを提供する側とエンドユーザが、お互い利益を得るような形態が望まれます。


posted by at 2015-01-10 16:32 | JavaScript | このブログの読者になる | 更新情報をチェックする

2015年01月08日

いまさらですが、JavaScript で、グローバル領域を汚さない変数宣言の使用方法

要するに無名関数で囲んで、それをその場で実行すれば、内部の変数はグローバルからは隔離されます。C 言語的に言うと、スタックに変数が定義された状態ですね。

▼ 無名関数
function(){}

▼ 無名関数をその場で実行
( function(){} )();

で、どこで使うかと言うと、ブックマークレットで、オリジナルページの邪魔をせずにこっそり作業したい時だとか・・・でしょうか。

というより、無名関数は jQuery 等で コールバックされる処理を関数名を使うのではなく、その場で全て書いてしまう( というかほとんどそうしているのが現状 )場合にバシバシ使われます
<script type="text/javascript">
var a = 0;

(function() {
	// ここで var を使わないと、グローバルを参照します
	var a;
	a = 2;
})();

alert(a)

</script>

関連する記事


タグ:javascript
posted by at 2015-01-08 13:38 | JavaScript | このブログの読者になる | 更新情報をチェックする
Seesaa の各ページの表示について
Seesaa の 記事がたまに全く表示されない場合があります。その場合は、設定> 詳細設定> ブログ設定 で 最新の情報に更新の『実行ボタン』で記事やアーカイブが最新にビルドされます。

Seesaa のページで、アーカイブとタグページは要注意です。タグページはコンテンツが全く無い状態になりますし、アーカイブページも歯抜けページはコンテンツが存在しないのにページが表示されてしまいます。

また、カテゴリページもそういう意味では完全ではありません。『カテゴリID-番号』というフォーマットで表示されるページですが、実際存在するより大きな番号でも表示されてしまいます。

※ インデックスページのみ、実際の記事数を超えたページを指定しても最後のページが表示されるようです

対処としては、このようなヘルプ的な情報を固定でページの最後に表示するようにするといいでしょう。具体的には、メインの記事コンテンツの下に『自由形式』を追加し、アーカイブとカテゴリページでのみ表示するように設定し、コンテンツを用意するといいと思います。


※ エキスパートモードで表示しています

アーカイブとカテゴリページはこのように簡単に設定できますが、タグページは HTML 設定を直接変更して、以下の『タグページでのみ表示される内容』の記述方法で設定する必要があります

<% if:page_name eq 'archive' -%>
アーカイブページでのみ表示される内容
<% /if %>

<% if:page_name eq 'category' -%>
カテゴリページでのみ表示される内容
<% /if %>

<% if:page_name eq 'tag' -%>
タグページでのみ表示される内容
<% /if %>
この記述は、以下の場所で使用します