javascript, bookmarkletのメモ(2014/6頃)

主にbookmarkletを作るためにjavascriptについて調べた。

encodeURI()でbookmarklentのエンコードも出来る。改行は?
javascriptにはヒアドキュメントはない。エスケープして書くしかない。

jquery-ui.jsが読み込まれていないとautocompleteは使えない。
http://stackoverflow.com/questions/11315595/loading-jquery-and-jquery-ui-in-bookmarklet-if-theyre-not-already-loaded
http://blog.ethertank.jp/2010/10/04-17:25:07
jquery-ui.jsも読み込む様にしたら上手く動いた!!

jQuery.noConflict(1)でライブラリの再読み込みを何か制御できるようだが、よく分からない。

iframe内のdomにはdomainが同じじゃないとcross domain制限に引っかかる。

javascriptのeclipseのplug-inもある。
JSDT
Google Chrome Developer Tools

fbLikeSmallerと言う、facebookのlike buttonを小さくするbookmarkletも作ってみた。
アクセス制限でfacebookとlike buttonが読み込めない環境の時に読み込みエラーのボタンが大きくひょじされて読めないため。
//コメント使えないという単純所でハマった。。。

テキストボックスの入力補完をする

テキストボックス(input type="text")にメールアドレス等を毎回入力するのは面倒なので入力補完をする方法を調べた。

[ブラウザの補完機能を使う]
フォームの自動入力 - Chrome ヘルプ
これが一番簡単な気がする。
ただ、Chromeでは補完されたりされなかったり、イマイチ挙動が把握出来ていない。

[ブラウザの拡張機能を使う]
多分いろんなextensionが出ていると思うけど、今回は未調査。

[HTML5のlistとdatalistを使う]
<input autocomplete>－HTML5タグリファレンス
HTML datalist Tag
古いブラウザでは使えない。Chrome20, IE10, FireFox4, Opera9, Safariは未サポート?

activeのINPUT text要素に補完リストを追加するbookmarklet
datalistのidが元ソースと競合しないように注意する必要がある。

javascript: (function (id, list) {
    var activeElement = document.activeElement;
    if (activeElement.tagName != "INPUT" || activeElement.type != "text")
        return;

    var datalist = document.getElementById(id);

    if (!datalist) {
        datalist = document.createElement("DATALIST");
        datalist.id = id;
        for (i = 0; i < list.length; i++) {
            var option = document.createElement("OPTION");
            option.value = list[i];
            datalist.appendChild(option);
        }
        activeElement.appendChild(datalist);
    }

    if (datalist.tagName != "DATALIST")
        return;

    activeElement.setAttribute("list", id);
})("myDatalist032984032", ["hoge", "fuga"]);

[jQueryを使う]
javascript jQuery 入力補完の実装
jQuery UI - オートコンプリート - jQuery 入門

jQueryとjQueryUIを読み込んでactiveElementに.autocompleteで補完リストを追加するbookmarklet。
jQueryとは別にjQueryUIの読み込みが必要な事に気が付かないで苦労した。
元々jQueryが読み込まれているページの場合は再読み込みはせずにそれを使う。
想定しているバージョンと異なる可能性あるので注意が必要。

javascript; (function (bml) {
    var d = document;
    var doBml = function () {
        bml(jQuery);
    };
    var loadScript = function (url, f) {
        console.log(url);
        var s = d.createElement("script");
        s.src = url;
        s.onload = f;
        d.body.appendChild(s);
    };
    var loadjQueryUi = function () {
        loadScript("//code.jquery.com/ui/1.10.4/jquery-ui.js", doBml);
    };
    
    if (typeof jQuery == "undefined") {
        loadScript("//code.jquery.com/jquery-2.0.3.js", loadjQueryUi);
    } else if (typeof jQuery.ui == "undefined") {
        loadjQueryUi();
    } else {
        doBml();
    }
})(function ($) {
    console.log($().jquery, $.ui.version, document.activeElement);
    $(document.activeElement).autocomplete({source: ["hoge","fuga"]});
});

