カテゴリー: ブックマークレット

ブログアーティクルを記述する際、 参照先にリンクを張るは必須作業にて、 多い時には一アーティクル内に二桁を数えるも珍しいことではないかと思うに、 ブログ備え付けの機能では自由も利かず、 又其の機能は主にタグを直接打ち込む人間には実に使い辛く作られている為、 煩雑な作業を情け無くも繰り返すが状態となるに、 当ブログからは其れこそ屡参照させていただき、 当該記事のアドレスをコピーさせていただくことも屡たる 「ホームページを作る人のネタ帳」 に2009年4月20日の記事 瞬時に見ているURLのaタグを作成するJavaScript完結のブックマークレット 中に正しく誂えられたブックマークレットが公開されていました。

IT戦記でamachang氏が「 今まで公開しないで放置してたモノを公開してみる 」として公開されたWebサービスが、 Chart Maniax（チャートマニアックス） なるサービスにて、本サイトに於いて画面最上部のテキスト入力エリアに任意のURLを入力すると、 入力URLが変数として本サービスに渡され、 トラフィックは当ブログではお馴染みの秋元氏所属サイボウズラボのサービス、 パストラック のデータが表示され、其の下に

1. はてなブックマーク
2. ライブドアクリップ
3. Delicious
4. バザール

のソーシャルブックマークが表示されるとのことで、 その詳細はIT戦記の2008年10月10日のブログ記事 様々なソーシャルブックマークを時系列に並べて表示できるサービスを公開！ で知ることが出来ます。
当サービスを利用すればブログ記事の影響度を知ることが出来る抔、有用であると思い、 先ずは当ブログはブログスフィアでは物の数にも入りませんから、 利用サービスのhamazo上位にランキングされる幾つかのブログも試さしていただきましたが、 どうも思わしくなく、全国的に影響力のある記事で無い限りは、 調査対象とならない様で、IT系のニュースサイトCNET Japanの2008年10月10日の記事 グーグル、「Google Maps」にテキスト広告を表示 を利用させていただくことにしました。
実例を引くに当たっては、時系列のサービスであることにより、 当アーティクルも時を経れば実用を失う為、 画像などで現状を静的に捉えた方が良いのでしょうが、 元サービスへのリンクも設けることですし、 敢えて直リンクさせていただき生の情報をご覧いただきたいと思います。 以下リンクがCNET Japanの記事の結果表示になります。 チャートマニアックス：グーグル、「Google Maps」にテキスト広告を表示:マーケティング - CNET Japan
情報の取得元は復活の嬉しい「 ホームページを作る人のネタ帳 」の2008年10月10日の記事 チャートマニアックスブックマークレット で此のひとつ前の記事自体がが当紹介サービスの人気ランキングに上位にランクされています。
チャートマニアックス：20の優れたAjax効果*ホームページを作る人のネタ帳
当記事自体も上位にランキングされることになるのではないでしょうか。
チャートマニアックス：チャートマニアックスブックマークレット*ホームページを作る人のネタ帳
此方では当サービスをブックマークレットとしても利用できるようにされていますので、 ご利用も一興であると思います。

Webで文章を辿るのは思いの外疲れるものとて、 此処に其の様な際に便利なるブックマークレットの登場は、 海外の有益な情報を紹介してくれるにより、 当ブログでも屡参照させていただく IDEA*IDEA の2008年10月1日の記事 画面の一部以外を隠してウェブページを読みやすくしてくれるブックマークレット『Reading Blinds』 にて、百聞は一見に如かずなれば、 下記リンクをクリックあれ、 Reading Blinds 如何でしょうか、マウスに追従する数行分のスポットライト的効果が、 Web閲覧の負担を軽減してくれているでしょうか。
使用法はブックマークレットの有効となった右上暗部に白く浮き上がる文字で為されていますが、 紹介記事IIDEA*IDEAでは日本語で言及される部分を引用させていただくと

ちなみに操作方法は以下の通り。日本語入力をOFFにしてご利用ください。

• マウスで見える範囲を移動
• 「b」で機能のON/OFF
• 「s」で見える範囲を小さく
• 「l（L)」で見える範囲を大きく

とありますから、リンクの後画面が暗転しても先ずは慌てずに、 日本語入力を切った上で「b」を押下していただければ、 元の画面に戻ります。

当スクリプトの製作者は Wait till I come! の Christian Heilmann氏がYUI Blogの2008年9月30日の記事 Reading Blinds — a YUI-powered Reading Tool にてスクリプトの説明と共に公開されています。

