JAMADAM.COM

以前にこんなエントリ書いたり、こんな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
}

• Googleに学ぶ、ウェブページのパフォーマンスを最適化する方法
• 【メール・チャット・メッセンジャー・ビジネスで頻出する英語略語・省略語(Acronym)の決定版！】
• モダンPerlの世界へようこそ
• モバイルとパソコンのネット利用に関する調査 〜モバイルのネット利用時間が増加〜記事をクリップする

jquery.limitCharWidthプラグインをリリースしてjquery plugin authorデビューしました。デビューすることが第一目的。あそこは結構敷居が低く、僕と同じく単なる経験値稼ぎっぽいっぽいプラグインも多かったりするので、そこにカコつけてみた。

jquery.limitCharWidthは、一行でかつwidthが限られたスペースに文字列を表示する際、オーバーフローした部分を省略して「...」を挿入する。(今日の時点で)右の「最近の記事」ウィジェットと「コメント」で使われてます。

まだベータ版です。ドキュメントやデモサイトはそのうちアップします。

最近のコメント一覧のガジェットを、以前はサーバー側で長さ調整していたんですが、クライアント側で処理するように変更しました。これでユーザー環境に依存せずに最適なところで省略されるはず。ただし、文字サイズの変更とかガジェットの移動時に更新するとかの処理はまた今度。あと、例によって(どの例？)、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属性使用の有無を引数で指定

やけくそのようにTooltipだらけにしてみた。最近の記事リストは表示領域の関係で省略表記なので、完全なタイトルをTooltipで。

前回の問題：全部探したの？
正解：Have you looked everywhere?

正解！

今日の問題：もちろんさ、でもどこにもないんだ
正解予想：Sure. But I found it nowhere.

完全に無思考で「I found」としたけど、ひょっとして「I've found」のhaveを省略してたりする？
 

PHPのお勉強。Perlで出来てたことをPHPで再現するところから。関数に連想配列を渡して名前付き引数風にするのをPHPで再現すると、こんな感じでいいんだろうか。ちなみに、名前付きの利点は下記。

• 引数の順序に依存しない。
• 引数を省略できる。
• 後方互換性を持たせやすい。
• 可読性が高い、と思う。

なお、いまのところPHP4しか使っていません。

Perlの場合

print Person->discription(name => 'Yamada', age => 20, food => 'apple');
print Person->discription(name => 'Tanaka', food => 'apple');

# Yamada(20) likes apple.
# Tanaka(-) likes apple.

package Person;

sub discription {
    
    my $self = shift;
    my %args = (name => 'unknown', age => '-', food => 'unknown', @_);
    
    return sprintf("%s(%s) likes %s.¥n", $args{name}, $args{age}, $args{food});
}

PHPの場合

echo Person::discription(array('name' => 'Yamada', 'age' => 20, 'food' => 'apple'));
echo Person::discription(array('name' => 'Tanaka', 'food' => 'apple'));

# 結果はPerlと同じ

class Person {
    
    function discription($args = array()) {
        
        $default_args = array('name' => 'unknown', 'age' => '-', 'food' => 'unknown');
        $args = array_merge($default_args, $args);
        
        return sprintf("%s(%s) likes %s.¥n", $args['name'], $args['age'], $args['food']);
    }
}

このページ、他のブログを十分に研究せずに作ったせいか、なんだか、インターフェースが洗練されてなさすぎでした。右のコメントリストの書式を変更しました。

ウェブページを設計するときって、必ずテキストの幅(折り返し)で悩みます。HTMLは優秀な言語ですが、CSSとその実装にまだまだ不満が絶えません。本当は、レイアウトはすべて相対値指定のリキッドデザインをこよなく愛しているのですが、右のナビゲータ部の横幅は固定値で妥協しました。その結果、長いタイトルははみ出すけど、仕方が無い。小手先で指定文字数以下を省略するようにしてみました。こういう省略表記などもCSSでやってくれてもいい気がします。text-overflow:clipみたいな。思い付きですけど。

省略にはテンプレート関数、名づけて「clip_str」を使用。

&clip_str(str => $summary, start => 0, count => 10)

僕のテンプレートシステムでは上記のようなPerl関数を特殊な引用符で括って、直接記述します。表記方法はPerl準拠。手抜きではない。僕以外の人間がテンプレート設計する場合でもPerl知ってれば取り合えず問題ないという。そんなありえない想定で、パーソナルなシステムを作るのは、幼少時代にガンダム戦わせる一人遊びをしていた名残ですね。ちなみに、最近、perlの関数を書くときは必ず引数名つきの仕様にすることにしています。命名が面倒なのを差し引いても、保守が圧倒的に楽。今回初めてこういう書き方を知りました。