SQLの窓

2016年06月03日


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



ブックマークレットは、ブックマークとしてアプリケーションそのものを登録するものですが、目的としてもブックマークと同じ意味を持つボタンを登録するというものです。

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

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

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

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

データ保存に localStorage

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

そして、ブックマークレットを表示したページと、 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 で通信するページ
<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 2016-06-03 22:11 | Comment(0) | ブックマークレットコード | このブログの読者になる | 更新情報をチェックする

2016年05月28日


ブックマークレット IFRAME ユニット作成ツール

https では無いページ用です。実行したページに IFRAME のウインドウを埋め込むコードのセットを作成するツールです。URL には、js ファイルの URL を入力し、さらに IFRAME のサイズを入力して実行します。

一つ目の TEXTAREA には、ブクマークレットを登録する為のリンクの HTML コードが作成され、二つ目の TEXTAREA には、.js の中に書き込む基本コードが作成されます。( .js は UTF-8 で保存します )

js URL
IFRAME 幅 IFRAME 高さ


WEB サイトをお持ちで無い方は、Google ドライブを使用できます。

Google ドライブにWEBページを作成する方法

▼ サンプル
https://b3612ccaef41231d7e34cda5ea0b9ed5af2eb17d.googledrive.com/host/0B9Jymqpro6gSVlB5Wm52U29wTlE/bml.js



posted by lightbox at 2016-05-28 00:33 | Comment(0) | ブックマークレットコード | このブログの読者になる | 更新情報をチェックする

2014年11月04日


JavaScript : 通常の WEB ページにブックマークレットでアプリケーション用の IFRAME を埋め込むコード(1)

▼ ブックマークレット登録用のリンク
IFRAME
※ Google Chrome は、ブックマークバーにドラッグ&ドロップ
※ Firefox は、ブックマークツールバーにドラッグ&ドロップ
※ IE は、右クリックでお気に入りバーへ登録

これだけでは、役には立ちませんが、次にこの IFRAME の中に画面(または処理のみ)を構築します

_bI は、ユニークであれはなんでもいいのですが、bindIframe を略しています。リロードしない限り、いったん作成した IFRAME を window._bI.wnd で参照する事ができます。

w : 幅
h : 高さ
b : ポーダー( 0:なし、1:あり )
l : 左表示開始位置
t : 上表示開始位置
z : zIndex
v : 表示する : ""、表示しない : "none"
<script>
if (!window['_bI']) {
	window._bI = {};
	(function(w, h, b, l, t, z, v) {
		var wnd = document.createElement('iframe');
		with (wnd){
			frameBorder = b;
			width = w;
			height = h;
			with (style){
				position = 'absolute';
				left = l;
				top = t;
				zIndex = z;
				display = v
			}
		}
		document.body.appendChild(wnd);
		window._bI.wnd = wnd;
		wnd.contentWindow.document.write('<style>body{background-color:#ccc;}</style> ');
		wnd.contentWindow.document.close();
	})(400, 200, 1, '0px', '0px', 1000, '');
}
</script>

ブックマークレット登録用のコードは以下のようになります

※ 変数定義と空白出力にのみ、%20 を使いますが、それ以外のスペースは全て取り除いています
※ ブックマークレットは、A 要素 の中で記述するので、< と > は、&lt; と &gt; に変更します。
<a href="javascript:if(!window['_bI']){window._bI={};(function(w,h,b,l,t,z,v){var%20wnd=document.createElement('iframe');with(wnd){frameBorder=b;width=w;height=h;with(style){position='absolute';left=l;top=t;zIndex=z;display=v}}document.body.appendChild(wnd);window._bI.wnd=wnd;wnd.contentWindow.document.write('&lt;style&gt;body{background-color:#ccc;}&lt;/style&gt;%20');wnd.contentWindow.document.close();})(400,200,1,'0px','0px',1000,'');}">IFRAME</a>


リンク(アンカー)の表示文字列が登録時の文字列になりますが、登録後に各ブラウザで変更する事ができます。

カスタマイズは、400,200,1,'0px','0px',1000,'' の部分を変更します

関連する記事

JavaScript : 通常の WEB ページにブックマークレットでアプリケーション用の IFRAME を埋め込むコード (2) / ページ表示部中央に固定
親(parent) フレームに jQuery が無い場合に jQuery をインストールする。


変更履歴
2011-03-20 : 初回投稿
2013-10-31 : 内容の再整備



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

2013年12月22日


JS : 外部ファイルを使った、ブックマークレットのスケルトン


ブックマークレット => ブックマークレットのテキスト表示
これは、ブラウザのブックマークレットのコードでは処理できない複雑で長い処理を外部に置いて、ブックマークレットはそれを呼び出して実行しています。

