Live Commerce for mobile

出典: Live Commerceドキュメント

Live Commerce for mobile プラグインはLive Commerceを携帯端末から専用のテーマで閲覧することができるLive Commerceのテーマです。


目次

インストール方法

  1. Live Commerceストアからmobile.zip というファイルをダウンロードしデスクトップ上に保存して解凍します。

解凍ソフトはこちら

  1. 解凍すると、[mobile]と[theme_mobile]という２つのフォルダが表示されます。
  2. mobileフォルダを /公開ディレクトリ(public_html)/resources/plugin/GP/ にフォルダごとアップロードします。
  3. theme_mobile フォルダを /公開ディレクトリ(public_html)/resources/c_media/themes/ にフォルダごとアップロードします。
  4. 以上でインストールは完了です。


プラグインを有効化する

  1. Live Commerceの管理画面にログインし、機能管理　>　共通プラグイン　をクリックします。
  2. 携帯サイトプラグイン が一覧にあることを確認して、有効化 をクリックしてプラグインを有効化します。
  3. ページ設定 > 携帯サイト設定プラグイン　をクリックして、設定を開始します。
有効化をクリックして携帯プラグインを有効化します
有効化をクリックして携帯プラグインを有効化します

設定

携帯サイトの運用に関する設定を行います。

デザイン設定

管理画面　>　ページ管理　>　携帯サイトプラグイン　をクリックし携帯専用テーマに関する体裁についての設定を行います。

各タブをクリックして設定を行います
各タブをクリックして設定を行います


デザインの設定はどちらかといえば、実機で確認しながら行うのが一番ですが、実機が手元にない場合はFireFoxのアドオンとしてリリースされているUser Agent Switcherをインストールして、ブラウザのUser Agentを携帯用に偽装してカタログのURLにアクセスすれば、携帯用の表示に簡単に切り替わります。携帯シミュレータを利用するよりも確認しやすいと思います。


FireFoxのユーザーエージェントを変更する方法

User Agent Switcherをインストールしたら、このページからソフトバンクのユーザーエージェントをどれでもいいので取得して、User Agent Switcherに新しくSoftbankを追加しておきましょう。

どれでもいいので、ソフトバンクのサイトからユーザーエージェントをコピーします
どれでもいいので、ソフトバンクのサイトからユーザーエージェントをコピーします
コピーしたユーザーエージェントを登録します
コピーしたユーザーエージェントを登録します
ブラウザのユーザーエージェントを携帯（SoftBank）に変更します
ブラウザのユーザーエージェントを携帯（SoftBank）に変更します


ページ設定

携帯専用のコンテンツを作成します。デザイン設定同様に、コンテンツを作成しながらブラウザで確認して作成しましょう。

  • 共通フッター - 全ページで共通して表示される部分です。HTMLタグを利用して編集できます。
  • トップページ - トップページのみで表示される部分です。
  • フリーページ1～10 - フリーページは携帯サイトのページ下部に共通して表示される部分です。リンク名と本文を記入できます。
フリーページが表示される部分
フリーページが表示される部分


フリーページのURLは　http://[ドメイン名]/plugin/view/_action/mobile/_f/pageフリーページ番号 です。

例）フリーページ5のリンク先は http://[ドメイン名]/plugin/view/_action/mobile/_f/page5 となります。


メール設定

携帯で注文したときに送信されるメール本文を設定できます。 あらかじめ置換可能な変数がセットされています。携帯の特徴として改行位置が端末ごとに異なる可能性があるため、文章は改行しないようにしましょう。


決済・配送

携帯専用の決済方法と配送方法、利用するテーマを指定できます。 利用するものにチェックを入れます。

携帯専用のプラグインを作成する場合は、決済プラグイン、配送プラグインの頁をそれぞれ参照してください。


その他

  • アクセス対象のユーザーエージェント - このフォームにセットしたた文字列を含むユーザーエージェントをこのプラグインは対象にテーマを切り替えます。
  • 自動ログインの有効日数 - 携帯端末に個別に割り当てられる契約者固有IDを取得し、一度ログインをした日から起算して、2回目以降の訪問時にログインユーザIDの入力を省略することができる期間を指定します。PCでいうCookieの代わりに利用するものです。


携帯テーマ内で利用できる関数

携帯テーマで利用できる共通関数を紹介します。

MobileSiteAdmin::getMobileTextBg(定数)

ページのタイトルを背景色付で表示します。

使い方 

<?php echo MobileSiteAdmin::getMobileTextBg(TEXT_CREATE_GUEST_ACCOUNT); ?>

出力結果 

<table width="100%" bgcolor="#c9e1f4"><tr><td align="left"><strong>ｱｶｳﾝﾄの作成</strong></td></tr></table>

背景色の色番号はデザイン設定で指定したタイトルの背景色が適用されています。


mobileDesign('hrColor')

