2004年 12月 14日

コードに色をつける bookmarkletcode coloring bookmarklet

prog web

コードに色づけ Firefox でしか試してません。Opera ではもしかしたら動くかもしれないけれど、IE では絶対動きません。コアな部分 (つまりコードをマークアップするとこ) はブラウザにあんまり依存しないみたいなので、ブックマークレット化する部分をクロスブラウザすれば OK だけど面倒臭い。

  1. ブックマークレット起動
  2. 色づけしたいテキストをクリック (カーソルが I ビームになるとこ)
  3. プロンプトに使用するシンタックスを入力。

ECMAScript, Ruby, Lisp, XML, CSS, PHP, Io, Perl が適当に色づけ可能だと思うけど Perl はよく知らないし、Lisp はそもそもキーワード的なものがないので微妙。Javascript も JScript も ActionScript でも ECMAScript のスーパーセットである限りは ECMAScript でそこそこ色づけできるはず。HTML も XML でソレっぽくなるはず。

このスクリプトは少なくともコード部だけは独立してマークアップされてる必要があります。

<p>ほげほげ</p>
<pre>code</pre>
<span>code</span>
<code>code</code>
<p class="foo">code</p>

上のは OK. 下のは NG

<p>ほげ<em>ほげ</em>うげ
code</p>

子要素を持った要素は無理 (テキストノードに兄弟要素があるとダメ) ってことっす。

巨大なコードをやると死ぬかも。でも俺は謝らない。

Opera で一応動くように修正。リンクに %22 とか含まないようにしたのと、中途半端な IE 対策 (コピペなので) を削除。

関連エントリー

Trackback URI の UI

web prog

Trackback URI がコピーしやすい用に Trackback URI (本体のほう) をクリックするとプロンプトに URI 表示するようにしてみた。まぁ Trackback 自体殆ど来ないし、来まくっても困るんですけど……コメントとか削除するシステム作ってないので手動削除だし。

関連エントリー

2004年 12月 12日

ua.indexOf("MSIE") != -1 ?

prog web

UA 文字列を Javascript から得るにあたり検索をかけてみたのだけど、UA 文字列にある文字列 (eg. “MSIE”) があるか調べるときに String.prototype.indexOf の結果が -1 であるかを調べているのが多かった。これはやっぱ String.prototype.match だと遅いとかそういう問題があるからなのだろうか……なんかダサいので今回自分は String.prototype.match を使ったけど、どうなんだろ。

if (navigator.userAgent.indexOf("MSIE") != -1)
// do something for MSIE
if (navigator.userAgent.match(/MSIE/))
// do something for MSIE

さらに && とか使おうとすると演算子の優先順位 (よく忘れる) とか考えることになって面倒臭い……

関連エントリー

code をクライアント側で着色

prog web

pre に現れるコードを Javascript で着色 (Javascript でやってるのはマークアップ) してみる。重い？

少し前からこれがやってみたかったので class 属性に使用してる言語を書いていたりした。言語ごとにトークンを使いわけたようと思ってたわけだけど、実際そこまでやるのってどうなのよ、とか思い始めた。そのうちやってみて、いけそうだったら採用してみよう。

現状でもかなり重い気が……長くとれるトークンを増やせば (ループ量が減って) 軽くなるかもしれないけど微妙。実際一文字ずつループまわしてるからなぁ。やりすぎか。

Ruby と ECMAScript は別のトークンテーブル使うようにしてみた。別にパースしてるわけじゃない (スキャンだけ) なので微妙にアレな状況が既にいくつか思いつくわけですが……例えば式展開の引数で括ってるクオーテーションつかっちゃうとかが絶対おかしくなる。

それとループ回数を減らすために /[a-z][a-z0-9]*/i は identifer ってことにしてスキップしてる。

Lisp と XML もすっごい適当に加えた。

サンプル 重いので移した。

正規表現はブラウザ毎の違いが殆どない気もする。気付いてないだけかもしれないけど。

FF で右クリックから View Selection Source すると内部 DOM の内容もソースとして出てくるのが役に立った……

そもそもスキャナの実装が激しく間違ってたので修正。根本的な部分を変えたのでバグがあるかもしれない。

関連エントリー

2004年 12月 11日

Album 画像のポップアップ

prog web music

ポップアップしてみた画像

INTO THE WORLD :: ネタメモ とか見て、あーポップアップさせてーとか思って Javascript でポップアップさせてみた。

でかい画像と小さい画像を XHTML でどう関連付けるか考えたりするのが面倒なので全部でかい画像になってます。ブラウザにリサイズをまかせてます。小さい画像が汚いのはそのせいです。

IE だけ CSS の扱いがおかしいのでダメです。でも Opera と IE の区別がわからんので放置です。IE 知りません。

リサイズイン (っていうの？) ズームインするようにしてみた。リサイズアウト (ってい（ｒｙ) ズームアウトもやろうとしたけど Interval の競合？か何かでバグるのでやめた。ブラウザ判定を素直に UserAgent でやるようにした。偽装している人は偽装しているリスクみたいなものがわかっている人だからいいかと思った。MSIE が含まれている場合は処理しない。ただし、Opera が含まれている場合は処理をする。Opera が含まれている場合は画面の描画リフレッシュがおかしいので style.overflow をいちいち更新してる。っていう感じ。

関連エントリー

2004年 12月 10日

Ruby の式展開が好き

prog

"foo#{bar}baz" も 'foo'+bar+'baz' も同じで、 '+..+' が #{..} になっただけなのに何か凄く便利。書きやすいのもあるし、文字列の纏まりがちゃんと引用符で纏まってるのがカッコイイ。

関連エントリー

2004年 12月 09日

似たようなのは似たように

prog

似たようなバイト配列が同じぐらいの数値になるハッシュ関数がなんとなく欲しいけどどうやればいいかサッパリわからねー。最終的にやりたいことはある文字列から自動的にカラーコードを生成されることなんだけど、まぁそれ自体が目的で何かに使うってわけじゃないわけですけれど……

似たような、っていう条件をとれば 既存の MD5 とかのハッシュ関数使えば超簡単に実装できる。むしろ実装っていうほどのものじゃなくなる。一行で終る。"#%06x" % (Digest::MD5.hexdigest(str).to_i(16) >> 104)

似ている っつうのが抽象的っつうかなんつーか……面倒だからいいか。

関連エントリー

2004年 12月 08日

iolanguage case-when

prog

飽きるまで Io。

case がないので作ってみる。

簡単なとこばっかやりすぎな気が。super とかの使いどころがわからない。正規表現が微妙な時点で実用性がうっすいんですけど……組み込んで初めて力発揮しそうな。すくなくとも CGI 作るのにはアドオンが弱すぎ。

メッセージ書かない (何もしないと意図する) とエラーになって使えないのでコメンツアウト。邪魔なだけ。

関連エントリー

iolanguage

prog

むー。長く書けば書くほど何やってるか分からなくなるなぁ。Lisp に似てる。なんていうか、コメントが必要な言語だ……

関連エントリー

2004年 12月 07日

xyzzy io-mode

prog soft

io-mode.zip, io-mode.l

簡単そうなので作ってみる。殆ど c-mode のパクりなわけだけど……結局インデントレベル計算するところしか作ってないわけで、そしてそれも括弧しか使わない Io では数えるだけなわけで的な。とはいえアフォだからかなり詰ったんですけども orz

ioServer の Regex て何か変じゃありませんか。nextMatch と firstMatch が全く同じ挙動名気がする。つーかマニュアル書くなら効果的なサンプルと一緒に書いて欲しいなって思う。戻り値も書いてないこと多すぎ。むしろ最初から String replace に正規表現とれるようにしれと。正規表現がデフォで使えないとかキツすぎて死にます。

io-mode readme, iolanguage

関連エントリー