屡参照させていただくidea*ideaにて2008年6月8日の たった一行でどんなサイトでも編集可能にする小技 にて紹介されていたのが、 当アーティクルタイトルでもある、 まるでホームページを書き換えでも出来てしまう様なブックマークレットです。
上記記事の紹介先の Patrick Altoft氏の手になる記事、 Cut and paste one line of code to make any website editable に記載されているコードを以下に転載させていただきます。 任意のページでこのコードを其の儘アドレスバーにコピーアンドペーストしてリターンキーを押下すれば、 そのページを編集出来てしまいます。 オブジェクトの追加についてはパスが異なる為、ドラッグアンドドロップで、と云う訳には行きませんが、 文字を書き換えるのも画像の位置を変えるのも勿論、削除してしまうのも自由自在です。 尤もidea*ideaの上記記事でも言及されています通り保存は出来ませんから、 本当に書き換えてしまって、サイトの運営者に迷惑を掛ける心配もありません。 例に依って 身近な知人に
「此のサイトのタイトルが気に入らないから、君の名前にしてしまおう！」
と目の前で試した処、慌てられましたから、悪戯ツールとしては保証できます。

上記 Patrick Altoft氏の記事のリンクを辿ると HaRRo氏の手になる2008年6月1日の記事、 Spoof your earnings? にも、コードが記載されておりidea*ideaでも以前話題になった気のする旨の言及がありますから、 面白いブックマークレットと云うものはまるで都市伝説の如く、 深く潜行しては生き続け、時々思い出した様に人々の話柄の俎上に上るものなのかもしれません。

ブックマークレットのWEBサイト上に見掛け其の効果の劇的なことに驚かされる度毎に、 当ブログでもご紹介させていただく訳ですが、 その様な形を取ったアーティクルが5つになりましたので、 javascriptの系列のサブカテゴリーとして独立させることにしました。

昨日2008年4月29日のアーティクル CrazyCoolInternetTrick!／縦隊飛行画像 中でも触れましたが当アーティクルにても引き続きのブックマークレットのご紹介は 秋元@サイボウズラボ・プログラマー・ブログ さんの ページ中の画像群で遊ぶJavascript で紹介されているリンクを辿れば、 昨日ご紹介の縦隊飛行画像ブックマークレットを見て触発され作成されたという うえぽんSW局 さんの 適当なページをウゴウゴルーガ化するブックマークレット にて、此のブックマークレットを摘要すると頁内のオブジェクトが震え出す様は とても奇妙ですけれども可笑しみがあり、 私は寡聞にしてウゴウゴルーガを余りよくは知らないのですが、 周囲に聞いて廻りました処、タイトルに偽り無き出来だと想像され得ますので、 ご存知の方は是非お試しになれば楽しんでいただけるのではないかと思います。

試し方は下に引用させていただきましたコードを

javascript:T=new Array();N='a|img|b|strong|i|small|big|span|font|q|s|u|strike|blink|acronym|em|sup|sub|cite|label'.split('|');for(i=0;i<N.length;i++)for(E=document.getElementsByTagName(N[i]),j=0;j<E.length;j++)T.push(E[j]);L=T.length;function A(){for(i=0;i<L;i++){S=T[i].style;S.position='relative';S.left=Math.round(Math.random()*8-4)+'px';S.top=Math.round(Math.random()*8-4)+'px'}setTimeout('A()',100);}A();void(0);

前回のロシア縦隊飛行画像同様任意のお好みの頁のアドレスバーから実行していただくか、 下記ボタンをクリックすれば当頁でご覧いただくことが出来、 ウゴウゴ また、[続きを読む]をクリックしても実行されるように設定しています。
ブラウザによる非動作の修正をされているとのことですので、 ロシア縦隊飛行画像javascriptでは上手く動作しなかった FireFox使用頻度の高い方にも楽しんでいただけると思います。

お試し下されば判るように頁自体の機能は失うことも無く、 可視性を損なう程でもなく、愉快な気分にさせて貰える様は、 当ブログ2008年3月25日のアーティクル Rafaël Rozendaal でご紹介の Rafael Rozendaal 氏作成の一連の癒し形とも云うべきフラッシュや、 2008年4月26日のアーティクル なんでもドラッガー／fukuwarai.jsで福笑い頁 でご紹介、 KAZUMiX さんの なんでもドラッガー fukuwarai.js にも一脈通じる部分があるように思います。

アドレスバーから実行出来、元頁には影響を与えませんから、 実際javascriptを多用する知人が職務で携わる頁で実行して
「この頁はどうしたことだ！？」
と見せた処、彼には申し訳ない乍、非常に慌てておりましたので、 一寸した悪戯にも有用なことは実証済みです。
勿論彼には即座に、概要を伝え許しを得ましたが、 非常に感心すると共に喜んでも貰えたようでした。

