ＳＱＬの窓
<< 選択文字列を Twitt… | TOP | 選択した文字列を G… >>

2019年01月04日


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

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



地域を選択してボタンをクリックすると、現在の時刻より少し戻って 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,\"ＭＳ Ｐゴシック\",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 | ブックマークレットコード | このブログの読者になる | 更新情報をチェックする



Powered by Seesaa
container 終わり



✅ フリーフォントで簡単ロゴ作成
✅ フリーフォントでボタン素材作成
✅ フリーフォントで吹き出し画像作成
✅ フリーフォントではんこ画像作成
✅ ほぼ自由に利用できるフリーフォント
✅ フリーフォントの書体見本とサンプル
✅ 画像を大きく見る為のウインドウを開くボタンの作成
✅ CSS ドロップシャドウの参考デモ
✅ イラストAC
✅ ぱくたそ
✅ 写真素材 足成
✅ フリーフォント一覧
✅ utf8 文字ツール
右サイド 終わり
base 終わり