SQLの窓

2019年01月04日


一般的なページで IFRAME を埋め込んで Yahoo! の テレビ番組を今の時間帯より24時間表示するボタンを表示するブックマークレット

セキュリティの特殊な設定をしているページでは表示されないので、タブを一つ開けてそこで実行して下さい



地域を選択してボタンをクリックすると、現在の時刻より少し戻って 24 時間ぶんの番組を表示します。



※ 現在時刻では、番組が始まってしまっているので、少し戻る必要があります。

一度選択した地域は localStorage に保存されるので、以降はデフォルトで選択されます


▼ ブックマーク登録用リンク
Yahoo!24H番組
Microsoft Edge の場合は、適当な URL をアドレスバーに表示して、その右端にある ★ ボタンでブックマークを作成してから、右クリックからタイトルと URL を変更します。URL に以下のコードをセットすると使用できます。
javascript:javascript:var url='https://lightbox.sakura.ne.jp/yb.js';var wnd=document.createElement('iframe');wnd.setAttribute('id','if');wnd.frameBorder=0;document.body.appendChild(wnd);wnd.contentWindow.document.write('<'+'script src=\''+url+'\' charset=\'utf-8\'><'+'/script>');void(0);

実際のブックマークの中に全てのコードを書くのはメンテナンス性が悪く、現在のページの環境から隔離した状態でアプリケーションを実行しています。その為に最初の段階で IFRAME を作成してその中に https で始まる URL に置かれた js ファイルを document.write して IFRAME の中に実行環境を作成します。( js で画面作成しています )

さらに、js ファイル内では jQuery を実装するので自由にコードを追加する事ができ、親となる元のページへのアクセスには jQuery が使用できます。

