|
2012年10月26日 (金) | 編集 |
前回の「EC-CUBEの郵便番号をDBに10秒で登録する（タイムアウト対策に有効？） 」では、
MySQLに即行で郵便番号データをDBに入れる技を紹介してみたが、微妙な問題が残っている。
DBに郵便番号データを入れると、DBのほとんどが郵便番号データで
埋め尽くされてしまうのだ…。
DBのバックアップを取り、その中身を見ても9割以上が
郵便番号データだったりして、ショックを受ける。
「うちのECサイト、売れてねえなぁ。。。」
そのうちバックアップ取るのも億劫になってくる。
そもそも何故DBに入れないと行けないのか？
そこにCSVがあるじゃん、的な感じ。
ということで、CSVから検索する版に対応させてみた。
もちろんDBから検索した方が圧倒的に効率はいいのは分かるが、
DBに入れるだけの価値があるかは、商売の繁盛次第かも知れない。
私の今はもう古いCore2Duo開発サーバでも、ロリポップ！のロリポプラン（月額263円～）でも、
CSVの一番最後のデータを検索した場合においても1秒位内には検索できています。
これでもう十分でしょう。
MySQLもPostgreSQLも関係ないです。
data/class_extends/util_extends/SC_Utils_Ex.php
というファイルがあるので、このファイルの
class SC_Utils_Ex extends SC_Utils {
と
}
の間に、
function sfGetAddress($zipcode) {
の関数を入れて下さい。
こちらのファイルになります。（都合上、拡張子を.txtに変更しています）
（右クリックでファイルに保存して下さい）
動作検証1（自分の開発サーバ）
EC-CUBEバージョン … 2.12.2
PHPバージョン … PHP 5.4.2
動作検証2（ロリポップ！）
EC-CUBEバージョン … 2.12.2
PHPバージョン … PHP 5.2.17
MySQLに即行で郵便番号データをDBに入れる技を紹介してみたが、微妙な問題が残っている。
DBに郵便番号データを入れると、DBのほとんどが郵便番号データで
埋め尽くされてしまうのだ…。
DBのバックアップを取り、その中身を見ても9割以上が
郵便番号データだったりして、ショックを受ける。
「うちのECサイト、売れてねえなぁ。。。」
そのうちバックアップ取るのも億劫になってくる。
そもそも何故DBに入れないと行けないのか？
そこにCSVがあるじゃん、的な感じ。
ということで、CSVから検索する版に対応させてみた。
もちろんDBから検索した方が圧倒的に効率はいいのは分かるが、
DBに入れるだけの価値があるかは、商売の繁盛次第かも知れない。
私の今はもう古いCore2Duo開発サーバでも、ロリポップ！のロリポプラン（月額263円～）でも、
CSVの一番最後のデータを検索した場合においても1秒位内には検索できています。
これでもう十分でしょう。
MySQLもPostgreSQLも関係ないです。
data/class_extends/util_extends/SC_Utils_Ex.php
というファイルがあるので、このファイルの
class SC_Utils_Ex extends SC_Utils {
と
}
の間に、
function sfGetAddress($zipcode) {
の関数を入れて下さい。
こちらのファイルになります。（都合上、拡張子を.txtに変更しています）
（右クリックでファイルに保存して下さい）
動作検証1（自分の開発サーバ）
EC-CUBEバージョン … 2.12.2
PHPバージョン … PHP 5.4.2
動作検証2（ロリポップ！）
EC-CUBEバージョン … 2.12.2
PHPバージョン … PHP 5.2.17
2012年10月24日 (水) | 編集 |
ソースコードを綺麗に表示する、というのが謳い文句のsyntaxhighlighterだが、
正直、表示が遅すぎる。
これでは、せっかくブログに来ていただいたお客さんも逃げてしまうというものだ。
そこで何か代わりになるものがないか探していたら、CodeMirrorなるものを見つけた。
本来、CodeMirrorは、エディタ機能を提供するものなのだが、
これが、syntaxhighlighterの代わりに使えてしまうのだ。しかも高速。
やり方は簡単で、下記の通り。
なお下記は、圧縮したJSを使用する場合のやり方。
圧縮しない場合は、個別のモードファイルを読み込むこと。圧縮したJSは、
http://codemirror.net/doc/compress.html
から、DLできる。
「codemirror.js」「htmlmixed.js」「css.js」 「javascript.js」「xml.js」を選択してDLすればOKだ。
なお、このブログのCSSの影響か、IEだと縦スクロールが入ってしまうが、本来は入らない。
本家オプションのざっくり日本語訳できたら、また公開しようと思う。
正直、表示が遅すぎる。
これでは、せっかくブログに来ていただいたお客さんも逃げてしまうというものだ。
そこで何か代わりになるものがないか探していたら、CodeMirrorなるものを見つけた。
本来、CodeMirrorは、エディタ機能を提供するものなのだが、
これが、syntaxhighlighterの代わりに使えてしまうのだ。しかも高速。
やり方は簡単で、下記の通り。
なお下記は、圧縮したJSを使用する場合のやり方。
圧縮しない場合は、個別のモードファイルを読み込むこと。圧縮したJSは、
http://codemirror.net/doc/compress.html
から、DLできる。
「codemirror.js」「htmlmixed.js」「css.js」 「javascript.js」「xml.js」を選択してDLすればOKだ。
なお、このブログのCSSの影響か、IEだと縦スクロールが入ってしまうが、本来は入らない。
本家オプションのざっくり日本語訳できたら、また公開しようと思う。
2012年10月22日 (月) | 編集 |
EC-CUBEで、郵便番号の自動入力ができるように、予め管理者画面から
郵便番号を登録するようになっているが、郵便番号データが12万件以上
あるせいで、これがなかなか終わらない。
以前のバージョンだと、管理画面の「郵便番号DB登録」メニューを押した瞬間、
いきなりDB登録が始まるという、やや恐ろしい仕様だったが、
現在は、インポート専用の画面が表示され、「自動登録」「DB手動登録」「削除」
を選べるようになっている。
だが、この「自動登録」が、なかなか終わらない。カップラーメンが1丁出来上がってしまうほどだ。
そこで、この郵便番号DB登録を即行で終わらせるプログラム（ってほどではないけど）
を作りましたので、置いておきます。
（EC-CUBEと同じライセンスのGPLライセンスということで、何かあっても無保証ということで）
オリジナルのEC-CUBEが、1件1件データを登録するのに対して、
こちらの改訂版は、ある程度のデータをまとめてから登録するので、
処理が高速化されています。
以下の3つの環境でしか動作確認していませんので、ご了承下さい。
しかも、MySQLのみにしか対応していません。（時間が取れたら、PostgreSQL版も…）
1．自分の開発サーバ
EC-CUBEバージョン … 2.12.2
PHPバージョン … PHP 5.4.2
DBバージョン … MySQL 5.0.95-log
登録時間 … 8秒
2．ロリポップ！（ロリポプラン）
EC-CUBEバージョン … 2.12.2
PHPバージョン … PHP 5.2.17
DBバージョン … 5.1.59-community-log
登録時間 … 11秒
3. WebARENA SuiteX
EC-CUBEバージョン … 2.12.2
PHPバージョン … PHP 5.1.6
DBバージョン … MySQL 5.1.36-community-log
登録時間 … 9秒
こちらのファイルを右クリックして保存して、
data/class_extends/page_extends/admin/basis/LC_Page_Admin_Basis_ZipInstall_Ex.php
と置き換えて下さい。（元のファイルはバックアップ取っておいて下さい）
（.phpの拡張子がアップできないので、.txtに拡張子を置き換えています）
置き換えたら、「自動登録」ボタンを押して終了です。
以下、注意事項も確認下さい。
・IEだと、最後の「完了しました。」が表示されないようです。
・このプログラムは、「DB手動登録」の方も置き換えてしまいます。ですので、使い終わったらバックアップファイルで元に戻しておいて下さい。
・あまり貧弱なサーバだと、上記の通り行きませんのでご了承を。
郵便番号を登録するようになっているが、郵便番号データが12万件以上
あるせいで、これがなかなか終わらない。
以前のバージョンだと、管理画面の「郵便番号DB登録」メニューを押した瞬間、
いきなりDB登録が始まるという、やや恐ろしい仕様だったが、
現在は、インポート専用の画面が表示され、「自動登録」「DB手動登録」「削除」
を選べるようになっている。
だが、この「自動登録」が、なかなか終わらない。カップラーメンが1丁出来上がってしまうほどだ。
そこで、この郵便番号DB登録を即行で終わらせるプログラム（ってほどではないけど）
を作りましたので、置いておきます。
（EC-CUBEと同じライセンスのGPLライセンスということで、何かあっても無保証ということで）
オリジナルのEC-CUBEが、1件1件データを登録するのに対して、
こちらの改訂版は、ある程度のデータをまとめてから登録するので、
処理が高速化されています。
以下の3つの環境でしか動作確認していませんので、ご了承下さい。
しかも、MySQLのみにしか対応していません。（時間が取れたら、PostgreSQL版も…）
1．自分の開発サーバ
EC-CUBEバージョン … 2.12.2
PHPバージョン … PHP 5.4.2
DBバージョン … MySQL 5.0.95-log
登録時間 … 8秒
2．ロリポップ！（ロリポプラン）
EC-CUBEバージョン … 2.12.2
PHPバージョン … PHP 5.2.17
DBバージョン … 5.1.59-community-log
登録時間 … 11秒
3. WebARENA SuiteX
EC-CUBEバージョン … 2.12.2
PHPバージョン … PHP 5.1.6
DBバージョン … MySQL 5.1.36-community-log
登録時間 … 9秒
こちらのファイルを右クリックして保存して、
data/class_extends/page_extends/admin/basis/LC_Page_Admin_Basis_ZipInstall_Ex.php
と置き換えて下さい。（元のファイルはバックアップ取っておいて下さい）
（.phpの拡張子がアップできないので、.txtに拡張子を置き換えています）
置き換えたら、「自動登録」ボタンを押して終了です。
以下、注意事項も確認下さい。
・IEだと、最後の「完了しました。」が表示されないようです。
・このプログラムは、「DB手動登録」の方も置き換えてしまいます。ですので、使い終わったらバックアップファイルで元に戻しておいて下さい。
・あまり貧弱なサーバだと、上記の通り行きませんのでご了承を。
2012年10月21日 (日) | 編集 |
今後のスマホなどでの入力フォームを考えると、リアルタイムで入力チェックを
行うケースも増えてくるのかも知れない。
その為のJSをわざわざ自作してゴリゴリ作るのも時間が掛かる。
そこで、ネットで検索したら、jquery.validate.js というプラグインを見つけた。
海外産だが、日本語にも問題なく対応する。
おまけに、自作メソッドも作れるし、かなり融通がきくプラグインに仕上がっている。
サクッとどんな感じで使えるかを理解するには、こちらのサイトが役に立つと思う。
「すぎゃーんメモ」
ちなみに、日本語に対応させるには、解凍したファイル一式のlocalizationフォルダの中にあるmessages_ja.jsにリンクを張るだけでOKです。
ごく簡単な使い方だけ紹介すると、こんな感じ。（JS部分のみ）
とこんな感じ。
まだまだ自分もこのプログインの全容を把握していないが、
validateメソッドで使えるオプションを超訳してみた。
（超訳とは、意訳よりも更に原文に忠実でないけど、なるべく分かりやすく書いた訳です。
原文を思っきり略している箇所もあるので、より忠実な説明が気になる場合は、原文をお読みください）
時間が取れたら、他の部分も超訳していきます。
超訳は、こちら（jquery.validate.jsの超訳）に置いておきます。
行うケースも増えてくるのかも知れない。
その為のJSをわざわざ自作してゴリゴリ作るのも時間が掛かる。
そこで、ネットで検索したら、jquery.validate.js というプラグインを見つけた。
海外産だが、日本語にも問題なく対応する。
おまけに、自作メソッドも作れるし、かなり融通がきくプラグインに仕上がっている。
サクッとどんな感じで使えるかを理解するには、こちらのサイトが役に立つと思う。
「すぎゃーんメモ」
ちなみに、日本語に対応させるには、解凍したファイル一式のlocalizationフォルダの中にあるmessages_ja.jsにリンクを張るだけでOKです。
ごく簡単な使い方だけ紹介すると、こんな感じ。（JS部分のみ）
とこんな感じ。
まだまだ自分もこのプログインの全容を把握していないが、
validateメソッドで使えるオプションを超訳してみた。
（超訳とは、意訳よりも更に原文に忠実でないけど、なるべく分かりやすく書いた訳です。
原文を思っきり略している箇所もあるので、より忠実な説明が気になる場合は、原文をお読みください）
時間が取れたら、他の部分も超訳していきます。
超訳は、こちら（jquery.validate.jsの超訳）に置いておきます。
2012年10月21日 (日) | 編集 |
2012年10月10日 (水) | 編集 |
UIの世界には、「Don't Interrupt（俺の操作の邪魔をしないでくれ）」という概念や
「Don't Make Me Think（イチイチ考えさせないでくれ）」という概念がある。
お互い似ている概念で、共通のところもあるだろう。
前者の概念は、とある国内のオープンソースのEC構築システムを見ていると、実感できる。
ちなみに、このEC構築システムは、非常に多機能で優秀なソフトだ。私も時折世話になる。
このシステムで、受注情報を変更しようとすると、「この内容で登録しても宜しいでしょうか」と確認画面が出る。まさにユーザーの操作の邪魔をしているが、確認画面を省いているのでこうなっているということで、今回はOKとする。
問題はその後、無事変更が完了すると元の編集画面に戻り、「受注を編集しました。」と表示される。
IEで見ると、完全にアラートアイコンになっている。
このアラートの「OK」を押さない限り、ユーザーは操作をできなくなってしまうのだ。
まさに、「Don't Interrupt」。
ユーザーは次の操作に移りたいのに、さほど重要でない事で邪魔をされてしまう。
こんなものは、画面にフワーと出てきて、3秒経てば自動で消えるようにすれば良い。
さて、ここまでだったらわざわざ重い腰を上げてまでブログに書かなかったが、
問題はもう1つある。
もし受注変更時にエラーがある場合、こちらも元の編集画面に戻るが、
今度は逆にアラートが表示されないのだ！
何事もなく無事終了したのかと思ってしまうが、実は画面を下にスクロールすると、
エラーメッセージがこっそり表示されていたりするのだ。
大事な場面でアラートを出さず、さほど大事でない場面でアラートを表示する。
やはり、プログラマもしっかりUIの勉強をすべきだろう。
「Don't Make Me Think（イチイチ考えさせないでくれ）」という概念がある。
お互い似ている概念で、共通のところもあるだろう。
前者の概念は、とある国内のオープンソースのEC構築システムを見ていると、実感できる。
ちなみに、このEC構築システムは、非常に多機能で優秀なソフトだ。私も時折世話になる。
このシステムで、受注情報を変更しようとすると、「この内容で登録しても宜しいでしょうか」と確認画面が出る。まさにユーザーの操作の邪魔をしているが、確認画面を省いているのでこうなっているということで、今回はOKとする。
問題はその後、無事変更が完了すると元の編集画面に戻り、「受注を編集しました。」と表示される。
IEで見ると、完全にアラートアイコンになっている。
このアラートの「OK」を押さない限り、ユーザーは操作をできなくなってしまうのだ。
まさに、「Don't Interrupt」。
ユーザーは次の操作に移りたいのに、さほど重要でない事で邪魔をされてしまう。
こんなものは、画面にフワーと出てきて、3秒経てば自動で消えるようにすれば良い。
さて、ここまでだったらわざわざ重い腰を上げてまでブログに書かなかったが、
問題はもう1つある。
もし受注変更時にエラーがある場合、こちらも元の編集画面に戻るが、
今度は逆にアラートが表示されないのだ！
何事もなく無事終了したのかと思ってしまうが、実は画面を下にスクロールすると、
エラーメッセージがこっそり表示されていたりするのだ。
大事な場面でアラートを出さず、さほど大事でない場面でアラートを表示する。
やはり、プログラマもしっかりUIの勉強をすべきだろう。
2012年10月09日 (火) | 編集 |
これは、jQueryに限った話ではないが、この2つの違いをちゃんと説明しているサイトや書籍が見当たらない。
たいていは、「mouseoverはイベントバブリング時にも発生、mouseenterは発生しない」
で終わっている。
それ自体は間違いではないが、実はもう1つある。
それに関しては、こちらに説明がある。
http://d.hatena.ne.jp/snaka72/20100923/DIFFERENCES_OF_DOM3_MOUSE_EVENTS
ただこのサイトでは、逆にバブリングについて触れていない。
mouseoverの場合は、外側に移動しても、内側に移動しても
どちらのケースでも、mouseoverとみなすのだ。（これは、バブリングとは関係のない世界だ）
これに関しては本家サイトもバブリングの違いとしか書いてないので、
そういう説明が広がってしまったのだろう。
では、本当にそうなのか、本家サイトのサンプルで見てみよう。
http://api.jquery.com/mouseenter/
真ん中辺りに水色と黄色のボックスがあるが、これの左側（mouover、mouseout）で見てみよう。
都合の悪いことに、このサンプルでは、上下から移動すると、P要素分余計なカウントをするので、左側からマウスポインタを移動してほしい。
それとこのサンプルは、mouseoutの時は、+1しない作りになっている。
まず、外側から、水色のゾーンに移動する。すると
mouse over 1
となる。これは普通。そして続けて、黄色のゾーンに移動する。すると、
内側：mouse over 2（内側自身のイベント）
外側：mouse over 3（内側のバブリングによる外側の処理）
となる。
（内側と外側で、1つの通し番号になっています）
ここまでだったら、「バブリングの影響」だけで説明が付く。
しかし、黄色のゾーンから水色ゾーンに戻った時、
外側：mouse over 4
となる。これはバブリングでも何でもない。
内側から外側に移ったこと自体を外側で「mouse over」として認識しているのだ。
さて、もうこのシリーズは終わりにしよう。。。
たいていは、「mouseoverはイベントバブリング時にも発生、mouseenterは発生しない」
で終わっている。
それ自体は間違いではないが、実はもう1つある。
それに関しては、こちらに説明がある。
http://d.hatena.ne.jp/snaka72/20100923/DIFFERENCES_OF_DOM3_MOUSE_EVENTS
ただこのサイトでは、逆にバブリングについて触れていない。
mouseoverの場合は、外側に移動しても、内側に移動しても
どちらのケースでも、mouseoverとみなすのだ。（これは、バブリングとは関係のない世界だ）
これに関しては本家サイトもバブリングの違いとしか書いてないので、
そういう説明が広がってしまったのだろう。
では、本当にそうなのか、本家サイトのサンプルで見てみよう。
http://api.jquery.com/mouseenter/
真ん中辺りに水色と黄色のボックスがあるが、これの左側（mouover、mouseout）で見てみよう。
都合の悪いことに、このサンプルでは、上下から移動すると、P要素分余計なカウントをするので、左側からマウスポインタを移動してほしい。
それとこのサンプルは、mouseoutの時は、+1しない作りになっている。
まず、外側から、水色のゾーンに移動する。すると
mouse over 1
となる。これは普通。そして続けて、黄色のゾーンに移動する。すると、
内側：mouse over 2（内側自身のイベント）
外側：mouse over 3（内側のバブリングによる外側の処理）
となる。
（内側と外側で、1つの通し番号になっています）
ここまでだったら、「バブリングの影響」だけで説明が付く。
しかし、黄色のゾーンから水色ゾーンに戻った時、
外側：mouse over 4
となる。これはバブリングでも何でもない。
内側から外側に移ったこと自体を外側で「mouse over」として認識しているのだ。
さて、もうこのシリーズは終わりにしよう。。。
| ホーム |