EC厨房料理人のブログ | EC厨房プログラマーブログ EC-CUBEやWordPressをわかりやすく紹介

プロフィール

EC厨房の料理人（プログラマー）をやらせていただいています。むかしマークアップエンジニアとしてHTML＋CSSもガリガリやっておりました。現在はPHP＋JavaScriptをメインとしてサイトを構築しています。

【EC-CUBEカスタマイズ】おすすめ商品登録数の上限を変更する

おすすめ商品をTOPページに表示できる便利な「オススメ管理」機能ですが、標準では8個までしかおすすめ商品を登録できません。
実はとても簡単にこの登録数を増やすことが出来ます。
しかも、コードをいじる必要もなく管理画面から変更できるのです！

変更は管理画面から！

管理画面「システム設定」の「パラメータ設定」を変更します。
赤文字で「設定値によってはサイトが機能しなくなる場合もありますので、十分ご注意下さい。」と書いてあります。
このパラメータ類を元にしてEC-CUBEが動いているので、確証のないパラメータは操作しないでください。もし操作することになったとしても、変更前の数値を記録しておくことをおすすめします。

おすすめ設定の表示数はどこにあるのかというと、RECOMMEND_NUM というパラメータです。フォームの上側に「オススメ商品表示数」と書いてあります。
※以下画像

標準設定では「8」になっているはずです。これを「10」にしてみましょう。

管理画面「コンテンツ管理」の「オススメ管理」で確認

変更後に「オススメ管理」ページを開くと、今まで8個だったフォームが10個に増えていると思います。実際に登録すると表示も10個まで表示されます。

PHPもHTMLもいじらないで、とても簡単にカスタマイズできます。お悩みの方はぜひお試しください。

2009.03.11 | EC-CUBE, カスタマイズ | コメント (1)

【EC-CUBEカスタマイズ】オリジナルメールを送信する

ECサイトを運営していると、もっとカスタマイズされたメールを出したいと考える人もいるでしょう。
EC-CUBEで独自のメール実装を行う方法をご紹介します。

管理者にメールを飛ばす

これはレポートメールとして使える技です。
例えば、1日の終わりに本日の売上などを送信したり、などにも使えます。

編集するファイルは SC_Helper_Mail_Ex.php

SC_Helper_Mail_Ex.php は /data/class_extends/helper_extends/ の中にあります。
中を開くと解りますが、クラスの定義以外何も書いてません。なぜならば、このファイル自体がカスタマイズのためにあるものだからです。
extends のファイルに追加するだけで用が済むのであれば、メンテナンスのことも考えて出来るだけ、class_extends内のファイルをカスタマイズするように心がけるといいでしょう。

それでは適当にメソッドを追加します。
今回はサンプルですので、商品を受注したら、管理者宛におめでとうメールを送るというどうしようもないものを作ります。
/data/class_extends/helper_extends/SC_Helper_Mail_Ex.php


function sfSendCongratulationMail() {
    // サイト情報を取得
    $objSiteInfo = new SC_SiteInfo();
    // サイト管理者のメールアドレスを送信先に指定
    $to      = $objSiteInfo->data['email01'];
    $subject = "【注文キター！】おめでとう " . date("Y/m/d H:i:s");

    // 以下メール本文 「\n」は改行文字
    $body = "おめでとうございます！\n\nついに収益が上がりますね。";

    $this->sfSendMail($to, $subject, $body);
}

注文完了ページにて、上記メソッドを実行させます。
/data/class/pages/shopping/LC_Page_Shopping_Complete.php


// 91行目あたり
// 完了メール送信
if($order_id != "") {
    $mailHelper->sfSendOrderMail($order_id, '1');
    // ここに追加
    $mailHelper->sfSendCongratulationMail();
}

これでテストで注文すると、キター！ってメールが来ます。
今回のサンプル自体は何の役にも立ちませんが、中身を変更するだけ充分に実用に耐えるものになるでしょう。
シンプルなカスタマイズながら、かゆいところに手を届かせる技だと思います。

2009.02.18 | EC-CUBE, カスタマイズ | コメント (0)

【EC-CUBEカスタマイズ】フォームエラー処理をjQuery Validationでノンストレスに