[Javascripのライブラリを使う]
suggest.js - 入力補完ライブラリ

[おまけ]
focousがある要素はJavaScriptでは"document.activeElement"で取れる。
javascript - How do I find out which DOM element has the focus? - Stack Overflow

Chromeのbookmark barはCtrl+Shift+Bで表示をトグル出来る。

ChromeのDate()についてのメモ

Date()の値をそのままsetRequestHeaderに使おうとすると、

Uncaught SyntaxError: Failed to execute 'setRequestHeader' on 'XMLHttpRequest': 'Mon Jun 30 2014 19:36:42 GMT+0900 (東京 (標準時))' is not a valid HTTP header field value.

のエラーになってしまう。(東京 (標準時))が引っかかっているとのこと。

他のブラウザでは(東京 (標準時))がつかないので問題ないらしい。

setRequestHeaderに渡す前に(東京 (標準時))を削除すれば問題はない。

既存のサイトのjsをbookmarkletやextensionで書き換えて対応する事は可能??

読み込み時にajaxで使われているときはbookmarkletでは多分対応出来ない。

javascriptが実行される前にextensionを実行出来れば何とかなる?
Manifestのrun_atをdocument_startにすれば可能??

bookmarklet作成のメモ

飛行機のチケットの予約をする時に、家族全員の名前などを毎回入れるは結構面倒。
特にお盆休みや正月に帰省する時は予約開始時間から直ぐに予約が一杯になるので、もたもた入力している暇も無い。

これまではOperaのextensionを使って入力していたが、Chromeに乗り換えたので今回はbookmarkletを作ってみることにした。
参考にしたのは下記のサイト
ブックマークレット／Bookmarkletの作り方
ブックマークレットを作るときのTips
Bookmarklet を作ってみる

jQueryも使えるようなのでそのうち試してみたい。
ブックマークレットで jQuery を使う魔法の 210 文字

[実際に作ったbookmarklet]
skymarkの予約ページに名前などの情報をセットするjavascriptを作成した。
これをChromeのbookmarkにURLのフィールドに貼り付けたら動いた。

javascript:(function(d,v,n,c){
v=function(n,v){d.getElementsByName(n)[0].value=v};
v("tel","xxxxxxxx");
v("mailAddressPC","xxxxxxxx");
v("mailAddressMB","xxxxxxxx");
c=function(i){d.getElementById(i).checked="checked"};
c("callerSame");
n=function(x,i,r,j,a,s){v(x+"LastName"+i,"xxxx");v(x+"LastNameJ"+i,"xxxx");v(x+"FirstName"+i,r);v(x+"FirstNameJ"+i,j);v(x+"Age"+i,a);c(x+"Sex_"+s+i)};
n("a",0,"xxxx","xx",99,"M");
n("a",1,"xxxx","xx",88,"F");
n("ca",0,"xxxx","xx",9,"F");
n("c",0,"xxxx","xx",4,"M");
}(document))

[文字数制限]
Chromeは6k文字,IEでも2k文字程度は大丈夫な様子。
名前などをなるべく短く書こうとしたが、ちょっとしたことならそこまで無理はしなくて良いかも。
上記のbookmarkletで0,6k文字程度。
ローカル変数の宣言(var)をする代わりに関数の引数を増やすとvarの文字列を省略出来る。

[一行制限]
全てを一行で書く必要があるようだが、Chromeでは上記を改行ありのままでURLフィールドに貼り付けたら勝手に改行が削除されて上手く動いた。
他のブラウザでは上手く行かないのかもしれない。

[URIエンコード]
制御文字(スペース、引用符)や日本語はURIエンコードする必要がある様だが、ChromeではエンコードしないでそのままURLフィールドに貼り付けても上手く動いた。
他のブラウザでは上手く行かないのかもしれない

[名前空間]
bookmarkletは元ページのJavaScriptと同じ名前空間で動作するので、無名関数等使ってbookmarklet内の名前が外側から見えないようにする必要がある。