Home / Diary / ニュースサイト向けの即席サイト軽量化法中編

ニュースサイト向けの即席サイト軽量化法中編

前編では具体的な軽量化方法を示したので、次は実践してみよう。

Devas（Vectorの紹介記事）

あると便利っつーか無いと始まらないソフトウェア。ニュースサイトともなると過去ログの量が膨大な数に上るので、テキストエディタで直していったら日が暮れてしまう。そこでこのDevas。複数ファイルへの正規表現による文字列検索・置換を行うことが出来る。

まずは上記リンク先からDevasをダウンロード。適当なフォルダに解凍して起動する。自分にあったオプション設定をしたら実際に置き換えをしてみる。

<font color="#994400" size="3">[サイト名](http://hoge/)</font><br />

これを

[サイト名](http://hoge/)<br />

こうなるように置換する。カラーコードやサイズ指定はどんな指定でも大丈夫なようにする。普通にfontタグで検索かけて消してもいいんだが、正規表現の練習と余計なタグを消してしまわない為にも、ここは正規表現で一発置換をしてみる。ディレクトリかファイルを指定して次のように打ち込む。

<font color="＃[0-z]+" size="[0-9]">(.*?)</font>

「[0-z]+」は数字の0からアルファベットの小文字のzまでの文字が1文字以上続いていることを表す。この場合はカラーコードだな。

「(.*?)」は改行以外の文字の連続を表す。括弧については後述。?をつけておかないとfontの閉じタグまで含めてかなり広範囲に拾ってしまうので、一番狭い範囲で拾えという意味。

上記2つとも条件にさえ合っていれば、どんな内容だろうとソフトウェアが拾ってくれる。これが正規表現というもの。まあ、やたら融通の利く検索ってことで覚えておくといいだろう。

これで検索をかけるとずら～～とヒットした行が表示される。そしてコマンド部分に以下のように入力して置換する。

\1

これだけ。¥と数字を組み合わせると、検索時に括弧で囲んでいた部分をそのまま利用することができる。この場合はfontタグで囲んでいたaタグ全てを指す。つまり、最終的にはリンク部分が残るというわけだ。

<p>\1</p>

こうすればpタグで囲むこともできる。各自工夫すべし。Devasはバックアップも取ってくれるので、何度か試してから全てのHTMLファイルに置換を行おう。

<br /><br /><br /><br /><br /><br />...

<br />
<br />
<br />
<br />
<br />

これらを

<hr />

にする。改行は¥nで表すことができる。

(<br />\n?){5,}

「¥n?」は改行があるなら改行も含めるという意味。括弧で囲むことで、括弧内の文字列を一文字として扱い、最後に「{5,}」という部分で、最低5回以上の繰り返しという意味。カンマの左が最低一致数、右が最高一致数。どちらも省略可能となる。

<br /><br /><br />
<br />
<br />

こんな感じに整っていない部分でも大丈夫。

<style type="text/css"><!--
body { ...
...
...
--></style>

これを

<link rel="StyleSheet" type="text/css" href="style.css" />

このような形にする。この場合はstyleタグ全体を置換するようにする。

<style type="text/css">.*?</style>

正規表現を使えば、パターン化されていないような所ですら無理矢理取ることも可能なので、膨大なファイルを相手にする場合にはDevasと一緒に使い方を覚えておけば非常に運営が楽になる。

置換作業が完了したら実際にHPのサイズを測ってみるといいだろう。リンク先では入力したURLのファイルサイズを測ってくれる。HTMLだけでなくimg要素からも拾ってきてくれるので、ここでの表示を参考にして画像等を削ったり構成を見直すのもいいだろう。

オフラインで測りたいならHTML体重計を。

ニュースサイトの中でもHTML構成に気を遣っている（と思われる）サイトを参考にしてみるのもいいだろう。

もちょっと続く。最後はブラウザでの負荷を減らす方法とかのTipsめいたものを。

Info

Navigation

Comment

投稿したコメントは公開されません。サイトオーナーのみが閲覧できます。
返信等を希望する場合は、コメント内に連絡先のメールアドレスかサイトのURLを入力してください。

2005
0305