Yesterday: 
RSSリーダーで購読する
|
コメントが一番多い記事（233コメント）：人の心理の裏をかくホームページ集客術：リピータになってもらうためには
ツイートが一番多い記事（94ツイート）：ちょっと待て！twitterやfacebookに子供の写真を掲載する親達への警告
いいねが一番多い記事（574いいね）：facebookスパムに要注意。なりすましの見分け方とアカウント乗っ取りの手口（2013年度版）
« 続・かいわれ栽培計画 | Main | ミニトマト»
カテゴリー » Web/ミディリン August 07, 2003
リディア同盟改修 ID:1060225200
リディア同盟の改修作業を先日行いました。
会員名簿が先日２２０名を超えたのですが、
今まで会員名簿はhtml形式で、25名ずつ追加していき、
それ以上になったら新しいHTMLを制作ということをしていたのです。
しかし会員の数が増えていくにつれて、
新しいファイルを生成するときのテーブル（ヘッダーのリンク）の数や
HTMLの数が多く（ファイル容量の増大等）
メンテナンスが大変になってきました。
300件、350件と増えていくと、運用が大変になってくると感じ
CGI化するか、DBを使うかどっちか悩んだのですがCGI化に踏み切りました。
DBを使うとなると、フリーのレンタルサーバーで
MySQLやPostgresSQLなどをフリーのDBを使えるところがあるのですが
各ページに広告がついてしまうことと、
MySQLやPostgresSQLは触ったことがないので（触ったことがあるDBはDB2とAccessくらい）
CSVを使ったCGIの方が簡単だろということでPerlとJavascriptで行うことにしました。
作業的に、HTMLのものをCGI化するとなると
（１）既存HTML（kaiin.html〜kaiin9.html）→CSV化
（２）CSVデータからCGIでデータを読み込ませてリスト表示
（３）Javascriptによりリスト表示の再生成
（４）リディア同盟全ファイルを新会員名簿へ書き換え（Devasを使った一括置換）
（５）旧会員名簿の削除
という作業が発生するのですが
これが実現すればCSVファイルを追加するだけでHTMLが
自動的に表示され、新たにファイルを追加してもメンテナンスが必要なく
ファイルの容量もHTMLの時の1/5くらいに軽量されます。
まず、問題になったのが（１）の
既存HTMLをCSV化にするという作業で
CSV項目として使う項目を列挙した後、
（具体的には名前、メールアドレス、WebのURL、コメント、FF4の好感度等）
それぞれの項目を抽出するという作業を行います。
しかし、これを１つ１つコピー＆ペーストをして
CSVを作るとなると項目が７個あれば、220×7=1540回も
コピー＆ペーストをしないといけません。
それをすると必ずどこかで間違いも起きてしまいますし、
時間がいくらあっても終わらないので
テキストから、必要な項目だけを抜き出すフリーソフトを
ネットで探すことからはじめました。
３０本くらいフリーソフトを探していたところ
「ChrTrim」というテキスト抽出ツールがあったので
これをダウンロードしました。
このソフトの「キーワード指定範囲抽出の機能」に
どうやら「開始文字」と「終了文字」を入力すると
その間にある文字列を抽出してテキスト出力してくれるという機能があるらしく
リディア同盟の会員名簿の特徴（使用tableやスタイルシート）などを分析して
開始文字と終了文字を指定して
名前だけのテキスト、メールだけのテキスト、URLだけのテキスト
などを大体の形で抽出して作成した後、
他のテキストエディタでいらない文字を一括置換して排除して
整列しおわったテキストをExcelで整理して
全部連結してCSV化する作業を行いました。
（１）の作業が、約５時間くらいかかってしまいました。
次に（２）のCSVからデータを出力するCGIは
ネットで探しカスタマイズこれが１時間くらいだったので
たいしたことがないのですが
（３）Javascriptによりリスト表示の再生成
これはCSVの値をそのまま使えなく、ネットで加工して出力する場合
例えば、項目の中に好感度というものがあったとして、
１〜５まで格付けしてあるとします。
その好感度の項目が４だったら
4という数字をCSVから呼び出した後、、
あるマークを4つ連続でイメージとして棒グラフのように見せる作業
をJavascriptとhiddenを使って作成する必要があったのですね。
（具体的にはこんなプログラム↓をJavascriptで自作するのでアリマス）
--------------------------------------------------------------------------
<TABLE border="1" cellpadding="0" style="border-collapse: collapse; border-width: 0" bordercolor="#FFFFFF" width="100%" id="AutoNumber3">
<!--●ヘッターのリンク●-->
<script language="JavaScript">
<!--
var count = 25; //表示件数（cgiの方でも設定している）
var td_haba = 6;//tdの最大幅
var bangou = __1__ - count + 1;//リストの先頭の番号（Noの最後の番号-count+1
var final_data_flag = __1__%count;//最後のページを表示しているかの判別(countで割り切れれば最後ではない)
var td_loop_cnt = (parseInt(__max__/(count*td_haba))+1)*td_haba;//ループ数=「tdの数(td_habaの倍数）」=(int(全件数/(count*td_haba))+1)*td_haba
/////0生成関数/////
//3桁未満なら0を先頭に付加して値を返す
function zero_add(str_num){
loop_cnt = str_num.length;
for(j=0; j<3-loop_cnt;j++){
if(str_num.length < 3){
str_num = "0" + str_num;
}
}
return str_num;
}
/////tdとtrの出力/////
//
for(i=0;i<td_loop_cnt;i++){
/////始まり<tr>出力/////
if(i%td_haba==0){
document.write("<TR>");
}
/////<td>出力/////
//リストが存在する時
if(i <= parseInt(__max__/count)){
//現在アクティブなページ（リンクなし）
//i*表示件数+1 = リストの先頭の番号 もしくは 最後のページでiがリスト表示の最終のもの
if( parseInt(i*count+1) == parseInt(bangou) || (final_data_flag!=0 && i==parseInt(__max__/count)) ){
document.write("<TD width=\"16%\" style=\"padding:0;\" align=\"center\">◆No." + zero_add(parseInt(i*count+1).toString()) + "〜" + zero_add(parseInt(i*count+count).toString()) + "◆</TD>");
}
//リンク表示
else{
document.write("<TD width=\"16%\" style=\"padding:0;\" align=\"center\">◆<a href=\"database.cgi?not=alldata&sline=" + parseInt(i*count+1) + "\"><FONT color=\"#FF6600\">No." + zero_add(parseInt(i*count+1).toString()) + "〜" + zero_add(parseInt(i*count+count).toString()) + "</FONT></A>◆</TD>");
}
}
//リストがない時
else{
document.write("<TD width=\"16%\" style=\"padding:0;\" align=\"center\"> </TD>");
}
/////終わり<tr>出力/////
if(i%td_haba==td_haba-1){
document.write("</TR>");
}
}
//-->
</script>
</TABLE>
<br>
<!--IF=target-->
<!--ELSE=target-->
該当するデータが見つかりませんでした。
<!--END=target-->
<!--LINE-->
<!--●hidden項目一覧●-->
<input type="hidden" name=web__1__ value="__4__">
<input type="hidden" name=mail__1__ value="__3__">
<input type="hidden" name=ff4_like__1__ value="__5__">
<input type="hidden" name=rydia_like__1__ value="__6__">
<table border="1" cellspacing="1" style="border-collapse: collapse" bordercolor="#00CC99" width="550" id="AutoNumber1">
<tr>
<td width="15%" rowspan="3" bgcolor="#CCFF99">
<p align="center"><font color="#7A4B58">��__1__</font>
</td>
<td width="85%" style="border-left-style: solid; border-left-width: 1; border-right-style: solid; border-right-width: 1; border-top-style: solid; border-top-width: 1; border-bottom-style: none; border-bottom-width: medium">
<font color="#7A4B58">__2__</font>
<font color="#808080">
<!--●Web/E-mail●-->
<script language="JavaScript">
<!--
//●Web
if(web__1__.value != '' ){
document.write("<a target=\"_blank\" href=\"__4__\"><img border=\"0\" src=\"../../images/home_g.gif\" width=\"20\" height=\"20\"></a>");
}
if(mail__1__.value != '' ){
document.write("<a href=\"mailto:__3__\"><img border=\"0\" src=\"../../images/mail_g.gif\" width=\"17\" height=\"13\"></a>");
}
//-->
</script>
</font>
</td>
</tr>
<tr>
<td width="85%" style="border-left-style: solid; border-left-width: 1; border-right-style: solid; border-right-width: 1; border-top-style: none; border-top-width: medium; border-bottom-style: none; border-bottom-width: medium">
<font color="#808080" size="2"><span style="background-color: #CCFFCC">
<!--●FF4好き度●-->
ＦＦ４⇒
<script language="JavaScript">
<!--
for(i=0; i<ff4_like__1__.value;i++){
document.write("<img border=\"0\" src=\"../../images/h_red.gif\" width=\"11\" height=\"9\">");
}
//-->
</script>
</span>
<span style="background-color: #CCFFCC">
<!--●リディア好き度●-->
Rydia⇒
<script language="JavaScript">
<!--
for(i=0; i<rydia_like__1__.value;i++){
document.write("<img border=\"0\" src=\"../../images/h_red.gif\" width=\"11\" height=\"9\">");
}
//-->
</script>
</span>
<span style="background-color: #CCFFCC"></span></font></td>
</tr>
<tr>
<td width="85%" style="border-left-style: solid; border-left-width: 1; border-right-style: solid; border-right-width: 1; border-top-style: none; border-top-width: medium; border-bottom-style: solid; border-bottom-width: 1">
__7__</td>
</tr>
</table>
<br>
<!--LINE-->
<!--IF=target-->
<!--END=target-->
<br>
<!--IF=NEXT--><!--END=NEXT-->
--------------------------------------------------------------------------
イメージの棒グラフ化をJavascriptでやっているのですが
同時に25件ずつ会員の表示ができるようにしていて
（1〜25、26〜50、51〜75・・・など）
その中でアクティブなリンク
（例えば、26〜50番目の会員を表示しているときは
それが選ばれていることを示すため
他のリンクと差別化をはかって表示するということ）
をするためのスクリプトの計算方法がなかなかうまくいかず苦労しました。
しかし上で作ったJavascript、どうやらIEでしか動作しないらしく
ネスケ（4.7、6、7）及びOperaでは棒グラフが表示されないという状態で
いずれ改善しないといけないという問題点が残ってます。
そして、作業も終盤作業に入り、
（４）リディア同盟全ファイルを新会員名簿へ書き換え
を行うわけですが
リディア同盟の特徴はフレームは使用してないのですが
全部のページをテンプレートで作成しているため、
１００ページあったら、どのページからも
メインメニューがクリックできるようになっているため
メインメニューの行き換わった場合は１００箇所書き換えなければいけません。
まさか手作業で１００箇所張り替えるわけではないですが
（こういう場合は一括置換ですね）
一括置換をした後、各ページがちゃんと表示できるか確認を行っていたら、
困ったことが１つおきてしまいました。
どうしても１つ表示できないページがでてきてしまったのです。
具体的にはFF4考察のページで「XMLで構成」されているページなのですが
読者投稿から成り立つページで
以前、HTMLの一部をXMLに移行したことがあり
（2003/6/11日記参照のこと）
Perlで指定するパラメータとXML（XSLファイル）が競合を起して
エラーが起きて表示できないという現象が起きてしまいました。
リンクで指定するパラメータとXMLが競合して表示できないなんて
初めて知りましたが、このままでは考察ページが表示できないので
どうにかならないかと悩み、
一ページダミーのHTMLページを制作し、そいつを挟んでやって
XML→CGI
だと競合をおこしてしまったため
XML→HTML→CGI
として、中間にはさむHTMLはrefreshを使い
待ち時間を0秒にして瞬時に飛ばし
見た目はXML→CGIに飛ばしているのですが
リンクパラメータはCGIではなく、HTMLを指定するという形で
どうにか回避できました。
だいたい改修作業に１０時間くらいかかってしまいました。
リディア同盟の方はXMLやCSVを使ったページが多いので
メンテナンスも比較的優れていて、軽量化などにつとめているのですが
パステル・ミディリンは非常に無駄が多いページなんですよね。
この無駄が多いというのは、
同じようなHTMLが多いということで
同じHTMLがあれば、それはCSVなどにしてあげれば
データも追加・削除しやすいし、検索もできるし
メリットがいっぱいあるのです。
パステル・ミディリンで非常に非効率なもので構成されているのが多く
作業ができるものから、CSV化を裏で行っているのですが
特に音楽のライブラリ（JASRAC登録リンクはCSVを使ったCGIなので除く）と
げっちゅうぺーじなどは、かなり無駄があります。
ＨＴＭＬをただコピー＆ペーストという形で生成しているだけなので
ページは重くなる、無駄なタグは多い、ソースは汚くなってしまう
何のメリットもありません。
それで、リディア同盟に引き続き、げっちゅうぺーじも
CSV化して更新を行えば
げっちゅうぺーじのCSVを追加するだけで
げっちゅうぺーじとリレー小説が自動で更新される仕組みができるので
それにチャレンジしようとしました。
まず
（１）既存HTML→CSV化
をしようと、テキスト抽出ソフトとExcelと
後、げっちゅうぺーじはページの上の方が、新しい読者さんになっているため
逆順にするため、Accessを使い並び替えたりして
途中まで作ったのですが
（こんなの）
げっちゅうぺーじのソースが汚すぎて、抽出不可能。
げっちゅうぺーじのテンプレートフォーマットはあるものの
最初の方は、フォーマットを公開してなかったので
ただ手書きでバコバコ追加しただけだし
フォーマットを使って読者さんから送られたものも
ＨＴＭＬエディタで加工されてソースが変わってしまったりして
キリ番のカウンターだけはテキストに抽出できたのですが、各コメントなど
各ソースに関連性がないため、テキスト抽出ソフトで抽出できず
どうやってもCSV化にすることが不可能なため、断念してしまいました。
げっちゅうぺーじがCSV化できれば
かなりの更新のしやすさがあがると思うのですが
一つ一つコピー＆ペーストは大変すぎます。
・人の心理の裏をかくホームページ集客術：リピータになってもらうためには(233)
・ホームページ心理学第２弾「メールの書きだしとホームページ運営・集客の関係」(76)
・娘が生まれた(69)
・ゲームと言えば、何を思い出す？ (50)
・Microsoftからアクセス (30)
・「目標の立て方」と「努力」と「実行力」(26)
最近のコメント