以下のように、ただそのままキャプチャするより良く見えるかもしれません
上のリンクをクリックして、メッセージボックスの OK ボタンをクリックすると、このページを斜めにします。 斜めになっても、WEBページである事にはかわりは無いので、テキスト選択もできますし、リンクも生きています。
ブックマークレットに関する記事
関連する記事
2015年06月18日
jQuery でページを 斜めにして影を付けて 紹介画像として使うブックマークレット
ブックマークレット : Googleのドメイン内検索を任意のページで実行
最近は、セキュリティに厳密になったサイトが増えたので、そのページに埋め込む事ができなくなりつつあります。なので、windows.prompt で検索文字列を入力させて直接 Google を呼び出すようにしました。 ブックマークレットの登録は、ブックマークバーを表示して、その上にドラッグ・ドロップするのが簡単です。ドメイン内検索 便利な「切り替え機能」 切り替えボタンで、深い階層へ移動して、その階層にあるページのみ検索できるようになります。アプリケーションの「オンラインマニュアル」の内容検索に絶大な効果を発揮します 表示しているドメインを検索するフォームを埋め込みます ※ 切り替えで、階層を変更可能です
インストールは、ブックマークバー等へ入れるだけですし、アンインストールは削除するだけです。 注意 : 実行本体は、lightbox.on.coocan.jp にありますので、nifty のラクーカンが落ちていると動きません。( https ページへのアクセスには、さくらサーバーを使用しています ) ブックマークレットに関する記事
タグ：ブックマークレット
2015年03月01日
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>
2015年01月04日
ブラウザ上で選択した文字列で 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
2014年11月19日
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 要素とイベントの実行
2014年11月04日
JavaScript : 通常の WEB ページにブックマークレットでアプリケーション用の IFRAME を埋め込むコード (2) / ページ表示部中央に固定
▼ 本文中のブックマークレット(URLからリンクを作成)の登録用リンク埋め込みアプリ用 IFRAME
前回は、IFRAME を埋め込んだだけでしたが、今回はIFRAME の中に、HTML を書き込みます。 但し、ブックマークレットで書ける量には限界があるので、SCRIPT 要素と他の若干の処理のみ書きこんで、内部の処理や画面は SCRIPT 要素のsrc 属性で呼び出される.js ファイル内で実行させます。 この方法のメリットは、IFRAME 内で独立した CSS や 変数が使える事と、IFRAME 内から元のページにアクセス可能であるということです。この方法を使えば、ドメイン間のセキュリティの問題は発生しません。 ( src に別ドメインを使うとセキュリティの制限でアクセスはできません ) 例えば以下のような HTMLとJavaScript を IFRAME の中に埋め込みたい場合、少し特殊な処理が必要になります
<meta charset="utf-8">
<style>
body{
background-color:#ccc;
}
textarea {
width:300px;
height:70px;
}
</style>
<input type="button" value="ダウンロードリンク作成" onclick="build_link();">
<br>
<textarea id="url"></textarea>
<br>
<a id="link" href="#"></a>
<script>
function build_link() {
document.getElementById("link").innerText = "ダウンロードリンク";
document.getElementById("link").href= document.getElementById("url").value;
}
</script>
JavaScript 内で画面を作成するには、HTML そのものを文字列として作成して document.write する必要があります。( こちらの javascript ボタンで作成できます ) HTML 部分を文字列化した JavaScript ソースコード(UTF-8)
str="";
str+="<meta charset=\"utf-8\"> \n";
str+="<style> \n";
str+="body{ \n";
str+=" background-color:#ccc; \n";
str+="} \n";
str+="textarea { \n";
str+=" width:300px; \n";
str+=" height:70px; \n";
str+="} \n";
str+="</style> \n";
str+="<input type=\"button\" value=\"ダウンロードリンク作成\" onclick=\"build_link();\"> \n";
str+="<br> \n";
str+="<textarea id=\"url\"></textarea> \n";
str+="<br> \n";
str+="<a id=\"link\" href=\"#\"> </a> \n";
document.write(str);
document.close();
function build_link() {
document.getElementById("link").firstChild.nodeValue = "ダウンロードリンク";
document.getElementById("link").href= document.getElementById("url").value;
}
このコードをWEBに保存して、以下のようにスクリフプトタグごと IFRAME 内に document.write する事によって、一般のページに対する処理を行う画面として IFRAME を埋め込む事ができます。 ※ もちろん、サイト側で この手のブックマークレットをブロックする事は可能です
<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='fixed';left=l;top=t;zIndex=z;display=v;marginLeft=(((w/2)*-1)+'px');marginTop=(((h/2)*-1)+'px');borderRadius='8px';}}document.body.appendChild(wnd);window._bI.wnd=wnd;wnd.contentWindow.document.write('<'+'script%20src='http://toolbox.winofsql.jp/build_link.js'%20charset='utf-8'></'+'script>%20');})(400,200,1,'50%','50%',1000,'');}" onclick="
alert('ブックマークバーにドロップか、IEでは右クリックでお気に入りに登録(お気に入りバー)が簡単です');
if (window.navigator.appName.toLowerCase().indexOf('microsoft') > -1) {
event.returnValue = false;
}
event.preventDefault();
event.stopPropagation();
">埋め込みアプリ用 IFRAME</a>
このブックマークレットは、URL を手早くリンク化して右クリックしてそのファイルをダウンロードする為に使用できます 関連する記事 JavaScript : 通常の WEB ページにブックマークレットでアプリケーション用の IFRAME を埋め込むコード(1) 親(parent) フレームに jQuery が無い場合に jQuery をインストールする。 更新履歴 2011-03-20 : 初回投稿 2013-11-03 : ソースコードを単純に書き換えて、解説を追加。 2014-11-04 : ブックマークレットをページ表示部中央に固定
Seesaa の各ページの表示について
Seesaa の 記事がたまに全く表示されない場合があります。その場合は、設定＞ 詳細設定＞ ブログ設定 で 最新の情報に更新の『実行ボタン』で記事やアーカイブが最新にビルドされます。 Seesaa のページで、アーカイブとタグページは要注意です。タグページはコンテンツが全く無い状態になりますし、アーカイブページも歯抜けページはコンテンツが存在しないのにページが表示されてしまいます。 また、カテゴリページもそういう意味では完全ではありません。『カテゴリID-番号』というフォーマットで表示されるページですが、実際存在するより大きな番号でも表示されてしまいます。 ※ インデックスページのみ、実際の記事数を超えたページを指定しても最後のページが表示されるようです 対処としては、このようなヘルプ的な情報を固定でページの最後に表示するようにするといいでしょう。具体的には、メインの記事コンテンツの下に『自由形式』を追加し、アーカイブとカテゴリページでのみ表示するように設定し、コンテンツを用意するといいと思います。※ エキスパートモードで表示しています アーカイブとカテゴリページはこのように簡単に設定できますが、タグページは HTML 設定を直接変更して、以下の『タグページでのみ表示される内容』の記述方法で設定する必要があります
<% if:page_name eq 'archive' -%> アーカイブページでのみ表示される内容 <% /if %> <% if:page_name eq 'category' -%> カテゴリページでのみ表示される内容 <% /if %> <% if:page_name eq 'tag' -%> タグページでのみ表示される内容 <% /if %>この記述は、以下の場所で使用します
|
|