本邦にて最初に紹介されたのは2008年4月28日にもIEでは見られないのが残念乍、 20行のJavascript+canvasでここまでできる にても最新の興味深いjavascriptを紹介されている 秋元@サイボウズラボ・プログラマー・ブログ さんの2006年10月8日の ページ中の画像群で遊ぶJavascript でのことではないかと思われ、流石ネットならではすぐさまのこと、 面白さの余り当ブログでも明日ご紹介する予定の 当スクリプトに触発され日本風に改訂したjavascriptを作成する方 も現れるに至って 同月27日にはAjaxうきうきWatch第14回「 IE7とFirefox 2への利用者の大移動は起こるか？ 」で紹介され、更に広まれば、 また2007年2月15日には英語圏でもJustin Benton氏のサイト latestgroove.com に於ける当該頁は当アーティクルの標題にも引用させていただきました、 Crazy Cool Internet Trick! でもGoogleイメージで使用すると面白いとして紹介され、 Google系と云うことでそちらのルートから Google Mania さんで紹介されていたのが2007年11月11日の クレイジーなGoogleイメージ検索 の記事でのことで、直後の11月13日の「ネタりか」のコラム 裏ワザ？バグ？Googleで検索した画像が踊りだす技 でも人気の程が報告されていたりと様々なルートで ネットに流布するに至っておりますのでご存知の方も多いかと思いますのが、 当方文字を解すこと能わず名前を知らぬ儘の紹介が少し許り心苦しい、 ロシアの作家の方の手になるアドレスバーから実行すると、 画像が豊富な頁では面白い効果が得られると云うjavascriptにて Луд жаваскрип }:-) に於ける掲載のコードを適当な頁でアドレスバーに入力し[Enter]キーを押下すると、 其の頁に表示される画像が列をなして飛び回り始める様は、 まるで頁閲覧者に踊りを披露してくれているようで、とても愉快です。
当状態で更に[Enter]キーを押下すればする程スピードは増していくと云う 付加処理も洒落ていて感心させられます。

秋元@サイボウズラボ・プログラマー・ブログさんやGoogle Maniaさん抔にも コードが転載されていましたので、当ブログにも引用させていただけば、

javascript:R=0; x1=.1; y1=.05; x2=.25; y2=.24; x3=1.6; y3=.24; x4=300; y4=200; x5=300; y5=200; DI=document.images; DIL=DI.length; function A(){for(i=0; i<DIL; i++){DIS=DI[ i ].style; DIS.position='absolute'; DIS.left=Math.sin(R*x1+i*x2+x3)*x4+x5; DIS.top=Math.cos(R*y1+i*y2+y3)*y4+y5}R++}setInterval('A()',5); void(0);

なる部分が相当しますので、Google Maniaさんでも紹介されていますように、 Googleでイメージ検索をした結果の画像が表示されている頁の其のアドレスバーに URLの代わりに当コードをペーストして[Enter]キーを押してみていただければ、 実際に効果をご覧いただけると思います。




追記ページにては同じスクリプトが1／5の速度で実行されるようにしましたので、 [続きを読む]をクリックして遷移した頁では 上に表示している画像が列をなして飛び回る様子がアドレスバーから実行するよりはゆっくりご覧いただけると思います。
但し此方では[Enter]キーを何度押下してもスピードは変わりません。
またブラウザによってはうまく動作しない場合もあるようです。

2008年3月6日に当ブログで紹介の メルトダウン はクリックするとページが崩壊していくという、 見る目に刺激的なjavascriptでしたが、 同じ作者 KAZUMiX さんの手になる当アーティクル表題の一部を成すfukuwarai.jsも 負けず劣らぬ面白い効果をページに齎すjavascriptにて、 なんでもドラッガー fukuwarai.js （2007年11月20日）で公開され、当頁にはどの様な書籍を参考にしてjavascriptを勉強されたかも説明されており、 更にサンプルは CSSをURIのクエリーで切り替えるJavaScript 他、動作サンプルページ | KAZUMiX memo に掲載されていますのでご参照下さい。

なんでもドラッガー fukuwarai.js に掲載されているコードを任意のページでアドレスバーから実行すれば、 標題に偽りなし、目に付くもの総てがドラッグ可能になりますから、 何も考えずにマウスを操作すればページのレイアウトは其れはもう滅茶苦茶に、 他人のデザインした頁を当人を目の前にしてブラウザで操作すれば 慌てること間違い無しのちょっとした悪戯に、 方向を変えればデザインアイデアの纏まらない時のレイアウトの試行錯誤にも使用出来る様な可能性迄感じさせます。

弄っていて、とても愉快で止められなくなる感じで、 早速ソースをダウンロードさせていただいて、当ブログにも実装してみましたので、 [続きを読む]をクリックしてご覧ください。

はまぞうブログでも圧倒的人気を誇るHibi日記さんの
あれ～～～！ページが壊れてく～～～～！
というページで興味深いjavascriptが紹介されていました。
効果が劇的で面白いのでこのページにも実装してみました。
元ネタは HTML崩壊 meltdown.js です。

この下の「ClickHere★」というボタンをクリックしてみて下さい。
見る見るうちにご覧のページが崩れ始めます。
ページはリロードすれば元に戻ります。