JAMADAM.COM

[2010.01.15追記] 無駄な処理が多かったのでソースを少し整理した。

恥ずかしながら、commons markerというサービスを最近まで知らなかった。前々から出来たらいいなと思っていたことにすごく近いので使い始めてみた。

ところで、はてなブックマークのFirefoxアドオンはとても便利で、とくにGoogle検索の結果にブクマ件数が表示されるのは、クリックすべきリンクのアタリをつけるのに大変便利なのですが、同じ発想でcommons markerの件数も参考データとして意味があるかもしれないと思い、早速グリモンスクリプトで実現してみた。

googleResultWithMarker.user.jsをインストール

// ==UserScript==
// @name           googleResultWithMarker
// @namespace      http://jamadam.com/blog/
// @description    googleResultWithMarker
// @include        http://*.google.co.jp/search*
// ==/UserScript==


(function() {

    var $;
    var jversion = '1.3.2';
    var jexist = (typeof unsafeWindow.jQuery != 'undefined');
    var conflict = (jexist && unsafeWindow.jQuery.fn.jquery != jversion);
    // Add jQuery if not loaded
    if (! jexist || conflict) {
        var GM_JQ = document.createElement('script');
        GM_JQ.src = 'http://ajax.googleapis.com/ajax/libs/jquery/' + jversion + '/jquery.js';
        GM_JQ.type = 'text/javascript';
        document.getElementsByTagName('body')[0].appendChild(GM_JQ);
    }

    GM_wait();

    // Check if jQuery's loaded
    function GM_wait() {
        if (typeof unsafeWindow.jQuery == 'undefined' || unsafeWindow.jQuery.fn.jquery != jversion) {
            window.setTimeout(GM_wait,100);
        } else {
            if (conflict) {
                $ = unsafeWindow.jQuery.noConflict(true);
            } else {
                $ = unsafeWindow.jQuery;
            }
            letsJQuery();
        }
    }

    // All your GM code must be inside this function
    function letsJQuery() {

        var array = $('#res li.g');
        var procExist = false;
        var i = 0;
        var loop = function() {
            if (i < array.length) {
                if (procExist) {return;}
                procExist = true;
                var href = array.eq(i).find('h3 a').attr("href");
                var pos = array.eq(i).find('span.gl');
                var url = encodeURIComponent(href);
                var jsurl = "http://commonsmarker.com/tools/latest_info?url=" + url;
                unsafeWindow["__jsonp__aD3jHjaf27mZQxt"] = function(a) {
                    if (! a || ! a.marks || ! a.marks.length) {
                        return;
                    }
                    $("<a>" + a.marks.length + " markers</a>")
                        .attr('href', "http://commonsmarker.com/page/" + href)
                        .css({
                            backgroundColor:"#f5d0d0",
                            color:"#ff0000",
                            fontFamily:"arial,sans-serif",
                            fontWeight:"bold",
                            marginLeft:"4px",
                            padding:"1px",
                            fontSize:"85%"
                        })
                        .insertAfter(pos);
                }
                $.ajax({
                    type: "GET",
                    url: jsurl,
                    dataType: "script",
                    complete: function() {
                        i++;
                        procExist = false;
                        loop();
                    }
                });
            }
        }
        loop();
    }
})();

commons markerの公式のインターフェースはまだ機能不足なため他のユーザーの動向がよく掴めなかったんだけど、こうしてスクリプトで簡単に件数を把握できるようにしてみて分かったことは、「全然利用されてない」ということでした。予想はしていたけど。

なお、commons markerはこの手の外部スクリプトへのインターフェースや仕様を一切公開していません。今回のスクリプトはとても強引な処理と憶測で実装しているので、サーバーの仕様が変わって動かなくなることが大いに予想されます。

以前にこんなエントリ書いたり、こんなjQueryプラグイン作ったりしたけど、それってCSSだけでできるんじゃん！

http://www5e.biglobe.ne.jp/~access_r/hp/css/css_text_019.html

text-overflow
テキストがオーバーフロー（領域を超えてしまう事）する際にオーバーフローしたテキストを「...」で省略することが出来ます。

しかも属性名と値などのキーワードも思い描いたまんまじゃん。ただし、省略記号を有効にする指定はtext-overflow: ellipsis;だ。以前にもちゃんとググったつもりだったけど、英語の情報無視してたかなあ。

ただしFirefoxは未対応なので依然としてJavascriptでのハックは必要。また、text-overflowはIEのみの対応のようで、SafariやOperaはそれぞれの拡張属性を併記して対応できる。

a.width-limited {
    display:block;
    overflow: hidden;
    white-space:nowrap;
    -webkit-text-overflow: ellipsis; // Safari
    -o-text-overflow: ellipsis; // Opera
    text-overflow: ellipsis; // IE
}

会社で求人応募者用の課題を作成した。今まではActionScriptメインの課題を出していて、僕もこれで入社したんだけど、今回の求人はHTMLってことでした。ちなみにActionScriptの課題は後にも先にも僕以外に正答を出した人はいない(自慢)。

改めてHTMLの課題と言われて困った。結局、ありとあらゆるタグを網羅したHTML+CSSのレンダリング結果をキャプチャした画像を示し「これを再現してね」って内容にした。文字実体参照などのトラップもちりばめてみた。募集要項的にみて、解ける人は来ないだろうなあ。もっと金だせよ。

