プログラマ気分

メモや自分が思ったことを書く

スポンサーサイト

2014.08.06 Wednesday

一定期間更新がないため広告を表示しています

-|-|-|by スポンサードリンク

Chrome エクステンション「JS&CSS Highlighter(v1.0.0)」の紹介とバグの解決

2011.02.21 Monday

JS&CSS Highlighter - Google Chrome 拡張機能ギャラリー

JS や CSS ファイルを直接 Chrome で参照した時、カラーリングもせずに見難いと感じないでしょうか。そんな時に「JS&CSS Highlighter」をインストールしておくと、綺麗に色を付けて表示してくれます。
また、JS Beautifier によって、1行に圧縮されているコードを整形してくれる機能も付いており、大変便利です。

下のキャプチャは /packer/ で一行に圧縮したソースコードを JS&CSS Highlighter で表示してみた物です。
イメージ:JS&CSS Highlighter テスト

なお、使用の際には一点注意してください。
「JS&CSS Highlighter」は &、<、> などの演算子を HTML エンティティに変更した後、JS Beautifier によって分割してしまうバグを抱えています。
つまり「<」があったとすると、「& lt;」にして表示してしまうと言う事です。
この問題を対処するには、エクステンション内部を修正する必要があります。

エクステンションの修正

下記の JS を開いてください。

▼Windows(他の環境では違う可能性があります)
C:¥Documents and Settings¥[ユーザー名]¥Local Settings¥Application Data¥Google¥Chrome¥User Data¥Default¥Extensions¥cjkhlhfecbaiapfkmmebdpbeengcelld¥1.0.0_0¥resource¥contentscript.js

▼Mac
/Users/[ユーザー名]/Library/Application Support/Google/Chrome/Default/Extensions/cjkhlhfecbaiapfkmmebdpbeengcelld/1.0.0_0/resource/contentscript.js

次に 25 行目のコードを変更します。

他に CSS の方(29行目)もあるので、修正しておくのが無難かもしれません。

最後に Chrome を再起動、または拡張機能から「JS&CSS Highlighter」を一旦無効にして有効に切り替えれば反映されます。

この問題で重要なのは、html() を使うと HTML エンティティ化してしまうので、nodeValue を用いてそのままの値を取得すればバグを回避出来ると言う事です。

JavaScript19:10comments(0)trackbacks(0)by ニノミヤ カズノリ

JPEG を Fix してみる

2011.01.22 Saturday

IE6/7/8 の JPEG には、filter:alpha(opacity) で透過度を指定すると、何故か #02050a の色が透過されてしまうバグがあります。

【参考】http://www.gravity-works.jp/gravica/web/js/002123.html

実はこの問題も DD_belatedPNG が有効です。
PNG を Fix する物なのに、JPEG にも効くというのが不思議な話ではありますが、要は VML で画像を表示すればバグは回避出来ると言う事です。

jQuery.belatedPNG の処理を少し変更して、実際にテストしてみました。
※環境によってバグが再現しない場合があります。
※当初 jsdo.it のタグを貼り付けていましたが、IE6/7 で js エラーとなってしまう為、リンクに変更しました。
http://jsdo.it/wakuworks/jquery.belatedPNG.jpg/

変更箇所

現状は PNG のみを対象にしていますが、JPEG も含むようにします。
※jQuery.belatedPNG.js の中から、下の二箇所を検索して書き換えてください。

JavaScript12:00comments(0)trackbacks(0)by ニノミヤ カズノリ

jQuery.belatedPNGをアップデートしました。

2010.12.25 Saturday

※jQuery.belatedPNG については過去の記事をご覧ください。

jQuery.belatedPNG を 0.0.2 へアップデートしました。
このアップデートは、画像がボケる問題のバグフィックスです。

原因

jQuery.belatedPNG の元となる DD_belatedPNG は、img 要素の pngFix に一つ問題がありました。
通常、img 要素の width 属性、height 属性に任意の数字を入れると、それに合わせて画像を伸縮させます。
DD_belatedPNG では、表示方法の問題で伸縮が出来ませんでした。
※width、height に値を入れても画像は 100% の状態で、width、height の大きさで切られる状態

対して jQuery.belatedPNG は、img 要素に対してのみ表示方法を変える事で画像の伸縮を実現させていたのですが、逆にこれが原因で画像がボケていました。

0.0.2 ではこの問題は解消されています。

DD_belatedPNG と jQuery.belatedPNG の比較

ダウンロード:こちらから最新バージョンをダウンロードしてください。
使用方法については以前の記事をご覧下さい。

不具合等あればこの記事に対してコメントをください。
※DD_belatedPNG 自体の不具合については対応出来ない可能性があります。

JavaScript19:36comments(2)trackbacks(1)by ニノミヤ カズノリ

DD_belatedPNG を改造して、jQuery.belatedPNG を作ってみた

2010.08.20 Friday

最近有名になっている DD_belatedPNG を jQuery 用のプラグインとして移植&改造してみました。

【本家サイト】http://dillerdesign.com/experiment/DD_belatedPNG/

IE とアルファチャンネル付き PNG で起きる不具合

IE は、どのバージョン(2010/08/20 現在 IE6/7/8)においても PNG の表示に不具合があります。
最も有名なのが、IE6 のアルファチャンネルがグレーになる現象で、他に IE7/8 だとアルファチャンネル+半透明(filter:alpha)で一部が透過されないなどがあります(フェードイン・アウトを使う場合に弊害となります)。

PNGサンプル

DD_belatedPNG とは?

元々は IE6 用の pngFix です。PNG を VML で表示する事で不具合に対応します。これは IE7/8 の不具合にも有効です。ただし使用の際には以下の点を注意してください。

今回移植するに当たって、上の問題を改善してみました。
→サンプルページ

使用方法

ダウンロード:こちらから最新バージョンをダウンロードしてください。
移植で使用した DD_belatedPNG は 0.0.8a です。
本家同様 MIT ライセンスです。

jQuery 1.5 以下で使用してください。1.6 以上は jQuery 自体のバグによってうまく機能しません。後日アップデートを行い公開します。
修正しました。上のリンクよりダウンロードが可能です。(11/05/24)

1.6 以上で正常動作しなかった理由をこちらに書きました。

JavaScript12:26comments(4)trackbacks(0)by ニノミヤ カズノリ

Web合成音声配信システム
vds(voice delivery system) を使ってみる

2009.11.08 Sunday

読み上げたい文字列を入力して下さい

(制限により再生されない場合があります。)


これスゴイですね。
教えてもらったので、早速試してみました。

API で提供されていて、簡単に組み込めます。
組み込み方は分かり易いチュートリアルがありますので、そちらをご参考下さい。
【提供サイト】Web音声配信システム:vdsチュートリアル
【事例】33tter ささった〜

前までは Google 等が正確に読めなかったらしいのですが、現在はちゃんと「グーグル」と読んでくれます。

【追記】
裏側で音声再生用の Flash を呼び出すのですが、どうやらこいつが CSS パースエラーを引き起こす様です。ただし、動作に支障ありません。
警告: ':' であるべきところが 'undefined' になっています。 このスタイル宣言は無視されました。

JavaScript01:44comments(0)trackbacks(1)by ニノミヤ カズノリ

calendar
     12
3456789
10111213141516
17181920212223
24252627282930
<< September 2017 >>
sponsored links
selected entries
categories
archives
recent comment
recent trackback
links
profile
search this site.

others
mobile
qrcode