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

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 | このブログの読者になる | 更新情報をチェックする

画面キャプチャ用に、広告等の不要な表示コンテンツを削除する作業を、ブラウザ毎の開発者ツールで比較すると・・・

昔は Firefox の Firebug でやってたのですが( 少なくとも 2010-07-11 当時 )、今はどの主要ブラウザでも同じプロセスで可能です。

Firebug がインストールされている場合、純正の開発者ツール用の『要素を調査』と『Firebugで要素を調査』と二つ表示されます。

Firefox

『要素を調査』=> 『ノードを削除』または 開発者ツール内で選択された部分をクリックしてから DEL キー
※ 以降は、開発者ツールが選択されているので、そのまま DEL キーを使えます

Firebug は、『Firebugで要素を調査』後、すぐに DEL できます。

要するに Firebug のほうがひと手間少なくで優れています

その他

Google Chrome も、『要素を検証』から、すぐに DEL キーで削除できますが、削除した後他の要素を選択してくれないので、続けて親要素を削除していくのは不便です。

IE11 は Firebug と同等でした。

案外 Google Chrome が適当なのに驚きました・・・・



posted by at 2015-01-08 13:11 | Firefox | このブログの読者になる | 更新情報をチェックする

DAZ3D : 立体機動アルファ



昔立体機動を装着して歩行している女性のプロトタイプを作ったのですが、それをいろいろ改造して仕上げました。細かい調整をいろいろやりましたが、やはり頭の中はアニメ構造みたいで、こういう顔になってしまいましたが、実写風ってのは結構敷居が高いのです。

良くみないと解りませんが、立体機動装置にはテクスチャ貼ったりしています。

プロトタイプ

 



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

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

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

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

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


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

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

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

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

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