画面遷移無しでフォームのエラーチェックをする方法をご紹介しましょう。
jQueryプラグインの「Validation」を使うことで簡単に実現できます。

下記サイトのDownloadリンクからダウンロードしてください。
bassistance.de >> jQuery plugin: Validation
jQuery Validationのデモ

こちらのサイトで日本語用エラーメッセージファイルをダウンロードしてください。
真ん中辺りの「messages_ja.js」です。
jQueryでフォームの入力チェックする、jquery.validate.js とエラーの日本語化

通常の使い方ならば上記のサイトを参考にしてもらえれば大丈夫です。
下記ではEC-CUBEの商品コメントフォームにjQuery Validation機能を付け加えてみたいと思います。

Validationのセット

ダウンロードしたValidateionのフォルダの中から下記ファイルを探してください。

  • jquery.js（EC-CUBE付属のものより新しい1.2.6です）
  • jquery.form.js
  • jquery.validate.js

上記3ファイル＋messages_ja.jsを下記ディレクトリに入れます。
/html/user_data/packages/default/js/

テンプレートを修正

EC-CUBEのテンプレートを修正します。
今回適応するのは商品詳細コメントのフォームですのでパスは以下の通りとなります。
/data/Smarty/templates/[テンプレート名]/products/review.tpl

form要素にIDを追加


<form id="form-post" name="form1" method="post" action="<!--{$smarty.server.PHP_SELF|escape}-->">

93行目あたりに下記コードを追加


<!-- ここから -->
<script type="text/javascript" src="<!--{$TPL_DIR}-->js/jquery.js">
<script type="text/javascript" src="<!--{$TPL_DIR}-->js/jquery.form.js">
<script type="text/javascript" src="<!--{$TPL_DIR}-->js/jquery.validate.pack.js">
<script type="text/javascript" src="<!--{$TPL_DIR}-->js/messages_ja.js">

<!-- ここまで -->
<!--{include file="`$smarty.const.TEMPLATE_DIR`popup_footer.tpl"}-->

各フォームのclassに、指定したい条件を入れます。
例えば「投稿者名」は必須入力なので、requiredクラスをinput要素に加えます。
ホームページアドレスの必須項目ならば、urlクラスを追加すればOKです。
最大文字数を指定したければ、maxlengthに値を入れてください。

これで完了です。
サンプルサイトにてデモがあります。お試しください。

なぜAjax的なフォームチェックが必要か

フロント側でバリデーションチェックを行うからといって、バック側を外すわけではなく、実装的には二度手間かもしれません。
しかし、実際に使ってもらえれば解りますが、とてもユーザーフレンドリーなフォームになります。

ECサイトはフォームの打つ量多いので、出来るだけユーザーのストレスを軽減できる仕組みを採用する必要があり、そのためにAjax的なUI（ユーザーインターフェイス）が必要になってくるのです。

詳しいドキュメントはこちら。

2009.02.04 | EC-CUBE, カスタマイズ | コメント (0)

商品画像のポップアップをお洒落に！「FancyBox」

EC-CUBEでは、任意で拡大サイズの商品画像をアップロードすることが出来ます。
アップされた画像は商品詳細ページから、ポップアップで見ることができます。
このポップアップをオシャレでクールなものに変えることで、ユーザーに与える印象も良くなることも間違いない！？

まずはjQueryの最新版をダウンロード

EC-CUBEもjQueryを使っていますが、バージョンが古いようです。
最新版をダウンロードしましょう。

jQuery 1.3.1 - Google Code

もとからあるjQueryファイルを上書きします。
※私が上書きして確認した限りでは問題は起きませんでした。不安な方は別名で保存して使用してください。

標準だと以下のパスにあります。
/html/user_data/packages/default/js/jquery.js
これを上書きします。

FacyBoxのダウンロード

次にfancyboxのダウンロードを行います。

http://fancy.klade.lv/
※右上のZIPをダウンロードしてください。

解凍したらfancyboxのディレクトリごと、default以下の場所にコピーしてください。
/html/user_data/packages/default/fancybox/

Smatyテンプレートの書き換え

jQueryは他の場所でも使えるので、テンプレート側に加えてしまいましょう。
下記のテンプレートファイルを開きます。
/data/Smarty/templates/default/site_frame.tpl


<script type="text/javascript" src="<!--{$TPL_DIR}-->js/site.js">
<script type="text/javascript" src="<!--{$TPL_DIR}-->js/jquery.js"><!-- これを追加 -->
<title><!--{$arrSiteInfo.shop_name|escape}-->/<!--{$tpl_title|escape}--></title>

商品詳細ページを書き換え（FancyBoxの追加）

商品詳細ページは管理画面のデザイン管理から書き換えます。
「デザイン管理」->「商品詳細ページ」->「メイン編集」

下記コードを頭の方に加える。


<link rel="stylesheet" href="<!--{$TPL_DIR}-->fancybox/fancy.css" type="text/css" media="screen">
<script type="text/javascript" src="<!--{$TPL_DIR}-->fancybox/jquery.fancybox-1.0.0.js">
<script type="text/javascript" src="<!--{$TPL_DIR}-->fancybox/jquery.pngFix.js">

<!–★画像★–>の下あたり。


<!--★画像★-->
<a href="<!--{$arrFile[$large_key].filepath}-->"><!-- リンク先を変更 -->
    <img src="<!--{$arrFile[$key].filepath}-->" width="<!--{$arrFile[$key].width}-->" height="<!--{$arrFile[$key].height}-->" alt="<!--{$arrProduct.name|escape}-->" class="picture" />
</a>
<p>
    <!--★拡大する★-->
   <a href="<!--{$arrFile[$large_key].filepath}-->"><!-- リンク先を変更 -->
      <img src="<!--{$TPL_DIR}-->img/products/b_expansion.gif" width="85" height="13" alt="画像を拡大する" name="expansion01" id="expansion01" />
   </a>
</p>

<!–拡大写真がある場合ここから–>のしたあたり。


<!--{if $arrFile[$lkey].filepath != ""}-->
<a href="<!--{$arrFile[$lkey].filepath}-->"><!-- リンク先を変更 -->
<!--{/if}-->
<!--サブ画像-->
  <img src="<!--{$arrFile[$key].filepath}-->" alt="<!--{$arrProduct.name|escape}-->" width="<!--{$smarty.const.NORMAL_SUBIMAGE_WIDTH}-->" height="<!--{$smarty.const.NORMAL_SUBIMAGE_WIDTH}-->" />
<!--{if $arrFile[$lkey].filepath != ""}-->
</a>
<p>
  <a href="<!--{$arrFile[$lkey].filepath}-->"><!-- リンク先を変更 -->
    <img src="<!--{$TPL_DIR}-->img/products/b_expansion.gif" width="85" height="13" alt="画像を拡大する" />
  </a>
</p>
<!--{/if}-->

画像を挟む<A>タグを既存のものから、
<a href=”<!–{$arrFile[$lkey].filepath}–>”>
に書き換えるだけです。

これでファンシーでクールな商品画像ポップアップに変わりますよ。
ぜひお試しください。

2009.01.28 | EC-CUBE, カスタマイズ | コメント (0)

バランスの良い配色のサンプルを取得できる - 『Adobe Kuler』

デザインの要はなんと言っても配色。
どれほど優れたアイコンやレイアウトを駆使しても、色合いを間違えたら醜くなるものです。

そこでAdobe公式のカラーチャート集を利用しましょう。
Adobe Kuler（アドビ クーラー）

ASCII.jpにも詳細な記事が掲載されています。
もう配色には困らない！「Adobe Kuler」

どうやって使うのか？

  • カラーチャートのRGB値をコピペで使う
  • カラーテーマをダウンロードしてPhotoShopに取り込む
  • 写真から自動でカラーチャートを作成させる

などの機能があります。

自分でサービスを作れるけれど、デザインがしょぼくて使ってくれない！
なんて経験のあるエンジニアの方には重宝することは間違いありません。
以下のような安全策でオリジナルテンプレートを崩壊させない方法がオススメです。

使用するフリーテンプレートも、色数の少ないものがいいでしょう（参考）。

デザインを助けるWEBサービスが充実してきたのは、自分みたいなプログラマーにはうれしいです。
人間見た目が肝心なので、少しでもマシになるのであれば、どしどし活用していましょう。

