SQLの窓 イラストAC フリー素材

2017年12月02日

イラストACの管理画面に、イラスト毎の前日ダウンロード項目が追加されたので、前日にダウンロードされたイラストのみをテーブルで表示するブックマークレットを作成しました。



▼ ブックマークレットはこちらから
イラストAC 用 : 前日ダウンロード数を一覧表示する為のブックマークレット : jQuery プラグイン使用

この手のアプリは『手書きブログ』でイヤと言うほど培って来たので得意です。すぐできました。いつもの通り、画面作成は document.write なので、Google Chrome にはデベロッパーツール内で少し文句いわれますが、動くのでオールスクリプトにする気は今のところ無いです。
The network request for this script MAY be blocked by the browser in this or a future page load due to poor network connectivity.
そもそも、イラストAC がページの HTML を変更してしまうとすぐさま動作しなくなるような儚いアプリですし、ユーザが居るかどうかも解らない自己満足アプリなんで、わざわざ直感的なメンテナンス性の低い作りにする必要も無いかなぁと。 まず呼び出し方法 window.open を使います。URL は about:blank にする事によって、白紙のページが表示され、そこは実行したページと同一ドメインになります。 すると、そこに書き出した内容は、純粋に元の画面の付属画面になるわけです。
javascript:var wnd=window.open('about:blank');wnd.document.write('<!DOCTYPE html><html><head><'+'script src=\'https://lightbox.sakura.ne.jp/ac.js\'></script></head><'+'body><'+'/body></html>')
もちろん、wnd.document を使えば動的に画面は作成できるんですが、いろいろ面倒なハードルもあるので、基本部分を documwnt.write しておいて、詳細の処理は別の script を読み出すようにするわけです。

詳細の処理 : ac.js
str="<meta charset='UTF-8'>";
str+="<"+"script src=\"https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js\"></"+"script> ";
str+="<"+"script src=\"https://lightbox.sakura.ne.jp/homepage/if_skeleton/basic_06_columns/columns/js/jquery.columns.min.js\"></"+"script> ";
str+="<link rel=\"stylesheet\" href=\"https://lightbox.sakura.ne.jp/homepage/if_skeleton/basic_06_columns/columns/css/classic.css\"> ";
str+="<input id='page' type='button' value='\u5b9f\u884c' onclick='getOpenerData()'> \u4ef6\u6570 : <span id='ken' style='display:inline-block;width:40px;'></span> / \u524d\u65e5\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9\u5408\u8a08 : <span id='sum' style='display:inline-block;width:40px;'></span> / <label for='toggle'>\u30b3\u30e1\u30f3\u30c8\u8868\u793a\u306e\u5207\u308a\u66ff\u3048</label> : <input type='checkbox' id='toggle' onclick='comment_toggle()'> / <label for='toggle2'>\u753b\u50cf\u8868\u793a\u5207\u308a\u66ff\u3048</label> : <input type='checkbox' id='toggle2' onclick='image_toggle()'> <div id='columns' style='margin-top:12px;'></div>";
document.write(str);

var sum = 0;
var ken = 0;
var toggle = 0;
var toggle2 = 1;

var target = [];

function getOpenerData() {

	if ( sum != 0 ) {
		$('#columns').columns('destroy');
	}

	opener.$(".illust_thumb_all").each(function(){
		var dl = parseInt(opener.$(this).find("li").eq(6).find("b").text());
		var dl2 = parseInt(opener.$(this).find("li").eq(5).find("b").text());


		if ( dl != 0 ) {

			sum+= dl;

			ken++;

			target.push( 
				{
					'count' : dl,
					'count2' : dl2,
					'title' : opener.$(this).find("li").eq(12).text().replace("\u25a0\u30bf\u30a4\u30c8\u30eb\uff1a",""),
					'cat' : opener.$(this).find("li").eq(14).text().replace("\u25a0\u30ab\u30c6\u30b4\u30ea\u30fc\u003a",""),
					'comment' : opener.$(this).find("li").eq(15).text().replace("\u25a0\u30b3\u30e1\u30f3\u30c8\uff1a",""),
					'publicurl' : opener.$(this).find("li").eq(10).find("a").prop("href"),
					'image' : opener.$(this).find("img").prop("src")
				}
			);

		}
	}); 


	$('#columns').columns({
		data:target, 
		schema: [
			{"header":"\u524d\u65e5", "key":"count" },
			{"header":"\u5408\u8a08", "key":"count2" },
			{"header":"\u30bf\u30a4\u30c8\u30eb", "key":"title", "template":"<a href=\"{{publicurl}}\" target=\"_blank\">{{title}}</a>"},
			{"header":"\u30ab\u30c6\u30b4\u30ea\u30fc", "key":"cat", "template":"{{cat}}"},
			{"header":"\u753b\u50cf", "key":"image", "template":"<img src='{{image}}' style='border:0'>"},
			{"header":"\u30b3\u30e1\u30f3\u30c8", "key":"comment", "template":"{{comment}}"},
			{"header":"", "key":"publicurl", "template":"{{publicurl}}"},

		],
		size: 200,showRows: [50,100,200],
		pageHandler: function(){
			this.create();
			customTable();
		},
		sortHandler: function() {
			this.page = 1;
			this.create();
			customTable();
		},
		searchHandler: function(event) { 
			if(this.liveSearch) {
				this.create();
			} else {
				if(event.keyCode == '13') {
					this.create();
				}
			}
			customTable();
		},
		sizeHandler: function() {
			this.create();
			customTable();
		}

	}); 

	$("#ken").text(ken);
	$("#sum").text(sum);

	$("table").find("tr").each( function(){ $(this).find("th").eq(6).hide() });
	$("table").find("tr").each( function(){ $(this).find("td").eq(6).hide() });

	customTable();

}

