Cutter.jsは文字列を指定数まで表示するJavaScriptライブラリ。クリックで全体表示と切り替えられる。

Cutter.jsはJavaScript製のオープンソース・ソフトウェア。コミュニティサイトではユーザがコンテンツを作成するので、時々デザイン上無理なコンテンツが登録されることがある。そのため使えるタグを規定したり、入力できる文字数に制限したりするのが一般的だ。

一部だけ表示

とは言えせっかくユーザが入力してくれる文字列を中途半端にしか使わないのは勿体ない。そこでYouTubeなどでは最初は少ない文字数で、クリックすると全文表示するといった仕組みを取り入れている。それを実現するライブラリがCutter.jsだ。

Cutter.jsはJavaScriptを使って指定要素に入っている文字列を一定の文字数（指定可能）で区切ってくれるライブラリだ。表示上区切っているだけでクリックすれば全文が出る。サーバサイドで処理するのと違って、高速で全体表示と短縮表示が切り替えられるのが利点だ。

全体表示

さらにHTMLタグをそのまま維持しておいて文字数計算をしてくれるのも特徴だ。タグまで文字数に含めると表示がおかしくなるし、タグの途中で分断されるのも困るが、Cutter.jsを使えば問題ない。対応ブラウザはIE6、Firefox3、Safari4、Google Chrome4、Opera9.5以上となっている。サイズはGzipで圧縮しても1.5KBとかなり大きいライブラリであるが、便利なのは間違いない。

[s2If current_user_can(access_s2member_level1)]

使い方（プレミアム限定）

[/s2If]

MOONGIFTはこう見る

コンテンツの一部を表示しつつクリックで切り替える仕組みを使えば、一覧時には1〜2行程度表示しつつ、クリックすると詳細を表示すると言ったユーザビリティの高い仕組みが使えるようになる。サーバサイドでやろうと思うと全文表示の度にAjaxを使ったりする必要があるが、JavaScriptだけならば問題ない。

これまでWebサーバ上で行っていた処理をクライアントサイドで行わせることは、負荷分散やスケールとして見ても重要なことだ。サーバでの処理が減ればよりサーバがさばける量が増えることにもつながるはずだ。この観点から開発に取り組むのも面白い。

tcorral/Cutter.js - GitHub