HonestyWorks TechNote

CodeMirror はブラウザ上でのソースコード編集に便利なjavascriptモジュールです。
なんでもCMS でもテンプレート編集画面に導入しています。
そのときにIEでエラーが出てしまって嵌ったことがあったので記録しておきます。
IEでjavascriptのエラーが出ると追跡が困難で厄介なんですよね。。

今回の原因は、CodeMirrorで編集対象のtextareaタグがpタグの中に入っていたことでした。（なんと単純）
pタグじゃなくてdivタグのなかにtextareaを入れたら、すんなりエラーが無くなりました。
DOMのinnerHTML操作がinlineのコンテナだとIEではエラーになるそうです。

たったこれだけのことで結構はまってしまいました。

概要

なんでもCMS にはこれまで簡易的な画像リサイズモジュールが付いていましたが、もう少しイケてる感じにしようと思い作り直しました。
たとえば、
/files/Sunset.jpg という元画像があったとして、

/icache/w100/files/Sunset.jpg にアクセスすると

こんな感じで幅100pxの画像が表示されたり、

/icache/w200h200bFFFFFF/files/Sunset.jpg のように

余白を指定したカラーで埋めて固定サイズの画像を作れたりします。

一度リサイズした画像はキャッシュされるのでパフォーマンスも問題無いですし、元画像が変更されればキャッシュも更新されるようになっています。

このモジュールはなんでもCMSのモジュールからは完全に独立しているのでいろいろなところに転用できそうです。

仕様

/icache/`パラメータ指定`/`元画像のパス名` というURL形式でアクセスすると指定したパラメータのとおりに加工した画像が表示されます。パラメータの指定方法は

w120
h200
w150h150
w200h200bFFFFFF

のようになります。

• wXXX 幅をpxで指定します。（省略可能）
• hXXX 高さをpxでしていします。（省略可能。幅または高さのどちらかは必須）
• bXXXXXX 余白の色を指定します。これを指定すると幅、高さ固定となります。

リンクの書き方次第で様々な大きさの画像を作り出せるので非常に汎用的で使いやすい仕組みではないかと思います。

概要

EC-CUBEはここ数年勢いを増していてかなり認知度があがってきています。2.11.4も登場してスマートフォン向けのデザインが強化されるなど、機能も充実の一途です。そんななかプログラマーを悩ませるのは、「コードが酷い」ということ。。もう少しきれいなコードだったらカスタマイズしやすいのになあ。。何度そういうため息を漏らしたことでしょう。
こういった状況を少しでも改善していきたいと、まずはDB操作のコードを楽にするためのプラグインを開発しました。
「開発した」といっても弊社で公開している Teeple2 というフレームワークのORマッパーである TeepleActiveRecord をEC-CUBE用に移植しただけなのでたいした工数はかからずにできました。
使い方はほぼ http://code.google.com/p/teeple2/wiki/DatabaseIntro こちらに書いてあるやり方と同じです。（こちらではPDOは使っていません。）
下のコードは同梱したテストケースからの抜粋ですがこんな感じでなにをやっているか一目瞭然のコードがかけます。

        $productList = Entity_DtbProductCategories::get()
            ->join('dtb_category')
            ->join('dtb_products')
            ->contains('dtb_category.category_name', 'なべ')
            ->contains('dtb_products.name', 'なべ')
            ->order('dtb_products.product_id')
            ->limit(10)
            ->offset(0)
            ->select();

        $this->assertEquals('おなべレシピ', $result[0]->dtb_products->name);

ダウンロード

こちら から。（無料でご自由にお使いいただけます。）

セットアップ方法

配布しているアーカイブは以下のようにEC-CUBEのディレクトリ構成と同じ形になっていますので、そのまま配置してください。
（実行に必要なのは data/plugin/activecube 以下のみです。）

data
  |- plugin
    |- activecube

test
  |- class
    |- activecube

次に data/require_classes.php の末尾に

require_once DATA_REALDIR . 'plugin/activecube/config.php';

と記述を追加してください。これだけで使えるようになります。

しくみ、注意点など