2009.01.22 | WEBサービス, お役立ちツール | コメント (0)

WordPressを携帯対応にするプラグイン「ktai_style」

携帯電話でWordPressを見ると、CSSが外れた状態のページが表示されると思います。
大きな画像などを使っていなければ、これでも問題ないのですが、もしヘッダーにサイズの大きい画像があったりすると、メモリ不足で全てが表示されなかったりします。

そこで携帯からのアクセスに対して、携帯用のスタイルで表示するプラグイン「ktai_style(携帯対応プラグイン)」です。

ダウンロード 安定版 ver1.47: ktai_style147.tar.bz2 (248.3 KB)

概要

サイトによると以下のようなことが可能になります。

  • 携帯電話で閲覧すると軽量化したサイト表示を行います。(フロントページのみならず、アーカイブページ、個別エントリーの URI も対象)
  • ページ容量が大きい場合、端末に応じてページ分割を行います (5KB〜50KB ごと)。
  • 要所要所で、携帯電話に応じた絵文字を使用しています (数字・矢印・時計・顔など)。
  • コメントや投稿本文に絵文字が使えます (設定変更が必要)。携帯電話での閲覧時は各社に応じた絵文字に変換し、PC やスマートフォンでの閲覧時はテキストに置換して表示します。

導入方法

  1. プラグインをダウンロードしたら、解凍します。
  2. 携帯からブログ管理をしないのであれば、admin フォルダを削除します（推奨）。
    理由： adminフォルダがあるとフッターに「ログイン」リンクが表示されてしまいます。あまりよろしくありません。
  3. /wp-content/plugins/ に ktai_style のフォルダごとアップロードしてください。
  4. PCから管理画面にログインし、プラグインを有効にします。

サイトをに携帯からアクセスしてください。携帯用のテーマで表示されているはずです。

注意点

PHP5対応です。PHP4のサーバでは使えません。

カスタマイズ

テーマはデフォルトで４つほどあります。全ては /wp-content/ktai_style/themes/ の中にあるので、自由にカスタマイズ、及び追加することが出来ます。

携帯によるインターネット利用者はPCからの利用者数とほぼ同じといわれています。携帯からの集客が多いECサイトならば、「ktai_style」を導入したブログを使うことで、より多くの集客機会を得ることが出来るのではないでしょうか。

2009.01.07 | wordpress, ブログ作成 | コメント (0)

mixi Platformをご存知でしょうか

日本最大のSNSと言えばmixi(ミクシィ)です。
そのmixiがGoogleのOpenSocialというプロジェクトに参加することを契機に、mixi Platformなるものを立ち上げました。

mixi Platformで何が出来るのか

今までmixiのユーザーはmixiが用意したアプリを使っていました。
mixi PlatformではOpenSocialの技術を使ってこれを開発者に公開しよう、というものです。
開発者はmixiのデータを使って、新しいアプリケーションを追加することができます。
「マイミク占い」という架空のアプリケーションの例がサイトに掲載されています。
mixi Developer Center (ミクシィ デベロッパーセンター) » 利用イメージ

最近日本に上陸したアメリカのSNS『FaceBook』では、人気のアプリであれば爆発的なアクセスが稼げてしまうこともあるそうです。

Facebookではサクッと作って出したアプリが3日で100万ユーザとかいうことが普通に起きているらしく、石塚さんいわく「そういうヒット作を作ったら、RockYouがン千万円で買い取るよ」だそうです。気合い入りますね。:)

Railsでゼロから作るFacebookアプリ開発:江島健太郎 / Kenn’s Clairvoyance - CNET Japan

今後は自社サービスや製品を、SNS内でのアプリケーションを通じてユーザーにアピールするのも、有効な手段のひとつとなるでしょう。うまくやれば新しい収益モデルも生み出せるかもしれませんね。

2008.12.24 | WEBサービス | コメント (0)

最新のwordpress2.7日本語版がリリースされました！

新しいWordPressです。今までのバージョンとは大きく変わっているようです。

WordPress2.7
WordPress | 日本語

ユーザーインターフェイス（UI）の大幅な変更

今までのUIに慣れていた方にはとっつきにくいかもしれません（私はそうでした）。
しかし使い慣れてしまえばもう戻れないくらい使いやすいのだとか。

