ブックマークレット

選択文字列を Twitter の投稿画面に遷移するブックマークレット

 
Twitter に移動するのですぐ投稿できます

画像を追加したければクリップボードにコピーしておいて貼り付ければ追加できます
▼ URL ありバージョン
▼ URL なしバージョン


選択文字列を取り出すコードはわりと有名なブックマークレット用のコードです。誰でも転用できます。
▼ ブックマークレット登録可能な HTML

ブックマークレット => <a href="javascript:var%20d=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%20=function(){if(!w.open(u))l.href=u;};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();}void(0)" onclick=" 
		alert('ブックマークバーまたは、お気に入りバーにドラッグドロップが簡単です'); 
		if (window.navigator.appName.toLowerCase().indexOf('microsoft') > -1) { 
			event.returnValue = false; 
		} 
		event.preventDefault(); 
		event.stopPropagation();
	">選択文字でTwitter投稿</a>




ソースコード

▼ URL ありバージョン

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)


▼ URL なしバージョン

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,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)

ブークマークレットの作成方法( コードの書き方 )

通常の https:// の代わりに javascript: と書いて、その後には普通に JavaScript のコードを書きます。但し、改行コードは使えないので長い JavaScript のコードの場合は他でテストした上で改行コード取り去る必要があります。

また、メッセージボックスが出ないコードの場合は、最後に void(0); を追加するのが簡単です。

だれにでも解りやすい使い方

WEB ページ上の入力フィールドに固定値を表示させる事ができます。入力フィールドを DOM で参照する必要があり、その定義情報を知る知識が必要である事と、その定義情報はいつ変更されても仕方が無いという事を理解しておく必要があります。

関連する記事 🚩 要素を参照する document オブジェクトのメソッド

Google のページ 🚩 https://www.google.co.jp/ の検索入力で試します

Google の検索は name="q" なので以下のようなコードをブックマークに書き込めば使えます。

javascript:document.getElementsByName("q")[0].value="ブックマークレット";void(0)

※ 例えば業務上の社員番号入力などに使えます。

▼ コードの書き方には以下のようなバリエーションがあります

javascript:(function(){document.getElementsByName("q")[0].value="ブックマークレット";})();

この記法は無名 function の定義を実行するという意味で、書き換えると以下のようになります。

javascript:var a=function(){document.getElementsByName("q")[0].value="ブックマークレット";};a();


または以下のようにも書けますが、使い勝手が悪いので避けたほうがいいでしょう。

javascript:void(document.getElementsByName("q")[0].value="ブックマークレット");



WEB ページから登録できるようにするには、A 要素で以下のように記述します。

<a href="javascript:var%20a=function(){document.getElementsByName(%22q%22)[0].value=%22ブックマークレット%22;};a();" onclick="alert('クリックでは使えません');return false">ブックマークレット</a>


Edge 以外では、これをブックマークバーにドラッグ & ドロップで登録されると思います。

▼ 登録用リンク
ブックマークレット

Google のログインは、id="identifierId" なので、少し変えればアカウントの入力に使用できるでしょう。( 使うのは自宅の PC にしましょう )

Google 翻訳ブックマークレット

テキストを選択してブックマークレットを実行すると、その部分だけを翻訳し、なにも選択せずにただブックマークレットを実行するとそのページ全体を翻訳します。


🔻 以下のリンクをブックマークバーにドロップしてください
Google英→日
Google日→英 


Edge の場合は一旦何かのお気に入りを作成してから、上記リンクのコピーを編集で URL に対して置き換える必要があります


🔻 このページの英語翻訳


🔻 Google英→日 のソースコード

javascript: (function() {
	var b = ((window.getSelection && window.getSelection()) || (document.getSelection && document.getSelection()) || (document.selection && document.selection.createRange && document.selection.createRange().text));
	if (b != '') {
		window.open('https://translate.google.co.jp/?hl=ja&tab=wT#en/ja/' + encodeURIComponent(b));
	} else {
		window.open('https://translate.google.co.jp/translate?sl=en&tl=ja&js=n&prev=_t&hl=ja&ie=UTF-8&u=' + encodeURIComponent(location.href) + '&act=url');
	}
})();


