2010年6月19日

英語ページをつくる 2

前回の「英語ページをつくる 1」からの続き。

まずは今回の仕様から。
・日本語・英語ボタンを設置して、クリックしたら表示(メニュー画像やページ丸ごと)を切り替える
・クリックの情報はCookieで記憶させて、次回以降はそれをもとにメニューを表示させる
・クリック時には、現在表示しているページによってはページ遷移する(たとえば、日本語の送料ページをみているときに、英語ボタンを押したら、英語の送料ページに飛ぶ)

1.テンプレート「共通」。jsファイルの呼び出しは先頭行。ボタン(クリックするとJavaScript関数を呼びます)とメニューは任意の位置に書きます。
<script src="http://~/jquery.js" type="text/javascript"></script>
<script src="http://~/jquery.cookie.js" type="text/javascript"></script>
(略)

//言語切り替えボタン
<a href="javascript:void(0)" onclick="set_lang_cookie(0);return false;"><img src="~/button_jp.jpg" /></a>
<a href="javascript:void(0)" onclick="set_lang_cookie(1);return false;"><img src="~/button_en.jpg" /></a>
//表示メニュー
<div id="menu">jp_menu</div>

(略)
<!-- idより下でないとNULL(エラー)になる -->
<script type="text/javascript">
<!--
  change_en_menu();
//-->
</script>

2.JavaScriptとjQuery。Cookieの操作はjQueryで行います。
f1、f2が日本語、f11、f12が英語ページ、と仮定すると、以下のようにしてページ遷移させます。
もうすこし詳しく例を書くと、
f1…日本語の商品発送について(フリーページ1)
f11…英語の商品発送について(フリーページ11)
ページの対応に法則性をつけると、JavaScriptでうまいぐあいに作りこめます(今回のサンプルではそこまでやっていません)。
//クリック時に実行される関数
function set_lang_cookie(i) {
  if(i==1) {
    $.cookie('lang','en',{expires:365});//クッキー書き込み{days}
    strURL = location.href;
    if(strURL.indexOf("mode=f1")!=-1) {
      location.href="http://www.hogehoge.com/?mode=f11";//ページ遷移
    }
    else if(strURL.indexOf("mode=f2")!=-1) {
      location.href="http://www.hogehoge.com/?mode=f12";//ページ遷移
    }
    else {
      location.reload();
    }
  }
  else {
    $.cookie('lang','',{expires:-1});//クッキー削除
    strURL = location.href;
    if(strURL.indexOf("mode=f11")!=-1) {
      location.href="http://www.hogehoge.com/?mode=f1";//ページ遷移
    }
    else if(strURL.indexOf("mode=f12")!=-1) {
      location.href="http://www.hogehoge.com/?mode=f2";//ページ遷移
    }
    else {
      location.reload();
    }
  }
}

//ページ読み込み時に実行される関数
function change_en_menu() {
  if($.cookie('lang')=="en"){
    document.getElementById("menu").innerHTML="en_menu";
  }
}
jp_menu、en_menuはHTMLタグを使って、各自作りこんでください。
次回以降の訪問時には、保存されているCookieをみて、日本語/英語メニューを適宜表示してくれます。
jQueryについては機会をみて、紹介記事を書こうと思います。

2010年6月6日

英語ページをつくる 1

海外から注文がありそうな商品を取り扱っていると、やはり英語ページも必要になってきます。
カラーミーショップ!プロでは、決済ページはSSLを使用しているので、ショッピングカート周りはほとんどいじる手立てがありません(せいぜい配色を変えられるくらい)。

海外のお客様向けに、現時点で何ができるかを検討してみました。

・フリーページを使用して、海外のお客様専用説明ページを作成
取り扱い商品の概説、オーダー方法(e-mailオーダー)、配送方法とシッピング・コストについて(small packetやEMS)、支払方法(PayPalなど)の記載が必要です。国内向けとは内容が異なりますので、新ページで作成するのが一般的です。
目立つところに”For Customers Abroad” として新ページ(フリーページ)へのリンクを張っておけばよいでしょう。

google翻訳を設置
ページ遷移時も翻訳モード状態でついてきてくれますし、翻訳性能も良好。設置もコピペと非常に簡単です。手間をかけず、すぐにできます。

以上のようなことでしたら難しいこともなく、サイトデザインの問題として手軽に実現可能です。
当ブログとしては、もうひと手間をかけたところについて説明していきます。

・メニュー画像などを英語版にする
プレーンテキストはgoogle翻訳などにまかせられても、日本語を使用した画像はそうもいきません(特にメニューが読めないと、お客様は不便です)。
別個に英語版画像を作成し、document.getElementbyId(id).innerHTMLで、動的に内容を差し替えます。 

・日本語/英語の切り替え方法
切り替えボタンを設置し、クリックするとJavaScriptの関数を呼び出す形にします(上で「動的に内容を差し替える」と書いたのはこのことです)。JavaScriptになにを書くかはのちほどサンプルで説明します。

