TRASH-NEWS 2008年05月25日の記事一覧

順路
  1. ホーム
  2. 2008年
  3. 05月
  4. 25日 [現在地]
Search?
お知らせ
ここ数日更新が滞っていますが…… (2008/04/13 13:31)
4月より社会人となったため、時間の作り方がいまいちつかめないため、不定期の更新となります。まぁ……ニコニコメーカーでもお楽しみください!
1 2 3

2008年05月25日

2008年05月25日のニュースとネタをお届けします

関連した日付へのリンク
  1. 2008年の記事一覧
  2. 2008年05月の記事一覧
TRASH-NEWSは
I've Soundをこよなく愛するサイトです

2008年05月25日本日のニュースとネタ

昨日公開するなり「完成は難しい」と投げ出した『文字を縁取って表示するJavaScript関数』ですが……あれから3時間ほどいじってみたら存外ソレっぽく出来たので、あらためてver.0.1として公開します。

公開ページはこちら。サンドボックスも置いておきましたのでご自由にグリグリやってください。

今回のサンドボックスではさまざまな設定を行えるようになりました。以下リンク先のページの文章を転載します。[補記]と書いてある部分はちょこっとした概要説明です。

文字を縁取って表示するJavaScript関数(β版)

『文字の色』では文字本体(内側)の色、『縁の色』では文字を縁取っている部分(外側)の色を指定できます。これはどちらも#ではじまる16進数のカラーコードで指定してください。

文字の太さは3段階指定できます。『1』は1px相当の枠線、『3』は2px相当の枠線、『2』はその中間となります。なお太くすればするほど描画に時間がかかります。とりわけ『3』を指定した場合2,3秒かかるのが正常な挙動ですので、ご安心ください。 [補記] 文字を少しずつずらしながら重ねて表示させているため、その枚数を増やす(=太く見せる)ほどに描画が遅くなってしまうのです。ちなみにOpera9.27だと3秒くらいかかるところ、Opera9.5ではなんと0秒表示が実現しています。おそろしい技術の進歩。

縁を透過させるかのオプションについては、背景が無地以外の環境で効果を発揮します。IE6/7では透過処理を施したレイヤーが重なるとレインボーな具合になるという不可解なバグがあるので選択しても実際に透過はしません(色を薄めて表示させます)。また描画に時間がかかる場合がありますが気にしすぎは身体に毒です。 [補記]IE系ではfilter = "alpha(opacity=" + Percentage + ")";という指定で、Operaではopacity = Percentage / 100;という指定で、Firefox系ではMozOpacity = Percentage / 100;という指定でそれぞれ透明化を実現しています。ただIEのfilterプロパティは何枚も重ねると『FCでよくみかけたカオスな虹色のバグ』のような表示になってしまうので今回は自粛。

この関数はIE6/7、Opera9/9.5、Firefox2/3での動作を確認しています。IE8(beta)では何故か処理に10秒以上かかるうえ表示もしっちゃかめっちゃかになりますが、気にしすぎは精神衛生上最悪です。 [補記]実際フリーズしたかと思うほどに時間がかかります。

既知の問題としては半角文字(英数字と記号)をそのまま表示するとずれて表示されてしまうことが挙げられます。これは全角文字の表示を前提として作ったプログラムであり、半角文字も全角文字として処理(配置)してしまうためです。これに対しては半角文字を対応する全角文字に変換することで対処しています(b→b、$→$)。

と、まぁこのような感じ。Photoshopの境界線のレイヤー効果を目指して改良をしてみました。まぁ文字が滑らかに表示できないというブラウザ由来の問題のせいでどうあっても追いつけはしませんが(VistaとかMac環境だったらよさげに表示されるのかな)。記事タイトルの“Photoshopの境界線チックに文字を縁取る”というのは、まぁ見る環境によってはそう見えるかもレベルということで(タイトル詐欺)!

僕としてはこのままJustifyStrings関数と組み合わせてKIGに使おうと考えていますが、最終的な目標は息吹ポンさんのイラストでよく見かけるような二重縁取り(+グラデーション)。それをJavaScriptで再現したところでどのような実用性があるかはまったくわかりませんが、Photoshopだと案外面倒くさい表現方法なので、いっそ全部ブラウザでやってしまったりして!

なお今回のソースコードについては先ほどのサンプルページのソースを直接ご覧になってください。ブログみたいに固定されたサイト形式だとソースコードの表示が面倒で困る困る。

[ 関連キーワード : (キーワードは登録されていません) ]

サイト内検索
検索する
このサイトについて
  • サイト名 : TRASH-NEWS
  • 分類 : ニュースとネタのサイト
  • ジャンル : 井戸端からアレゲまで
  • もっと詳しく見る
この日の人気記事ランキング
2008年05月25日のぶん
1
Windows XP SP3インストールで不具合が起きることが発覚
302
2
Windows XPのSP3は思いのほかスゴいらしい
138
3
XP SP3における不具合報告と32bitOSでのメモリのRAMDisk化の話
73
4
画像解析系ジェネレータ・BannerCodeBattler2(仮)着手開始
54
5
DS版DQ5に“新たなる人生の選択”が追加されるよう
53
6
文字列を縁取って表示するJavaScript関数(の叩き台未満)
36
7
さくらインターネット周りが騒がしいようです
30
8
テイルズオブ新作『テイルズ オブ ヴェスペリア』のまとめと推察
30
9
Atom×SSD×XP(当然SP2)なUMPC「Eee PC 901」が欲しい
25
10
アリゾナ在住のアニメ大好きGrumpyJiisanなど最近見たニコニコ動画
25

2008年05月26日 0時更新

人気記事ランキング

カテゴリ(折畳表示)
ニュース・ネタ
サブカテゴリを開く
俺研究舎
サブカテゴリを開く
お知らせ
サブカテゴリを開く
特集・企画
サブカテゴリを開く
管理人近況
サブカテゴリを開く
カレンダー
2008年5月
«  04月 - 06月  »
        1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 31
管理人について
管理人 : 八満かシアン
理系になり損ねた文系人間(シアンのほう)
今頃たぶん聴いている曲
ミリオン・ラブ by 中原麻衣
月別アーカイブ
2008年
2007年
ユーティリティ
RSSフィード
ソーシャルブックマーク
  • iGoogle
  • はてなアンテナにTRASH-NEWSを追加する TRASH-NEWSのはてなブックマーク数 TRASH-NEWSを含むはてなブックマーク
サイトプロフィール
Powered by
  • Movable Type 4.1 + [XHTML + CSS + JavaScript] + PHP
  • TRASH-NEWS / Hachiman_Cian 2007-
このページについて
題名
2008年05月25日の記事一覧
内容
  • 2008年05月25日のニュースとネタをお届けします
TRASH-NEWS ロゴ
TRASH-NEWS ロゴ
TRASH-NEWS : http://www.trash-news.net/