function customTable() {

	$("table").find("tr").each( function(){ $(this).find("th").eq(6).hide() });
	$("table").find("tr").each( function(){ $(this).find("td").eq(6).hide() });

	$("th").eq(2).css("width","320px");
	$("th").eq(5).css("width","200px");

	if ( toggle == 1 ) {
		$("table").find("tr").each( function(){ $(this).find("th").eq(5).hide() });
		$("table").find("tr").each( function(){ $(this).find("td").eq(5).hide() });
	}
	else {
		$("table").find("tr").each( function(){ $(this).find("th").eq(5).show() });
		$("table").find("tr").each( function(){ $(this).find("td").eq(5).show() });
	}

	if ( toggle2 == 1 ) {
		$("table").find("tr").each( function(){ $(this).find("th").eq(4).hide() });
		$("table").find("tr").each( function(){ $(this).find("td").eq(4).hide() });
	}
	else {
		$("table").find("tr").each( function(){ $(this).find("th").eq(4).show() });
		$("table").find("tr").each( function(){ $(this).find("td").eq(4).show() });
	}


}

function comment_toggle(){


	if ( toggle == 0 ) {
		toggle = 1;
		$("table").find("tr").each( function(){ $(this).find("th").eq(5).hide() });
		$("table").find("tr").each( function(){ $(this).find("td").eq(5).hide() });
	}
	else {
		toggle = 0;
		$("table").find("tr").each( function(){ $(this).find("th").eq(5).show() });
		$("table").find("tr").each( function(){ $(this).find("td").eq(5).show() });
	}


}
function image_toggle(){


	if ( toggle2 == 0 ) {
		toggle2 = 1;
		$("table").find("tr").each( function(){ $(this).find("th").eq(4).hide() });
		$("table").find("tr").each( function(){ $(this).find("td").eq(4).hide() });
	}
	else {
		toggle2 = 0;
		$("table").find("tr").each( function(){ $(this).find("th").eq(4).show() });
		$("table").find("tr").each( function(){ $(this).find("td").eq(4).show() });
	}

}

テーブル部分は jQuery のプラグインを使っているのでそこは簡単です。別にこのプラグインである必要は無いのですが、これに関しては自分自身で実績があって、長い間運用しているので『間違いなく動く』という理由で使っています。

追加画面は、やはり document.write を使っています。作成当初はこうしたほうが調整が簡単です。出来上がってもし、全てスクリプトに変更するにしても、こうして確かめて安定してからでいいですから。

画面上でリンクや表示・非表示のオプション付けたので複雑そうに見えますが、ただ表示するだけならとても簡単なコードになります。

それと、元々のページには jQuery があるのでそれを使って、データを取得しています。こちら側の処理は、こちらでも jQuery を組み込んで処理が簡単になるようにしています。

▼ 元ページの jQuery で 元ページの処理
opener.$(".illust_thumb_all").each(function(){});

という感じです。



【イラストACの最新記事】
posted by at 2017-12-02 18:55 | Comment(0) | イラストAC | このブログの読者になる | 更新情報をチェックする
SQLの窓全体の検索
Custom Search
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

※ブログオーナーが承認したコメントのみ表示されます。


Android SDK ポケットリファレンス
改訂版 Webデザイナーのための jQuery入門
今すぐ使えるかんたん ホームページ HTML&CSS入門
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX