SQLの窓

2014年03月17日


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

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

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

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

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

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

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

関連する記事


posted by lightbox at 2014-03-17 01:42 | ブックマークレット | このブログの読者になる | 更新情報をチェックする

2014年03月06日


アドレスバーに表示した 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, \"MS Pゴシック\", 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 のコードを文字列に変換します



posted by lightbox at 2014-03-06 12:57 | ブックマークレット | このブログの読者になる | 更新情報をチェックする

2012年01月11日


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

開発者ツールでもはこの情報を直接取れそうにないので、ブックマークレットでメッセージボックスに表示しています。alert の内容は、CTRL+C で取得する事ができますが、余計な部分も取り込んでしまうので、直接クリップボードへ転送もしています。但し、セキュリティの設定でクリップボードの使用を無条件に許可していない場合は、確認のダイアログが表示されます。

登録は、お気に入りバーに登録しておくと便利です
フォーカス位置の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);window.clipboardData.setData("Text",temp_node[temp_idx].firstChild.nodeValue);void(0)}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>



posted by lightbox at 2012-01-11 21:31 | ブックマークレット | このブログの読者になる | 更新情報をチェックする

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>



posted by lightbox at 2012-01-11 21:05 | ブックマークレット | このブログの読者になる | 更新情報をチェックする

2010年02月19日


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

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

※ javascript:処理;undefined という記述方法もあります
しかし、void メソッドは引数に処理を引き渡せて、戻り値を戻さないので以下のようにも書けます
javascript:void(処理);

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



タグ:javascript
posted by lightbox at 2010-02-19 21:25 | ブックマークレット | このブログの読者になる | 更新情報をチェックする
Seesaa の各ページの表示について
Seesaa の 記事がたまに全く表示されない場合があります。その場合は、設定> 詳細設定> ブログ設定 で 最新の情報に更新の『実行ボタン』で記事やアーカイブが最新にビルドされます。

Seesaa のページで、アーカイブとタグページは要注意です。タグページはコンテンツが全く無い状態になりますし、アーカイブページも歯抜けページはコンテンツが存在しないのにページが表示されてしまいます。

また、カテゴリページもそういう意味では完全ではありません。『カテゴリID-番号』というフォーマットで表示されるページですが、実際存在するより大きな番号でも表示されてしまいます。

※ インデックスページのみ、実際の記事数を超えたページを指定しても最後のページが表示されるようです

対処としては、このようなヘルプ的な情報を固定でページの最後に表示するようにするといいでしょう。具体的には、メインの記事コンテンツの下に『自由形式』を追加し、アーカイブとカテゴリページでのみ表示するように設定し、コンテンツを用意するといいと思います。


※ エキスパートモードで表示しています

アーカイブとカテゴリページはこのように簡単に設定できますが、タグページは HTML 設定を直接変更して、以下の『タグページでのみ表示される内容』の記述方法で設定する必要があります

<% if:page_name eq 'archive' -%>
アーカイブページでのみ表示される内容
<% /if %>

<% if:page_name eq 'category' -%>
カテゴリページでのみ表示される内容
<% /if %>

<% if:page_name eq 'tag' -%>
タグページでのみ表示される内容
<% /if %>
この記述は、以下の場所で使用します
container 終わり



フリーフォントで簡単ロゴ作成
フリーフォントでボタン素材作成
フリーフォントで吹き出し画像作成
フリーフォントではんこ画像作成
ほぼ自由に利用できるフリーフォント
フリーフォントの書体見本とサンプル
画像を大きく見る為のウインドウを開くボタンの作成

CSS ドロップシャドウの参考デモ
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり