Seesaa ブログの通常エディタで記事の先頭に Twitter カード用の meta 要素を挿入するブックマークレット

▼ ブックマークレットのリンク(ブックマークバーにドロップしてください)
Twitterカード用画像 : meta 要素挿入

Twitter カード用画像のリンクを propmpt で表示したダイアログに入力して実行します。キャンセルするとなにも実行されません。

リンクのコード

<a href="javascript:var%20a=prompt('画像URL','');if(a!=null){$('#article__body').val('&lt;meta name=&#34;twitter:image&#34; content=&#34;'+a+'&#34;&gt;'+&#34;\n&#34;+$('#article__body').val());}void(0);" onclick=" 
		alert('ブックマークバーにドロップしてください'); 
		if (window.navigator.appName.toLowerCase().indexOf('microsoft') > -1) { 
			event.returnValue = false; 
		} 
		event.preventDefault(); 
		event.stopPropagation();
	">Twitterカード用画像 : meta 要素挿入</a>

Seesaa 以外のブログシステムでも、jQuery が使用されておれば、$('#article__body') の部分を変更してどこでも使えると思います。

▼ Twitter の Card validator へのリンク

jQuery でページを 斜めにして影を付けて 紹介画像として使うブックマークレット

以下のように、ただそのままキャプチャするより良く見えるかもしれません

斜めページ

上のリンクをクリックして、メッセージボックスの OK ボタンをクリックすると、このページを斜めにします。

斜めになっても、WEBページである事にはかわりは無いので、テキスト選択もできますし、リンクも生きています。

ブックマークレットに関する記事

関連する記事

ブックマークレット : Googleのドメイン内検索を任意のページで実行

最近は、セキュリティに厳密になったサイトが増えたので、そのページに埋め込む事ができなくなりつつあります。なので、windows.prompt で検索文字列を入力させて直接 Google を呼び出すようにしました。



ブックマークレットの登録は、ブックマークバーを表示して、その上にドラッグ・ドロップするのが簡単です。


ドメイン内検索

便利な「切り替え機能」

切り替えボタンで、深い階層へ移動して、その階層にあるページのみ検索できるようになります。アプリケーションの「オンラインマニュアル」の内容検索に絶大な効果を発揮します

表示しているドメインを検索するフォームを埋め込みます
※ 切り替えで、階層を変更可能です



インストールは、ブックマークバー等へ入れるだけですし、アンインストールは削除するだけです。

注意 : 実行本体は、lightbox.on.coocan.jp にありますので、nifty のラクーカンが落ちていると動きません。( https ページへのアクセスには、さくらサーバーを使用しています )

ブックマークレットに関する記事

JavaScript : ページのリンクのターゲットを全て name_window という名前に変更して、リンクを開く先を全て同じウィンドウにしてしまうブックマークレット

 
他人のページのリンクをお借りしていろいろ調査したい場合に利用するといいと思います。( JavaScript でページを開いている場合は対象外です )

ページのリンクを全て一つのウィンドウに表示

<a href="javascript:void((function(){var%20obj=document.getElementsByTagName('A');var%20i,len=obj.length;for(i=0;i<len;i++){obj[i].setAttribute('target','name_window');}})());"
onclick='
	alert("ブックマークバーにドロップか、IEでは右クリックでお気に入りに登録(お気に入りバー)が簡単です"); 
	if (window.navigator.appName.toLowerCase().indexOf("microsoft") > -1) { 
		event.returnValue = false; 
	} 
	event.preventDefault(); 
	event.stopPropagation();
'
>ページのリンクを全て一つのウィンドウに表示</a>

ブラウザ上で選択した文字列で Google 検索するブックマークレット

ブラウザ上で選択した後、なにか処理をするという結構オーソドックスで応用範囲の広いコードです。

選択 → Google検索

<a class="google_search" href="javascript:(function(){var%20b=((window.getSelection&&window.getSelection())||(document.getSelection&&document.getSelection())||(document.selection&&document.selection.createRange&&document.selection.createRange().text));if(b!=''){window.open('https://www.google.co.jp/#q='+encodeURIComponent(b));}else{alert('検索対象文字列が選択されていません');}})();">選択→Google検索</a>

▼ 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://www.google.co.jp/#q=' + encodeURIComponent(b));
    } else {
        alert('検索対象文字列が選択されていません');
    }
})();

変数 b にブラウザ上で選択した文字列が入ります。他のサービスで、QueryString に文字列を渡して使う事が可能なページに関しては、このコードの URL 部分とパラメータ部分を変更するだけでそのまま使用できます。

ブックマークレットの一般的な作り方

ブックマークレットのインストール用のアンカーは、href の先頭に javascript: を書いて、その後から一行にした JavaScript のコードをセットしますが、スペースが必要な場合は %20 に置き換えておきます。( 通常変数定義の var の後に使います )

単純なコードだけだと、実行後に画面が壊れるので、コードの最後は void(0) を実行する事が多いです( この場合は、open と alert が最後にあるので必要ありません。)

JavaScript では、|| で結果を返す処理を並べて行くと、最初から順に処理が実行されて、いずれかが true とみなされる結果が返ると処理をそこで中断します。このような特性を使って、最後に規定値を書くような処理は一般的です。

var a,b; a || b || 100
100
var a,b=10; a || b || 100
10

JavaScript : ブックマークレット雛型を使ったサンプル( そのページを１回転させる )

ページを１回転させる

jQuery を使っているので、ブックマークレットが呼び出す外部 JavaScript のソース内で jQuery を組み込んでいますが、既に組み込まれている場合は jQuery で回転させるだけです。 

if (!window.lightbox_f) {
	(function() {
		window.lightbox_f = 
		{
			// プロパティ
			version: 1.01
			,
			// メソッド
			init : function( ) {
				/* ここに処理を書きます */
				if ( !window.jQuery ) {
					s = document.createElement("script");
					s.src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js";
					if(s.addEventListener) {
						s.addEventListener("load",callback,false);
					} 
					else if(s.readyState) {
						s.onreadystatechange = callback;
					}
					document.body.appendChild(s);
				}
				else {
					callback();
				}
				function callback() { 
					$({kakudo: 0}).animate(
						{kakudo: 360},
						{
							duration: 3000,
							easing: "swing",
							step: function(now) {
								$(parent.document.body).css({
									transform: 'rotate(' + now + 'deg)'
								});
							}
						}
					);
				}
			}
		};
	})();
}

関連する Microsoft ドキュメント

script 要素とイベントの実行