・Cookieに状態を記憶させる
日本語ページか英語ページか、いずれを表示するのかCookieに記憶させておくと、毎回切り替えボタンをクリックせずにすみます。
CookieはjQuery(JavaScript汎用ライブラリ)を利用すると、簡単にあつかえます。jQueryはなにかと便利ですから、このブログでもこれから何度も登場する予定です。


次回「英語ページをつくる 2」は、サンプルを作成します。

2010年6月4日

Smartyサンプル 2

【仕事サイトにSmartyの関連記事を書きました】
カラーミーショップのカスタマイズに便利なSmartyを学ぶ (1/2) 
カラーミーショップのカスタマイズに便利なSmartyを学ぶ (2/2)


Smartyで、こんなことができます。
あらかじめオンライン・マニュアルで内容を確認しておくと、アイデア実現のさいに役立ちます。

<{cycle}>で、背景色を交互に変える。色コード指定しています。2色交互ですが、追加して3色以上でも可能。
「bgcolor」を「class」にしてクラス名を指定することもできます。
<{section name=num loop=$productlist}>
  <tr bgcolor="<{cycle values="#999,#ccc"}>">
    <td>{$productlist[num]}.price</td>
  </tr>
<{/section}>

<{section}>ループ内でなくても動きます。
作成したリンクページの背景色を交互にするサンプル。
<tr class="<{cycle values="bg1,bg2"}>">
  <td><a href="~">XXXX</a></td>
</tr>
<tr class="<{cycle values="bg1,bg2"}>">
  <td><a href="~">YYYY</a></td>
</tr>
使い道はいろいろとありそうな気がします。


【参照リンク】
Smarty

【関連記事】
Smartyサンプル 1

2010年6月2日

Smartyサンプル 1

【仕事サイトにSmartyの関連記事を書きました】
カラーミーショップのカスタマイズに便利なSmartyを学ぶ (1/2) 
カラーミーショップのカスタマイズに便利なSmartyを学ぶ (2/2)

 
カラーミーショップでは、Smartyと呼ばれるテンプレートエンジンが使用されています。

Smartyでやれること
・独自タグでデータ出力しページ上に表示させる (商品名や価格など。基本中の基本)
・デザインにより近いところでの、条件分岐やループ(JavaScriptでも条件分岐やループはできるがデザインが大変)
・正規表現と置換(regex_replace)が強力
たとえば、商品名を表示させる独自タグ(<{$product.name}>)には、「商品名への付加画像設定」で画像(New画像など)を指定した場合には、HTMLのimgタグがもれなくついてきます。
商品名のみが必要な場合は、
<{$product.name|regex_replace:'/\\<\\/?[^\\>]*\\>/':''}>
とすると、不要なタグ部分をのぞいて取り出せます(商品名によっては必要な部分までとりのぞいてしまいますが)。
そのほか、特定の文字列以降をごっそり消してしまうこともできます(例の場合は■以降を空の文字列に置換している)。
カラーミーには大・小2カテゴリーしかありませんので、商品名にカテゴリー要素を組み込んでおき、正規表現で上手に取り出すという使い方もできます。
<{$product.name|regex_replace:'/■.+/':''}>


Smartyの、あくまでサンプル
・$smarty リクエスト変数(たとえば、URLの”cid=”のあとの文字)などを参照する。例の場合は、商品検索時のカテゴリidを表示します。
<{$smarty.get.cid}>
・assign テンプレート変数を割り当てる。
<{assign var="name" value=$product.name|regex_replace:'/\\<\\/?[^\\>]*\\>/':''}>
<{$name|regex_replace:'/■/':'☆'}>
これでも同じこと(参考)
<{assign var="name" value=$product.name|regex_replace:'/\\<\\/?[^\\>]*\\>/':''|regex_replace:'/■/':'☆'}>
<{$name}>
・fetch コンテンツを読む。ページを読んで、必要な情報を切り出すことも可能です。
<{fetch file="http://~/?mode=srh&cid=&keyword=hoge" assign="res"}>
<{$res|regex_replace:'/\\<\\/?[^\\>]*\\>/':''}>
・strip_tags 変数の修飾子。あとから気づいたんですが、HTMLタグを取り除く機能は、わざわざ正規表現を使用して置換せずとも、はじめからついています(どう考えてもこっちのほうが簡単)。
例の場合は、商品名からHTMLタグを取り除いています。商品登録時に、「商品名への付加画像設定」をしていると、imgタグがつきます(たとえば、New画像など)。
<{$product.name|strip_tags}>
上記の場合はHTMLタグをひとつの空白に置き換えています。
さらに、別の文字列や空白なしにすることもできます(:以降で設定、下例では空白なし)。
<{$product.name|strip_tags:''}>

【参照リンク】
Smarty

【関連記事】
Smartyサンプル 2
ツィートする 2