ページを逆立ちさせるブックマークレット

jQuery の回転アニメーション ではページを回転させるアニメーションが実行できたので、試しに作ってみました。もうちょっと手を入れれば、jQuery の回転も実装できると思いますが・・・ジョークプログラムなんで、これで十分でしょう。

※ 元に戻すのはリロードするか、ブックマークレットの中の角度を変更して実行するといいです。

※ クロスブラウジングするほどの実用性無いので、二種類あります。

ためしに、45度とかやってみたんですが、これを仕事中席外した隙にやられたら、結構洒落にならないです。

▼ 45度のまま、デベロッパーツールで、『おすすめユーザ』を消しています

▼ Google Chrome
ページ逆立ち
▼ IE10 と IE11 と Firefox
ページ逆立ち

関連する記事

アドレスバーに表示した URL を、ダウンロードできるリンクを作成するブックマークレット( 動画等、そのままではダウンロードできない場合にとても有効です )

リンクビルダー

▼ 表示しているページに以下のような IFRAME を埋め込みます


実行すると、現在表示している URL を使って、まずダウンロード用の単純なリンクを作成します( このリンクは右クリックから使うように、通常のクリックではメッセージが表示されて、使用できません )

それ以外に、HTML として以下のようなリンクを作成します。
1) 普通のリンク 
2) 新しくウインドウを開くリンク
3) 画像として
4) IFRAME の内容
5) javascript として
6) css として


一度開いた後も、他の URL を上にテキストエリアに貼り付けて再度作成もできます。

ブックマークレット内では、こちらでホスティングしている js ファイルを使用しており、その内容は以下のようになります

str="";
str+="<meta charset=\"utf-8\"> \n";
str+="<style> \n";
str+="* { \n";
str+="	font-size:14px; \n";
str+="	font-family: Arial, Helvetica, Verdana, \"ヒラギノ角ゴPro W3\", \"Hiragino Kaku Gothic Pro\", Osaka, \"メイリオ\", Meiryo, \"ＭＳ Ｐゴシック\", sans-serif; \n";
str+="} \n";
str+="body{ \n";
str+="	background-color:#ccc; \n";
str+="	padding-left: 11px; \n";
str+="} \n";
str+="</style> \n";
str+="<input type=\"button\" value=\"ダウンロードリンク作成\" onclick=\"build_link();\"> \n";
str+=" <input type=\"button\" value=\"アドレスバー取得\" onclick=\"get_link();\"> \n";
str+="<br> \n";
str+="<textarea id=\"url\" style='width:360px;height:70px;' onclick='this.select();'></textarea> \n";
str+="<div style='height:40px;padding:3px;'> \n";
str+="<a id=\"link\" href=\"#\" onclick=\"";
str+="		alert('右クリックからダウンロードして下さい'); \n";
str+="		if (window.navigator.appName.toLowerCase().indexOf('microsoft') > -1) { \n";
str+="			event.returnValue = false; \n";
str+="		} \n";
str+="		event.preventDefault(); \n";
str+="		event.stopPropagation(); \n";
str+="	\"> </a> </div>\n";
str+="<textarea id=\"data\" style='width:360px;height:410px;'></textarea> \n";
str+="<br><a href=\"http://toolbox.winofsql.jp/tool_html_links.htm\" target=\"_blank\" style='color:navy'>HTMLまたはJSのテストページ</a> \n";
str+="<"+"script type=\"text/javascript\"> \n";
str+="get_link(); \n";
str+="build_link(); \n";
str+="</"+"script> ";
document.write(str);
document.close();
function get_link() {
	document.getElementById("url").value = parent.document.URL;
}
function build_link() {
	if ( document.getElementById("url").value == "" ) {
		alert("URL を入力して下さい");
		document.getElementById("url").focus();
		return;
	}

	var url = document.getElementById("url").value;

	document.getElementById("link").firstChild.nodeValue = "ダウンロードリンク";
	document.getElementById("link").href= url;

	var target = "";

	target+="<a href=\""+ url + "\">リンク</a>\n";
	target+="\n";
	target+="<a href=\""+ url + "\" target=\"_blank\">新しいウインドウリンク</a>\n";
	target+="\n";
	target+="<img src=\""+ url + "\" style=\"border: solid 0px #000000;\">\n";
	target+="\n";
	target+="<iframe src=\"" + url + "\" name=\"myframe\" frameborder=\"1\" scrolling=\"yes\" width=\"600\" height=\"400\"></iframe>\n";
	target+="\n";
	target+="<"+"script type=\"text/javascript\" src=\""+ url + "\"></"+"script> \n";
	target+="\n";
	target+="<link rel=\"stylesheet\" href=\""+ url + "\" type=\"text/css\"> ";
	target+="\n";

	document.getElementById("data").value = target;
}

このコードを、IFRAME 内にダイレクトに書き込んで、画面と処理を作成しています。JavaScript で画面を作成する場合、document.write しか選択肢は無く(DOMで作成するとブラウザの違いを考慮する必要があり、細かい調整も複雑になります)、そのような文字列を手作業で作成するのは大変なので、こちらのツールを使用しています。

▼ HTML や JavaScript のコードを文字列に変換します

Firefox 専用ブックマークレット : フォーカス位置のSELECT要素の選択されたテキストの取得

Firebug ではこの情報を直接取れそうにないので、ブックマークレットでメッセージボックスに表示しています。Firefox の alert の内容は、通常のテキストと同じく選択できるので、CTRL+C で取得します

Google Chrome と IE11 でも動作しました。Chrome では alert 表示中に CTRL+C でテキストが取得できます( IE の場合は、直接クリップボードを使えるのでこちらを使用します )

フォーカス位置のSELECT要素の選択されたテキストの取得

<a
	href='javascript:try{var%20temp_node=document.activeElement.getElementsByTagName("option");var%20temp_idx=document.activeElement.selectedIndex;alert(temp_node[temp_idx].firstChild.nodeValue);}catch(e){alert("This%20Elment%20is%20not%20SELECT")};'
	onclick='
		if (window.navigator.appName.toLowerCase().indexOf("microsoft") > -1) {
			event.returnValue = false;
		}
		else {
			event.preventDefault();
		}
		alert("【IE専用のブックマークレットです】右クリックしてポップアップメニューからお気に入りに追加して下さい　　　");
	'
>フォーカス位置のSELECT要素の選択されたテキストの取得</a>

以下のバージョンでは、document.activeElement を使わずに、最初の実行でイベントを登録して取得しています。( 取得は二回目以降になります )

フォーカス位置のSELECT要素の選択されたテキストの取得

<a
	href='javascript:if(typeof%20bookmarklet_focused=="undefined"){addEventListener("focus",function(event){bookmarklet_focused=event.target;},true);alert("\u30d5\u30a9\u30fc\u30ab\u30b9\u30a4\u30d9\u30f3\u30c8\u3092\u767b\u9332\u3057\u307e\u3057\u305f\u3002\u76ee\u7684\u306e\u5834\u6240\u306b\u79fb\u52d5\u3055\u305b\u3066\u518d\u5ea6\u5b9f\u884c\u3057\u3066\u4e0b\u3055\u3044");}else{try{var%20temp_node=bookmarklet_focused.getElementsByTagName("option");var%20temp_idx=bookmarklet_focused.selectedIndex;alert(temp_node[temp_idx].firstChild.nodeValue);}catch(e){alert("This%20Elment%20is%20not%20SELECT")}}'
	onclick='
		if (window.navigator.appName.toLowerCase().indexOf("microsoft") > -1) {
			event.returnValue = false;
		}
		else {
			event.preventDefault();
		}
		alert("【Firefox専用のブックマークレットです】右クリックしてポップアップメニューからブックマークして下さい\n(またはブックマークバーへドラッグドロップ)　　　");
	'
>フォーカス位置のSELECT要素の選択されたテキストの取得</a>

JavaScript : ブックマークレットに必要な戻り値を戻さない処理の実装方法

一般的な方法として void(0) があり、処理の最後が値を戻さないようにする必要があるので、通常以下のように記述されます。

javascript:処理;void(0);

※ javascript:処理;undefined という記述方法もあります


しかし、void メソッドは引数に処理を引き渡せて、戻り値を戻さないので以下のようにも書けます

javascript:void(処理);

最後の処理が戻り値を返さないメソッドならいいので、void(0) で無く例えば alert("文字列") でもかまいませんが、以下のような書き方もあります

javascript:(function(){処理})();