読者です 読者をやめる 読者になる 読者になる

稲沢市よりお届けしてます。

Perlをはじめとしたプログラミング周りのあれこれについて。Perl界のモブキャラとして暗躍します(謎)。

PerlでHTMLの繰り返し部分をインクリメントしてみた

HTMLの構築とかしてると、やたら繰り返す部分が多い。

で、画像ファイルだけ差し替えてみたいな。


私は、好み的に画像ファイル名を【『ファイル名』+連番】にしているので、

これは、自動化できるんじゃないかと思った。


はじめは、Emacsとかチューンできるテキストエディタを使おうか

なんてことも考えた。Lispも覚えたら幸せになれそうだし。


しかし、よくよく考えるとPerlはテキストの編集に強みを持っているのが特徴だった。

Perl使いなら、とりあえずPerlで解決しなさい」

そんな声がした気がしたので、Perlスクリプトを書いてみた。


美しくもなんともないスクリプトだが、不毛なコピペから解放された。

#!/usr/bin/perl
#
# 特定の位置にインクリメント数字を入れていってHTML構築を短縮化するスクリプト
# 3つずつの<div class="unit">を<div class="three_unit clearfix">でくくる、というのを繰り返す
# 20101230by_perl48

use strict;
use warnings;
use encoding qw(shiftjis);

# 繰り返し回数を指定する
my $max =  24;

# ファイルハンドルをオープンして、外部テキストファイルへの書き込み準備
open my $writing, '>>', "dekiagari.txt";

for( my $i = 1; $i <= $max; $i ++ ){
# 1番目、4番目、7番目・・・に<div class="three_unit clearfix">を突っ込む
    if( $i % 3 == 1 ){
            print $writing <<END_HEADER;
    <div class="three_unit clearfix">
END_HEADER
    }

# <div class="unit">内の画像ファイル名末尾をインクリメントして複製していく
    print $writing <<END_OF_UNIT;
        <div class="unit">
            <a href="/img/sem_pho2010-$i.jpg" rel="lightbox"><img src="/img/sem_pho2010-$i.jpg" width="200" alt="" rel="lightbox[seminor]" /></a>
            <p>text&lt;/p>
        </div>
END_OF_UNIT

# 3番目、6番目、9番目・・・に</div>を突っ込む
    if( $i % 3 == 0 ){
            print $writing <<END_FOOTER;
    </div>
END_FOOTER
    }
}


