スキンデバッグ講座:ソースの比較
はじめに
スキン編集を行っていると、うまくできないとか、何でだろうとかいろいろ分からないことが出てきますよね。そんな、トラブルの解決方法の秘密をちょっとだけあなただけに紹介する不定期な企画です。今回限りで終わるのかそれとも続くのか、ちょっと分からないけどやってみたいと思っています。
ちょっと難しく感じられる場合は、読み飛ばしてこんな方法もあるんだ位にとどめておいて下さい。
このテクニックを使おうって、思う日が来たらもう一度ご覧下さい。
ソースの比較
本当は、変更箇所は1箇所だけやって、プレビューではなくちゃんと確認を行っておくと判断しやすいのですが、小さな違いは2~3日経ってからじゃないと分からない時もあってそんなときはどうしたらよいのか。
そんなときは、ソースの比較を行うとよいですよ。
編集前にバックアップを行って、問題のあるソースと比較を行います。
比較を行うと、変更箇所が分かるため問題となっている場所を特定し易くなります。
でも、ソースをひとつづつエディタで見ていったら大変ですよね。
そこで、登場するのがソースを比較するソフトです。
ソースの比較ソフト
私が利用しているソースの比較ソフトは、「ExamDiff 」です。英語のソフトだけど、操作はそれほど難しくないです。他にもファイルの内容を比較するソフトがあると思いますので、自分に合うソフトを探すと良いと思います。
ちなみに、、「ExamDiff 」は以下のアドレスから入手できます。
http://www.prestosoft.com/ps.asp?page=edp_examdiff
実例
とある方から、エキサイトのノーブルリースのスキンのドラゴンで図1のように隙間が開いてどうしたらよいかとの問い合わせを頂きました。とっても丁重に好感の持てる質問のされ方だったので、頑張っちゃおうかと思っちゃいました(ぽっと結構単純です。)
この件もらったのはいいけど、どこに問題があるのか。
そして、どこから手を付ければよいのか考えました。
そして、まずHTML部分なのかCSSの部分なのかを調べました。
まず、当事者のサイトからソースを取り出してローカルで実際に同じ現象が起こることを確認します。
次に、ソースのCSS部分をデフォルトのCSSと差し替えます。
そして、同じ現象が現れるのか確認を行います。(今度この方法もお話したいですね。)
今回は、CSS部分をデフォルトに置き換えると正常になることが分かりました。
つまり、HTML部分ではなく、CSS部分に原因があることが分かります。
そこで、CSSがどのように変更されたのか調べることにしました。
デフォルトと問題の両者のCSSをファイルの比較ソフトで比較したところ、数箇所の変更部分を見つけることに成功しました。
そこで、デフォルトのCSSにひとつずつ変更を加えて現象を見ることにしました。
そして見つけたのが、.TXTFLDが抜けていることでした。
.TXTFLDをデフォルトと同じように設定を行うようにお願いをして、今回の問題を解消することに成功しました。
みなさんも、変更箇所を見つけられるときには、ファイルの比較をお勧めします。
今回のケースはデフォルトのソースを入手できたため、解決できましたが、実際はバックアップを行っていない限り難しいかもしれません。
しかし、個人でスキン編集を行って自分で問題を解決する場合は、スキンのバックアップをおこなっているとこのような手法を用いて、変更箇所を特定し、問題箇所を見つけることも可能になります。