ブックマークレットコード : logical　error

Google

TOP / ブックマークレットコード

- 1 2 >>

2020年06月02日

ロリポップのログインブックマークレット : ユーザ専用ページ / phpMyAdmin / WordPress

リモートで授業する際、裏で学生を補助するのに現在必須です...

特に phpMyAdmin はセッション切れて再ログインとかに便利

1) ユーザ専用ページ

javascript:$("input[name='account']").val("ロリポップ！アカウント");$('#domain-id').val(0);$("input[name='passwd']").val("123465789");jf_Login();

#domain-id の val は以下より使用

<select class="select" name="domain_id" id="domain-id">
	<option value="40">10gallon.jp </option>
	<option value="2070">angry.jp </option>
	<option value="340">babyblue.jp </option>
	<option value="230">babymilk.jp </option>
	<option value="2080">backdrop.jp </option>
	<option value="330">bambina.jp </option>
	<option value="690">bitter.jp </option>
	<option value="700">blush.jp </option>
	<option value="360">boo.jp </option>
	<option value="560">boy.jp </option>
	<option value="570">boyfriend.jp </option>
	<option value="50">bufferin.jp </option>
	<option value="600">but.jp </option>
	<option value="670">candypop.jp </option>
	<option value="710">capoo.jp </option>
	<option value="660">catfood.jp </option>
	<option value="520">cheap.jp </option>
	<option value="2000">chicappa.jp </option>
	<option value="2120">chillout.jp </option>
	<option value="410">chips.jp </option>
	<option value="720">chowder.jp </option>
	<option value="350">chu.jp </option>
	<option value="300">ciao.jp </option>
	<option value="730">cocotte.jp </option>
	<option value="740">coolblog.jp </option>
	<option value="2110">cranky.jp </option>
	<option value="60">cutegirl.jp </option>
	<option value="450">daa.jp </option>
	<option value="2190">deca.jp </option>
	<option value="2040">deci.jp </option>
	<option value="2090">digick.jp </option>
	<option value="190">egoism.jp </option>
	<option value="270">fakefur.jp </option>
	<option value="420">fem.jp </option>
	<option value="2130">flier.jp </option>
	<option value="2060">floppy.jp </option>
	<option value="630">fool.jp </option>
	<option value="170">frenchkiss.jp </option>
	<option value="580">girlfriend.jp </option>
	<option value="240">girly.jp </option>
	<option value="2160">gloomy.jp </option>
	<option value="530">gonna.jp </option>
	<option value="2100">greater.jp </option>
	<option value="70">hacca.jp </option>
	<option value="540">heavy.jp </option>
	<option value="620">her.jp </option>
	<option value="460">hiho.jp </option>
	<option value="80">hippy.jp </option>
	<option value="640">holy.jp </option>
	<option value="2020">hungry.jp </option>
	<option value="750">icurus.jp </option>
	<option value="90">itigo.jp </option>
	<option value="200">jellybean.jp </option>
	<option value="100">kikirara.jp </option>
	<option value="590">kill.jp </option>
	<option value="2150">kilo.jp </option>
	<option value="2140">kuron.jp </option>
	<option value="220">littlestar.jp </option>
	<option value="0" selected="">lolipop.jp </option>
	<option value="110">lolitapunk.jp </option>
	<option value="290">lomo.jp </option>
	<option value="120">lomographer.jp </option>
	<option value="680">lovepop.jp </option>
	<option value="550">lovesick.jp </option>
	<option value="440">main.jp </option>
	<option value="130">mods.jp </option>
	<option value="480">mond.jp </option>
	<option value="760">mongolian.jp </option>
	<option value="370">moo.jp </option>
	<option value="770">namaste.jp </option>
	<option value="780">nikita.jp </option>
	<option value="2050">nobushi.jp </option>
	<option value="790">noor.jp </option>
	<option value="380">oops.jp </option>
	<option value="800">parallel.jp </option>
	<option value="810">parasite.jp </option>
	<option value="820">pecori.jp </option>
	<option value="140">peewee.jp </option>
	<option value="830">penne.jp </option>
	<option value="470">pepper.jp </option>
	<option value="840">perma.jp </option>
	<option value="850">pigboat.jp </option>
	<option value="430">pinoko.jp </option>
	<option value="30">pucchimoni.jp </option>
	<option value="860">punyu.jp </option>
	<option value="400">pupu.jp </option>
	<option value="160">pussycat.jp </option>
	<option value="610">pya.jp </option>
	<option value="10">raindrop.jp </option>
	<option value="250">readymade.jp </option>
	<option value="870">sadist.jp </option>
	<option value="310">schoolbus.jp </option>
	<option value="650">secret.jp </option>
	<option value="150">staba.jp </option>
	<option value="180">stripper.jp </option>
	<option value="390">sub.jp </option>
	<option value="210">sunnyday.jp </option>
	<option value="2170">thick.jp </option>
	<option value="2010">tonkotsu.jp </option>
	<option value="490">under.jp </option>
	<option value="500">upper.jp </option>
	<option value="320">velvet.jp </option>
	<option value="2030">verse.jp </option>
	<option value="510">versus.jp </option>
	<option value="280">vivian.jp </option>
	<option value="880">watson.jp </option>
	<option value="2180">weblike.jp </option>
	<option value="260">whitesnow.jp </option>
	<option value="20">zombie.jp </option>
