月別アーカイブ: 2011年7月

FireFoxアドオンのCopyAllUrlsみたいにIEでもまとめて開きたいJS(自分メモ)


FireFoxアドオンにはCopyAllUrlsというコピーしたURLをまとめて表示する便利なツールがありますね。

FireFoxアドオン CopyAllURLs

このアドオンは、「現在タブで開いている全てのURL」をクリップボードにコピーしてくれたり便利ですが、
せめて、IEや他のブラウザでも、コピーしたURLをまとめて開けたらなと思いJSを作ってみました。
(※IE6はタブがないので別窓ですし、IE7以上もポップアップをタブで開く設定に変えないと別窓です)

IEでもコピーしたURLをまとめて開くJSデモ

▼JavaScript


function openAllUrls(){
var urls = document.getElementById(‘urls’).value;
urls = urls.replace(/rn|n|t| | /g, “,”);
urls = urls.replace(/(http(s)?://)/g, “,$1”);
var url = urls.split(“,”);
for (i = 0; i < url.length; i++) { if(url[i].match(/^http(s)?://.*/)){ window.open(url[i], "_blank"); } } } [/javascript] ▼HTML [html toolbar="false"]

[/html]

コピーするURLは行頭がhttp://かhttps://ではじまっているか、
タブ区切りやカンマ区切り、スペース区切りであれば行頭でなくてもURLとして認識します。
文章中のURLは後半の日本語はそのままつけてしまいます。
これは日本語の混在したURLもあり得るようになってきたためです。
その代わり、URLの終わりが改行されているか半角スペースや全角スペースで区切られていれば認識できます。
※エンコードされていないカンマが含まれるなど特殊なURLは認識できない場合があります。。

ページ内に指定した文字列が含まれていたら警告するGreasemonkey用user.js(自分メモ)


どんなときに使うかというと、大量のページが存在するWEBサイトで、
名称変更や使用してはならない文字列が発生したときに、
作業上での修正漏れをFirefoxに発見してもらおうという場合です。

これを仕込んでおけば先祖がえりしたり、
一括置換で漏れが発生しても確実に気付くことができます。

Firefoxアドオン – Greasemonkey
Greasemonkeyスクリプトの作り方(日本語訳)

keyword_checker.user.js

// ==UserScript==
// @name error_keyword_checker
// @namespace https://w-x-w.com
// @description error keyword check
// @include *
// ==/UserScript==

var w = "w-x-w"; // キーワード指定(正規表現)
var re = new RegExp(w, "ig");
var a = "";
var y = "";
var z = "";
// 結果を個別に表示したい属性を追加
var tg = new Array('href','src','title','alt','rel','summary');
var h = document.getElementsByTagName('head')[0];
var oh = "";

if (h.innerHTML) {
	if (h.innerHTML.match(re)) {
		oh = h.innerHTML.match(re).length;
		y += "head:全" + oh + "個";
	}
}

var t = h.getElementsByTagName('title')[0].childNodes[0].nodeValue;
if (t.match(re)) {
	a += "<li>title:" + t.match(re).length + "個</li>";
	oh = oh - t.match(re).length;
}

var m = h.getElementsByTagName('meta');
for(var i=0;i<m.length;i++){
	if (m&#91;i&#93;.getAttribute('content')) {
		if (m&#91;i&#93;.getAttribute('content').match(re)) {
			a += "<li>meta(" + m[i].getAttribute('name') + "):";
			a += m[i].getAttribute('content').match(re).length + "個</li>";
			oh = oh - m[i].getAttribute('content').match(re).length;
		}
	}
}

var th = h.getElementsByTagName('*');
var ch = new Array();
var dh = new Array();
for(var i=0;i<tg.length;i++){
	ch&#91;i&#93; = 0;
	dh&#91;i&#93; = 0;
	for(var j=0;j<th.length;j++){
		if (th&#91;j&#93;.getAttribute(tg&#91;i&#93;)) {
			if (th&#91;j&#93;.getAttribute(tg&#91;i&#93;).match(re)) {
				ch&#91;i&#93; = ch&#91;i&#93; + th&#91;j&#93;.getAttribute(tg&#91;i&#93;).match(re).length;
				dh&#91;i&#93;++;
				oh = oh - th&#91;j&#93;.getAttribute(tg&#91;i&#93;).match(re).length;
			}
		}
	}
	if (ch&#91;i&#93; > 0) {
		a += "<li>head(" + tg[i] + "属性):" + dh[i] + "箇所(" + ch[i] + "個)</li>";
	}
}

if(oh > 0){
	a += "<li>head(その他):" + oh + "個</li>";
}

var b = document.getElementsByTagName('body')[0];
var o = "";

if (b.innerHTML) {
	if (b.innerHTML.match(re)) {
		o = b.innerHTML.match(re).length;
		z += "body:全" + o + "個";
	}
}

var t = b.getElementsByTagName('*');
var c = new Array();
var d = new Array();
for(var i=0;i<tg.length;i++){
	c&#91;i&#93; = 0;
	d&#91;i&#93; = 0;
	for(var j=0;j<t.length;j++){
		if (t&#91;j&#93;.getAttribute(tg&#91;i&#93;)) {
			if (t&#91;j&#93;.getAttribute(tg&#91;i&#93;).match(re)) {
				c&#91;i&#93; = c&#91;i&#93; + t&#91;j&#93;.getAttribute(tg&#91;i&#93;).match(re).length;
				d&#91;i&#93;++;
				o = o - t&#91;j&#93;.getAttribute(tg&#91;i&#93;).match(re).length;
			}
		}
	}
	if (c&#91;i&#93; > 0) {
		a += "<li>body(" + tg[i] + "属性):" + d[i] + "箇所(" + c[i] + "個)</li>";
	}
}

if(o > 0){
	a += "<li>body(テキスト/その他):" + o + "個</li>";
}

// body内に結果を表示
if(y != "" || z != ""){
	var d = document.createElement('div');
	d.id = "error_keyword";
	d.className = "drag_on";
	d.style.zIndex = 999999;
	d.style.padding = '20px';
	d.style.border = '4px solid #fff';
	d.style.backgroundColor = 'yellow';
	d.style.position = 'absolute';
	d.style.top = '8px';
	d.style.right = '8px';
	d.style.opacity = 0.6;
	d.style.borderRadius = '10px';
	d.style.MozBorderRadius = '10px';
	d.style.fontSize = '80%';
	d.addEventListener("dblclick", del_error, false);
	var e = document.createElement('div');
	e.innerHTML = '<h3>「' + w + '」に該当する文字列が見つかりました。</h3>';
	e.innerHTML += '<p>※黄色いエリアをダブルクリックするとこのエラー表示は消えます</p>';
	e.style.fontSize = '100%';
	e.style.margin = '0';
	e.style.padding = '0 1em';
	d.appendChild(e);
	if(a != ""){
		var e = document.createElement('ol');
		e.innerHTML = a;
		e.style.fontSize = '300%';
		e.style.listStyleType = 'decimal';
		e.style.margin = '0';
		e.style.paddingLeft = '1.2em';
		d.appendChild(e);
	}
	if(y != ""){
		var e = document.createElement('p');
		e.innerHTML = y;
		e.style.fontSize = '500%';
		e.style.margin = '0';
		e.style.padding = '0 0 0 0.15em';
		d.appendChild(e);
	}
	if(z != ""){
		var e = document.createElement('p');
		e.innerHTML = z;
		e.style.fontSize = '500%';
		e.style.margin = '10px 0 15px';
		e.style.padding = '0 0 0 0.15em';
		d.appendChild(e);
	}
	b.appendChild(d);
}

// ダブルクリックで表示内容を閉じる
function del_error() {
	d.parentNode.removeChild(d);
}

// ここから 技評.jp掲載JSをほぼ引用^^;
// 第22回 JavaScriptによるUIの実装:ドラッグ
// http://gihyo.jp/dev/serial/01/crossbrowser-javascript/0022
(function(){
var addEvent = document.addEventListener ?
	function(node,type,listener){
	node.addEventListener(type,listener,false);
	} :
	function(node,type,listener){
	node.attachEvent('on'+type, listener);
	}
var removeEvent = document.removeEventListener ?
	function(node,type,listener){
	node.removeEventListener(type,listener,false);
	} :
	function(node,type,listener){
	node.detachEvent('on'+type, listener);
	}
function getStyle(element){
	return window.getComputedStyle ?
	getComputedStyle(element, '') :
	element.currentStyle;
}
var IE6 = !window.XMLHttpRequest && window.ActiveXObject;
var root = document.documentElement;

var dragging = false;
var fixed = false;
var x, y, dx, dy;
var element;
addEvent(document,'mousedown', function(evt){
	if(!evt){
	evt = window.event;
	}
	var target = evt.target || evt.srcElement;
	if (target.className === 'drag_on') {
	x = evt.offsetX || evt.layerX;
	y = evt.offsetY || evt.layerY;
	dragging = true;
	element = target;
	var style = getStyle(element);
	var rect = element.getBoundingClientRect();
	var left = window.pageXOffset || root.scrollLeft;
	var top = window.pageYOffset || root.scrollTop;
	if (style.position === 'fixed'){
	fixed = true;
	dx = 0;
	dy = 0;
	} else {
	fixed = false;
	dx = (rect.left + left) - element.offsetLeft;
	dy = (rect.top + top ) - element.offsetTop;
	}
	if (IE6){
	element.style.removeExpression('behavior');
	}
	if (evt.preventDefault){
	evt.preventDefault();
	} else {
	evt.returnValue = false;
	}
	addEvent(document, 'mousemove', mousemove);
	}
});
addEvent(document, 'mouseup', function(evt){
	if(dragging){
	dragging = false;
	removeEvent(document, 'mousemove', mousemove);
	var rect = element.getBoundingClientRect();
	element.style.left = rect.left + 'px';
	element.style.top = rect.top + 'px';
	element.style.position = 'fixed';
	if (IE6) {
	element.style.position = 'absolute';
	var L = 'document.documentElement.scrollLeft';
	var T = 'document.documentElement.scrollTop';
	element.style.setExpression('behavior',
	'this.style.left=(' +(rect.left-dx)+ '+' + L + ' )+"px",'+
	'this.style.top =(' +(rect.top -dy)+ '+' + T + ' )+"px"');
	document.body.style.backgroundImage='url(about:blank)'
	document.body.style.backgroundAttachment = 'fixed';
	}
	}
});
function mousemove(evt){
	if(!evt){
	evt = window.event;
	}
	if(dragging){
	var left= fixed? 0: window.pageXOffset||root.scrollLeft
	var top = fixed? 0: window.pageYOffset||root.scrollTop
	element.style.left= left+ evt.clientX - x - dx + 'px';
	element.style.top = top + evt.clientY - y - dy + 'px';
	element.style.right = 'auto';
	if (evt.preventDefault){
	evt.preventDefault();
	} else {
	evt.returnValue = false;
	}
	}
}
})();
// ここまで 技評.jp掲載JSをほぼ引用^^;

▼検索文字列の指定
検索文字列は、

var w = "w-x-w";

の部分で正規表現でまとめて指定することができます。

var w = "w-x-w|hoge|test|日本語";

正規表現が苦手の人でも複数指定は半角の「|」で区切るだけですから簡単です。

▼チェックするサイトの指定
@include部分は、ワイルドカードが使えるので、
該当サイトのURL+*(アスタリスク)にしておくとそのURL内でのみチェックします。
▼w-x-w.com内のときだけチェックする場合

// @include w-x-w.com/*

▼w-x-w.com内でもw-x-w.com/test/ではチェックしなくていい場合は、

// @exclude w-x-w.com/test/*

を@includeの下あたりに書きくわえれば、除外できます。複数ある場合も、

// @include w-x-w.com/*
// @include hoge.jp/*
// @exclude w-x-w.com/test/*
// @exclude w-x-w.com/hoge/*

といった感じに何行でも付け足すことが可能です。
ちなみに、

// @include *

は、すべてのURLということです。

Adobe Photoshopの無料アプリ「Adobe Photoshop Express」


編集できるのは、photoshop.comfacebooktwitpicにアップロードした画像か、
スマホのカメラで撮った画像になるみたい。
(おそらくスマホのカメラで撮った画像の格納されているフォルダに画像をコピーできれば、
何でも編集できそうだけど、そこまでするくらいならPCでもいいような気がする。。)

本来の持ち味である、新規作成で絵が描けたり、自由にデコレーションしたり、
レイヤー別に分けていつでも追加した部分だけ削除できるというレベルの機能は
今のところない模様(2011/7/17現在)。

プロツールとは言えないものの、切り抜きが使えるのはでかいし、
補正機能もメニューから数値で指定できるので、画像の簡易補正は可能です。
決められたデコレーションもいくつかあるので一般向けには十分かも。
なによりAdobeの冠つきアプリなので安心感がありますよね。

オンラインでどこまでできる?Photoshop Expressを使ってみた
Adobe Photoshop Express for Apple
Adobe Photoshop Express for Android