┐(´ー｀)┌なJavaScript雑記

URLの数字を増やしたり減らしたり

JS

よくある Bookmarklet です。

正規表現とjavascripterさんの関数で使ってだいぶ短く書けそうだったので書いてみました。

• 先頭を0で埋めて桁をそろえる（解説付き） - 素人がプログラミングを勉強するブログ

これを普通の関数にして、条件式を足させていただきました。

fillZero 便利ー♪

URL増加

javascript:(function(){
	function fillZero(t,n){return (t.toString().length < n)? (new Array(n).join('0')+t).substr(-n): t;}
	location.href = location.href.replace(/^(.*[^\d])(\d+)($|[^\d]+)$/,function(str, first, num, last){
		return first + fillZero(parseInt(num,10)+1, num.length) + last;
	});
})();

URL減少（0で埋める）

10 → 09 って感じです。

javascript:(function(){
	function fillZero(t,n){return (t.toString().length < n)? (new Array(n).join('0')+t).substr(-n): t;}
	location.href = location.href.replace(/^(.*[^\d])(\d+)($|[^\d]+)$/,function(str, first, num, last){
		return first + fillZero(parseInt(num,10)-1, num.length) + last;
	});
})();

URL減少（0で埋めない）

10 → 9 です。

javascript:location.href = location.href.replace(/^(.*[^\d])(\d+)($|[^\d]+)$/,function(str, first, num, last){
	return first + (parseInt(num,10)-1) + last;
});

使用に当たって

エラーチェックを一切しておりません（ぇ

URL に数字が含まれなければ同じ URL に移動しますし、

減少の方では「0 → -1 → -0 → -1.....」となります。

Permalink | コメント(0) | トラックバック(0) | 18:02

小物をちょこっと

userChrome

寄せ集めて１つのファイルにするなり、似てるスクリプトに書き足すなりして使ってください。

長いURLの真ん中を省略する

tth://example.com/..../hogehoge.html って感じです。

リクをもらったんですが、自分はすでに使っていたので当たり前になりすぎて忘れてました（ぁ

document.getElementById('statusbar-display').setAttribute('crop', 'center');

アドレスバーの履歴検索の表示数を増やす

アドレスバーのオートコンプリート（URL補完）や、履歴検索の表示数を増やします。

gURLBar.setAttribute('maxrows','12');// Default 6

こうすることで12個まで履歴が表示されるようになります。

12個以上表示したい場合は about:config の設定を変えます

user_pref("browser.urlbar.maxRichResults", 18);//Default 12

これはアドレスバー右の▼のポップアップの表示数ですが、これがオートコンプリートの最大表示数も兼ねているようです。

Stylish の管理ツールをタブで表示

ステータスバーの Stylish のアイコンの「スタイルの管理」を 中クリック or Ctrl＋クリックで新しいタブに開きます。

"chrome://stylish/content/manage.xul"をお気に入りに入れればそれで十分ですが（ぇ

document.getElementById('stylish-add-file').previousSibling.addEventListener('click', function(e){
    if (e.button == 1 || e.ctrlKey){
        gBrowser.selectedTab = gBrowser.addTab('chrome://stylish/content/manage.xul');
        document.getElementById('stylish-status-popup').hidePopup();
        e.preventDefault();
    }
},false);

右（左）のタブを全て閉じる

日本語を使っているので Unicode(UTF-8)で保存しないと文字化けするかもしれません。

(function(){
function closeRightTabs(){
    var tab = document.popupNode;
    while(tab.nextSibling){
        gBrowser.removeTab(tab.nextSibling);
    }
}
function closeLeftTabs(){
    var tab = document.popupNode;
    while(tab.previousSibling){
        gBrowser.removeTab(tab.previousSibling);
    }
}
    var tabmenu = document.getAnonymousElementByAttribute(gBrowser,'anonid','tabContextMenu');

    var closeRight = document.createElement('menuitem');
    closeRight.setAttribute('label', '右のタブをすべて閉じる');
    closeRight.addEventListener('command', closeRightTabs, false);
    tabmenu.insertBefore(closeRight, document.getElementById('context_closeOtherTabs'));

    var closeLeft = document.createElement('menuitem');
    closeLeft.setAttribute('label', '左のタブをすべて閉じる');
    closeLeft.addEventListener('command', closeLeftTabs, false);
    tabmenu.insertBefore(closeLeft, document.getElementById('context_closeOtherTabs'));
})();

Permalink | コメント(1) | トラックバック(0) | 17:36

