So-net無料ブログ作成
検索選択
JavaScript ブログトップ

JavaScript のクロージャとは? [JavaScript]

ブックマークレットの作り方 で、うっかり「クロージャ」とか書いてしまったので、ちょっと説明(というか解説)します(ToT;

クロージャとは、JavaScript の書き方の名前です。具体的に、「これがクロージャじゃ!」というモノではありません。
プログラムの世界では、考え方とか書き方とかに名前が付いていることがよくあります。実体がないので、文字や言葉で説明すると難しく感じてしまいます。調べれば調べるほど難しい用語が出てきて、余計に理解できないということもあります。
とりあえず、「クロージャ」という名前自体にはたいした意味は無いので、「こういう書き方もできるんだ!」くらいの理解で十分です。


ブックマークレットでは、グローバル変数問題の回避策として、クロージャを使っています。本当は、他にも使い道はあるのですが、その辺は、他のサイトを検索してください。

ブックマークレットのサンプルとして示したソース
001: javascript:(
002:     function(){
003:         function g() {
004:             var title = document.title;
005:             window.alert(title);
006:         }g();
007:     }
008: )();

このソースは、次のような意味になります。

1行目
ブックマークレットの定型文です。ブックマークレットは、 javascript: から始まります

2行目
名前の無い関数(無名関数)を定義しています。
この無名関数の中に書かれた変数は、他の関数などから呼び出されることはありません。関数に名前がないので、外から呼び出せないのです。なので、他のグローバル変数とバッティングすることはない、ということになります。

3行目
関数 g() を定義しています。
4行目と5行目が、g() の処理内容です。

6行目
関数 g() を実行しています。


という書き方になっています。
無名関数を使っているというところがポイントですね。


なので、次のような書き方もできます。
001: javascript:(
002:     function(){
003:         function g(title) {
004:             window.alert(title);
005:         }
006:         var title=document.title;
007:         g(title);
008:     }
009: )();

最初の例と同じ動作をするので、処理の流れを考えてみてください。





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

ブックマークレットとは、ブラウザのブックマークに登録して利用する、JavaScript で記述された簡単なプログラムのことです。1クリックで、ちょっと便利な機能を実行することができます。

ブックマークレットは、HTML と JavaScript が少し分かれば、簡単に作ることができます。


【ツールバーを表示しておく】
ブックマークレットは、ブラウザのツールバーに登録するモノなので、まず、ツールバーを表示させておきます。
ツールバーの名称は、「ブックマークツールバー」、「お気に入りバー」、「ブックマークバー」など、ブラウザによって異なります。
ブックマークレットは、リンクをツールバーに、ドラッグ&ドロップするだけで登録することができます。

tb_cr.png



【簡単なブックマークレット】
ブックマークレットでは、JavaScript のクロージャという書き方を使うことが一般的になりつつあります。
これは、JavaScript のグローバル変数の問題を回避するためです。
ただし、ふる~いブラウザは、クロージャに対応していないこともあります。

とりあえず、簡単なブックマークレットのソース
javascript:(
	function(){
		function o() {
			var title=document.title;
			window.alert(title);
		}o();
	}
)();

いま見ているページのタイトルを表示するだけのプログラムです。
function() の中に function o() がありますが、これが、クロージャという書き方です(大雑把すぎる?)。
このソースから、空白を削除したり、特殊文字を変換したり、改行コードを削除したりして、1行にしないといけないのですが、手作業だといちいち面倒なので、こちらのサイトで一発変換します。

Website Tools:ブックマークレット変換(成形)

上記のソースをコピーし、このサイトに貼り付けて、[ブックマークレットへ変換]のボタンを押すと、1行に変換されます。

ついでに、[>> 変換結果を試してみる] というリンクが表示されるので、クリックして動作を確認することもできます。

さらに、[>> 変換結果を試してみる] というリンクをツールバーにドラッグすれば、そのままブックマークレットとして登録できてしまいます。

ブックマークレットの名前を変更したい場合は、ブックマークレットを右クリックしてプロパティから変更することができます。


これで、ブックマークレットの完成です。
あとは、プログラムを拡張していくだけです。見ているページのリンクを取得したり、反転させた文字列を検索したりといったプログラムも可能です。



【ブックマークレットを作るときに注意すること】
HTML や JavaScript が間違っていなければ、動作します。
ただし、ブックマークレットは、登録できるプログラムの長さに制限があります。
プログラムが大きくなってくると、文字数の制限に引っかかってしまいます。この場合、動作しません。
文字数の制限は、ブラウザの種類やバージョンによって違うので、怪しいと思ったら確認してみてください。

参考:ブックマークレット/Bookmarkletの作り方



【ぶっくま!のブックマークレット】
ぶっくま!のブックマークレットは、以下のようになっています。
javascript:(
    function(){
        function g(s) {
            var d=window.open(
              'http://www.bukkumaweb.com/bml.php?'+s).document;
        }
        var zu=location.href;
        var zt=document.title;
        if ( zt.length > 30 ) {
            zt = zt.substr( 0,30 );
        }
        var para="zu="+zu+"&zt="+zt;
        g(para);
    }
)();

ぶっくま!の場合、いろいろと複雑な処理をする必要があるので、主な機能は、サーバー側で処理しています。
この方法だと、仕様が変わっても、サーバー側のプログラムを直すだけ対応できます。




JavaScript で window.close するのはあきらめた! [JavaScript]

ようやく、ぶっくま!のブックマークレット(PC用)を公開できました。モバイル用は、これから作ります・・・。

ブックマークレットを作っていて、ハマってしまったので、メモっておきます。


最初、ブックマークレットは、ウインドウ(小窓)を開く仕様にするつもりだったのですが、動作チェックをしていたら、ウインドウを閉じることができないことに気づきました。

ユーザーが手動で閉じることはできますが、JavaScript(ブログラム) から close() しても閉じないということ。しかも、ブラウザの種類やバージョンによって挙動が違う!

なんでできないの?と思って、調べてみたら、

  JavaScript の close() を使った攻撃手法があり、
  その攻撃を回避するために、各ブラウザが独自で対応している

ということらしいです。

ブラウザの種類やバージョンによって挙動が違うのは、独自に対応しているためですね。
独自に対応しているということは、これからも仕様がコロコロ変わる可能性があるということ。
実際、いままでも(各ブラウザとも)何回か仕様が変わってますし。
裏技的な方法でウインドウを閉じるように作っても、ブラウザのバージョンアップで使えなくなるのはちょっと問題です。

企業などが作っている Webサービスでは、ブラウザを判定して、別々のプログラムを動かしていたりしますが、ブラウザのバージョンアップにあわせて動作をチェックして、プログラムを作り直す作業が発生します。
企業が業務としてやっているなら別ですが、個人がそんなことできません!


ということで、別ウインドウを開くのではなく、別タブを開く仕様に変更しました。
ちょっと使いにくいかもしれませんが、動作しなくなるよりはいいかなと。


ちょうど、各ブラウザのバージョンアップやアップデートが目白押しな時期なので、タイミング的にも悪かったですね。




JavaScript ブログトップ