(インターフェースの変更の際によくあることですが、慣れるまでに少し時間がかかるかもしれません。でもあなたも少したったら管理画面をすいすいと飛び回っていることでしょう。最初この変更を嫌っていた人たちも、数日後には「今までどうやってたんだろう？」と思うようになっていましたから。)

WordPress | 日本語 » WordPress 2.7 “コルトレーン”

いくつかの新機能

  • クイック投稿
    わざわざ投稿画面に行かずに、ダッシュボードから簡単に投稿できます。
  • プラグインの直接インストール
    「ダウンロード->解凍->FTPアップロード->有効」といった今までの面倒な手順は不要です。
  • 指定した投稿を常に先頭に表示
    これは地味に便利です。
    特定の分野に特化した期間限定のブログなどでは目次のエントリーを配置しておく、なんてことも出来そうです。

これだけではありません。
今までWordPressを管理していた者からすると、本当にありがたい機能が追加されています。

皆さんが自分や友達のブログをアップグレードするのにどれだけうんざりしているかを聞いて、最新版が公開されたら自動的に通知する機能とビルドインアップグレード機能を組み込みました。これで、準備ができたらクリック一つで自動的にファイルをダウンロードし、インストールし、アップグレードすることができるようになりました。

WordPress | 日本語 » WordPress 2.7 “コルトレーン”

これでアップデートも管理画面から出来る！
すばらしいです。
この機会に皆さんも、ビジネスブログなどを始めてみてはいかがでしょうか。

2008.12.17 | wordpress, ブログ作成 | コメント (0)

ブログにソーシャルブックマークのリンクを設置しよう

有名なブロガーサイトなどではよく、

のようなアイコンが並んでいるのを見かけます。

このアイコンはYahoo!ブックマークやはてなブックマークといったソーシャルブックマークへのリンクです。
このリンクがあると、

  1. 記事を読んで「これは参考になった！」と思ったとする。
  2. もし自分の使っているブックマークのリンクがあればその場ですぐに登録できる。
  3. ブックマークに登録されると、「リンクが増える」「さらに多くの人の目に届きやすくなる」といった利点を享受できる。
  4. そしてアクセスアップ！

という効果が生まれます。

ブックマークリンクの作り方

大抵のソーシャルブックマークサービスではブログの設置方法を載せているのでそちらを参考にしましょう。
Yahoo!ブックマークYahooブックマークアイコンの設置方法
はてなブックマークアイコンの設置方法
livedoorクリップlivedoorクリップアイコンの設置方法

検索をすれば以下のブログのようにソースをコピペできたりします。
ブックマークに追加するリンク（Yahoo!/Google 対応） | 住 太陽のブログ

また複数のソーシャルブックマークを簡単にまとめて設置できるサービスもあります。
面倒くさがりな方はこちらがいいかもしれません。
AddClips - ソーシャルブックマーク＆RSSボタン統合サービス

もちろんこれらリンクを設置したからといってアクセスがアップするわけではありません。
「面白い」「参考になる」と思えるような記事を書けるよう努力することが肝心です。

2008.12.10 | お役立ちツール | コメント (0)

フリーのデザインテンプレートを活用しよう

こんにちは、EC厨房料理人です。
マークアップやプログラミングは型どおりに作ればそれなりのモノが出来上がります。
しかしデザインとなるとなかなか納得のいくものは出来上がりません。
己のセンスのなさを呪いたくなります。

自分に力がないと思ったら、いっそ諦めましょう。
今回は、フリーのデザインテンプレートを紹介します。
WordPressのテーマがそこらにあると以前書きましたが、フリーのCSSレイアウトテンプレートもゴロゴロ落ちています。
ただし探すのにもコツがあって、「css free template」と英語で検索してください。
海外にはこういうのが豊富みたいですね。

以下のテンプレートはここから見つけました。
デザインの出来ないプログラマーも、デザイン見習いのデザイナー１年生にも参考になると思います。

http://www.freecsstemplates.org/
以下、適当に選んだCSSテンプレート。

2008.12.02 | CSS, テンプレート集 | コメント (1)
« 前のページ

TOPに戻る