0:00)配属されてからこの方、ほぼ毎日終電での帰宅が続いているうえに毎週泊まりがけの出張が入っているため、1週間に1回か2回更新できればマシといった状況です。実はまだTRASH-NEWSは概要ページもリンクコーナーもろくに作っていないような有様なんですけれども、気づけばそろそろ1周年+すでに50万ヒット。......なんだこのえもいわれぬグダグダ感は......。ヴェスペリア堪能してから考えますね。自作関数お久しぶりです。来週に早速日本を横断する感じの出張、来月には地球を縦断する感じの出張を......長期で......。内勤ライフを期待してたのになんだこの世界をまたにかけるアドベンチャーっぷりは。光回線でインターネットに接続できる環境とよく動くPCとそれと毎日3時間の自由時間、それだけで、いいのに......!!先日の『文字列を常にボックス中央(middle)に配置するJavaScript関数』に続きKIGで使う予定の関数を作りましたので、公開します。今回は『文字列を縁取りするJavaScript関数』。これまで画像に縁取りをつけたり文字列に擬似的に影をつけるJavaScriptの関数は数多く存在してきたものの、何故か文字列を縁取りする関数は作成されたという話を聞いたことがありません。・と言っても、JavaScriptで操作するCSSにそういったプロパティ(設定)がないから、という単純な話ではあります。webで文章を表示させるときに文字列を縁取りできると見栄えが良くなるのは間違いありません。それをなんとかして実現できたら......きっと素敵です。そんなわけで、取り組んでみました。以下前回と同じようにサンドボックス(お試し場)をご用意しました。テキストエリアに文字列を打ち込んで、どこか適当なところをクリックしてみてください。ここに下のテキストエリアで打ち込んだ文字が即時反映されて表示されます左の図のように動作することを想定しています。IE7、Opera9.27、Firefox2.0.0.12での動作は確認済みです(IE6は面倒なので未確認、Firefox3[beta4]は自動アップデートで2にダウンデートされてしまったので未確認)。画像をご覧いただければおわかりいただけるように、かなり微妙なデキとなっています。画像の右側の部分は期待する動作をPhotoshopで加工して描いたものです。実際の動作結果は左側。縁というより陰影ですね。以下ソースコードです。この記事のソースにベタ打ちしているので、実際の利用方法などはそちらを参考にどうぞ。*/処理としてはテキストエリアに書き込んだ文字列を読み込んで1文字ずつ分解し、それをposition:absoluteで絶対配置していくという少々強引な手を使っています。類似の方法として1文字ずつ分解せず段落を丸ごと移動させる、text-indentでスマートに移動させる、といったものがありますが、それだと細かい調整ができないのでpositionプロパティを使った方法をとってみました。うまく配置させたところでキレイに見えなければ意味がありません。Pゴシックだとさらに微妙な結果に。要するにフォント自体をキレイに見せられないことにははじまらない=現時点では結構どうしようもないわけですね。現時点でありうる手段としては、文字を1つだけ重ねるのではなく複数、少しずつ色と位置をずらしながら表示させる、というものくらいしか思いつきません。フォントごとに文字のカタチの特徴が違うので、調整がとても面倒くさそうです。英数字だけならば文字体をArialあたりで固定して、あらかじめArial向けに加工した画像を50パターン作っておけば済む話なんですけど~。日本語だと最低でも1,000文字を作らないといけませんので、まぁかなり面倒です(バッチ処理させれば作成自体はラクでしょうけれども、表示にもたつきそう)。IEだけの表示に絞るのならばIE独自の拡張CSS・フィルターを使うことで少しは前進できそう。glow();[光彩をつける]といったあたりを使えばそれっぽくなりそうですが......一昔前のWordのワードアート機能を見ているようでやはり微妙です。難しいキレイに縁取って表示させるのはかなり困難で、できるとしてもかなり面倒であるようです。大昔に規格化されたにもかかわらず未だに存在感の薄いCSS2のtext-shadowプロパティがIE7(8もたぶん)でもOpera9でもFirefox2(3もたぶん)でも対応されていない現状を考えると、うまく文字列を縁取る表示方法というのは当分のあいだ登場することはないものと思います。何年も前から言われ続けている結論にあらためて辿りつきましたとさ。http://www.trash-news.net/。