投稿日:

EC-CUBE商品ページへのmixiチェックボタン導入方法

ECサイト×ソーシャルメディアpart5

ソーシャルプラグイン最終章、本日は、

EC-CUBE商品ページへのmixiチェックボタン導入方法

をご紹介します。

まずは、下の図をご覧下さい。

EC-CUBEへのmixiチェックボタン導入方法

前回までのFacebook、Twitterのボタンは、コードをコピーするだけで対応が出来ましたが、mixiチェックボタンは少々難易度が上がります。

というのも、mixiは識別キーなるものを取得しなければ、動作がしません。識別キーを取得するために、mixi上でデベロッパー登録が必要になります。

    1. デベロッパー登録

まず、こちらからデベロッパー登録を行います。下記に必須事項を記入します。
[mixi] Developer登録_変更※ログインしたmixiアカウントに紐づきます。

    1. チェックキーの発行

mixi Developer Dashboardにアクセスをしトップメニューから「mixi Plugin」左メニューから「新規サービス追加」をクリックします。
[mixi] 登録サービス一覧 | mixiチェック
利用規約を同意のうえ、必要事項を記入します。
[mixi] 新規サービス追加 | mixiチェック
内容を確認し、「作成する」をクリックします。[mixi] 新規サービス追加 | mixiチェック-1登録が完了したら、識別キーは「こちら」をクリックします。[mixi] 新規サービス追加 | mixiチェック-2

    1. mixiチェックボタンのカスタマイズ

対象URLは、ECサイトのドメインを入力。プロフィール画像表示はレイアウトが崩れてしまうので、チェックを外す。最後にタグ取得ボタンを押すと、下図のようにタグが現れます。
[mixi] EC-CUBEテスト | 登録サービス詳細 | mixiチェック

ここで、注意しなくてはいけないのは、商品詳細ページごとに対象URL設定しなければいけません。また、例によって、下記コードをコピーして頂くと上手くいきます。

<iframe scrolling=”no” frameborder=”0″ allowTransparency=”true” style=”overflow:hidden; border:0; width:120px; height:20px” src=”http://plugins.mixi.jp/favorite.pl?href=http%3A%2F%2F◯◯◯.◯◯<!–{$smarty.server.REQUEST_URI|escape}–>&service_key=△△△&show_faces=false&width=120″></iframe>

◯◯◯.◯◯はECサイトのドメインを△△△は、識別キーを入れてください。
以上で、mixiチェックボタンの発行は完了です。

EC-CUBE商品ページの編集

最後にEC-CUBEへの導入ですが、Ver2.11.1の管理画面からご紹介します。

デザイン管理>PC>ページ詳細設定>商品詳細ページ>編集

の順に辿って頂くと下図のページに行きますので、上記のコードを該当箇所に貼りつけます。

EC-CUBEページ編集

私が記述した箇所は、179行目のtwitterボタンの記載のある部分のすぐ下です。

これで、Facebook、Twitter、mixiと日本における3大ソーシャルメディアのプラグインの導入が完了致しました。

次回以降も、ECサイトとソーシャルメディアを掘り下げていきたいと思います。

投稿日:

スマートフォン対応ECサイト構築のために

2011年に入ってからというもの、一気にスマートフォンブームが到来した気がしております。

ECサイトのスマートフォン対応

は準備出来ておりますか?

実際に、どのくらいスマートフォンが売れているのか?2011年5月10日リリースの2010年度通期国内携帯電話端末出荷概況に詳しく書かれていますが、まとめると下記のようになります。

2010年度通期国内携帯電話端末出荷概況

2010年度実績 フィーチャーフォン 2909万台
スマートフォン 855万台
2011年度予想 フィーチャーフォン 2070万台
スマートフォン 1,820万台

リリース文から、2009年度はスマートフォンの出荷台数が231万台と計算できます。(ほぼiphoneでしょうが…^^;)

iphone発売からものの3年でスマートフォンの出荷台数がほぼ半分のシェアになるという予想が出ています。

個人的には、今年中にはフィーチャーフォンの出荷台数を抜くんじゃないかと予想しています。各キャリアの熱の入れ方が半端ではない。そもそも、2011年で半分になるなんて予想は誰もしていなかった。

とこのように、既にスマートフォンはPC、モバイルに次ぐ、インターネットデバイスとして無視出来ない状態になっています。

ここで、ECサイト構築オープンソースのスマートフォン対応状況を調べてみました。

主要ECオープンソースのスマートフォン対応状況

EC-CUBE LIVE COMMERCE ZENCART OSCOMMERCE
iphone
備考 2.11より標準対応 iphone向けテーマのみ 追加モジュール対応 追加モジュール対応

やはり、国産オープンソースはこういうところ強いですね。

標準でスマートフォン向けのテンプレート編集を用意しております。EC-CUBEは2011年3月23日リリースの2.11からとのことでした。

オープンソースなので、追加のプラグインやモジュールでテンプレートの出し分け対応を行えればよいと思いますが。

 

投稿日:

ドメインキングでLive Commerceインストール出来ない。。。

本日は、Live Commerceのインストールを試みたが残念ながら、ドメインキングでは、インストールが難しいです。

  • Phpのバージョン不一致
  • httpdocs以下にしかファイルをアップロード出来ない

といった辺りから、インストールが出来ません。Zend Frameworkも別途設置をしなければならないし、初級者には難しいです。

ドメインキングの制限ですね。

