お客様からいただいた膨大なサイト内資料、それをHTMLで表組みへ。
と表題の様な作業はもっぱら、秀丸で正規表現使ってぱっぱとやるんですが・・。
データ内にメタデータ（ここでは正規表現で利用する奴）使いまくりだと、それもげんなり・・。
しかも久々に正規表現使うと、いまいち頭に出てこない。
という訳で、探したら超便利なWebサービスがありました。
その名も『エクセルシートをHTMLテーブルに変換しちゃう君（ββ）』
http://styleme.jp/tool/xls2html/
いやー、助かりました。
その他制作Tipsの最近のブログ記事
フッター部分にコピーライトの表記をしますが、 年を自動的に更新するJSを書き留めておきます。
<address>Copyright © <script type="text/javascript">
var startYear = 2009;thisDate = new Date();thisYear = thisDate.getFullYear();if(startYear!=thisYear)
{document.write(startYear+"-"+thisYear);}else{document.write(startYear);}</script>
ソメイヨシノ. All Rights Reserved.</address>
<!--コピーライト-->
という訳で、jQueryを利用した超簡単なタブ切り替えをメモ書きしておきます。
使い方は超簡単。下記のソースを<head>内へ挿入。
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("a.btn_act").click(function(){
var connectCont = $("a.btn_act").index(this);
var showCont = connectCont+1;
$('.motion').css({display:'none'});
$('#motion_area'+(showCont)).fadeIn('slow');
$('a.btn_act').removeClass('active');
$(this).addClass('active');
});
});
</script>
<style type="text/css">
.motion {
width: 620px; /* タブ領域の広さ */
display: none;
}
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
タブ毎のコンテンツは<body>内に制作
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
<a href="javascript:void(0);" class="btn_act active"><img src="tab1.gif" class="float_left" /></a>
<a href="javascript:void(0);" class="btn_act"><img src="tab2.gif" class="float_left" /></a>
<a href="javascript:void(0);" class="btn_act"><img src="tab3.gif" class="float_left" /></a>
<div class="clear"></div>
<div id="motion_area1" class="motion">
タブ1の内容
</div><!-- タブ１のコンテンツ -->
<div id="motion_area2" class="motion">
タブ2の内容
</div><!-- タブ１のコンテンツ -->
<div id="motion_area3" class="motion">
タブ3の内容
</div><!-- タブ１のコンテンツ -->
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
たった、これだけであります。
先日からAWSの評価をしてた訳ですが、早速本日つまづいてました。
２００９年からリクエストの敷居が上がり、Signetureとタイムスタンプを付加したり、ソートしたりしないと、パラメータが間違っています。と返され、XMLが取得できなくなっていたようで、自分が参考にしていたWebサイトや文献は古い物で、何度やっても失敗。原因がわかればなんてことないんですが、それじゃぁなんのためのVersionパラメータなんじゃいと吼えたくなりました。
まぁ、なんにせよデータが送られてくるとこれからどの様にマッシュアップしようかと、テンション上がります。
AWSにもやたらと制限事項があり、リクエストは一秒に一回までとか、面倒くさい制限事項にひっかかって、アカウント停止にされないよう気をつけながら、拾ってくるデータを厳選し、整形し、デザインし、自分のサイト作りに役立てたいと思います。
えー今日はメモです。 ポータルサイトにDBでデータを保持した訳ですから、次には当然検索機能を持たせるのですが、ここで複合検索で少しはまったのでメモしておきます。 正規表現で複数の半角スペースや全角スペースを１つの半角スペースに変換して配列にぶち込むのが味噌です。
SQLの部分もう少しシンプルに書けないかな。
<?php
if(isset($_POST["keywords"])){
$keyword = $_POST["keywords"];
// 変数$nameの値に含まれる全角スペースを半角スペースに置換して変数$keywordに代入
$keyword = str_replace(" ", " ", $keyword);
// 変数$keywordの値の前後に半角スペースが含まれていた場合それを削除し、半角スペースが複数あった場合、正規表現を使ってそれをひとつに置換し、変数$keywordに代入
$keyword = preg_replace("/\s+/", " ", trim($keyword));
$array = explode(" ", $keyword);
$sql = "SELECT * FROM gym where";
foreach( $array as $val ){
// 検索条件を設定するコードをここに書く
$sql = $sql . " (name LIKE '%" . $val . "%' OR address LIKE '%" . $val . "%' OR open LIKE '%" . $val . "%' OR holiday LIKE '%" . $val . "%' OR price LIKE '%" . $val . "%' OR note LIKE '%" . $val ."%') AND";
}
$sql = substr($sql, 0, -4);
$sql = $sql . ";";
納品期日間際というのに、作業場のエアコンが故障したり、銀歯取れたり、色々不幸に見舞われてます。
どうにもならない不条理に少しでも抗う為に、人間は知恵を振り絞る・・・。という訳で。
システムを自力で組むよりは、他人の力（オープンソースなりASPなり）を利用するというのが、やはり効率的な訳です。案件が舞い込んでからでは遅すぎるので、様々なASPやオープンソースを評価しておこうという事になりました。特にECがらみ。
オープンソースではEC-CUBE、ASPではこの前教えてもらった、Shop-Maker、カラーミーショップなど、時間を割いてでも使ってようと思います。
簡単なフレーム処理やイベント処理でActionScriptを利用するものの、
インタラクティブなアニメーション表現をActionScriptで表現するのは、
それを専門にしている人でない、制作以外の工程も一貫で携わる必要
のある自分には苦労が多い。
動的な表現も大抵はオーサリングの機能（トゥイーンを利用したフレームアニメ）で
事足りるが・・・。スプラッシュムービーであればこれで充分。
最近興味があるツール”Flash Catalyst”。簡単に言うとコードを
書かずに、UIに多彩なインタラクション要素を追加できるらしい。
ツールに慣れる自体で、それ相応の労力は必要だが、ActionScriptのロジックと
発現するアニメーション効果の相関を試行錯誤するよりはよっぽど効率はよさそうだ。
という訳で、時間を取って評価してみようと思う。
最近の流行りといいますか。グリッドレスなデザインの装飾部分の制作には
様々な選択肢があります。
自分はCSSのネガティブマージンを利用しています。
やり方は簡単。
CSSで装飾画像のmarginに マイナスの値を指定するだけ。
コツはIE６対策にブロック部分に zoom:1 を
画像部分に position: relative; を指定しておく。
バリデータはサーバサイドよりも、クライアントサイドで完結していた方が、
ユーザビリティ的にも、開発者にとってもメリットが大きいと感じる（サーバ側でも対策するが）。
と言うことでバリデータのライブラリを探して、一番よさげなものに辿り着く。
「jQuery Inline Form Validation Engine」
これは、テキストフィールドだけではなく、radio,checkbox項目のチェックや
他の項目との比較、その他もろもろ・・・ほとんどすべてのチェック方法を指定可能。
該当項目へのツールチップ表示なども完璧。
ドキュメントは英語。
使い方：
ヘッダに下記を指定
<link rel="stylesheet" href="css/validationEngine.jquery.css" type="text/css" media="screen" charset="utf-8" />
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery.validationEngine.js" type="text/javascript"></script>
フォームの項目にチェック方法指示
<input class="validate[required,custom[onlyLetter],length[0,100]]" name="firstname" type="text" />
チェック方法
optional: Special: Only validate when the field is not empty
required: Field is required
length[0,100] : Between x and x characters allowed
minCheckbox[7] : Set the maximum checkbox autorized for a group
confirm[fieldID] : Match the other field (ie:confirm password)
telephone : Match telephone regEx rule.
email : Match email regEx rule.
onlyNumber : Numbers only
noSpecialCaracters : No special characters allowed
onlyLetter : Letters only
date : Invalid date, must be in YYYY-MM-DD format
WEBの制作で時間の多くを占める環境依存要因対策。
クロスブラウザであったり、サーバ環境であったり。
クロスブラウザで言えば、IE6が元凶の様な気も・・。
現在はテスト環境と本番環境で別のレンタルサーバを使用した
WEBシステム開発での苦労に見舞われている。
Perl、データベースのバージョンの相違・・モジュールのインストールの有無・・
それにしても最近気になっているのが、エンコードEUCでの文字化け。
今現在は、ソースファイル自信もフォームから受け取るデータもEUCで
扱っているのだが、特定文字列でのみ文字化け・・。
SHIFT-JISと大差ないんじゃ。
例えば”希望”をUTF8のページからフォームで受けて、EUCに変換して
表示すると化ける・・というより、なぜか変換されない（その部分だけUTF8のまま）。
特定文字列のみなのでロジックがおかしい訳ではなさそう。・・理由がよくわからん。
さらに環境依存が激しいのがモバイルなんですが、
最新のモバイル制作事情に詳しい資料を取り寄せた所、
この環境依存対策の事で８割埋まっていた。
携帯キャリアさんにはもう少し考えて欲しかったと思う。
・・と不満ばかりも言ってられないので、回避策の引き出しを
増やしていこうと思います。
Profile
Name：someiyoshino
Home:Suginami Tokyo
HP1:www.someiyoshino.biz
HP2:www.seoby.biz
Blog:www.someiyoshino.biz/blog
Mail:info@someiyoshino.biz