以下のテキストを取り出して、全ての NAME をユニークな英数字に変更して、URL を二つ目のソースコードの JavaScript のファイルの URL にします。この JavaScript は、.js にしてどこかのスペースに保存して上記 URLになるようにしておきます

※ JavaScript 内の NAME も前述の文字列と同じにして下さい

完成したら、どこかのページにアンカーごと全て貼って、お気に入りに登録して実行して alert が表示されたら成功です
<a href="javascript:var%20mylib=document.createElement('script');if(!window.NAME){mylib.setAttribute('src','URL');mylib.setAttribute('charset','shift_jis');document.body.appendChild(mylib);(function(){if(window.NAME){NAME.init();}else{setTimeout(arguments.callee);}})();}else{NAME.init();}void(mylib);"
onclick='
	alert("ブックマークバーにドロップか、IEでは右クリックでお気に入りに登録(お気に入りバー)が簡単です"); 
	if (window.navigator.appName.toLowerCase().indexOf("microsoft") > -1) { 
		event.returnValue = false; 
	} 
	event.preventDefault(); 
	event.stopPropagation();
'
>ブックマークレットのテキスト表示</a>

if (!window.NAME) {
(
function() {
	window.NAME = 
	{
		// プロパティ
		version: 1.01
		,
		// メソッド
		init : function( ) {
			/* ここに処理を書きます */
			alert("この alert はテスト用です");
		}
	};
}
)();
}





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

Twitter のタイムラインで特定ユーザを非表示にするブックマークレット


ブックマークレット => 入力した文字を含むユーザを非表示
タイムラインに表示後の作業となります。( 表示済みのユーザのみ )

prompt で入力した文字列が『@ユーザ』のユーザ部分に含まれるツイートを非表示にします。
<a  href="javascript:var%20u=prompt('','');var%20x=document.getElementsByTagName('div');var%20z=null;for(var%20i=0;i<x.length;i++){if(x[i].className=='content'){y=x[i].getElementsByTagName('b');z=false;for(var%20j=0;j<y.length;j++){if((y[j].innerHTML).indexOf(u)>-1){z=true;break;}}if(z){x[i].parentNode.style.display='none';}}}void(0);">入力した文字を含むユーザを非表示</a>
以下は、空白を除く前のコードです
var u = prompt('','');
var x = document.getElementsByTagName('div');
var z = null;
for(var i = 0;i<x.length;i++){
	if(x[i].className=='content'){
		y=x[i].getElementsByTagName('b');
		z=false;
		for(var j = 0;j<y.length;j++){
			if((y[j].innerHTML).indexOf(u)>-1){
				z=true;
				break;
			}
		}
		if(z){
			x[i].parentNode.style.display='none';
		}
	}
}
void(0);




posted by lightbox at 2013-12-22 02:14 | ブックマークレットコード | このブログの読者になる | 更新情報をチェックする

2010年02月01日


JavaScript で埋め込むIFRAMEのコントロール

IFRAME 要素を直接ページに書いてしまうと、IFRAME 内のコンテンツのサイズ
に変更があった時に、表示エリアの調整を IFRAME の記述毎に変更する必要が
出てくるので、それを一括で行う方法です。

まず、以下のようなスクリプト要素をページに貼り付けます。
<script
	charset="euc-jp"
	type="text/javascript"
	src="http://winofsql.jp/winofsql_exlist.js"
></script>
ここでは、外部の JavsScript を呼び出すだけけです。
IFRAME の記述は、winofsql_exlist.js 内で行っています
if ( document.body.clientWidth > 1100 ) {
	str="";
	str+="<div style='position:absolute;left:951px;top:0px;'> \n";
	str+="<iframe \n";
	str+="	src=\"http://winofsql.jp/VA003334/a1.htm\" \n";
	str+="	frameborder=\"no\" \n";
	str+="	scrolling=\"no\" \n";
	str+="	width=\"285\" \n";
	str+="	height=\"3600\" \n";
	str+="></iframe> \n";
	str+="</div> \n";
	document.write(str);
}

このようにすると、二つ目のスクリプトを変更すれば、実際に
ページにか書かれているスクリプトとは関係無く更新されます。

※ if は、ブラウザの表示幅が小さい時に処理しない設定です。
※ document.write 用の文字列は、テキスト変換サービス で作成します


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

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

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

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

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


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

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

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

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

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


Windows
container 終わり

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

Android SDK ポケットリファレンス
改訂版 Webデザイナーのための jQuery入門
今すぐ使えるかんたん ホームページ HTML&CSS入門
CSS ドロップシャドウの参考デモ
PHP正規表現チェッカー
Google Hosted Libraries
cdnjs
BUTTONS (CSS でボタン)
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり