EC-CUBE2.11のインストール。（文字化け対策）
やっぱり2.11でも文字化けの問題が…。
去年、日本で働く外人さん（Webクリエイター）と話す機会があったので
「日本で仕事をする上で、一番障害になったこと」
を聞いてみたら、予想通り"文字コード"の問題だった。
とりあえず、文字化け回避のカスタマイズメモ。
/data/class/SC_Query.php の79行目付近を
$this->conn->setCharset(CHAR_CODE);
▽
$this->conn->setCharset('utf8');
に変更して…。
/data/module/MDB2/Driver/mysql.phpの539行目付近を
if (!empty($this->dsn['charset'])) {
$result = $this->setCharset($this->dsn['charset'], $connection);
if (PEAR::isError($result)) {
$this->disconnect(false);
return $result;
}
}
▽
$result = $this->setCharset('utf8', $connection);
if (PEAR::isError($result)) {
$this->disconnect(false);
return $result;
}
って感じに変更。
作業は、インストール前に行うこと。
去年、日本で働く外人さん（Webクリエイター）と話す機会があったので
「日本で仕事をする上で、一番障害になったこと」
を聞いてみたら、予想通り"文字コード"の問題だった。
とりあえず、文字化け回避のカスタマイズメモ。
/data/class/SC_Query.php の79行目付近を
$this->conn->setCharset(CHAR_CODE);
▽
$this->conn->setCharset('utf8');
に変更して…。
/data/module/MDB2/Driver/mysql.phpの539行目付近を
if (!empty($this->dsn['charset'])) {
$result = $this->setCharset($this->dsn['charset'], $connection);
if (PEAR::isError($result)) {
$this->disconnect(false);
return $result;
}
}
▽
$result = $this->setCharset('utf8', $connection);
if (PEAR::isError($result)) {
$this->disconnect(false);
return $result;
}
って感じに変更。
作業は、インストール前に行うこと。
EC-CUBEのエディタにTinyMCE + KCFinderを使う。
えっくべの商品登録画面に、TinyMCEを使用。
要は、SmartyのテンプレにTinyMCEの設定をそのまま記述するだけ。
で、全てのtextareaにTinyMCEが適用されないように、editor_selectorを設定する。
tinyMCE.init({
mode : "textareas",
});
これを
tinyMCE.init({
mode : "specific_textareas",
editor_selector : "tiny",//classの名前
});
に書き換えて、適用したtextareaに
<textarea class="tiny" name="main…
って感じでclassを記述すればおｋ。
しかし、アメブロのエディタはTinyMCEに比べるとゴミだな…。
ちなみに、TinyMCEとKCFinderを組み合わせて使うとかなり使い勝手のいいエディタになりますぞ。
僕は、こんな感じで組み込んでます。
～/data/Smarty/template/admin/products/product.tpl
風邪で熱が上がって大変。。。
要は、SmartyのテンプレにTinyMCEの設定をそのまま記述するだけ。
で、全てのtextareaにTinyMCEが適用されないように、editor_selectorを設定する。
tinyMCE.init({
mode : "textareas",
});
これを
tinyMCE.init({
mode : "specific_textareas",
editor_selector : "tiny",//classの名前
});
に書き換えて、適用したtextareaに
<textarea class="tiny" name="main…
って感じでclassを記述すればおｋ。
しかし、アメブロのエディタはTinyMCEに比べるとゴミだな…。
ちなみに、TinyMCEとKCFinderを組み合わせて使うとかなり使い勝手のいいエディタになりますぞ。
僕は、こんな感じで組み込んでます。
～/data/Smarty/template/admin/products/product.tpl
<script type="text/javascript" src="[TinyMCEへのパス]/tiny_mce.js"></script>
<script type="text/javascript">
tinyMCE.init({
// General options
mode : "specific_textareas",
editor_selector : "tiny",
theme : "advanced",
convert_urls: false,
plugins : "safari,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template",
//日本語にします
language : "ja",
//KCFinderの呼び出し
file_browser_callback: 'openKCFinder',
// Theme options
theme_advanced_buttons1 : "image,code",
theme_advanced_buttons2 : "",
theme_advanced_buttons3 : "",
theme_advanced_buttons4 : "",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location : "",
theme_advanced_resizing : true,
// Example content CSS (should be your site CSS)
content_css : "css/content.css",
// Drop lists for link/image/media/template dialogs
template_external_list_url : "lists/template_list.js",
external_link_list_url : "lists/link_list.js",
external_image_list_url : "lists/image_list.js",
media_external_list_url : "lists/media_list.js"
});
//---[KCFinder]---
function openKCFinder(field_name, url, type, win) {
tinyMCE.activeEditor.windowManager.open({
file: '[KCFINDERへのパス]/kcfinder/browse.php?opener=tinymce&type=' + type,
title: 'KCFinder',
width: 700,
height: 500,
resizable: "yes",
inline: true,
close_previous: "no",
popup_css: false
}, {
window: win,
input: field_name
});
return false;
}
//---[KCFinder]---
</script>
風邪で熱が上がって大変。。。
EC-CUBEの構築事例に登録
http://www.ec-cube.net/product/cases/detail.php?id=1673
EC-CUBEの構築事例に登録。。。
サイトの構築日数…３日ｗｗｗ
やっぱ、EC-CUBEはすごいな、と。
こんなサイトが３日で作れてしまうんだから…。
( OSS (MySQL,EC-CUBE) + JQuery Site Template ) + α
で、こうなりました。
EC-CUBEの構築事例に登録。。。
サイトの構築日数…３日ｗｗｗ
やっぱ、EC-CUBEはすごいな、と。
こんなサイトが３日で作れてしまうんだから…。
( OSS (MySQL,EC-CUBE) + JQuery Site Template ) + α
で、こうなりました。
YouTubeの埋め込み動画のZ-indexがうざいので、非表示にする。
YouTubeの動画を埋め込んだページでMediaBoxを使うと、MediaBoxで呼び出したコンテンツより上のレイヤーにYouTube動画がでしゃばってくるので、MediaBoxを呼び出したタイミングで非表示に。
とりあえず、ページの内容はこんな感じ。
HEAD部分に、記述。
<script type="text/javascript">
function setVisibility(id,visible){
document.getElementById(id).style.display = visible ? "block" : "none";
}
</script>
んでもって、消したい要素をこれで囲む
<div id="youtube"></div>
MediaBox.jsの編集。
open: function(_images, startImage, _options) {
options = $extend({…
の部分に
open: function(_images, startImage, _options) {
setVisibility('youtube',false);//iflameを非表示に
options = $extend({…
ってやっておいて、
function close() {…
の中に
setVisibility('youtube',true);//iframeを表示
で終了。
とりあえず、ページの内容はこんな感じ。
HEAD部分に、記述。
<script type="text/javascript">
function setVisibility(id,visible){
document.getElementById(id).style.display = visible ? "block" : "none";
}
</script>
んでもって、消したい要素をこれで囲む
<div id="youtube"></div>
MediaBox.jsの編集。
open: function(_images, startImage, _options) {
options = $extend({…
の部分に
open: function(_images, startImage, _options) {
setVisibility('youtube',false);//iflameを非表示に
options = $extend({…
ってやっておいて、
function close() {…
の中に
setVisibility('youtube',true);//iframeを表示
で終了。
さくらVPSにWebminを入れてみる。。。
一応、プログラマなので、サーバー関係には疎いのですが、サーバーのセットアップくらいは出来るようにならなきゃ…というわけで、さくらのVPSを借りて、セットアップしてみました。
サーバーOSは、さくらVPSデフォルトのCentOSを使用します。
とりあえず、以下のことが出来ればオッケーってことで、
・Webサーバー＆メールサーバーとして使用したい。
・PHPを使いたい。
・データベースにMySQLを使いたい。
・FTPクライアントでアクセスしたい（FFFTPとか）。
とりあえず、こんな感じでしょうか。
サーバー管理は「Webmin」でやっちゃいます。
基本的に、ネットワーク技術者ではないので、めんどくさい設定類はGUIですませたい…ってのが本音。
CUIなんて、MS-DOS以来触ってないので
ってことで、まずは、Webminをインストールです。
・さくらVPSコントロールパネルにログイン→[リモートコンソール]→rootアカウントでログイン。
▽
・下記コマンドでWebminをダウンロード
wget http://jaist.dl.sourceforge.net/sourceforge/webadmin/webmin-1.530-1.noarch.rpm
▽
・下記コマンドでインストール
rpm -ivh webmin-1.530-1.noarch.rpm
▽
・インストールが成功したら、ブラウザでhttp://***.***.***.***:10000にアクセス。
（***.***.***.***はさくらにもらった自分のIPアドレス）
▽
・webminにrootアカウントでログイン
▽
・左メニューの[Webmin]→[Webmin Configuration]で設定変更
→とりあえず[Language]でメニューを日本語に。
これで、webminのインストールは完了です。
次回はApache(Webサーバー)のインストールです。
サーバーOSは、さくらVPSデフォルトのCentOSを使用します。
とりあえず、以下のことが出来ればオッケーってことで、
・Webサーバー＆メールサーバーとして使用したい。
・PHPを使いたい。
・データベースにMySQLを使いたい。
・FTPクライアントでアクセスしたい（FFFTPとか）。
とりあえず、こんな感じでしょうか。
サーバー管理は「Webmin」でやっちゃいます。
基本的に、ネットワーク技術者ではないので、めんどくさい設定類はGUIですませたい…ってのが本音。
CUIなんて、MS-DOS以来触ってないので
ってことで、まずは、Webminをインストールです。
・さくらVPSコントロールパネルにログイン→[リモートコンソール]→rootアカウントでログイン。
▽
・下記コマンドでWebminをダウンロード
wget http://jaist.dl.sourceforge.net/sourceforge/webadmin/webmin-1.530-1.noarch.rpm
▽
・下記コマンドでインストール
rpm -ivh webmin-1.530-1.noarch.rpm
▽
・インストールが成功したら、ブラウザでhttp://***.***.***.***:10000にアクセス。
（***.***.***.***はさくらにもらった自分のIPアドレス）
▽
・webminにrootアカウントでログイン
▽
・左メニューの[Webmin]→[Webmin Configuration]で設定変更
→とりあえず[Language]でメニューを日本語に。
これで、webminのインストールは完了です。
次回はApache(Webサーバー)のインストールです。
さくらのVPS
さくらサーバーのVPSを個人で３つくらい管理しているんですが、今後まだまだ増えてきそうな悪寒。
さくらのVPSはCentOSを使用しているので「 CentOS + Webmin 」の組み合わせで管理してる。
ってか、ネットワーク技術者ではないので、そのあたりのことはよくわからないし。。。
明日あたりから、さくらのVPSを使って、簡単に「Apache + Mysql + PHP」が使える環境をセッティングする方法をメモしていこうと思います。
とりあえず、ローカル環境でXAMMPを使っている人にとっては、必要な情報かと…。
さくらのVPSはCentOSを使用しているので「 CentOS + Webmin 」の組み合わせで管理してる。
ってか、ネットワーク技術者ではないので、そのあたりのことはよくわからないし。。。
明日あたりから、さくらのVPSを使って、簡単に「Apache + Mysql + PHP」が使える環境をセッティングする方法をメモしていこうと思います。
とりあえず、ローカル環境でXAMMPを使っている人にとっては、必要な情報かと…。
EC-CUBEの注文番号。
EC-CUBEの注文番号を変更…で、PDFファイルをいじってみるというのをやりましたが、よくよく考えてみたら自動返信メールのテンプレートも、同じロジックで注文番号を生成しないと注文番号が一致しないジャン！…ということに気づいて、修正。
いろいろと頭につけてみたり。
あとは、お客様の郵便番号やら電話番号を使って、いろんな番号を自動生成して、元からのorder_idと組み合わせて出力。
オリジナルの番号もこれで登録したいなーと思い、データベースをいじっていると…やっちゃいました。
DB Error: constraint violation
[nativecode=1048 ** Column 'order_id' cannot be null]
ん？
order_idがNullでエラー？
そんなわけないでしょ…と思いながらarrDataをdumpしてみたら、確かにNull。
あ、そっか…。
そっちは確かにNullだけど、AUTOINCREMENTで生成されるはずじゃ…？と思ったら、頭に文字をつけて登録したいからってINTからVARCHARに変更してました。
それじゃAUTOINCREMENTになりませんよね。
ということで、新たにカラムを一つ作って、order_idから生成した『***-*******』を保存することに。
data/class/pages/shopping/LC_Page_Shopping_Conplete.php
のfunction lfRegistOrder()を編集…。
$sqlval['新たに作ったカラム'] = 『***-*******』を生成するためのロジック;
ってことで。。。
あまり、data/class/以下のファイルを直接編集するのはよくないそうです。
ただ、勉強不足でClassの使い方がよく分かっていないということもあって、目的のファイルを直接いじるしかないという…。
いろいろと頭につけてみたり。
あとは、お客様の郵便番号やら電話番号を使って、いろんな番号を自動生成して、元からのorder_idと組み合わせて出力。
オリジナルの番号もこれで登録したいなーと思い、データベースをいじっていると…やっちゃいました。
DB Error: constraint violation
[nativecode=1048 ** Column 'order_id' cannot be null]
ん？
order_idがNullでエラー？
そんなわけないでしょ…と思いながらarrDataをdumpしてみたら、確かにNull。
あ、そっか…。
そっちは確かにNullだけど、AUTOINCREMENTで生成されるはずじゃ…？と思ったら、頭に文字をつけて登録したいからってINTからVARCHARに変更してました。
それじゃAUTOINCREMENTになりませんよね。
ということで、新たにカラムを一つ作って、order_idから生成した『***-*******』を保存することに。
data/class/pages/shopping/LC_Page_Shopping_Conplete.php
のfunction lfRegistOrder()を編集…。
$sqlval['新たに作ったカラム'] = 『***-*******』を生成するためのロジック;
ってことで。。。
あまり、data/class/以下のファイルを直接編集するのはよくないそうです。
ただ、勉強不足でClassの使い方がよく分かっていないということもあって、目的のファイルを直接いじるしかないという…。
MediaboxのmbCenterをfixedにする。
なんだか、わけのわからないタイトルになってしまいましたが…(´Д｀)
EC-Cubeのカート処理で「mediaboxadvanced」を導入したのですが、サイトが縦長のためにカート入力中にホイール操作でカート画面が流れてしまいます。
これは…(・A・)ｲｸﾅｲ!!
この動きではコンバージョン率に影響がある…ということで、ちょっとJavaScriptを弄る必要があります。
「mediaboxAdv-1.2.5.js」の"center.setStyles"の前に
document.body.style.overflow = "hidden";
とでも入れてしまいましょう。
こうすれば、スクロールバーを強制的に消すことが出来るので"position: fixed;"と同じ効果があります。
本当は「mediabox….css」の"#mbCenter"に
position: fixed;
を指定したかったのですが、指定してみたら表示が怪しくなってしまったので、今回の方法を取りました。
時間もないので、javascriptを解析するのがめんどくさ…(ry
表示部分のトップ位置 + ( (表示エリアの縦サイズ - MediaBoxの縦サイズ) / 2 )
で表示位置をFixedにすれば良いとは思うのですが…。
いつも「めんどくさい…」が口癖になってますが、プログラマは物臭な方が合ってます。
めんどくさいから、その作業をパソコンにやらせてしまおうという発想にはるわけですから。
EC-Cubeのカート処理で「mediaboxadvanced」を導入したのですが、サイトが縦長のためにカート入力中にホイール操作でカート画面が流れてしまいます。
これは…(・A・)ｲｸﾅｲ!!
この動きではコンバージョン率に影響がある…ということで、ちょっとJavaScriptを弄る必要があります。
「mediaboxAdv-1.2.5.js」の"center.setStyles"の前に
document.body.style.overflow = "hidden";
とでも入れてしまいましょう。
こうすれば、スクロールバーを強制的に消すことが出来るので"position: fixed;"と同じ効果があります。
本当は「mediabox….css」の"#mbCenter"に
position: fixed;
を指定したかったのですが、指定してみたら表示が怪しくなってしまったので、今回の方法を取りました。
時間もないので、javascriptを解析するのがめんどくさ…(ry
表示部分のトップ位置 + ( (表示エリアの縦サイズ - MediaBoxの縦サイズ) / 2 )
で表示位置をFixedにすれば良いとは思うのですが…。
いつも「めんどくさい…」が口癖になってますが、プログラマは物臭な方が合ってます。
めんどくさいから、その作業をパソコンにやらせてしまおうという発想にはるわけですから。
帳票のデータをいじる。。。
EC-Cubeで作成する帳票（PDF）のデータは、以下のphpを書き換えることで可能です。
/data/class/SC_Fpdf.php
例えば、サイトをオープンしたての頃は注文番号がひと桁とかになってしまうので、めちゃくちゃ『売れていない』お店みたいで恥ずかしいです。
いろいろと出来るのですが、とりあえず
$this->lfText(144, 131, $this->arrDisp['order_id'], 10); //注文番号
を
$this->lfText(144, 131, time() . $this->arrDisp['order_id'], 10); //注文番号
に変更して（タイムスタンプを先頭につけてみたりして）カモフラージュするのも一つの手ですね。
帳票に載るデータは
$this->arrDisp['*******']
で取得できるので（何が取得できるのか知りたい場合はクラスファイルを読むか、あるいはデータをvar_dump()してみるのもアリです）、色々な条件によって値を変えるというのもいいかもしれません。
情報の出力は
$this->lfText(125, 85, $text, 8);
こんな形で出力されるのですが、
$this->lfText("左からの位置", "上からの位置", "出力する内容", "フォントサイズ");
という形になっているので、お好みで表示位置を変更することもできます。
弊社の場合、ポイント制度の使用がスタートしていないので『値引き』に関するデータを出力しないようにしています。
ロゴ画像も
//ロゴ画像
$logo_file = PDF_IMG_DIR . 'logo.png';
$this->pdf->Image($logo_file, 124, 46, 40);
ここのデータを差し替えるか、もしくはロゴ画像そのものを差し替えるかして変更してしまいましょう。
簡単なのはロゴ画像を変更することですが、画像を大きく使いたかったりする場合もあるでしょうし、位置を変えたい場合もあるでしょう。
そんな時はやっぱり「SC_Fpdf.php」のソースを弄ってしまうのが一番です。
$this->pdf->Image()
これで画像を埋め込むことが出来ますから、一つだけではなくいくつもの画像を使用することも可能です。
/data/class/SC_Fpdf.php
例えば、サイトをオープンしたての頃は注文番号がひと桁とかになってしまうので、めちゃくちゃ『売れていない』お店みたいで恥ずかしいです。
いろいろと出来るのですが、とりあえず
$this->lfText(144, 131, $this->arrDisp['order_id'], 10); //注文番号
を
$this->lfText(144, 131, time() . $this->arrDisp['order_id'], 10); //注文番号
に変更して（タイムスタンプを先頭につけてみたりして）カモフラージュするのも一つの手ですね。
帳票に載るデータは
$this->arrDisp['*******']
で取得できるので（何が取得できるのか知りたい場合はクラスファイルを読むか、あるいはデータをvar_dump()してみるのもアリです）、色々な条件によって値を変えるというのもいいかもしれません。
情報の出力は
$this->lfText(125, 85, $text, 8);
こんな形で出力されるのですが、
$this->lfText("左からの位置", "上からの位置", "出力する内容", "フォントサイズ");
という形になっているので、お好みで表示位置を変更することもできます。
弊社の場合、ポイント制度の使用がスタートしていないので『値引き』に関するデータを出力しないようにしています。
ロゴ画像も
//ロゴ画像
$logo_file = PDF_IMG_DIR . 'logo.png';
$this->pdf->Image($logo_file, 124, 46, 40);
ここのデータを差し替えるか、もしくはロゴ画像そのものを差し替えるかして変更してしまいましょう。
簡単なのはロゴ画像を変更することですが、画像を大きく使いたかったりする場合もあるでしょうし、位置を変えたい場合もあるでしょう。
そんな時はやっぱり「SC_Fpdf.php」のソースを弄ってしまうのが一番です。
$this->pdf->Image()
これで画像を埋め込むことが出来ますから、一つだけではなくいくつもの画像を使用することも可能です。