PC用のページをmobile用に

PC2M Website Transcoder for Mobile Clients
http://www.rcdtokyo.com/pc2m/note/

JavaでWYSIWYGエディタ

http://tinymce.moxiecode.com/
http://addons.oscommerce.com/info/5506

phpのセッションパラメータ

oscommerceではsslで保護されたページに行く際にセッションパラメータを
保って移動するが、PHP 4.3.9以降ではSSL接続等に切り替わるときに
セッションパラメータを保持出来ないので、その項目をコメントアウト

/includes/application_top.phpの中の

if (function_exists('session_set_cookie_params')) {
session_set_cookie_params(0, substr(DIR_WS_CATALOG, 0, -1));
}

という所を
/*
if (function_exists('session_set_cookie_params')) {
session_set_cookie_params(0, substr(DIR_WS_CATALOG, 0, -1));
}
*/
こんな感じで。

cssの記述順

# a:link ： まだアクセスしたことのないリンクに適用
# a:visited ： 既にアクセスしたことのあるリンクに適用
# a:hover ： マウスが上に乗っている状態のリンクに適用
# a:active ： 選択されている状態のリンクに適用

スタイルシートでは、同じスタイルが記述された場合、後に記述された方を優先して採用する。

* 「 :hover 」を記述する際は、「 :link 」や「 :visited 」よりも後、「 :active 」よりも前に記述します。
* 「 :active 」を記述する際は、「 :link 」や「 :visited 」、「 :hover 」よりも後に記述します。

要するに、次の順番で常に記述するようにしておけば大丈夫です。

1. :link
2. :visited
3. :hover
4. :active

Java スクロール

ヘッダーに定義
例えば

<script src="js/scroll_top.js" type="text/javascript"></script>
<a href="javascript:void(0);" onclick="scroller(0,0,100);return false;" onfocus="if(this.blur)this.blur()">▲</a>

ソースもついでに貼っとこう

// 現在のスクロール量を取得（汎用）
function getScroll(){
var x, y ;
if( document.all !== void 0 ){
x = document.body.scrollLeft ;
y = document.body.scrollTop ;
}else if( document.layers !== void 0 ){
x = window.pageXOffset ;
y = window.pageYOffset ;
}else{
x = window.scrollX ;
y = window.scrollY ;
}
return { x : x, y : y };
}

// スクロール始めのスクロール量
var SCROLL ;
var divCountScroller = 15 ; // 分割数（何段階でスクロールするか）

// 現在のスクロール位置から、指定座標(x,y)までスクロールします
// edging は加減速を決めるパラメータで -100〜100 で指定します
// 小さい程加速、大きいほど減速、0のとき等速です
// 最初の呼び出し時、count は指定する必要はありません。
function scroller( x, y, edging, count ){

if( count === void 0 ){
count = 0 ;
SCROLL = getScroll();
}

if( count++ < divCountScroller ){
var c = count/divCountScroller ;
var nx = SCROLL.x+( x-SCROLL.x )*( c+edging/(100*Math.PI)*Math.sin( Math.PI*c ) );
var ny = SCROLL.y+( y-SCROLL.y )*( c+edging/(100*Math.PI)*Math.sin( Math.PI*c ) );
window.scrollTo( nx, ny );
setTimeout( "scroller("+x+","+y+","+edging+","+count+");", 50); // 再描画時間 10[msec] 小さい程早い
}
}

エラーページ

この概要は表示できません。投稿を閲覧するには ここをクリック してください。

サイトメンテナンス

mod_rewriteを使ってサイトのアクセスを制限します。
.htaccessに以下のように書くと、.htaccessを置いたディレクトリ以下にはブラウザからアクセスできなくなり、代わりに『x.html』というファイルの内容が表示されることになります。
x.htmlには、『サイトメンテナンス中です』とか他のページへのリンクを入れておくと親切。

RewriteEngine on
RewriteBase /
RewriteRule .* x.html

画像の直リンク

アクセス解析を見ているといろいろ解る。が、、
データは送ってるけどページビューが無い、
リンクを辿ると、画像の無断使用！！

常識的にむかつきます。
対策として、、

cgiを通すか、apacheの機能を使うか？cgiは重くなりそうなので
apacheの機能を使う事にする。

まずバージョンは1.3.13以降でないと使えないのでバージョンを確認。
htaccess書類を作ってftpでアップ後リネーム。
以下は内容。
SetEnvIfNoCase Referer "^http://www.yourdomain.com/" locally_linked=1
SetEnvIfNoCase Referer "^http://www.yourdomain.com$" locally_linked=1
SetEnvIfNoCase Referer "^http://yourdomain.com/" locally_linked=1
SetEnvIfNoCase Referer "^http://yourdomain.com$" locally_linked=1
SetEnvIfNoCase Referer "^$" locally_linked=1

Order Allow,Deny
Allow from env=locally_linked