で、dekiagari.txt に出力されたのが下

    <div class="three_unit clearfix">
        <div class="unit">
            <a href="/img/sem_pho2010-1.jpg" rel="lightbox"><img src="/img/sem_pho2010-1.jpg" width="200" alt="" rel="lightbox[seminor]" /></a>
            <p>text</p>
        </div>
        <div class="unit">
            <a href="/img/sem_pho2010-2.jpg" rel="lightbox"><img src="/img/sem_pho2010-2.jpg" width="200" alt="" rel="lightbox[seminor]" /></a>
            <p>text</p>
        </div>
        <div class="unit">
            <a href="/img/sem_pho2010-3.jpg" rel="lightbox"><img src="/img/sem_pho2010-3.jpg" width="200" alt="" rel="lightbox[seminor]" /></a>
            <p>text</p>
        </div>
    </div>
    <div class="three_unit clearfix">
        <div class="unit">
            <a href="/img/sem_pho2010-4.jpg" rel="lightbox"><img src="/img/sem_pho2010-4.jpg" width="200" alt="" rel="lightbox[seminor]" /></a>
            <p>text</p>
        </div>
        <div class="unit">
            <a href="/img/sem_pho2010-5.jpg" rel="lightbox"><img src="/img/sem_pho2010-5.jpg" width="200" alt="" rel="lightbox[seminor]" /></a>
            <p>text</p>
        </div>
        <div class="unit">
            <a href="/img/sem_pho2010-6.jpg" rel="lightbox"><img src="/img/sem_pho2010-6.jpg" width="200" alt="" rel="lightbox[seminor]" /></a>
            <p>text</p>
        </div>
    </div>
    <div class="three_unit clearfix">
        <div class="unit">
            <a href="/img/sem_pho2010-7.jpg" rel="lightbox"><img src="/img/sem_pho2010-7.jpg" width="200" alt="" rel="lightbox[seminor]" /></a>
            <p>text</p>
        </div>
        <div class="unit">
            <a href="/img/sem_pho2010-8.jpg" rel="lightbox"><img src="/img/sem_pho2010-8.jpg" width="200" alt="" rel="lightbox[seminor]" /></a>
            <p>text</p>
        </div>
        <div class="unit">
            <a href="/img/sem_pho2010-9.jpg" rel="lightbox"><img src="/img/sem_pho2010-9.jpg" width="200" alt="" rel="lightbox[seminor]" /></a>
            <p>text</p>
        </div>
    </div>
    <div class="three_unit clearfix">
        <div class="unit">
            <a href="/img/sem_pho2010-10.jpg" rel="lightbox"><img src="/img/sem_pho2010-10.jpg" width="200" alt="" rel="lightbox[seminor]" /></a>
            <p>text</p>
        </div>
        <div class="unit">
            <a href="/img/sem_pho2010-11.jpg" rel="lightbox"><img src="/img/sem_pho2010-11.jpg" width="200" alt="" rel="lightbox[seminor]" /></a>
            <p>text</p>
        </div>
        <div class="unit">
            <a href="/img/sem_pho2010-12.jpg" rel="lightbox"><img src="/img/sem_pho2010-12.jpg" width="200" alt="" rel="lightbox[seminor]" /></a>
            <p>text</p>
        </div>
    </div>
    <div class="three_unit clearfix">
        <div class="unit">
            <a href="/img/sem_pho2010-13.jpg" rel="lightbox"><img src="/img/sem_pho2010-13.jpg" width="200" alt="" rel="lightbox[seminor]" /></a>
            <p>text</p>
        </div>
        <div class="unit">
            <a href="/img/sem_pho2010-14.jpg" rel="lightbox"><img src="/img/sem_pho2010-14.jpg" width="200" alt="" rel="lightbox[seminor]" /></a>
            <p>text</p>
        </div>
        <div class="unit">
            <a href="/img/sem_pho2010-15.jpg" rel="lightbox"><img src="/img/sem_pho2010-15.jpg" width="200" alt="" rel="lightbox[seminor]" /></a>
            <p>text</p>
        </div>
    </div>
    <div class="three_unit clearfix">
        <div class="unit">
            <a href="/img/sem_pho2010-16.jpg" rel="lightbox"><img src="/img/sem_pho2010-16.jpg" width="200" alt="" rel="lightbox[seminor]" /></a>
            <p>text</p>
        </div>
        <div class="unit">
            <a href="/img/sem_pho2010-17.jpg" rel="lightbox"><img src="/img/sem_pho2010-17.jpg" width="200" alt="" rel="lightbox[seminor]" /></a>
            <p>text</p>
        </div>
        <div class="unit">
            <a href="/img/sem_pho2010-18.jpg" rel="lightbox"><img src="/img/sem_pho2010-18.jpg" width="200" alt="" rel="lightbox[seminor]" /></a>
            <p>text</p>
        </div>
    </div>
    <div class="three_unit clearfix">
        <div class="unit">
            <a href="/img/sem_pho2010-19.jpg" rel="lightbox"><img src="/img/sem_pho2010-19.jpg" width="200" alt="" rel="lightbox[seminor]" /></a>
            <p>text</p>
        </div>
        <div class="unit">
            <a href="/img/sem_pho2010-20.jpg" rel="lightbox"><img src="/img/sem_pho2010-20.jpg" width="200" alt="" rel="lightbox[seminor]" /></a>
            <p>text</p>
        </div>
        <div class="unit">
            <a href="/img/sem_pho2010-21.jpg" rel="lightbox"><img src="/img/sem_pho2010-21.jpg" width="200" alt="" rel="lightbox[seminor]" /></a>
            <p>text</p>
        </div>
    </div>
    <div class="three_unit clearfix">
        <div class="unit">
            <a href="/img/sem_pho2010-22.jpg" rel="lightbox"><img src="/img/sem_pho2010-22.jpg" width="200" alt="" rel="lightbox[seminor]" /></a>
            <p>text</p>
        </div>
        <div class="unit">
            <a href="/img/sem_pho2010-23.jpg" rel="lightbox"><img src="/img/sem_pho2010-23.jpg" width="200" alt="" rel="lightbox[seminor]" /></a>
            <p>text</p>
        </div>
        <div class="unit">
            <a href="/img/sem_pho2010-24.jpg" rel="lightbox"><img src="/img/sem_pho2010-24.jpg" width="200" alt="" rel="lightbox[seminor]" /></a>
            <p>text</p>
        </div>
    </div>