🔻 Google日→英 のソースコード

javascript: (function() {
	var b = ((window.getSelection && window.getSelection()) || (document.getSelection && document.getSelection()) || (document.selection && document.selection.createRange && document.selection.createRange().text));
	if (b != '') {
		window.open('https://translate.google.co.jp/?hl=ja&tab=wT#ja/en/' + encodeURIComponent(b));
	} else {
		window.open('https://translate.google.co.jp/translate?sl=ja&tl=en&js=n&prev=_t&hl=ja&ie=UTF-8&u=' + encodeURIComponent(location.href) + '&act=url');
	}
})();

Google Chrome のアドレス部分に書き込む簡易エディタ



以下をクリックして選択状態にして、Google Chrome のブックマークバーへドラッグすると、ブックマークレットとしていつでも実行できるようになります。( タイトルは編集で変更してください )

▲ このテキストを Google Chrome のアドレスへ書き込むだけで簡易的なテキストエディタになり、ローカルへ SHIFT_JIS で保存する事ができ、既存のテキスト( SHIFT_JIS と Unicode と UTF8:BOMあり )を読み込む事ができます。

▼ もちろん、通常のWEB ページ上で使用する事もできます


以下が【保存用】のテスト用ソースコードです。( 改行コードが CRLF になるように処理しています )

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.8/FileSaver.min.js"></script>
<script src="https://winofsql.jp/js/encoding.js"></script>
<script src="https://winofsql.jp/js/save-sjis.js"></script>

<script>
$( function(){

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

		// テキストエリアのテキストを jQuery で取得		
		var text = $("#save-text").val();
		// lf のみを crlf に変換
		text = text.replace(/\n/g, '\r\n');
		// ローカルに保存する
		save_sjis( "save-sjis.txt", text );
	});

});
</script>
<div><input type="button" id="save-action" value="Save as Shift_JIS"></div>
<textarea id="save-text" style='width:400px;height:100px;'></textarea>



▼ save-sjis.js の内容です

var load_save_file_name = null;

var str2array = function(str) {

	var array = [],i,il=str.length;
	for(i=0;i<il;i++) array.push(str.charCodeAt(i));
	return array;

};

function save_sjis( filename, str ) {

	var array = str2array( str );
	var sjis_array = Encoding.convert(array, "SJIS", "UNICODE");
	var sjis_data = new Uint8Array(sjis_array);

	if ( load_save_file_name != null ) {
		filename = load_save_file_name;
	}

	saveAs(
		new Blob(
			[sjis_data]
			, {type: "text/plain;charset=shift_jis"}
		)
		, filename
	);

}

function load_sjis( event, target ) {

	var file = event.target.files[0];
	load_save_file_name = file.name;

	var reader = new FileReader();
	reader.onload = function(event) {
		target.value = event.target.result;
	};

	reader.readAsText(file,"shift_jis");

}



▼ 読込みのサンプルは以下のようになります

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://winofsql.jp/js/save-sjis.js"></script>

<script>
$( function(){

	$("#get-text").on("change", function( event ){

		load_sjis( event, $("#save-text").get(0) );

	});

});
</script>
<div><input type="file" id="get-text"></div>
<textarea id="save-text" style='width:400px;height:100px;'></textarea>

nanaco 番号の入力ブックマークレット( 番号なのでアカウントのようには記憶しづらい )

prompt メソッドでダイアログが表示されて入力します。

例えば、nanaco ならば(パスワードでログイン)というサンプルですが、好みによって番号の初期値を設定も可能です。

※ nanaco は番号なのでアカウントのようには記憶しづらいのでサンプルとしています。

javascript:var a=prompt('nanaco番号入力','番号初期値を入れる場合はココ');if(a!=''&&a!=null){document.getElementsByClassName('txtBoxLogin')[2].value=a;};void(0);


そのページをデベロッパーツールで input 要素の id または name または class をチェックして入力した値を転送するので、一応たいていの入力すべき値を転送できます。但し、自宅以外で行うのはセキュリティ上よろしく無いので注意して下さい( 番号やアカウント名が他人に漏れてしまいます )

サンプルではワンクッション置いて入力ダイアログを表示していますが、それを省いたほうが早く処理が可能にはなります