投稿日:

EC-CUBEインストール手順(2.11)

国産オープンソースECの代表格EC-CUBE(ECキューブ)のインストール手順をご説明します。

まず、このエントリーは以下のことを念頭に書いております。

    • 初級〜中級の方を対象として、FTPソフトやレンタルサーバの管理画面をベースに説明します。(コマンドを叩く作業はしません。)
    • 2011年5月5日時点の正式版Ver2.11.1の説明になります。
    • レンタルサーバは、ドメインキング、PHPは 5.1.6です。その他詳細はドメインキングの機能一覧をご覧下さい。

※6月7日現在、PHPは5.2.17にバージョンアップしました。

  • 手戻りが少ないよう最短ルートでの説明を心掛けています。

EC-CUBEのダウンロード

まずは、下記の公式サイトから最新のZIP版をダウンロードします。

EC-CUBE公式サイト

ダウンロード後、解凍をして下さい。すると、フォルダ名が「eccube-2.11.1」のように、-(ハイフン)の後ろにバージョン名がついた形になるので、「eccube」のみにしておくと今後の運用がしやすくなります。

スクリーンショット_2013_03_17_15_53

EC-CUBEのアップロード

次に、解凍したフォルダをサーバ上にアップロードします。
※ここでは、レンタルサーバを1年間100円キャンペーン中のドメインキングをFTPソフトはMacのTransmitを用いて説明します。
transmitを用いて、レンタルサーバにログイン。ドキュメントルート(httpdocs)直下にアップロードします。

パーミッションの変更

アップロードが終わったら、パーミッション(権限)の変更を行っておきます。
ちょっとややこしいですが、一括してやっておくと楽です。
※以下のディレクトリのパーミッションを→の数値に合わせて下さい。
transmitですと、該当のファイルまたはフォルダを右クリック「情報を見る」でアクセス権の変更部分で修正が出来ます。
その他のFTPクライアントも同様に右クリックメニューに項目があることが多いです。

html/
→777
html/install
→777
html/user_data
→777
html/upload
→777
data/cache
→777
data/class
→777
data/config
→777
data/downloads
→777
data/downlaods/update
→777
data/logs
→777
data/Smarty
→777
data/upload
→777

データベースの作成

ファイルのアップロード、属性の変更が完了したら、インストールを行う前に、データベースを作成する必要があります。
ドメインキングでは、コントロールパネルからデータベースの作成を行う機能があります。(最近のレンタルサーバではほぼこのような機能を持っていると思われます。)
コントロールパネルトップより該当のドメインを選択した次のページでデータベースのアイコンをクリックします。
EC-CUBEインストール手順-Parallels Control Panel
「新しいデータベースの追加」を選択後、データベース名を設定します。ここでは、分かりやすく「eccube_test」とします。
※ちなみに、「eccube」と入力すると既に、ドメインキング上で既に割り当てられているらしくエラーになります。
データベースは、MySQLを選択して下さい。
EC-CUBEインストール手順-Parallels Control Panel DB作成
最後に、「新しいデータベースユーザーを追加」を選択し、ユーザーを作成してデータベースの作成は終了です。
ユーザー名は任意ですが、こちらも分かりやすく「eccube_user」としました。EC-CUBEインストール手順-Parallels Control Panel DBユーザー作成

EC-CUBEのインストール

いよいよインストール作業です。
お使いブラウザで

http://yourdomain/eccube/html/install/

を開きます。
※yourdomainはアップロードしたドメインに合わせて変更して下さい。
インストール開始画面が表示されますので、「次へ進む」をクリックします。
eccube-01
ここで2.EC-CUBEのアップロード時の最後に行ったパーミッションの変更が出来ていると、「アクセス権限は正常です。」と出るので次に進みます。
エラーが出た場合は、文言に従って再設定をして下さい。eccube-02
次に、必要なファイルの生成が自動で行われますので、ここも次へ進むをクリックします。
もし、「コピー失敗」と出る場合、パーミッションの設定が間違っている可能性があるので、パーミッションを再確認してください。
ec-cube_cap_03

サイト設定で必要な項目を埋めます。
Webサーバの設定は基本的に自動で挿入されますが、必要に応じて変更して下さい。ec-cube_cap_04
次にデータベースの設定です。
これは、3.データベースの作成で設定したデータベース名、データベースユーザー名を入力します。
データベースの種類はMySQLです。DBサーバは127.0.0.1のままで結構です。
これはlocalhostと同じく同一サーバ内を意味しています。
※さくらインターネットのレンタルサーバなどは別ドメインが用意されているそうです。
ec-cube_cap_05
データベースの初期化を行います。チェックを入れずに「次へ進む」をクリックして下さい。

ec-cube_cap_06

初期化が成功すると次のような画面が出ますので、次へ進みます。
ec-cube_cap_07

最後に、デバック情報の送信を任意で行います。

ec-cube_cap_08
以上でEC-CUBEインストール手順は終了と思いきや、、、最後に、
「/install/index.php」のインストールファイルは絶対に削除して下さい!
管理画面上部にアラートが出ているうちは、削除出来ていませんよ!
ec-cube_cap_10

これで、EC-CUBEインストール手順は本当に完了となります。
お疲れ様でした。
最初はパーミッションの設定がやや煩雑かと思いますが、慣れるとすんなり行きますよ。

今後は、EC-CUBEのもっと突っ込んだ使い方をエントリーしていきたいと思います。