クマー アスキーアート化 Bookmarklet

楽しいスレを発見。

JavaScript:document.body.innerHTMLのガイドライン
http://that.2ch.net/test/read.cgi/gline/1070715430/l50

2004-02-23 追記
上記スレッドは dat 落ちして読めなくなっているため、ミラーを作りました。
2ちゃんねる ガイドライン板 JavaScript:document.body.innerHTMLのガイドライン
html ファイル http://sonic64.com/dat/1070715430.html
dat ファイル http://sonic64.com/dat/1070715430.dat

- このスレの趣旨

JavaScript を使って、ブラウザに表示された html を書き換えて遊ぶというスレ。
やってることは Bookmarklet (ブックマークレット) と同じなんだけど、はっきり言って役に立たない物が多い。でも、さすがは2ちゃんねる。職人さんが神業的なスクリプトを多数作ってくれて、役に立たないけど楽しいスクリプトが揃っている。

- 基本 スクリプトの使い方

JavaScript をコピーして、アドレスバーに貼り付けて enter キーか「移動」を押すだけ。

1 ：水先案名無い人 ：03/12/06 21:57 ID:V8brHrBg
１．どこでもいいからホームページを開く
２．下の一行を「アドレス」欄に貼り付ける
JavaScript:document.body.innerHTML=document.body.innerHTML.split('ー').join('━━━(ﾟ∀ﾟ)━━━');focus();
３．Enterを押す。

- うまく動かないときは

上記の「キター」が動かない人は、以下をチェック。

・JavaScript を有効にする
・タブブラウザなどの「アドレスバーに入力されたときは、新規ウインドウやタブで開く」機能は解除
・Sleipnir ユーザーは JWord サービスを解除する
・だめならブラウザを変えてみる

- 複数行の Bookmarklet でも簡単に試せるようにする

本スレを見るときは、まずこの リンク化 Bookmarklet を実行して、JavaScript Bookmarklet 部分をリンクにしてしまおう。アドレスバーに貼り付けて enter キーか「移動」を押す。JavaScript 部分がリンクになったら成功。もしかしたら Mozilla では一部リンクにならないかもしれないけど。

197 ：水先案名無い人 [sage] ：03/12/11 01:02 ID:qdGrc6yp
コピーするのがめんどくさいんで
このスレッドに対して↓これをかけちまったらどうか。
JavaScript:with(document.body)innerHTML=innerHTML.replace(/javascript:.+?(focus|eval|void)\(0?\);?/ig,function(e){return '<a href="'+e.replace(/<.+?>/g,'').replace(/"/g,'&quot;')+'">'+e+'</a>';});focus();

リンクになるんでショートカットのコピーで済む。

なぜこれが必要かというと、本スレに掲載されている Bookmarklet は改行などの余計な文字が入っているものがほとんどで、実行するには余計な文字を削除する必要があるからだ。で、手作業でやるのは大変なので、>>197 が「Bookmarklet 部分をリンクにする Bookmarklet」を作ってくれたワケだ。

リンクになってしまえばあとは簡単。右クリックして「ショートカットのコピー」や 「Copy Link Location」 を選択すれば Bookmarklet を抽出できるという寸法だ。

当サイトでは Bookmarklet 部分を丹誠込めてリンクにしているので、当サイトを閲覧するのであればリンク化 Bookmarklet は必要ない。

- クマー化 Bookmarklet

すごい。どんなサイトでも「」さえあればクマーが語ってくれる。>>316 も言ってるが、http://sportsnavi.yahoo.co.jp/fight/k1/column/200312/1213sn_ ... なんかをクマー化すると実に良い。

>>316 のクマー化 Bookmarklet

>>339 クマー化 Bookmarklet 長文対策版

316 ：水先案名無い人 [sage] ：03/12/14 19:21 ID:y9FZQVJ1
javascript:A=(d=document.body).innerHTML;AA=new Array("「","<br>　　 ∩＿＿＿∩<br>　　 | ノ　　　　　 ヽ<br>　　/　　●　　　● |　　　","。?」","クマー<br>
　 |　　　　( _●_)　 ミ<br>　彡､　　　|∪|　　､｀＼<br>/　＿＿　 ヽノ　/´>　 )<br>(＿＿＿）　　　/　(_／<br>　|　　　　　　 /<br>　|　　／＼　＼<br>
　|　/　　　 )　 )<br>　∪　　　 （　 ＼<br>　　　　　　 ＼＿)<br>");i=0;while(i<AA.length){r=RegExp(AA[i],"g");A=A.replace(r,AA[i+1]);i+=2;}d.innerHTML=A;focus(0);


ニュースサイトか小説（太宰とか）でどうぞ。
↓これは教えてもらったやつだが爆笑した。奴にクマーは似合いすぎ。
ttp://sportsnavi.yahoo.co.jp/fight/k1/column/200312/1213sn_02.html

なお、>>263さんのを参考にしました。
もちろんAAを入れ替えることでいろいろ応用できます。


339 ：水先案名無い人 ：03/12/14 23:41 ID:j94b01Xm
長文対策バージョンｸﾏ━━━━━━ヽ(・(ｴ)・)ノ━━━━━━!!!
コピペっと。改行は取るクマよ。

JavaScript:with(document.body)innerHTML=innerHTML.replace(/「(.+?)。?」/g,"<table><tr><td nowrap>　　 ∩＿＿＿∩<br>　　 | ノ　　　　　 ヽ<td><tr><td nowrap valign='top'>　　/　　●　　　● |
<br>　 |　　　　( _●_)　 ミ<br>　彡､　　　|∪|　　､｀＼<br>/　＿＿　 ヽノ　/´>　 )<br>(＿＿＿）　　　/　(_／<br>　|　　　　　　 /<br>　|　　／＼　＼<br>　|　/　　　 )　 )
<br>　∪　　　 （　 ＼<br>　　　　　　 ＼＿)<br><td valign='top' style='padding-left:2em'>$1クマー</table>");focus(0);


378 ：水先案名無い人 [sage] ：03/12/15 18:29 ID:N+YntLl4
>>316と>>339の違い

>>316
長文・センタリング中など表示は崩れるが、サイト内の文字サイズや色指定に反応してくれる。
ニュースタイトルの中で巨大に「サップ殺す！！クマー」と表示してくれるなど。
また、変換結果をそのままコピペできる。

>>339
長文を扱える。表示サイズは固定。


誰か文章変換込みでMMRバージョンやAAつきカイジバージョンとか作ってみませんか？
モナー系とかは簡単なはず（ニダーとか・・・）

ちなみに>>359は大ちゃんバージョンのようですが、
「何故変換式を載せてくれないんだクマー！！」

次のチャレンジは「移動する・動くAA」かな・・・
「通過する通りますよ」とか・・・

- 走れメロスを >>339 でクマー化

青空文庫に収録されている、太宰治の「走れメロス」にクマーを適用してみる。
http://www.aozora.gr.jp/cards/000035/files/1567_14913.html

まずは IE6 でも簡単に使える >>339 を適用。物語冒頭の老爺とメロスのやりとりもこの通りクマー。

- 表情をつけてクマー化

クマーが文末の表現に応じて表情を変えるようになった。ただし、この Bookmarklet は IE6 の508文字制限にひっかかってしまい、アドレスバーやブックマークにそのまま入れても動作しない。動作させるには、後述する >>425 のクリップボードコピー法を使う。Netscape や Mozilla なら、アドレスバーに直ペーストしてすぐ使える。

>>479 の表情つきクマー化 Bookmarklet

>>566 の表情つきクマー化 Bookmarklet

479 ：水先案名無い人 [sage] ：03/12/17 04:14 ID:miAbXKqS
空気を読まずにクマー
簡単に表情つけてみたクマー

javascript:A=(d=document.body).innerHTML;AA=new Array(
"「([^」]+?[せはるぞ！]+)。?」","<br><br>　　　　　　　　　 〈〈〈〈　ヽ<br>
　　　　　　　　　　〈⊃　　}<br>　　 ∩＿＿＿∩　 |　　 |<br>
　　 | ノ　　　　　 ヽ !　　 !<br>　　/　　●　　　● |　　/　　$1クマー<br>
　 |　　　　( _●_)　 ミ／<br>　彡､　　　|∪|　　／<br>
/　＿＿　 ヽノ　/<br>(＿＿＿）　　　/<br><br>",
"「(.)([^」]+?)(…|ン|ん|だ|か|？|ない)。?」","<br>
　　 ∩＿＿＿∩<br>　　 | ノ　　　　u ヽ<br>
　　/　　●　　　● |　　　$1、$1$2$3クマー<br>　 |　u　　( _●_)　 ミ<br>
　彡､　　　|∪|　　､｀＼<br>/　＿＿　 ヽノ　/´>　 )<br>
(＿＿＿）　　　/　(_／<br><br>","「(.+?)。?」","<br>　　 ∩＿＿＿∩<br>
　　 | ノ　　　　　 ヽ<br>　　/　　●　　　● |　　　$1クマー<br>
　 |　　　　( _●_)　 ミ<br>　彡､　　　|∪|　　､｀＼<br>
/　＿＿　 ヽノ　/´>　 )<br>(＿＿＿）　　　/　(_／<br><br>"
);i=0;while(i<AA.length){r=RegExp(AA[i],"ig");A=A.replace(r,AA[i+1]);i+=2;}d.innerHTML=A;focus(0);

おまけ
JavaScript:d=document.body;d.innerHTML=d.innerHTML.replace(/俺等/g,'スレ住人').replace(/お前/g,'俺');focus();
http://that.2ch.net/test/read.cgi/gline/1070715430/476


566 ：水先案名無い人 [sage] ：03/12/18 08:11 ID:0B5gw3Qt
長文で崩れないバージョン（>>479さんの改造版）。クリップボードコピー版。

javascript:A=(d=document.body).innerHTML;AA=new Array(
"「([^」]+?)((せ|ぞ|はい)|([！♪!]+))。?」",
"「([^」]+?)((か|の|あー|ぁ|えー|ぇ|おー|ぉ|っ|しまった|゛)|([…・？\?]+))。?」",
"「([^」]+?)()()()。?」","
　　　　　　　　　 〈〈〈〈　ヽ<br>
　　　　　　　　　　〈⊃　　}<br>
　　 ∩＿＿＿∩　 |　　 |<br>
　　 | ノ　　　　　 ヽ !　　 !<br>
　　/　　●　　　● |　　/<br>
　 |　　　　( _●_)　 ミ／<br>
　彡､　　　|∪|　　／<br>
/　＿＿　 ヽノ　/<br>
(＿＿＿）　　　/","
　　 ∩＿＿＿∩<br>
　　 | ノ　　　　u ヽ<br>
　　/　　●　　　● |<br>
　 |　u　　( _●_)　 ミ<br>
　彡､　　　|∪|　　､｀＼<br>
/　＿＿　 ヽノ　/´>　 )<br>
(＿＿＿）　　　/　(_／","
　　 ∩＿＿＿∩<br>
　　 | ノ　　　　　 ヽ<br>
　　/　　●　　　● |<br>
　 |　　　　( _●_)　 ミ<br>
　彡､　　　|∪|　　､｀＼<br>
/　＿＿　 ヽノ　/´>　 )<br>
(＿＿＿）　　　/　(_／
");for(i=0;i<3;i++){r=RegExp(AA[i],"ig");A=A.replace(r,"<br><div style=line-height:1.1em;>"+AA[i+3]+
"<div style=position:relative;left:10em;top:-5em;width:18em;>$1$3クマー$4</div></div>");}d.innerHTML=A;focus(0);

567 ：566 [sage] ：03/12/18 08:12 ID:0B5gw3Qt
あと、語尾の並びも手直ししました。（「…！？」とか後ろに来るように）

表情豊かな暴君ディオニスのクマーが好き。

- クリップボードコピー法

IE6 には、Bookmarklet の長さは508文字までという制限がある。「お気に入りに入れたときは文字数制限がかかるが、アドレスバーに直にペーストすれば回避できる」という情報もあったが、私の環境ではアドレスバー直でも動作しなかった。

これを回避するのがクリップボードコピー法。注意点は、2. をアドレスバーに貼ったときに決して「移動」や enter キーを押さないこと。私の環境では無限ループになっちゃいました。

425 ：水先案名無い人 [sage] ：03/12/16 05:19 ID:Eekw7vr/
>>423
ﾁｮｯﾄﾄｵｯﾃﾙｰ!!

さて、２行以上にわたるスクリプトをメモ帳にコピーして改行を編集するのが面倒な方へ

１．まず変換したいページをIEで開いておく
２．以下の１行をアドレスバーに張り付けておく。（張るだけで移動はしない）
javascript:s=clipboardData.getData("Text");s=s.replace(/\n+/g,"").replace(/.*(javascript\:.+\;).*/i,"$1");if(s!="")location.href=s;
３．変換javascript を大雑把に範囲選択してクリップボードにコピー（Ctrl+C）する。
４．移動する
※重ねがけは３からの繰り返しでＯＫ。


ＩＥ６で確認。オペラ他やタブブラウザ系は知らん。
右クリックメニューに登録する方法を調べているんだけどうまく出来ん……。また後で調べてみます。

- 他にもいくつか紹介

クマー以外にも力作があるので紹介しておこう。

- うわあああああぁ化

長いセリフでも破綻しないようにフキダシの位置が工夫されている。
>>691 のうわあああああぁ化 Bookmarlet

691 ：水先案名無い人 [sage] ：04/01/02 10:56 ID:Kkhd5BD4
JavaScript:with(document.body)innerHTML=innerHTML.replace(/「/g,'<BR><BR>').replace(/」/g,'
<BR>￣￣￣￣＼／￣￣￣￣￣
<BR>　　　　/＼＿＿_／ヽ　 　ヽ
<BR>　　 ／　　　　::::::::::::::::＼　つ
<BR>　 . | 　,,-‐‐　 　‐‐-､ .:::|　わ
<BR>　　|　 ､_(o)_,:　 _(o)_,　:::|ぁぁ
<BR>. 　 |　　　　::<　　　 　 .::|あぁ
<BR>　　 ＼　 /( [三] )ヽ ::／ああ
<BR>　　　／｀ー‐--‐‐―´＼ぁあ
<BR>
');focus();


「　」内が”うわあぁぁ”になる。
自分のレベルではこれが限界。

- モナー化

2ちゃんねると言えばモナー。首が一刀両断されてしまうので、長いセリフはちょっと苦手。
>>696 のモナー化 Bookmarklet

696 ：水先案名無い人 [sage] ：04/01/02 22:02 ID:aynuc62l
>>691をベースにモナーバージョンでいじってみますたがどうでしょう？

JavaScript:with(document.body)innerHTML=innerHTML.replace(/(「)([^{「」}]+)(」)/g,'
<BR>　　 ∧＿∧　　／￣￣￣￣￣<BR>　　（　´∀｀）＜$2モナ。
<BR>　　（　　　　） 　＼＿＿＿＿＿<BR>　　｜ ｜　|<BR>　　（_＿）＿）<BR><BR>');focus();

- だから言ってないでしょ!

結城さんもこれで安心だ。長いセリフも得意ではないけど大丈夫。
>>701 のだから言ってないでしょ化 Bookmarklet

701 ：水先案名無い人 [sage] ：04/01/03 13:35 ID:i1LlofSM
>>696を改造。
JavaScript:with(document.body)innerHTML=innerHTML.replace(/(「)([^{「」}]+)(」)/g,'
<BR>／￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣
<BR>|　　$2・・・と。
<BR>＼
<BR>　 ￣￣￣|／￣￣￣￣￣￣￣￣￣￣￣￣
<BR>　　∧＿∧　　　　　　　／￣￣￣￣￣￣￣￣￣￣￣￣
<BR>　 （　・∀・）　 ∧ ∧ ＜　だから逝ってないでしょ！
<BR>　（　　⊃ ）　 (ﾟДﾟ；)　　＼＿＿＿＿＿＿＿＿＿＿＿＿
<BR>￣￣￣￣￣ （つ＿つ＿＿
<BR>￣￣￣日∇￣＼| BIBLO |＼
<BR>　　　 　 　￣　　　=======　　＼');focus();

余談だけど、最近の結城さんの作品では「ギコ猫と証明書」と「ギコ猫とハイブリッド暗号システム」が面白かった。誤解の無いように書いておくと、結城さんの本職はアスキーアート職人ではなく、「プログラム書きと文章書き」だそうです。
http://www.hyuki.com/cr/cat_cert.html
http://www.hyuki.com/cr/cat_hybrid.html
http://www.hyuki.com/cr/cat_index.html

- 吉野家化 Bookmarklet

AA 化するわけじゃないけど、やっぱり2ちゃんねるで吉野家は外せないでしょう。残念ながら、IE6 の508文字制限に引っかかっている。
>>740 の吉野家化 Bookmarklet

740 ：水先案名無い人 [sage] ：04/01/07 01:58 ID:7A2JNsr1
ttp://www.asahi.com/　の 各ニュースで。

例　ttp://www.asahi.com/national/update/0106/030.html
　　 ttp://www.asahi.com/national/update/0107/002.html
　　 ttp://www.asahi.com/politics/update/0106/008.html
　　 ttp://www.asahi.com/national/update/0106/033.html


JavaScript:document.body.innerHTML=document.body.innerHTML
.replace(/い。/g,'い。小１時間問い詰めたい。')
.replace(/」/g,'」とか言ってるの。もう見てらんない')
.replace(/いた。/g,'いた。おめでてーな。')
.replace(/した。/g,'した。そこでまたぶち切れですよ。')
.replace(/いる。/g,'いるんですよ。もうね、アホかと。馬鹿かと。')
.replace(/だ。/g,'だって言いたいだけちゃうんかと。')
.replace(/った。/g,'った。これ最強。')
.replace(/う。/g,'う。素人にはお薦め出来ない。 ')
.replace(/る。/g,'る、これだね。')
.replace(/\(0.*?\)/,'<br>まあお前らド素人は、牛鮭定食でも食ってなさいってこった。');
focus();

- 唯一ネ申 又吉イエス化 Bookmarklet

単純だけど唯一神な雰囲気が出てて良い。
>>247 の 唯一ネ申 又吉イエス化 Bookmarklet

247 ：水先案名無い人 [sage] ：03/12/12 08:14 ID:d/kpQkt4
JavaScript:document.body.innerHTML=document.body.innerHTML.split('た。').join('たならば腹を切って死ぬべきである。');focus();

- タイーホ化 Bookmarklet

最後はこれ。
え? 逮捕という文字列が入ったページを探すのが大変だって? Google で逮捕を検索すれば一発でしょう。
タイーホ化 Bookmarklet

901 ：水先案名無い人 [sage] ：04/02/06 01:34 ID:YcCWYPK+
やっぱこれが最強だったｗ
JavaScript:document.body.innerHTML=document.body.innerHTML.split('逮捕').join('ﾀｲ━━━━||Φ|(|ﾟ|∀|ﾟ|)|Φ||━━━━ﾎ!!!');focus();

- もっといろいろあったよ

ここでは紹介しなかったけど、>>423 の「ちょっと通りますよ」や、 >>427 の「ズサギコ」、>>494 の「陛下」(正確には皇太子様) や、>>236 の「全員ひろゆき」など、ネタは尽きない。直接本スレを見るのが良いだろう。

JavaScript:document.body.innerHTMLのガイドライン
http://that.2ch.net/test/read.cgi/gline/1070715430/l50
ちょっと通りますよ http://that.2ch.net/test/read.cgi/gline/1070715430/423
ズサギコ http://that.2ch.net/test/read.cgi/gline/1070715430/427
陛下 http://that.2ch.net/test/read.cgi/gline/1070715430/494
全員ひろゆき http://that.2ch.net/test/read.cgi/gline/1070715430/236

2004-02-23 追記
上記スレッドは dat 落ちして読めなくなっているため、ミラーを作りました。
2ちゃんねる ガイドライン板 JavaScript:document.body.innerHTMLのガイドライン
html ファイル http://sonic64.com/dat/1070715430.html
dat ファイル http://sonic64.com/dat/1070715430.dat