サブドメインについて
SetEnvIfNoCase Referer "^http://www.account.yourdomain.com/" locally_linked=1
SetEnvIfNoCase Referer "^http://www.account.yourdomain.com$" locally_linked=1
SetEnvIfNoCase Referer "^http://account.yourdomain.com/" locally_linked=1
SetEnvIfNoCase Referer "^http://account.yourdomain.com$" locally_linked=1
SetEnvIfNoCase Referer "^$" locally_linked=1

Order Allow,Deny
Allow from env=locally_linked


＊htaccess書類は、最後に改行を入れる事！
サブドメインについて、詳しくは借りてるサーバに問い合わせること。

検索対策

googleなどの検索エンジンでは、動的ページはリスティングされないそうなので
.htaccessを使ってmod_rewriteを記述してルールを設定すれば静的ページとして表示されます。

読んで字のごとくRewriteEngineを起動させます。
RewriteEngine on
RewriteRule 『...』
以降にルールを設定して、〜.htmlとか入れておけば
htmlで作った風なアドレスになります。

cssでロールオーバー

Javaでのロールオーバーも簡単なのですが、ヘッダーと分離していて面倒なので
メニューの部分をcssのロールオーバーで書いてみた。

リンクする所のバックグラウンドに画像（menu_a.gif)を敷いて上から文字を入れる。
枠の端から文字が近いので、text-indentで調整。

div#contentsleft dd.icon a:link{
display:block;
width:200px;
color:#333333;
text-indent: 12px;
background:url(../images/menu_a.gif) no-repeat;
height:30px;
line-height:30px;
text-decoration:none;
}

ポインタを乗せると（hover）バックグラウンドの画像が入れ替わり（menu_hover.gif)
バックグラウンドの画像は濃い青なので文字の色も白に変わるようにします。

div#contentsleft dd.icon a:hover{
color:white;
background:url(../images/menu_hover.gif) no-repeat;
}


訪問後の画像も変えることが出来ますがあえてそのままで。
文字の色だけ変えても良かったかも？

div#contentsleft dd.icon a:visited{
display:block;
width:200px;
color:#333333;
text-indent: 12px;
background:url(../images/menu_a.gif) no-repeat;
height:30px;
line-height:30px;
text-decoration:none;
}

SmartyでJavaScriptを使う

テンプレートエンジンであるsmartyを使ってみる、
javascriptなどでロールオーバーを作成すると
<script>〜</script>の所でエラーが出る。

ここはsmartyに解釈させないように
<script>〜</script>を{literal}{/literal}で括ると回避される。

迷惑メール対策

ドメインを取ってメールアドレスを作りホームページなどで公開していると迷惑メールが増える。
これは自動的にメールアドレスを収拾するクローラーが来てメールアドレスを拾ってゆくもので
表面上でメールアドレスを画像にしても、ソース側のmailtoや＠以降を収拾してゆくので
ここを書き換えなければ意味が無い。

そこで数値実体参照というものを利用してみる。
ソースのmailto:xxxxxxxxxxxを以下のサイトで変換してソースを貼付ける。

http://ideas.paunix.org/utfrefcon.htm

favicon.ico

ブラウザのアドレスバーにトレードマークを入れてみる。
gifでもpngでも良いのでとりあえずマークを作る。

Macなので作ったファイルを以下のようなサイトで.icoデータにする。
http://www.chami.com/html-kit/services/favicon/

.icoデータを任意の場所にアップして、表示したいページの
~間に以下の文章を入れる。

<link REL="SHORTCUT ICON" HREF="../images/favicon.ico">

../images/favicon.icoは任意の場所。

お問い合わせを簡略化

oscommerceにレビューボタンというのがある、
押すとレビューを書く事が出て来るわけだが、
あんまり必要ないのでお問い合わせボタンにしてみた。

実際使ってみると
商品の何を質問しようとしたんだっけ？というか商品名はなんだっけ？
ブラウザのバックボタンを押して商品ページに戻ってしまう。

お問い合わせを押したら、フォームに商品名くらい出るようにしても
良いんじゃないか？またはブランクで開くように設定するとか。

お問い合わせボタンのソース
$product_info['products_name'])) . "¥">¥n";?>button_ask_to_shop.gif', IMAGE_BUTTON_ASK); ?>

これでなんとか商品名を挿入。

rootユーザーにパスワードを設定する

いろいろとMacをいじる際に不可欠なのはrootユーザーの権限。
NetInfoマネージャーから設定します。

設定した覚えが無いし、設定し直したいけどパスワード忘れた。
なんてときは、NetInfoマネージャーを立ち上げて
メニューのセキュリティーから、ルートユーザーの有効／無効
の項目があるので、無効にしてから有効にすれば再設定できます。

Macでテキスト比較修正ツール

Windowsだといろいろソフトがあるようです、
Macもtextエディタにdiffコマンドのプラグインを作れば
出来るようですが、、、めんどくさい。。

よく考えたらDeveloper toolにFileMergeというのがあったな、
使ってみると凄く使いやすい。難点は、日本語文字化けする。
どうやらShift JISしか扱えんようだ。
自分は基本的にEUC_JPかUTF-8を使うので修正が必要。
ってことで文字化けしないようにしてみよう。

http://hetima.com/pblog/article.php?id=87