CSSはYUI Reset CSSをベースにした。いい機会なのでこのBlogもYUI Reset CSSをベースにしてシェイプアップした。

• PSD ファイルを CSS レイアウトの HTML に変換してくれる「psd2css Online」
• ワコム、音楽ジャンルへ参入--開発中の新UIはプロ用DJ機器に活用
  MIDI対応のリボンコントローラも作ってほしい

フルAJAXな方向性にしたので、一度の来訪で同じファイルを何度もリクエストされることはあまり無いと思いきや、FCKeditorのテキストエリア用のCSSが何度もリクエストされてた。CSSはCGIで書き出してるため、ブラウザのキャッシュを有効利用できてなかった。Etagってのを発行すればいいだけらしく、簡単そうなので近々やってみよう。

• Unix Time stamp Generator
• 複数の画像を一つにまとめてCSSで表示「SmartSprites」

最近のコメント一覧のガジェットを、以前はサーバー側で長さ調整していたんですが、クライアント側で処理するように変更しました。これでユーザー環境に依存せずに最適なところで省略されるはず。ただし、文字サイズの変更とかガジェットの移動時に更新するとかの処理はまた今度。あと、例によって(どの例？)、IEでの動作検証は不十分です。

これのためにjqueryプラグインを作りました。改善の余地は大いにあり。

jquery.clipstr.js

使い方。widthは省略すると親のwidthに合わせてくれるかもしれない。

$('.boxsize_limited').limitCharWidth({
    width       : 220,
    instead_str : '...',
    set_title   : false
});

これ作ってて、関係ないところでハマった。上記の第二引数の後にカンマ入れてもFirefoxやSafariでは動くけどIE6,7で動かないらしい。なんでそんなところにカンマ入れるかと言えばメンテナンス性が向上するためで、Perlでは推奨されてたはず。

[2009.1.18追記]

少し直した。この機能のためにspanタグを自分で用意する必要があったのを改善。

[2009.1.19追記]

ちょっとバグってたので直した。

widthって指定させる必要があまりない気がしてきた。

[2009.1.23追記]

リサイズの検出の仕方がわからんなあ。とりあえず、元に戻せるようにunclipstrメソッドを追加。

$('.boxsize_limited').unlimitCharWidth();

[2009.1.28追記]

名前変えた。jquery.limitCharWidth.js。勇気を出してjQuery公式サイトにも登録してみようかな。

...つーかIE NetRendererで動いてねーし。ここ、たぶんスクリプトの読み込みに時間かかると無視されるから、実際の動作と必ずしも一致しないんだよなあ。やっぱマックのみではウェブ制作は無理だ。

...直ったっぽい。原因が2つあった。ひとつは、CSSのキーにはcss-prop(例えばfont-weight)とcssProp(例えばfontWeight)という2つの書式があって、jQueryのCSSメソッドでIEを相手にする場合はcssPropでないといけない（っぽい）。もうひとつは、IEのCSSでは多くのプロパティに対してinheritを指定することができなく、CSSメソッドでエラーが起きる(っぽい)。そんな訳で、inheritの代わりに、親の値を再指定することでinheritっぽいことをしてみた。けど、当初の目的を達成しているのか甚だ疑問。

[2009.2.1]

IE6でwidthを指定しない場合に動作していなかったのを改善。

ToDo

• 対象文字列が子要素を持つとたぶんバグるので対策。
• 内部で一時的に設置したspanが外のCSSの影響を受けないか検証。
• 自分自身がリサイズされたことを知る方法があるのか。あるなら自動更新機能。
• title属性使用の有無を引数で指定

IEで少し直ったかもしれない。JSライブラリのバグではなくIE側のCSSのバグだったよう。IE7では完全にFirefoxと一致。これのためにタグ書き足さなきゃならなくて腹立つ。一方、IE6ではlimitCharWidthが動いてない風なのでいずれ直す。

...お、IE6も直ったかもしんないぞ。IE6のブロック要素は内包要素のオーバーフローにつられて引き延ばされるため、内包文字列のwidthと親要素のwidthを比較することが意味をなしていなかったんじゃないか。そんな訳でlimitCharWidth.jsを改善。きっと解決してるはずだけど、NetRendererでは正常を確認できてない。

• Google AJAX Libraries APIを利用しよう！
  なるほど、すばらしい。早速、jquery.jsに使用してみた。
• jQuery Selectors
• Interactive jQuery selector tester
• jQuery を高速に使う CSS セレクタの書き方
• JavaScript::Minifier
• jQueryのパフォーマンス最適化に関するTips
• JavaScript ファイルサイズ縮小化ツール JSMin を使う

Macに転向してIEでのチェックができなくなったので、仕方なくウェブベースのレンダリングサービス「netrenderer」を使ってIEでのデバッグ。

酷かった。レイアウト崩れまくりでした。そうか、IE6はCSSの子セレクタ非対応だったっけ。あと、position:absoluteの要素の親要素にwidthを指定しないとぶっ飛ぶバグの対策。ここまでやるのに1時間もかかった。あと、ネットでDLしたアイコンが透過pngなので背景がおかしい。これも追々直さなければ。やっぱりwindows環境ないと無理だなあ。

Bootcampのベータが期限切れになって新規インストールできないっぽいので、Leoperd買わないとならない。金ないからしばらく先だなあ。