ステータスバーをURLバーと統合 その２

userChrome

• ステータスバーをアドレスバーと統合する - ┐(´ー｀)┌なJavaScript雑記

これの改良版。

カスタマイズをするとステータス表示欄が機能しなくなる問題の対処と、ステータスバーパネルを２箇所に分けられるようにしました。

ついでにプログレスバーもURLバーの中に移動しました。

// ==UserScript==
// @name           zzz_StatusbarInURLBar2.uc.js
// @namespace      http://d.hatena.ne.jp/Griever/
// @include        main
// ==/UserScript==

/* 
 * ステータスバー表示欄とプログレスバーを アドレスバーの中に移動
 * 拡張のパネルをアドレスバーの前に移動（mainPanel）
 * 標準のパネルを検索バーの後に移動（subPanel）
 */
(function() {
//subPanelの内容
var subPanels = ['page-report-button','security-button','download-monitor'];

    var identityBox = document.getElementById('identity-box');
    var urlbarIcons = document.getElementById('urlbar-icons');
    var searchContainer = document.getElementById('search-container');
    var urlbarContainer = document.getElementById('urlbar-container');
    var statusBar = document.getElementById('status-bar');

//プログレスバーを移動
    var progresspanel = document.getElementById('statusbar-progresspanel');
    urlbarIcons.insertBefore(progresspanel, urlbarIcons.firstChild);

//ステータス表示欄を移動
    var statusbarDisplay = document.getElementById('statusbar-display');
    urlbarIcons.insertBefore(statusbarDisplay, urlbarIcons.firstChild);//アドレスバーの右側に挿入。
/*
    identityBox.appendChild(statusbarDisplay);//アドレスバーの左側に挿入
    identityBox.style.borderRightWidth = '0px';
*/
//ステータスバーのパネルを格納（サブ）
    var subPanelContainer = document.createElement('toolbaritem');
    subPanelContainer.setAttribute('id', 'subpanel-container');
    subPanels.forEach(function(id){
        subPanelContainer.appendChild(document.getElementById(id));
    });
    searchContainer.parentNode.insertBefore(subPanelContainer, searchContainer.nextSibling);

//ステータスバーのパネルを格納（メイン）
    var mainPanelContainer = document.createElement('toolbaritem');
    mainPanelContainer.setAttribute('id', 'mainpanel-container');
    while(statusBar.hasChildNodes()){
        mainPanelContainer.appendChild(statusBar.lastChild);
    }
    urlbarContainer.parentNode.insertBefore(mainPanelContainer, urlbarContainer);

    statusBar.hidden = true;

    var style = <![CDATA[
        
        #urlbar-icons,#identity-box{
        }
        #statusbar-display{
            max-width: 600px !important;/* ステータス表示欄の最大幅 */
            padding-left: 10px !important;
            border: none !important;
            -moz-appearance: none !important;
            color: navy !important;
        }
        #mainpanel-container > statusbarpanel,
        #subpanel-container > statusbarpanel{
            margin: 0 !important;
        }
        /* プログレスバーを小さく */
        #statusbar-icon{
            width : 32px !important;
            max-width : 32px !important;
            min-width : 32px !important;
        }
    ]]>.toString();
    var sspi = document.createProcessingInstruction(
        'xml-stylesheet',
        'type="text/css" href="data:text/css,' + encodeURI(style) + '"'
    );
    document.insertBefore(sspi, document.documentElement);
    sspi.getAttribute = function(name) {
        return document.documentElement.getAttribute(name);
    };
})();

ステータスバーは非表示にするのでこのスクリプトの後にステータスバーに何かするスクリプトが実行しないようにしてください。

ステータスバーを消さない方法を考えた方が良いかな…？

移動させたパネルを右クリックすると通常のツールバーの右クリックメニューがでることがあるけどスルー（ぇ

SS にあるタブの縦置きは作成中。

全画面表示を使わないのであれば問題なく動く状態ですが、ソースが汚すぎて公開できません（ぇ

Permalink | コメント(3) | トラックバック(0) | 21:00

メニューバーを寄せ集める

userChrome

Compact Menu ってありますよね。

メニューバーを一纏めにするやつです。

私が使ってるやつを公開します。

ググると色々出てきますね。

• Compact Menu 2 :: Firefox Add-ons
• Tiny Menu :: Firefox Add-ons
• タグ: userChrome.js - Code-404
• Compact Menu for userChrome.js - 1/4ガロン

