2009年03月24日
「KompoZer(コンポーザー)」を使って、他人のHTMLを盗み見
● スポンサード リンクいろんなひとのブログを見ていると、同じブログサービスを使っていて、同じテンプレートを使っているはずなのに、なんかこの人のブログ、カッコいい。とか、ここのこの感じ、どうやって書いているんだろう。この部分のHTML見えないかなぁ。なんてこと、よくありますよねえ。
そんなときは、ブラウザの「ソースの表示」(IE)や、「ページのソース」(FF)を使えば、HTMLが表示されますから、たいていのカンニングはできてしまうのですが、全ページぶんのHTMLが表示されてしまうので、そこから必要な箇所を探すだけで一苦労です。
「ここのテーブルの書き方を真似したい」とか、「あれ、どうやってこれ真ん中に揃えてるの?」なんてときには、1ページ分のソースを表示して膨大な文字列の中から必要な箇所を探し出すなんてナンセンス。特にブログのHTMLなんて、人間が書いたものかブログサービスが吐き出したものかを読み分けるだけでも時間がかかってしまいます。
見たい箇所の近くにある文字列を、エディタの検索機能で探すというのもひとつの方法ですが、もっと簡単にHTMLを盗み見してしまう方法をご紹介いたします。
私はこういうとき、KompoZer(コンポーザー)というフリーのHTMLエディタを使います。
コンポーザーは全くの無料ながら、ホームページビルダーなどの市販のHTMLエディタのようにHTMLを直接編集せずに、ワープロ感覚で文字を入力したり画像を貼り付けたりすると、表示されたそのままをHTMLに書き出してくれます。いわゆるWYSIWYG([ウィジウィグ]What You See Is What You Getの略)タイプのHTMLエディタです。
http://kompozer.sourceforge.net/
↑ここからダウンロードできます。(英語版)
すばらしいことにこのエディタは、無料でありながらスタイルシートにも対応していたり、XHTMLに準拠したフォーマットで出力してくれたりと、最近のWeb事情に敏感に対応しています。
このエディタさえあれば、勢い「一からホームページ、作ったろか!」と、思わせるほど、
いろんな便利機能が盛り込まれていますので、興味のある方は以下のサイトを参考にしてみてください。
http://kompozer.cssmaid.net/1-1.html
日本語で詳しい解説があります。
http://kompozer.cssmaid.net/japanize.html
日本語化する方法についても書かれています。
http://www.hpmaid.com/
軽く萌えたほうがわかりやすいという方はこちら。
さて、このような超便利なエディタですが、今回はほんの一部の機能だけを使います。
まず、気になるページをインターネットエクスプローラー(IE)や、ファイヤーフォックス(FF)などのWebブラウザで開きます。Webブラウザは、たいていその上でマウスカーソルをドラッグすると反転表示になって選択できるようになっていますので、カンニングしたい箇所をドラッグします。
必要な箇所が選択できたところで、Ctrl+Cを押してコピーします。そしてコンポーザーを立ち上げ、メインのエディット画面の下にある「通常」あるいは「Normal」と書かれたタブをクリックして、このエディット領域の上にマウスカーソルを乗せてから、Ctrl+Vを押して先ほどコピーした内容をペーストします。
たいていは、ちょっと見た目が違う感じにコピーされます。原因は、最近のほとんどのページではスタイルシートが使われていて、HTMLをコピーしただけでは、スタイルシートに書かれている細かいデザインまではコピーされないからです。
そいう小さいことは、今は気にせずに、今度は「ソース」あるいは「Source」と書かれたタブをクリックしてみてください。
どうでしょうか、どのようなHTMLタグが使われているかや、スタイルシートに渡されているidやclassなど、全部丸見えになっているのがおわかりでしょうか?
この方法がブラウザの「ソースの表示」や「ページのソース」と比べて優れている点がもうひとつ。
それは、JavaScriptなどが吐き出したコードもコピーできることです。
例えばブラウザ上に表示されているグーグルアドセンスのテキストをコピーして、コンポーザーにペーストしてみてください。
アドセンスのスクリプトがどんなリンクを吐き出しているのかが丸見えです。
(くれぐれも、悪用はしないでください)
このような便利で強力なコンポーザーですが、このエディタでご自分のホームページを作ってやろうとお考えならば、もう少し待ったほうがよさそうです。
実はこのエディタ、現時点のバージョンが“0.7.10”。つまり、まだ正式リリース版ではありません。理由はちょっと使い込めばわかると思います。イイ感じのところで突然落ちます。そういうときに限って長時間セーブしていなかったりします。
また、ときどきHTMLをセーブすると勝手にheadタグの中身を消し去ったりします。セーブ時にやられるので取り返しがつきません。
つまり、セーブしなくてもだめ、してもだめ。マメにバックアップファイルを作りながらがんばって使えば使えないこともないと思いますが、私は胃がねじれそうになったので断念しました(笑)
そんなときは、ブラウザの「ソースの表示」(IE)や、「ページのソース」(FF)を使えば、HTMLが表示されますから、たいていのカンニングはできてしまうのですが、全ページぶんのHTMLが表示されてしまうので、そこから必要な箇所を探すだけで一苦労です。
「ここのテーブルの書き方を真似したい」とか、「あれ、どうやってこれ真ん中に揃えてるの?」なんてときには、1ページ分のソースを表示して膨大な文字列の中から必要な箇所を探し出すなんてナンセンス。特にブログのHTMLなんて、人間が書いたものかブログサービスが吐き出したものかを読み分けるだけでも時間がかかってしまいます。
見たい箇所の近くにある文字列を、エディタの検索機能で探すというのもひとつの方法ですが、もっと簡単にHTMLを盗み見してしまう方法をご紹介いたします。
私はこういうとき、KompoZer(コンポーザー)というフリーのHTMLエディタを使います。
コンポーザーは全くの無料ながら、ホームページビルダーなどの市販のHTMLエディタのようにHTMLを直接編集せずに、ワープロ感覚で文字を入力したり画像を貼り付けたりすると、表示されたそのままをHTMLに書き出してくれます。いわゆるWYSIWYG([ウィジウィグ]What You See Is What You Getの略)タイプのHTMLエディタです。
http://kompozer.sourceforge.net/
↑ここからダウンロードできます。(英語版)
すばらしいことにこのエディタは、無料でありながらスタイルシートにも対応していたり、XHTMLに準拠したフォーマットで出力してくれたりと、最近のWeb事情に敏感に対応しています。
このエディタさえあれば、勢い「一からホームページ、作ったろか!」と、思わせるほど、
いろんな便利機能が盛り込まれていますので、興味のある方は以下のサイトを参考にしてみてください。
http://kompozer.cssmaid.net/1-1.html
日本語で詳しい解説があります。
http://kompozer.cssmaid.net/japanize.html
日本語化する方法についても書かれています。
http://www.hpmaid.com/
軽く萌えたほうがわかりやすいという方はこちら。
さて、このような超便利なエディタですが、今回はほんの一部の機能だけを使います。
まず、気になるページをインターネットエクスプローラー(IE)や、ファイヤーフォックス(FF)などのWebブラウザで開きます。Webブラウザは、たいていその上でマウスカーソルをドラッグすると反転表示になって選択できるようになっていますので、カンニングしたい箇所をドラッグします。
必要な箇所が選択できたところで、Ctrl+Cを押してコピーします。そしてコンポーザーを立ち上げ、メインのエディット画面の下にある「通常」あるいは「Normal」と書かれたタブをクリックして、このエディット領域の上にマウスカーソルを乗せてから、Ctrl+Vを押して先ほどコピーした内容をペーストします。
たいていは、ちょっと見た目が違う感じにコピーされます。原因は、最近のほとんどのページではスタイルシートが使われていて、HTMLをコピーしただけでは、スタイルシートに書かれている細かいデザインまではコピーされないからです。
そいう小さいことは、今は気にせずに、今度は「ソース」あるいは「Source」と書かれたタブをクリックしてみてください。
どうでしょうか、どのようなHTMLタグが使われているかや、スタイルシートに渡されているidやclassなど、全部丸見えになっているのがおわかりでしょうか?
この方法がブラウザの「ソースの表示」や「ページのソース」と比べて優れている点がもうひとつ。
それは、JavaScriptなどが吐き出したコードもコピーできることです。
例えばブラウザ上に表示されているグーグルアドセンスのテキストをコピーして、コンポーザーにペーストしてみてください。
アドセンスのスクリプトがどんなリンクを吐き出しているのかが丸見えです。
(くれぐれも、悪用はしないでください)
このような便利で強力なコンポーザーですが、このエディタでご自分のホームページを作ってやろうとお考えならば、もう少し待ったほうがよさそうです。
実はこのエディタ、現時点のバージョンが“0.7.10”。つまり、まだ正式リリース版ではありません。理由はちょっと使い込めばわかると思います。イイ感じのところで突然落ちます。そういうときに限って長時間セーブしていなかったりします。
また、ときどきHTMLをセーブすると勝手にheadタグの中身を消し去ったりします。セーブ時にやられるので取り返しがつきません。
つまり、セーブしなくてもだめ、してもだめ。マメにバックアップファイルを作りながらがんばって使えば使えないこともないと思いますが、私は胃がねじれそうになったので断念しました(笑)