TRASH-NEWS Photoshopの境界線チックに文字を縁取るJavaScript関数

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

Photoshopの境界線チックに文字を縁取るJavaScript関数

TRASH-NEWSは
生きていくうえではあまり役立ちそうにないサイトです
初出時刻
2008年05月25日 18時01分 投稿
最終更新時刻
2008年05月25日 18時15分 改訂
  • この記事をはてブする
  • Yahoo!ブックマークに登録

昨日公開するなり「完成は難しい」と投げ出した『文字を縁取って表示する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
  • 分類 : ニュースとネタのサイト
  • ジャンル : 井戸端からアレゲまで
  • もっと詳しく見る
最近の記事
05月23日の記事
  1. ボタンひと押し即生成、『サークルカットジェネレータ』公開開始
04月01日の記事
  1. あの人気シリーズを作れる? 『テイルズオヴメーカー』本日公開
03月27日の記事
  1. 現在の4月のアレ進捗度30%!!
02月21日の記事
  1. 4月のアレで使う【中二なキャラクター】イラストをご提供ください
01月24日の記事
  1. サークル名ジェネレータを作ってみた
01月11日の記事
  1. 新作(※4月のアレではない)のスクリーンショット公開
01月01日の記事
  1. コミケ77(3日目)に行ってきた
12月31日の記事
  1. コミケ77、男は黙って8:00に出発
12月24日の記事
  1. FFXIIIの検索サイトを作ってみました
12月21日の記事
  1. FFXIIIの検索サイトを作ってみている
日刊人気記事ランキング
2010年11月21日のぶん
1
もうやめて下さい!! 泣いてる子もいるんですよ!!
38
2
マリオっぽい自作のゲーム改めしょぼんのアクション公開開始
28
3
FFT-A2のクリア後レビューと感想(ネタバレなし)
17
4
テイルズオブヴェスペリアの感想 【ストーリー・キャラクター編】
14
5
サークル名ジェネレータを作ってみた
12
6
Windows XP SP3インストールで不具合が起きることが発覚
11
7
ついうっかりマリオWiiとグレイセスとFFXIIIとDQVIを予約(以下略)
11
8
○○が可愛すぎて生きるのが辛い
10
9
“マリオっぽいもの”のステージを編集するエディタが公開
9
10
3Dの初音ミクを躍らせるフリーソフトMikuMikuDanceがスゴい
9

2010年11月22日 0時更新

人気記事ランキング

カテゴリ(折畳表示)
ニュース・ネタ
サブカテゴリを開く
俺研究舎
サブカテゴリを開く
お知らせ
サブカテゴリを開く
特集・企画
サブカテゴリを開く
管理人近況
サブカテゴリを開く
カスタムアーキテクチャ
1回めのようこそ!
ゲストさん
  • 文字の大きさ : 12px
  • フォント : MS Pゴシック
  • レイアウト : 3段組
  • カスタムする
カレンダー
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
管理人について
管理人 : 八満かシアン
理系になり損ねた文系人間(シアンのほう)
今頃たぶん聴いている曲
Spiral Wind by 島みやえい子
月別アーカイブ
2008年
2007年
最近記事に掲載した画像
サークルカットジェネレータ、公開開始です!!
サークルカットジェネレータ、公開開始です!!
テイルズオヴメーカー偽記事の画像
テイルズオヴメーカー偽記事の画像
シガアレ作ってる、の図
シガアレ作ってる、の図
手描き初音ミク
手描き初音ミク
iPhoneっぽいUIを実際にiPhoneで表示してみて比較
iPhoneっぽいUIを実際にiPhoneで表示してみて比較
画像に関するリンク
ユーティリティ
RSSフィード
ソーシャルブックマーク
  • iGoogle
  • はてなアンテナにTRASH-NEWSを追加する TRASH-NEWSのはてなブックマーク数 この記事を含むはてなブックマーク
サイトプロフィール
Powered by
  • Movable Type 4.1 + [XHTML + CSS + JavaScript] + PHP
  • TRASH-NEWS / Hachiman_Cian 2007-
このページについて
題名
Photoshopの境界線チックに文字を縁取るJavaScript関数
内容
  • 昨日公開するなり「完成は難しい」と投げ出した『文字を縁取って表示するJavaSc
TRASH-NEWS ロゴ
TRASH-NEWS ロゴ
TRASH-NEWS : http://www.trash-news.net/