罫線を表示します。

使い方 

<?php echo mobileDesign('hrColor') ; ?>

出力結果 

<hr size="1" color="#2E10A3"/>

罫線の色番号はデザイン設定で指定した水平線色が適用されています。


mobileDesign('mobileLogo')

携帯サイト用のロゴを表示します。

使い方 

<?php echo mobileDesign('mobileLogo') ; ?>

出力結果 

<div align="center"><a href=""><img src="resources/plugin/GP/mobile/logo.gif" alt=""/></a></div>


mobileDesign('charset')

携帯サイト用の文字コードを返します。

使い方 

<?php echo mobileDesign('charset') ; ?>

出力結果には管理画面で指定した文字コードが返ります。（例：shift_jis)


mobileDesign('mobileColorDesign')

携帯サイト用の文字コードを返します。

使い方 

<body <?php echo mobileDesign('mobileColorDesign') ; ?>>

出力結果 

<body bgcolor="#F2FCFF" text="#000000" link="#0000FF" vlink="#6600FF" alink="#FF0000">

出力結果には管理画面で指定した背景色、テキスト色、リンク通常色、リンクアクティブ色、リンク訪問済色が返ります。


カスタマイズ

Live Commerce for mobile を利用したカスタマイズ方法について説明します。

キャリア別にデザインをCSSで定義したい

テーマファイルにある includes/header.php 27行目付近にある　<link href="<?php echo ... の行を下記のソースコードに置き換えます。 

<?php
$UA = $_SERVER{'HTTP_USER_AGENT'};
if (substr_count($UA,"DoCoMo")) {
  echo '<link href="'. $this->theme. 'css/DoCoMo.css" rel="stylesheet" type="text/css" />' ;
} else if (substr_count($UA,"SoftBank")) {
  echo '<link href="'. $this->theme. 'css/SoftBank.css" rel="stylesheet" type="text/css" />' ;
} else if (substr_count($UA,"UP.Browser")) {
  echo '<link href="'. $this->theme. 'css/au.css" rel="stylesheet" type="text/css" />' ;
}
?>

DoCoMo.css、SoftBank.css、au.css　ファイルをcssフォルダ内に新規作成し、スタイルを定義します。


絵文字に対応させたい

残念ながら絵文字には現在対応できておりません。 別途、絵文字変換用のプログラム を実装することで対応可能になります。


多言語に対応させたい

テーマフォルダ内にある lang フォルダに標準でzh.php(簡体字）、zh-TW.php（繁体字）、en.php が含まれています。これらのファイルにja.php に記述されているテキストをすべてコピーして各言語に翻訳します。


言語切り替え用のフォームを表示するには、表示させたいテーマファイル内に以下のソースを追加します。 

<?php echo c::executeCacheForFunction('language_box', 'c::getLanguage' , array(Zend_Registry::get('current_url'), c::getLang())); ?>


Android携帯に対応させたい

携帯用のプラグインとテーマをリネームして、Android携帯専用のテーマを作成されることをお勧めしています。基本的にはテーマとプラグインをそれぞれコピーし、テーマをAndroid用に再コーディングするだけです。


（注意！）下記の実行手順はプログラムの知識がないと以下の作業はできませんので、あらかじめ自己責任の上で行ってください。

  1. theme_mobileテーマフォルダをリネームし、theme_Android　とする。
  2. theme_Android/config.php を開きクラス名を theme_Android　に変更する。
  3. mobileプラグインフォルダをリネームし、android とする。
  4. mobileプラグインフォルダを開き　携帯の文字列をAndroidに一括置換する。
  5. mobileプラグインフォルダを開き　mobileの文字列をandroidに一括置換する。
  6. androidフォルダを /公開ディレクトリ(public_html)/resources/plugin/GP/ にフォルダごとアップロードする。
  7. theme_Android フォルダを /公開ディレクトリ(public_html)/resources/c_media /themes/ にフォルダごとアップロードする。
  8. 管理画面　>　機能管理　>　共通プラグイン　よりAndroidのプラグインを有効化し携帯の時と同様の設定を行います。
  9. プラグイン内にあるその他の設定で、ユーザーエージェントにアンドロイド携帯の文字列（Android）を入力してください。

※実装確認はとったわけではございませんので、実行に際しては自己責任の上で行ってください。


決済の対応状況

Live Commerceに標準実装されるクレジットカード決済、コンビニ決済が標準で携帯にも対応しておりますので、PC用として決済サービスをお申込みいただければ携帯にも自動的に適用されるようになっております。

※ 各決済代行サービスは、別途、各事業者と個別に契約が必要です。

よくある質問

カバーしているキャリアを教えてください。
ドコモ、ソフトバンク、AUの3キャリアに対応していますが、全ての機種で表示できることを保証するものではありません。
"http://doc.live-commerce.com/index.php/Live_Commerce_for_mobile" より作成