</select>

2) phpMyAdmin

javascript:$('#select_server').val(192);$('#input_username').val("ロリポップ内部ID");$('#input_password').val("123465789");$('#input_go').click();

#select_server の val は以下より使用

<select name="server" id="select_server">
	<option value="1" selected="selected">mysql15.chicappa.jp</option>
	<option value="2">mysql16.chicappa.jp</option>
	<option value="3">mysql17.chicappa.jp</option>
	<option value="4">mysql18.chicappa.jp</option>
	<option value="5">mysql19.chicappa.jp</option>
	<option value="6">mysql20.chicappa.jp</option>
	<option value="7">mysql21.chicappa.jp</option>
	<option value="8">mysql22.chicappa.jp</option>
	<option value="9">mysql23.chicappa.jp</option>
	<option value="10">mysql24.chicappa.jp</option>
	<option value="11">mysql25.chicappa.jp</option>
	<option value="12">mysql26.chicappa.jp</option>
	<option value="13">mysql27.chicappa.jp</option>
	<option value="14">mysql28.chicappa.jp</option>
	<option value="15">mysql29.chicappa.jp</option>
	<option value="16">mysql30.chicappa.jp</option>
	<option value="17">mysql31.chicappa.jp</option>
	<option value="18">mysql32.chicappa.jp</option>
	<option value="19">mysql33.chicappa.jp</option>
	<option value="20">mysql34.chicappa.jp</option>
	<option value="21">mysql35.chicappa.jp</option>
	<option value="22">mysql36.chicappa.jp</option>
	<option value="23">mysql51.chicappa.jp</option>
	<option value="24">mysql52.chicappa.jp</option>
	<option value="25">mysql501.phy.lolipop.jp</option>
	<option value="26">mysql502.phy.lolipop.jp</option>
	<option value="27">mysql503.phy.lolipop.jp</option>
	<option value="28">mysql504.phy.lolipop.jp</option>
	<option value="29">mysql505.phy.lolipop.jp</option>
	<option value="30">mysql506.phy.lolipop.jp</option>
	<option value="31">mysql507.phy.lolipop.jp</option>
	<option value="32">mysql508.phy.lolipop.jp</option>
	<option value="33">mysql509.phy.lolipop.jp</option>
	<option value="34">mysql510.phy.lolipop.jp</option>
	<option value="35">mysql511.phy.lolipop.jp</option>
	<option value="36">mysql512.phy.lolipop.jp</option>
	<option value="37">mysql513.phy.lolipop.jp</option>
	<option value="38">mysql514.phy.lolipop.jp</option>
	<option value="39">mysql515.phy.lolipop.jp</option>
	<option value="40">mysql516.phy.lolipop.jp</option>
	<option value="41">mysql517.phy.lolipop.jp</option>
	<option value="42">mysql518.phy.lolipop.jp</option>
	<option value="43">mysql519.phy.lolipop.jp</option>
	<option value="44">mysql520.phy.lolipop.jp</option>
	<option value="45">mysql521.phy.lolipop.jp</option>
	<option value="46">mysql522.phy.lolipop.jp</option>
	<option value="47">mysql523.phy.lolipop.jp</option>
	<option value="48">mysql524.phy.lolipop.jp</option>
	<option value="49">mysql525.phy.lolipop.jp</option>
	<option value="50">mysql526.phy.lolipop.jp</option>
	<option value="51">mysql527.phy.lolipop.jp</option>
	<option value="52">mysql528.phy.lolipop.jp</option>
	<option value="53">mysql529.phy.lolipop.jp</option>
	<option value="54">mysql530.phy.lolipop.jp</option>
	<option value="55">mysql531.phy.lolipop.jp</option>
	<option value="56">mysql532.phy.lolipop.jp</option>
	<option value="57">mysql533.phy.lolipop.jp</option>
	<option value="58">mysql534.phy.lolipop.jp</option>
	<option value="59">mysql535.phy.lolipop.jp</option>
	<option value="60">mysql536.phy.lolipop.jp</option>
	<option value="61">mysql537.phy.lolipop.jp</option>
	<option value="62">mysql538.phy.lolipop.jp</option>
	<option value="63">mysql539.phy.lolipop.jp</option>
	<option value="64">mysql540.phy.lolipop.jp</option>
	<option value="65">mysql541.phy.lolipop.jp</option>
	<option value="66">mysql549.phy.lolipop.jp</option>
	<option value="67">mysql550.phy.lolipop.jp</option>
	<option value="68">mysql551.phy.lolipop.jp</option>
	<option value="69">mysql552.phy.lolipop.jp</option>
	<option value="70">mysql553.phy.lolipop.jp</option>
	<option value="71">mysql554.phy.lolipop.jp</option>
	<option value="72">mysql555.phy.lolipop.jp</option>
	<option value="73">mysql556.phy.lolipop.jp</option>
	<option value="74">mysql557.phy.lolipop.jp</option>
	<option value="75">mysql558.phy.lolipop.jp</option>
	<option value="76">mysql559.phy.lolipop.jp</option>
	<option value="77">mysql560.phy.lolipop.jp</option>
	<option value="78">mysql561.phy.lolipop.jp</option>
	<option value="79">mysql562.phy.lolipop.jp</option>
	<option value="80">mysql563.phy.lolipop.jp</option>
	<option value="81">mysql564.phy.lolipop.jp</option>
	<option value="82">mysql565.phy.lolipop.jp</option>
	<option value="83">mysql566.phy.lolipop.jp</option>
	<option value="84">mysql567.phy.lolipop.jp</option>
	<option value="85">mysql568.phy.lolipop.jp</option>
	<option value="86">mysql569.phy.lolipop.jp</option>
	<option value="87">mysql570.phy.lolipop.jp</option>
	<option value="88">mysql571.phy.lolipop.jp</option>
	<option value="89">mysql572.phy.lolipop.jp</option>
	<option value="90">mysql573.phy.lolipop.jp</option>
	<option value="91">mysql574.phy.lolipop.jp</option>
	<option value="92">mysql575.phy.lolipop.jp</option>
	<option value="93">mysql576.phy.lolipop.jp</option>
	<option value="94">mysql577.phy.lolipop.jp</option>
	<option value="95">mysql578.phy.lolipop.jp</option>
	<option value="96">mysql579.phy.lolipop.jp</option>
	<option value="97">mysql580.phy.lolipop.jp</option>
	<option value="98">mysql581.phy.lolipop.jp</option>
	<option value="99">mysql582.phy.lolipop.jp</option>
	<option value="100">mysql583.phy.lolipop.jp</option>
	<option value="101">mysql584.phy.lolipop.jp</option>
	<option value="102">mysql585.phy.lolipop.jp</option>
	<option value="103">mysql586.phy.lolipop.jp</option>
	<option value="104">mysql587.phy.lolipop.jp</option>
	<option value="105">mysql588.phy.lolipop.jp</option>
	<option value="106">mysql589.phy.lolipop.jp</option>
	<option value="107">mysql590.phy.lolipop.jp</option>
	<option value="108">mysql591.phy.lolipop.jp</option>
	<option value="109">mysql592.phy.lolipop.jp</option>
	<option value="110">mysql593.phy.lolipop.jp</option>
	<option value="111">mysql594.phy.lolipop.jp</option>
	<option value="112">mysql595.phy.lolipop.jp</option>
	<option value="113">mysql596.phy.lolipop.jp</option>
	<option value="114">mysql597.phy.lolipop.jp</option>
	<option value="115">mysql598.phy.lolipop.jp</option>
	<option value="116">mysql599.phy.lolipop.jp</option>
	<option value="117">mysql600.phy.lolipop.jp</option>
	<option value="118">mysql602.phy.lolipop.jp</option>
	<option value="119">mysql603.phy.lolipop.jp</option>
	<option value="120">mysql001.phy.lolipop.lan</option>
	<option value="121">mysql002.phy.lolipop.lan</option>
	<option value="122">mysql003.phy.lolipop.lan</option>
	<option value="123">mysql004.phy.lolipop.lan</option>
	<option value="124">mysql005.phy.lolipop.lan</option>
	<option value="125">mysql006.phy.lolipop.lan</option>
	<option value="126">mysql007.phy.lolipop.lan</option>
	<option value="127">mysql008.phy.lolipop.lan</option>
	<option value="128">mysql009.phy.lolipop.lan</option>
	<option value="129">mysql010.phy.lolipop.lan</option>
	<option value="130">mysql011.phy.lolipop.lan</option>
	<option value="131">mysql012.phy.lolipop.lan</option>
	<option value="132">mysql013.phy.lolipop.lan</option>
	<option value="133">mysql014.phy.lolipop.lan</option>
	<option value="134">mysql015.phy.lolipop.lan</option>
	<option value="135">mysql016.phy.lolipop.lan</option>
	<option value="136">mysql017.phy.lolipop.lan</option>
	<option value="137">mysql018.phy.lolipop.lan</option>
	<option value="138">mysql019.phy.lolipop.lan</option>
	<option value="139">mysql020.phy.lolipop.lan</option>
	<option value="140">mysql021.phy.lolipop.lan</option>
	<option value="141">mysql022.phy.lolipop.lan</option>
	<option value="142">mysql023.phy.lolipop.lan</option>
	<option value="143">mysql024.phy.lolipop.lan</option>
	<option value="144">mysql025.phy.lolipop.lan</option>
	<option value="145">mysql026.phy.lolipop.lan</option>
	<option value="146">mysql027.phy.lolipop.lan</option>
	<option value="147">mysql028.phy.lolipop.lan</option>
	<option value="148">mysql101.phy.lolipop.lan</option>
	<option value="149">mysql102.phy.lolipop.lan</option>
	<option value="150">mysql103.phy.lolipop.lan</option>
	<option value="151">mysql104.phy.lolipop.lan</option>
	<option value="152">mysql105.phy.lolipop.lan</option>
	<option value="153">mysql106.phy.lolipop.lan</option>
	<option value="154">mysql107.phy.lolipop.lan</option>
	<option value="155">mysql108.phy.lolipop.lan</option>
	<option value="156">mysql109.phy.lolipop.lan</option>
	<option value="157">mysql110.phy.lolipop.lan</option>
	<option value="158">mysql111.phy.lolipop.lan</option>
	<option value="159">mysql112.phy.lolipop.lan</option>
	<option value="160">mysql113.phy.lolipop.lan</option>
	<option value="161">mysql114.phy.lolipop.lan</option>
	<option value="162">mysql115.phy.lolipop.lan</option>
	<option value="163">mysql116.phy.lolipop.lan</option>
	<option value="164">mysql117.phy.lolipop.lan</option>
	<option value="165">mysql118.phy.lolipop.lan</option>
	<option value="166">mysql119.phy.lolipop.lan</option>
	<option value="167">mysql120.phy.lolipop.lan</option>
	<option value="168">mysql121.phy.lolipop.lan</option>
	<option value="169">mysql122.phy.lolipop.lan</option>
	<option value="170">mysql123.phy.lolipop.lan</option>
	<option value="171">mysql124.phy.lolipop.lan</option>
	<option value="172">mysql125.phy.lolipop.lan</option>
	<option value="173">mysql126.phy.lolipop.lan</option>
	<option value="174">mysql127.phy.lolipop.lan</option>
	<option value="175">mysql128.phy.lolipop.lan</option>
	<option value="176">mysql129.phy.lolipop.lan</option>
	<option value="177">mysql130.phy.lolipop.lan</option>
	<option value="178">mysql131.phy.lolipop.lan</option>
	<option value="179">mysql132.phy.lolipop.lan</option>
	<option value="180">mysql133.phy.lolipop.lan</option>
	<option value="181">mysql134.phy.lolipop.lan</option>
	<option value="182">mysql135.phy.lolipop.lan</option>
	<option value="183">mysql136.phy.lolipop.lan</option>
	<option value="184">mysql137.phy.lolipop.lan</option>
	<option value="185">mysql138.phy.lolipop.lan</option>
	<option value="186">mysql139.phy.lolipop.lan</option>
	<option value="187">mysql140.phy.lolipop.lan</option>
	<option value="188">mysql141.phy.lolipop.lan</option>
	<option value="189">mysql142.phy.lolipop.lan</option>
	<option value="190">mysql143.phy.lolipop.lan</option>
	<option value="191">mysql144.phy.lolipop.lan</option>
	<option value="192">mysql145.phy.lolipop.lan</option>
</select>

3) ロリポップでインストールした WordPress

javascript:jQuery("#user_login").val("usename");jQuery("#user_pass").val("123456789");jQuery("#wp-submit").click();

posted by lightbox at 2020-06-02 13:19 | ブックマークレットコード |

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 | ブックマークレットコード |

選択文字列を 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 | ブックマークレットコード |

2016年05月28日

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

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

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

js URL
IFRAME 幅 IFRAME 高さ

parent.document.getElementById("if").style.position='absolute';
parent.document.getElementById("if").style.width='$widthpx';
parent.document.getElementById("if").style.height='$heightpx';
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+="<" + "body style='margin:0;background-color:#fff;'> \n";
str+="<style> \n";
str+=" * { \n";
str+=" font-family:";
str+=" \"メイリオ\", Meiryo, \"ＭＳ Ｐゴシック\"; \n";
str+=" font-size:12px;";
str+="} \n";
str+="</style> \n";
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+="<"+"/body> \n";

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

parent.scroll(0,0);

function loadAction() {

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

}

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

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

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

posted by lightbox at 2016-05-28 00:33 | ブックマークレットコード |

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 : 内容の再整備

タグ：ブックマークレット javascript iframe

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 はテスト用です");
		}
	};
}
)();
}

タグ：javascript ブックマークレット

posted by lightbox at 2013-12-22 03:01 | ブックマークレットコード |