この時の一番の問題が画面作成ですが、これは本来の HTML・JavaScript・CSS を文字列化して document.write で作成します。こうする事によって直感的に新しい画面のメンテナンスが可能です( まだ試していませんが、ajax で読み込んで、innerHTML にセットしてもいいかもしれません。

▼ 文字列画面作成ツール
http://toolbox.winofsql.jp/jsstring.php

データ保存に localStorage

直接だと表示しているページのドメインでのみ有効な保存となりますが、それでは役に立たないので js ファイルのあるドメインにコード(.html)を用意して、js ファイルが作成する画面内に IFRAME をさらに作成して js ファイルのあるドメインにあるページ( lightbox.sakura.ne.jp/yb.html )を表示します。

そして、ブックマークレットを表示したページと、 js ファイルのあるドメインにあるページ間で postMessage で通信して  js ファイルのあるドメインに データを保存します。

こうする事によって、一度保存されたデータは、どのページからも取得できる事になります。

js ファイル
parent.document.getElementById("if").style.position='absolute';
parent.document.getElementById("if").style.width='250px';
parent.document.getElementById("if").style.height='70px';
parent.document.getElementById("if").style.left='0px';
parent.document.getElementById("if").style.top='0px';
parent.document.getElementById("if").style.zIndex=0x7FFFFFFF;
parent.document.getElementById("if").style.borderColor='#000000';
parent.document.getElementById("if").style.borderWidth='1px';
parent.document.getElementById("if").style.borderStyle='solid';
parent.document.getElementById("if").style.backgroundColor='#FFFFFF';

str="";
str+="<"+"script src=\"//ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js\"></"+"script> ";
str+="<"+"script> \n";
str+="$(function(){ \n";
str+="	loadAction(); \n";
str+="}); \n";

str+="</"+"script> ";
str+="<style> \n";
str+="* { \n";
str+="	font-family: \"ヒラギノ角ゴPro W3\",\"Hiragino Kaku Gothic Pro\",\"メイリオ\",Meiryo,\"MS Pゴシック\",Verdana,Arial,Helvetica,sans-serif; \n";
str+="} \n";
str+="</style> ";

str+="<div> \n";
str+="<select id=\"yahoo_area\"> \n";
str+="<option value=\"10\">北海道(札幌)</option><option value=\"11\">北海道(函館)</option><option value=\"12\">北海道(旭川)</option><option value=\"13\">北海道(帯広)</option><option value=\"14\">北海道(釧路)</option><option value=\"15\">北海道(北見)</option><option value=\"16\">北海道(室蘭)</option><option value=\"22\">青森</option><option value=\"20\">岩手</option><option value=\"18\">秋田</option><option value=\"19\">山形</option><option value=\"17\">宮城</option><option value=\"21\">福島</option><option value=\"28\">栃木</option><option value=\"25\">群馬</option><option value=\"26\">茨城</option><option value=\"23\">東京</option><option value=\"24\">神奈川</option><option value=\"29\">埼玉</option><option value=\"27\">千葉</option><option value=\"32\">山梨</option><option value=\"31\">新潟</option><option value=\"30\">長野</option><option value=\"34\">石川</option><option value=\"37\">富山</option><option value=\"36\">福井</option><option value=\"35\">静岡</option><option value=\"33\">愛知</option><option value=\"39\">岐阜</option><option value=\"38\">三重</option><option value=\"43\">和歌山</option><option value=\"44\">奈良</option><option value=\"45\">滋賀</option><option value=\"41\">京都</option><option value=\"40\">大阪</option><option value=\"42\">兵庫</option><option value=\"53\">徳島</option><option value=\"51\">愛媛</option><option value=\"54\">高知</option><option value=\"52\">香川</option><option value=\"47\">岡山</option><option value=\"46\">広島</option><option value=\"49\">鳥取</option><option value=\"48\">島根</option><option value=\"50\">山口</option><option value=\"55\">福岡</option><option value=\"61\">佐賀</option><option value=\"56\">熊本</option><option value=\"57\">長崎</option><option value=\"60\">大分</option><option value=\"59\">宮崎</option><option value=\"58\">鹿児島</option><option value=\"62\">沖縄</option></select> \n";
str+="<br> \n";
str+="<"+"script type=\"text/javascript\"> \n";
str+="(function() { \n";
str+="	var wk = localStorage['yahoo_area'] || ''; \n";
str+="	if ( wk != '' ) { \n";
str+="		document.getElementById('yahoo_area').value = wk; \n";
str+="	} \n";
str+="})(); \n";
str+="</"+"script> \n";
str+="<input type=\"button\" value=\"Yahoo! 24H番組\" id='action' onclick=\" \n";
str+="(function(){ \n";
str+="	localStorage['yahoo_area'] = document.getElementById('yahoo_area').value; \n";
str+="	var url = 'http://tv.yahoo.co.jp/listings/?&type=normal&a='+document.getElementById('yahoo_area').value+'&t=TV&s=1&vb=1&vc=0&vd=0&ve=1&va=24'; \n";
str+="	var d = new Date(); \n";
str+="	var yyyy = d.getFullYear(); \n";
str+="	var mm = (d.getMonth()+1); \n";
str+="	var len1 = ('00'+mm).length; \n";
str+="	mm = ('00'+mm).substr(len1-2,2); \n";
str+="	var dd = d.getDate(); \n";
str+="	var len2 = ('00'+dd).length; \n";
str+="	dd = ('00'+dd).substr(len2-2,2); \n";
str+="	var hh = d.getHours() - 2; \n";
str+="	if ( hh <= 1 ) { \n";
str+="		hh = hh + 24; \n";
str+="		dd = d.getDate()-1; \n";
str+="		len2 = ('00'+dd).length; \n";
str+="		dd = ('00'+dd).substr(len2-2,2); \n";
str+="	} \n";
str+="	url += '&d=' + yyyy+mm+dd; \n";
str+="	url += '&st=' + hh; \n";
str+="	window.open(url); \n";
str+="})(); \n";
str+="	\"> \n";

str+="<input type='button' value='閉じる' id='remove' style='margin-left:15px;'>  ";

str+="</div> \n";
str+="<iframe src=\"https://lightbox.sakura.ne.jp/yb.html\" style='display:none' id='save_area'></iframe> ";

str+=" ";
document.write(str);
document.close();

parent.scroll(0,0);

function loadAction() {

	console.log("ブックマークレット:IFRAMEユニット");
	// 初期処理

	$("#remove").on("click", function(){
		$(parent.document.getElementById("if")).remove();
	} );

	$("#action").on("click", function(){

		var message = {};
		message.command = 'set';
		message.text = $("#yahoo_area").val();
		var request = JSON.stringify(message);
		$("#save_area").get(0).contentWindow.postMessage(request, "*");

	} );

	$("#save_area").on("load",function(){
		var wk = localStorage['yahoo_area'] || '';
		if ( wk == '' ) {
			var message = {};
			message.command = 'get';
			message.text = '';
			var request = JSON.stringify(message);
			$("#save_area").get(0).contentWindow.postMessage(request, "*");
		}
	});


	$(window).on("message",function(e){

		var message = JSON.parse(e.originalEvent.data);
		if ( message.command == 'get_result' ) {
			$("#yahoo_area").val(message.text);
		}

	});


}


postMessage で通信するページ
( lightbox.sakura.ne.jp/yb.html )
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script>

$(function(){
	$(window).on("message",function(e){

		var message = JSON.parse(e.originalEvent.data);
		if ( message.command == 'set' ) {
			localStorage["ybken"] = message.text;
		}
		if ( message.command == 'get' ) {
			message = {};
			message.command = 'get_result';
			message.text = localStorage["ybken"] || '';
			if ( message.text != '' ) {
				var result = JSON.stringify(message);
				parent.postMessage(result, "*");
			}
		}

	});
});

</script>





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

選択文字列を Twitter の投稿画面に遷移させるブックマークレットの内容の解説

▼ 以下のページは、ブックマークレットの使い方を説明しています。
選択文字列を Twitter の投稿画面に遷移させるブックマークレット

ここでは、その中で使用されているコードの説明をしています。

Web Intent URL で使用されているパラメータの開設はこちら( Twitter ドキュメント )
▼ URL ありバージョン : URL なしバージョンはこちら
ブックマークレット => 選択文字でTwitter投稿


このブックマークレットは、殆ど var の変数定義によってなりたっていて、通常の JavaScript に整形すると以下のような単純なものとなります。
javascript: var d = document,
w = window,
enc = encodeURIComponent,
e = w.getSelection,
k = d.getSelection,
x = d.selection,
s = (e ? e() : (k) ? k() : (x ? x.createRange().text: 0)),
s2 = ((s.toString() == '') ? s: (enc(s))),
f = 'https://twitter.com/intent/tweet',
l = d.location,
p = '?text=' + s2 + '&url=' + enc(l),
u = f + p;
try {
    if (!/^(.*.)?tumblrzzz[^.]*$/.test(l.host)) throw (0);
    tstbklt();
} catch(z) {
    a = function() {
        if (!w.open(u)) l.href = u;
    };
    if (/Firefox/.test(navigator.userAgent)) setTimeout(a, 0);
    else a();
}
void(0)
この内容からも解りますが、元々は tumblr関連(?) の為に作られたものを転用しています。実際はこの部分を削除してもっと短くなるのですが、元々の発祥を残すためにそのまま使っています。( ライセンス等の詳細は不明です )

変更する部分は、9行目と11行目で、9行目は遷移するページで、11行目はそのページへの QueryString となります。

選択した内容は、クロスブラウジングされていて、この方法ですと、IE11 でも問題無く動作します。選択した文字列は、通常 encodeURIComponent によって UTF-8 でエンコーディングして使用します。この場合ですと、そのページの URL もエンコーディングしています。

最後に、windows.open で開くようになっていますが、Firefox の場合はタイマーで遅延で使用し、それ以外はすぐ実行しています。

13行目と14行目は必要無い部分ですが、13行目でエラーとなり(throw される)、window.open が起動されるようになっているので、tumblrzzz という部分を変更して特定のドメインにすると、表示されているページと一致した場合に、『tstbklt』という function が本当に存在するとその function が呼ばれるようになっています。( 特定のページで任意の function をコールする事が可能になります )


posted by lightbox at 2019-01-04 10:18 | ブックマークレットコード | このブログの読者になる | 更新情報をチェックする

2019年01月03日


Google Chrome でスマホのソースコードをごく普通に表示して利用する

現状では、F12 でデベロッパーツールで device を トグルしてスマホ表示にしてからソースを表示しても、PC のソースしか表示されません。

なので、『view-source:』で表示している状態で F12 でベロッパーツールを表示して device を トグルします。



しかし、このままでは UI がスマホのエミュレータ状態でいろいろ利用しづらいので、再度 device をトグルとます。そうすると、スマホのソースコードでかつ画面いっぱいで利用できて、コピーペーストも可能な状態になります。






posted by lightbox at 2019-01-03 14:36 | Google | このブログの読者になる | 更新情報をチェックする

2019年01月02日


Seesaa(またはさくらのブログ) の『コメント・公開設定・広告の表示・カテゴリ』を一括変更するブックマークレット

※ さくらのブログに広告の表示はありません




Sessaa 一括変更

一括編集タブで使用します。検索結果でもいいですし、単純に200件表示でもいいです。

カテゴリの一括変更では、記事一覧を検索で絞ってから一括変更するといいと思います。カテゴリ番号は、そのカテゴリを表示した時の URL の最後の文字列( 例 : 7154748-1.html )のハイフン以降を除いた数字です。
( カテゴリID を数字に変更してカテゴリ変更をクリックします )


javascript:var wnd=document.createElement('iframe');wnd.setAttribute('id','if');wnd.frameBorder=0;document.body.appendChild(wnd);wnd.contentWindow.document.write('<script src=\'https://winofsql.jp/s01.js\' charset=\'shift_jis\'></script>')

// plugin Bookmarklet
// by lightbox

parent.document.getElementById("if").style.position='absolute';
parent.document.getElementById("if").style.width='300px';
parent.document.getElementById("if").style.height='34px';
parent.document.getElementById("if").style.left='0px';
parent.document.getElementById("if").style.top='0px';
parent.document.getElementById("if").style.zIndex=100;
var sLocation = parent.location.host;
var sUrl = parent.location.href;
var doc = parent.document;
var tds = doc.getElementsByTagName("form");
var len = tds.length;
var cnt = 0;
var add = null;
for( i = 0; i < len; i++ ) {
	if ( tds[i].name == 'search_form' ) {
//		cnt++;
//		if ( cnt == 2 ) {
			add = tds[i];
//		}
	}
}
var place = doc.createElement('div');
add.appendChild(place);
str="";
str+="<select id=changetype style=margin-left:5px;> \n";
str+="<option value=\"0\" title=\"受付×/表示×\">×/×</option> \n";
str+="<option value=\"1\" title=\"受付○/表示○\">○/○</option> \n";
str+="<option value=\"2\" title=\"受付×/表示○\">×/○</option> \n";
str+="<option value=\"3\" title=\"受付○(承認制)\">承認制</option> \n";
str+="</select> ";

str+="<select id=changetype2> \n";
str+="<option value=\"0\" selected=\"selected\">無効 / 公開</option> \n";
str+="<option value=\"1\" >有効 / 非公開</option> \n";
str+="</select> ";

str+="<INPUT type=button value='コメント' onClick='wnd.contentWindow.changeTarget(0)'>";
str+="&nbsp;<INPUT type=button value='公開設定' onClick='wnd.contentWindow.changeTarget(1)'>";
str+="&nbsp;<INPUT type=button value='広告の表示' onClick='wnd.contentWindow.changeTarget2()'>";
str+="&nbsp;<INPUT id='target_cat' type=text value='カテゴリID' onclick='this.select();' style='width:80px;'>";
str+="&nbsp;<INPUT type=button value='カテゴリ変更' onClick='wnd.contentWindow.changeTarget3()'>";
place.innerHTML = str


str="";
str+="<head> \n";
str+="<META http-equiv=\"Content-Type\" content=\"text/html; charset=shift_jis\" /> \n";
str+="<style type=text/css> \n";
str+="body { margin:0;background-color:forestgreen;color:white; } \n";
str+="</style> \n";
str+="</head> \n";
str+="<body> \n";

str+=" plugin Bookmarklet by lightbox\n";

str+="</body> \n";

document.write( str );
document.close();

var userAgent = window.navigator.userAgent.toLowerCase();
var appVersion = window.navigator.appVersion.toLowerCase();

function changeTarget(type) {

	var sels = doc.getElementsByTagName("select");
	var len = sels.length;
	var name,namelen,target;
	var value = doc.getElementById("changetype").value;

	// コメント
	if( type == 0 ) {

		for( i = 0; i < len; i++ ) {
			name = sels[i].name;
			namelen = name.length;
			target = name.substr(namelen-7,7)
			if ( target == 'comment' ) {
				doc.getElementsByName(name)[0].value = value;
			}
		}

	}
	// 公開・非公開
	if( type == 1 ) {

		value = doc.getElementById("changetype2").value;
		if ( value == 0 ) {
			value = 1;
		}
		else {
			value = 0;
		}

		for( i = 0; i < len; i++ ) {
			name = sels[i].name;
			namelen = name.length;
			target = name.substr(namelen-4,4)
			if ( target == 'flag' ) {
				doc.getElementsByName(name)[0].value = value;
			}
		}

	}

}
function changeTarget2() {

	var sels = doc.getElementsByTagName("select");
	var len = sels.length;
	var name,namelen,target;
	var value = doc.getElementById("changetype2").value;

	for( i = 0; i < len; i++ ) {
		name = sels[i].name;
		namelen = name.length;
		target = name.substr(namelen-4,4)
		if ( target == 'link' ) {
			doc.getElementsByName(name)[0].value = value;
		}
	}
}


function changeTarget3() {

	var sels = doc.getElementsByTagName("select");
	var len = sels.length;
	var name,namelen,target;
	var value = doc.getElementById("target_cat").value;

	for( i = 0; i < len; i++ ) {
		name = sels[i].name;
		namelen = name.length;
		target = name.substr(namelen-12,4)
		if ( target == '_cat' ) {
			doc.getElementsByName(name)[0].value = value;
		}
	}
}





Seesaa独自タグ簡易リファレンス

posted by lightbox at 2019-01-02 21:58 | Seesaa プログ管理支援 | このブログの読者になる | 更新情報をチェックする
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 終わり