// ==UserScript==
// @name         MedleyMenu
// @namespace    http://d.hatena.ne.jp/Griever/
// @include      main
// ==/UserScript==

(function() {
	var medleyList = [
    'file-menu',      //ファイル
    'edit-menu',      //編集
    'view-menu',      //表示
    'history-menu',   //履歴
//    'bookmarksMenu',  //ブックマーク
//    'tools-menu',     //ツール
    'helpMenu',       //ヘルプ
    'endHistorySeparator',  //最近閉じたタブ の上の区切り
    'historyUndoMenu',      //最近閉じたタブ
    'menu_FileQuitItem'    //終了
    ];

    var mainMenubar = document.getElementById('main-menubar');
    var menu = mainMenubar.insertBefore(document.createElement('menu'), mainMenubar.firstChild);
    menu.setAttribute('label', 'Menu');
    menu.setAttribute('id', 'medley-menu');
    menu.setAttribute('accesskey', 'M');
    menu.setAttribute('disabled', false);

    var menupopup = menu.appendChild(document.createElement('menupopup'));
    medleyList.forEach(function(id){
        menupopup.appendChild(document.getElementById(id));
    });
})();

よく使うメニューをまとめると使いにくいので、使うメニューだけ選べるようになってます。

DOM Inspector の使い方さえわかれば好きなメニューを移動できます。

画像にしたかったらこんな感じの CSS を使います。

@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);

#medley-menu{
   -moz-binding: url("chrome://global/content/bindings/menu.xml#menu-iconic") !important;
   list-style-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABtklEQVQ4ja2TTWsTURSG779z2diipRQ/UEoXwTENCSQpBalFoaJQijKNaZo4pDNpJ2SGDuEmJOkwEOIXitJC1XTvD+guuXlcXA3iQmzrC8/mXO7zLg5HiMtmyrDjT7zTs9zugGxlQNb6SqZ8QnrnmNT2EcnCZ5a2PnLf/IDx/B3xzTdktqKzKcOOCyGEeLh3qjbkd86L8SxUQgghcrsDLsLC+iFCCCGy1jcukjuP2lqQefUFgMWufuj3+/R6PaIoIgxDut0u7XabVquFlBIpJQC31po/BeWTvzaNx+MJSimUUgDceNDQgvTOsR5oMWEY0ul0aDabNBoNgiDA933q9Tq1Wg3XdQGYXwm0ILV99E+tvxiNRgDMLftakHz5CYCrvv4opSQIAjzPw3VdHMehUqlgWRblcplSqQTAbLauBcaL95PWP5t+ZzgcTgCYSe1rwb3NtwBc2QelFL7v47outm1jWRbFYpFCoUA+n8c0TUzTBGA6WdWC+Mbr86x/ktiSowWxhF1dfBqxsH7I3ccdbq+1uLkqmV85YG7ZZzbncT1T41raZSa1x3TSIZZwiCXs6qUP8b/kB3fkhrnvnMMsAAAAAElFTkSuQmCC") !important;
}

#medley-menu > hbox[anonid="accel"],
#medley-menu > .menu-right,
#medley-menu > .menu-iconic-text
	{ display: none !important; }

#medley-menu > .menu-iconic-left { padding: 0 2px !important; }

アイコンはfamfamfam.comから拝借。

CSS は userstyles.org を参考にしました。

Permalink | コメント(0) | トラックバック(0) | 23:58

XBL 良くわからん

Firefox

• XBLとuserContent.cssとGreasemonkey - 素人がプログラミングを勉強するブログ

これに影響を受けて色々試してます。

YouTube の動画のページを開いたら"&fmt=18"に移動させてみた。

DOMContentLoaded より早いので良い感じ。

2ch の「ime.nu」の削除もやってみた。

普通に出来る。ただ XBL と組み合わせる必要ないですね。

組み合わせるなら ime.nu を踏んだら即移動だけど、踏みたくないですよね（ぁ

Google Image でもリダイレクト削除してみた。

JavaScript を OFF にしてるとダメなのね...ψ(。。)メモメモ

Google 検索 にはてブの登録数を付けてみた。

良い感じ。

AutoPagerize との相性◎。

CSSセレクタの条件満たせば後から追加された要素にも即時適用されるのは気持ちいいです。

Opera の UserCSS ＋ -o-link とはひと味違って面白いです。

Opera 10 は 「リンク ＋ -o-link ＋ oAutoPagerize」で落ちるのは直るかな…？

Elements - MDC

これによると dataスキームを登録できるらしいのですが、何度やってもうまくいかない。

Firebug の表示を見ると「-moz-binding:url(data:text/xml;」となっていてうまく認識できてない様子。

かと言って「;」を「%3B」にすると dataスキームとして認識しない。

これ無理じゃね？（ぇ

Permalink | コメント(0) | トラックバック(0) | 21:45

はてブに登録されてるか調べるBookmarklet

JS

多分探せばあるはず。

どうやって付けるのか気になって調べたついでに書いてみました

ワンライナー版

Bookmarklet ＝ ワンライナー という突っ込みはナシでｗ

ここでは「１文で書いた物」ということにしておきます。

ブックマーク数が表示されるだけで、リンクは貼られません。。

• リンクをチェック

javascript:Array.prototype.forEach.call(document.links, function(elem){elem.parentNode.insertBefore(new Image(), elem.nextSibling).src = 'http://b.hatena.ne.jp/entry/image/small/' + decodeURIComponent(elem.href).replace(/\#/g,'%23')});

• 画像もチェック

javascript:Array.prototype.slice.call(document.links).concat(Array.prototype.slice.call(document.images)).forEach(function(elem){elem.parentNode.insertBefore(new Image(), elem.nextSibling).src = 'http://b.hatena.ne.jp/entry/image/small/' + decodeURIComponent(elem.href || elem.src).replace(/\#/g,'%23')})

• 可読性重視で書いてみる

javascript:
var links = Array.prototype.slice.call(document.links);  //リンクを配列化
var images = Array.prototype.slice.call(document.images);//画像を配列化
var linksAndImages = links.concat(images);               //一度に走査するために、配列を１つにまとめる
linksAndImages.forEach(function(elem){                   //画像の作成
	var img = new Image();
	img.src = 'http://b.hatena.ne.jp/entry/image/small/' + decodeURIComponent(elem.href || elem.src).replace(/\#/g,'%23');
	elem.parentNode.insertBefore(img, elem.nextSibling);
});

document.links や getElementsBy〜 の動的な NodeList では追加されたリンクや画像も考慮しなきゃいけないけど、

配列に入れておけば後から要素が増えようが減ろうが関係ない。

実用版

画像＋「このエントリーを含むブックマーク」のページ(?)にリンクを張ります

• リンクのみチェック

javascript:
Array.prototype.slice.call(document.links).forEach(function(elem){
	var a = elem.parentNode.insertBefore(document.createElement('a'), elem.nextSibling);
	var s = decodeURIComponent(elem.href).replace(/\#/g,'%23');
	a.href='http://b.hatena.ne.jp/entry/' + s;
	a.appendChild(new Image()).src = 'http://b.hatena.ne.jp/entry/image/small/' + s;
});

• 画像もチェック

javascript:
Array.prototype.slice.call(document.links).concat(Array.prototype.slice.call(document.images)).forEach(function(elem){
	var p = (elem.parentNode.tagName == 'A')? elem.parentNode: elem;
	var a = p.parentNode.insertBefore(document.createElement('a'), p.nextSibling);
	var s = decodeURIComponent(elem.href || elem.src).replace(/\#/g,'%23');
	a.href='http://b.hatena.ne.jp/entry/' + s;
	a.appendChild(new Image()).src = 'http://b.hatena.ne.jp/entry/image/small/' + s;
})

リンクの中にリンクができると クリックできるのは外側のリンクらしいので簡単なチェックも付けた。

XPath？面倒なので極力使いません（ﾏﾃ

• Selectors API使用。Firefox 3.1、Opera 10、Safari、Chrome で動くと思う。

javascript:Array.prototype.forEach.call(document.querySelectorAll('a[href],[src]:not(embed)'), function(elem){
	var p = (elem.parentNode.tagName == 'A')? elem.parentNode: elem;
	var a = p.parentNode.insertBefore(document.createElement('a'), p.nextSibling);
	var s = decodeURIComponent(elem.href || elem.src).replace(/\#/g,'%23');
	a.href='http://b.hatena.ne.jp/entry/' + s;
	a.appendChild(new Image()).src = 'http://b.hatena.ne.jp/entry/image/small/' + s;
});

href と src で判断するから画像じゃなくてもマッチする。

一応 embed だけは避けてみた。

CSS セレクタは楽で良いな〜。

作ってみて

はてなスターの画像までブックマークされてるｗ

みんなでいろんな物をブックマークして気付いた人を笑わせましょう（ﾏﾃ

Permalink | コメント(0) | トラックバック(0) | 18:06