• lowlevelでは EC-CUBEの SC_Query クラスを使用しています。トランザクションの制御などはこちらを使用して行なってください。本ライブラリはあくまでSC_Queryのラップであり、SQLを組み立てやすくしたり、結果セットの扱いをオブジェクト階層構造で扱えるようにしたりしています。
• MySQL, 2.11版のみ用意しています。(私がMySQLしか使わないため。。) Postgresへの対応は少しの修正でできるのではないかと思います。
• Entityクラスにjoinの設定があります。間違っていたり足りなかったりした場合はここを修正するとよいです。
• Entityクラスに自由にドメインロジックを追加することができます。そのような使い方をすると便利かと思います。
• ログはEC-CUBEのsite.logに出力されるようになっています。ログレベルを変更したい場合はActiveRecord.php の 48行目あたりを修正してください。
• 本ライブラリはフリーで提供していますので、不具合等によるいかなる損害についても弊社では責任を負いません。自己責任でご利用をお願いします。

なんでもCMS では「EAVモデル」というデータ構造を採用しています。
EAVとは Entity, Attribute, Value の略です。
この名称が一般的なのかは知りませんが、Magento というeCommerceシステムで EAVモデルという言葉が使われています。
http://4plus.jp/tech/2011/02/magentoeav.html

従来のRDBMSよるスキーマ構造とは大きく異なり、本来テーブルとして定義すべきものを全て Entity, Attribute, Value の3つのテーブルで管理します。（なんでもCMSではRecordというテーブルも使っています。）

これにより管理画面から自由にオブジェクト設定(＝データベースのテーブル設計)ができ、動的に変更が可能な構成を実現しています。メタデータがDBに登録されているので画面の生成なども容易に自動化できるわけです。
EAVモデルはなんでもCMSにとっては欠かせない要素のひとつなのです。

逆にEAVモデルのデメリットは

1. 正規化されたRDBMS設計のようにSQLでの取り扱いが簡単ではない
2. データ量が増えてきたときのパフォーマンス（特定のカラムにインデックスをつけたりとかできない）

といったことが挙げられます。

1についてはO/Rマッパー層で吸収するコードを書いたので、あたかも普通のテーブル設計のようにプログラミングすることができるようになりました。

2についてはメリットとのトレードオフということで割り切って考えています。
CMSでそれほどデータ量が問題になるとも思えないですし、データ量の多いオブジェクトは専用のテーブルを作るなどのハイブリッドな設計にすればよいかと思います。

EAVモデルはCMSとの親和性が非常に高いということに気づいたのがなんでもCMS開発のきっかけでもあります。

概要

日本語ロケールのダウンロードはこちら

LifeType はオープンソースのブログシステムなのですが普通と違うのは「ポータル型ブログシステム」だということです。つまり、1つのシステム内に複数のブログ、複数のユーザを作ることができ、ブログ:ユーザは N:N の関係になっています。
WordPressも3.1以降(?)になって複数のブログを１つのシステム内に作れるようになりましたが、最初からそのように設計されているのとそうでないのとでは後々差が出てくるとしたものです。
LifeTypeではサマリーページといって、システム内の全ブログの統計が見えるようなしくみになっています。
用途としては、以下のようなものが考えられるかと思います。

• アメブロやLivedoor Blogなどのようなブログポータルサイト
• 社内ブログシステム
• 多店舗型ビジネスのポータルサイトとして

etc.

このありそうでなかったブログシステムが気に入ったので日本語のロケールファイルを作ってみることにしました。
LifeTypeはきちんと多言語化対応されていて、サイト用と管理用２つのロケールファイルを翻訳するだけでサイトを日本語化することができました。（といってもあわせて1500行ぐらいある大変なものでしたが・・・）

ロケールファイルを翻訳していくとだいたいどんな機能があるかイメージできてくるので、そういう意味でも有意義な作業だったと思います。

ロケールの適用手順

LifeTypeをダウンロードして解凍したら locale というディレクトリを確認してください。たくさんロケールファイルがあると思います。ここと、この直下のadminというディレクトリに日本語ロケールファイルを配置します。

インストールプロセスは英語で進みます。 Step6 の Blog Conficurationのところで Languageの選択肢に「 Japanese locale file for LifeType 」というのが出てくると思いますのでそれを選択してください。

既に別のロケールでインストールした場合

既に別のロケールでインストールしてしまった場合も管理画面から変更することができます。
管理画面にログインし、「ADMINISTRATION」タブをクリックします。
中ほどにManage Locales というセクションがあるので、New locale をクリックします。
このページで「Scan Locales」というボタンをクリックすれば、localeディレクトリに手動で配置したファイルが読み込まれて選択できるようになります。

参考

• http://lifetype.net/
• 日本語ロケールのダウンロード