<< 投稿欄にNewの表示を パート2 3列スキンのメニューの配置について >>
 

スキンデバッグ講座:ソースの比較

はじめに


スキン編集を行っていると、うまくできないとか、何でだろうとかいろいろ分からないことが出てきますよね。そんな、トラブルの解決方法の秘密をちょっとだけあなただけに紹介する不定期な企画です。今回限りで終わるのかそれとも続くのか、ちょっと分からないけどやってみたいと思っています。
ちょっと難しく感じられる場合は、読み飛ばしてこんな方法もあるんだ位にとどめておいて下さい。
このテクニックを使おうって、思う日が来たらもう一度ご覧下さい。


ソースの比較

スキン編集を行っているとなんだか上手くできなくいことが多いですよね。今までよかったのに、何かを変えたら上手くできなくなることってありますよね。でも、なにを変えたのかが分からなくなることがあるようなので、簡単なチェック方法を教えちゃいますね。


本当は、変更箇所は1箇所だけやって、プレビューではなくちゃんと確認を行っておくと判断しやすいのですが、小さな違いは2~3日経ってからじゃないと分からない時もあってそんなときはどうしたらよいのか。
そんなときは、ソースの比較を行うとよいですよ。
編集前にバックアップを行って、問題のあるソースと比較を行います。
比較を行うと、変更箇所が分かるため問題となっている場所を特定し易くなります。

でも、ソースをひとつづつエディタで見ていったら大変ですよね。
そこで、登場するのがソースを比較するソフトです。



ソースの比較ソフト


私が利用しているソースの比較ソフトは、「ExamDiff 」です。英語のソフトだけど、操作はそれほど難しくないです。他にもファイルの内容を比較するソフトがあると思いますので、自分に合うソフトを探すと良いと思います。

ちなみに、、「ExamDiff 」は以下のアドレスから入手できます。
http://www.prestosoft.com/ps.asp?page=edp_examdiff



実例

実際にあったことです。この記事を読んでいて、「あ、私だっ」て思われた方がいらっしゃると思いますが、あのときに何を行って解決をしたのかその裏話なので当事者も、そして当事者でも無い方も興味がある方は読んで下さいね。

とある方から、エキサイトのノーブルリースのスキンのドラゴンで図1のように隙間が開いてどうしたらよいかとの問い合わせを頂きました。とっても丁重に好感の持てる質問のされ方だったので、頑張っちゃおうかと思っちゃいました(ぽっと結構単純です。)

a0031863_23542873.gif


図1 問題の隙間


この件もらったのはいいけど、どこに問題があるのか。
そして、どこから手を付ければよいのか考えました。
そして、まずHTML部分なのかCSSの部分なのかを調べました。

まず、当事者のサイトからソースを取り出してローカルで実際に同じ現象が起こることを確認します。

次に、ソースのCSS部分をデフォルトのCSSと差し替えます。
そして、同じ現象が現れるのか確認を行います。(今度この方法もお話したいですね。)

今回は、CSS部分をデフォルトに置き換えると正常になることが分かりました。
つまり、HTML部分ではなく、CSS部分に原因があることが分かります。

そこで、CSSがどのように変更されたのか調べることにしました。
デフォルトと問題の両者のCSSをファイルの比較ソフトで比較したところ、数箇所の変更部分を見つけることに成功しました。

そこで、デフォルトのCSSにひとつずつ変更を加えて現象を見ることにしました。
そして見つけたのが、.TXTFLDが抜けていることでした。
.TXTFLDをデフォルトと同じように設定を行うようにお願いをして、今回の問題を解消することに成功しました。

みなさんも、変更箇所を見つけられるときには、ファイルの比較をお勧めします。
今回のケースはデフォルトのソースを入手できたため、解決できましたが、実際はバックアップを行っていない限り難しいかもしれません。
しかし、個人でスキン編集を行って自分で問題を解決する場合は、スキンのバックアップをおこなっているとこのような手法を用いて、変更箇所を特定し、問題箇所を見つけることも可能になります。



最後に

いかがでしたでしょうか。ちょっと難しいですか?でも、こんな方法もあるってことを知るだけでも、ちょっと違いますよね。たまにはこんな記事もいかがでしょうか。ちょっと記事が長くなりましたが、皆さんのスキン編集のお役にたてると嬉しいです。


[PR]
記事の下の方に広告が表示される場合があります。この広告はエキサイトの広告枠です。
by potto37 | 2005-06-25 23:54 | │├デバッグ
<< 投稿欄にNewの表示を パート2 3列スキンのメニューの配置について >>
掲載の記事や画像などすべての複写・転載・公衆送信等はご遠慮ください。