2014年10月26日日曜日

Microsoft Community Champion について

SYSTEM_KDです。

以前、Microsoftのイベントで、Microsoft Worldwide Community Championというコンテストがあるとお伝えしたのですが、どうもコンテストの名前が変わったようです。

新しい名前は「Microsoft Community Champion」ということみたいです。

<公式のFacebookページ抜粋>
このたび、本コンテスト「Microsoft Worldwide Community Champion」の名称が「Microsoft Community Champion」に変更される運びとなりました。それに伴って「MWCC」の略称も「MSCC」へ変更となり、本 Facebook ページの名称も「MSCC Japan(旧 MWCC Japan)」といたしました(プロフィール画像は追って変更予定です)。

前の名前は、かなり長かったので、正直イベント名を思い出すのが難しかったですが、これならなんとか思い出せそうですね。

登録期限の10月末まであと少しですので、気になっている方はお早めに登録を~。

2014年10月25日土曜日

EclipseでAndroid5.0のMaterialDesignを表示

SYSTEM_KDです。

EclipseにAndroid5.0 のSDKを導入して、少しだけ使ってみるという記事を書いたのですが、EclipseだとAndroidプロジェクトを作成しただけでは、5.0の売りのMaterialDesignになっていなかったようですので、MaterialDesign(のテーマ)を設定する方法について書いてみます。
(といっても、知ってる人は当たり前だろ的な内容ですが。。)

Android5.0 Lollipop SDKをいれてみた
EclipseにAndroid5.0のSDKを導入してCardViewを使おうとしたらエラーが出て使えない

Android Studioで新規にプロジェクトを作成する際は、新規作成にてMinimum SDK のバージョンで「API 21」を選択

as

あとは、そのまま作成すれば、デフォルトで「MaterialDesign」が適用された状態になります。

as_m

が、、、Eclipseで作成すると、同様にMinimum SDK で「API 21」を選択しても、テーマの選択に「Material」がないため、仕方なく別のテーマを選択することになります。

e_m

その結果、当然ですが、

e_v

MaterialDesignにはなりません。
これを、Android Studioのようにするには、スタイルを追加してテーマに「Material」を設定します。
(まぁAndroid Studioと同じ状態にするだけです)

MaterialDesignが動作するのは、API 21 になりますので、API21用の「styles.xml」を追加します。

v_add

こんな感じです。
中身は、「values-v14」の「styles.xml」をコピーして少し変えるだけです。

cd

重要な部分は「parent = 」で設定する内容を「android:Theme.Material.Light」にする部分ぐらいです。

この状態でアプリを起動すると、

ec_m

Android Studioで実行したときと同じく、MaterialDesignが反映された状態になります。
めでたしめでたし。です。

2014年10月20日月曜日

EclipseにAndroid5.0のSDKを導入してCardViewを使おうとしたらエラーが出て使えない

SYSTEM_KDです。

先日、EclipseへAndroid5.0のSDKを導入し、「Android5.0 LollipopのSDKをいれてみた」という記事を書いたのですが、せっかくAndroid5.0のSDKを導入したんだから、ちょっとこれぞ「5.0」なことを試してみようと思い、CardViewを試してみたのですが、ハマりまくったのでちょっとまとめておきます。

まず、CardViewですが、最近Google製のアプリなんかでよく使われている

cardview

こんな感じのカード状のビューのやつです。

Android5.0からは、CardView用のウィジェットが追加されましたので、それを試そうと思い、このページを参考に(というかほぼコピー)してみたところ、

・・・・エラーです

エラー内容としては。。

No resource identifier found for attribute 'cardCornerRadius' in package

となっています。

どうも、


xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:id="@+id/card_view"
android:layout_gravity="center"
android:layout_width="200dp"
android:layout_height="200dp"
card_view:cardCornerRadius="4dp">

この部分に問題がありそうです。

とりあえず、問題となっている部分を消してみます

エラーはでなくなったので、実行してみると、エラーで強制終了しました。。

エラー内容としては。。

android.view.InflateException: Binary XML file line #11: Error inflating class android.support.v7.widget.CardView

android.support.v7」がないから?といった雰囲気の様です。
そもそも、1行おかしいとかというレベルの問題ではなさそう。。


ここから、「android support library」をlibsに追加したりと、色々やった挙句、何とかまともに動かす方法を発見できました。


方法としては、こうです。

まず、「android-sdks」のディレクトリへアクセスし、「/extras/android/support/v7/cardview」をインポートし、Eclipseへ追加します。

eclipse_i1

eclipse_i2

次に、インポートした「cardviewプロジェクト」のプロパティを開き「Android」を選択「ライブラリー」にチェックを入れます。

チェックを入れたら、今度はエラーが出ているプロジェクト(CardViewを使おうとしているやつ)のプロパティを開き「Android」を選択。ライブラリーの追加で先ほどインポートした「cardview」を選択します。

すると、、、なんということでしょう、エラーが消えたではありませんか。

最後に、念のため「cartview」と実行したいプロジェクトを両方ともクリーンすれば、異常終了せず実行されると思います。(※さっき消したコードも復活させておいて大丈夫です)

Android Studioだと、さくっと実行できたのですが、Eclipseでは難儀しました。。
そろそろ、Android Studioに移りどきなのかなーとか思っみたり。

2014年10月18日土曜日

Android5.0 Lollipop SDKをいれてみた

SYSTEM_KDです。

Android5.0(Lollipop)に対応したSDKの配布が開始されました。

site

ということで、早速導入してみます。
(本当は昨日夜にいれたかったけど、眠さに負けました)

Eclipseで開発してますので、Eclipseから「Android SDK Manager」で更新します。

SDK Managerを開くと、

sdk

きてます!きてます!

ネットで情報は見てましたが、バージョンは「Android L Preview」のときの「API 20」から「API 21」に上がっております。

他にも、「Android Support Library」も「revision 21」へ上がっているようです。

sdk2

とりあえず、SDKを更新します。

Eclipseの場合は、合わせて「ADT Plugin」の更新も必要になります。
(2014/10/18 現在 バージョン 23.0.4)

adt

さくっと更新して、導入完了!!

とりあえず、エミュレータを起動してみたいと思います。

Android Virtual Device (AVD) Manager」を起動して、Android5.0のエミュレータを追加します。

emu
(せっかくなので、CPUをIntel 64bitにしてみたり。。)

起動!!

emu2
(おぉ!なんかちょっと違うかも)

emu3
(下から上にスライドでロック解除!)

emu4

とりあえず、MaterialDesignを感じつつ、言語と時間を日本に設定。

emu5

emu6

ということで、Android5.0 へふれることができました。
早く実機に更新がこないか待ち遠しいです!!

おまけ

バージョンを表示したので、やることは一つ

連打!!!(3回でいいっぽい

egg

Android 5.0 のイースターエッグはこんな感じで、、

egg2

ってどっかで見たゲームだよこれ!!! (・_・)

2014年10月16日木曜日

Microsoft Worldwide Community Championについて

SYSTEM_KDです。

そろそろAndroid5.0?くる?Nexus6でる? とソワソワしていたりするのですが、全然関係なくWindows関連のネタです。

まぁタイトルの通りなのですが、「Worldwide Community Champion」というイベントが開催されるようです。

リンク先のページを見ると、一瞬「ん?MMORPG系?」とか思うかもしれませんが、れっきとしたMicrosoftのイベントのようです。

mwcc

イベントの内容としましては、「Windowsアプリ」や「Microsoft Azure ソリューション」の開発やオンラインフォーラムへの回答をして、ポイントを稼ぎ総合点を競い上位チームは商品ゲットといったイベント(コンテスト)のようです。

スキルはショボショボですので、賞品を狙ったりはできませんが、公式Facebookいわく「素敵な得点満載!」らしいので、つられて参加してみようと思います。
(開発工程マニュアルがいるとかあるけど。。大丈夫かな。。)

登録期限は10月末までのようですので、参加したい方はお早めに~。

2014年10月13日月曜日

EC-CUBEプラグインの設定情報を保持する

SYSTEM_KDです。

最近プラグインネタから遠ざかっていたのですが、久々にプラグインネタです。

今回はEC-CUBEプラグインの設定情報を保持する」という内容について書きたいと思います。

プラグインを作成した際、プラグイン独自の設定情報を持ちたいということだ出てくると思いますが、その方法についてです。

まず、プラグインに独自の設定情報を持たせたい場合、どこから設定画面を開くようにするか?という問題が出てくるかと思いますが、これについては標準で場所が用意されております。

p_set01

プラグイン管理画面の「プラグイン設定」という部分にあたります。

この「プラグイン設定」を有効にするには、プラグインのファイル内に「config.php」というファイルを用意し、プラグイン情報の設定画面が開くようにしてやります。

これにより、「プラグイン設定」が有効化され、

p_set02

設定ボタンが押せるようになります。

また、設定画面にて設定した値を保持する必要がありますが、この方法としましては、プラグインのインストール処理で、新しくテーブルを作成し、データを保持するような作りにしても問題ないのですが、プラグインのインストール情報が保持されているテーブル「dtb_plugin」に利用可能な領域がありますので、少量のデータであれば、そちらへ保持することができます。

[データを保持可能なカラム]
dtb_plugin

  • free_field1
  • free_field2
  • free_field3
  • free_field4

以上、かなり簡単にではありますが、プラグインの設定情報を保持する方法についてになります。

2014年10月12日日曜日

EC-CUBE管理画面の幅を広げる

SYSTEM_KDです。
最近は、ワイドディスプレイが主流ですので、ワイドディスプレイを利用されている方も多いと思いますが、EC-CUBEの管理画面は幅が決まっていますので、ワイドディスプレイで見ると、何も表示されない領域ができてしまい、少しもったいなく感じます。

ec_admin01

こんな感じですね。

ということで、CSSを少しさわって横幅を広げる小ネタを紹介したいと思います。

まず、次のCSSを変更します。
html/user_data/packages/admin/css/admin_contents.css

以下の部分を見つけて同じ様にコメント化します。
(2.13系だと500行目あたりかな)

#navi-wrap {
// width: 1030px;
}

次に、同ファイルの以下の部分を見つけて、これまた同様にコメント化します。

#contents {
padding: 20px 20px 100px;
// width: 1000px;
}

この状態で管理画面を表示すると、


ec_admin02


かなり無理やりですが、一応広がりました!(^^;


幅の上限をとっただけなので、登録画面とかは、ただ広がっただけになりますが、一覧画面に関しては若干見やすくなるかと思います。

2014年10月11日土曜日

EC-CUBE決済モジュールGMOペイメントを導入する

SYSTEM_KDです。

以前宣言した通り、今回はGMOペイメントを導入してみたいと思います。

GMOのテスト環境の設定部分だけまとめようかと考えていたのですが、前回より時間が空いてしまいましたので、モジュールの取得から行いたいと思います。

手順としては、以下になります。

1.GMO決済モジュール(無料)の取得
2.テスト環境(無料)の取得
3.EC-CUBEへ接続情報を設定

では、早速「1.GMO決済モジュールの取得」ですが、EC-CUBEオーナーズストアより、決済モジュールをダウンロードしたいと思います。
決済モジュールをダウンロードするには、どのサイトとに対してダウンロードを行うか設定する必要がありますので、「メンバーMYページ」より「サイトの追加」を行います。

gmo_02

サイト名に好きな名前を設定します。
サイトURLにつきましては、「localhost」を設定されても特に問題ないかと思います。

gmo_03

※サイトを追加した際に発行される「認証キー」をメモしておきます

上記設定ができたら、決済モジュールのダウンロード(無料購入)を行います。
(※お使いのEC-CUBEのバージョンに合わせた決済モジュールをダウンロード下さい)

gmo_01

流れにそって進んでいけば良いです。
途中、どのサイトと紐付けるかという選択がありますので、任意のもの(追加したサイト)を選択します。

これで、決済モジュールの無料購入は完了です。
と言っても、実際の決済モジュールはまだ取得できておりません。

実際に決済モジュールをEC-CUBEへ設定するには、EC-CUBE側でダウンロードを行う必要があります。

手順としましては、EC-CUBE管理画面の「オーナーズストア>認証キー設定」画面を開き、上の手順でメモした「認証キー」を設定します。

gmo_04

認証キーが設定できたら、EC-CUBE管理画面の「オーナーズストア>モジュール管理」を開きモジュール一覧を取得します。

gmo_05

そうすると、「GMOペイメント」が表示されますので、「ダウンロード」ボタンを押します。

gmo_06

これで決済モジュールの取得は完了です。

次は「2.テスト環境の取得」ですが、こちらのページより、指示に従い登録を行います。
登録が完了すると、メールで「1.サイト管理画面」と「2.ショップ管理画面」の情報が送付されてきます。

続けて、「3.EC-CUBEへ接続情報を設定」へ進みます。

EC-CUBE管理画面の「オーナーズストア>モジュール管理」をみると、「GMOペイメント」欄のダウンロードリンクの右側へ「設定」というリンクが表示されていると思います。
このリンクを押して、設定画面を表示させます。

設定画面を開くと、接続情報等を入力するようになっております。

gmo_07

接続先はテストですので、「テスト環境」で良いですが、以下の項目についてはGMO側の管理画面より取得を行う必要があります。

  • サイトID
  • サイトパスワード
  • ショップID
  • ショップパスワード

具体的に、どこから取得するかといいますと、「2.テスト環境の取得」で登録を行った際にメールで送られてきた、「1.サイト管理画面」と「2.ショップ管理画面」より取得を行います。

まず、「1.サイト管理画面」に記載されているページへアクセスします。
(※接続する際はIEから行った方が問題がないかもしれません)

サイト管理画面が開けたらメニューより「サイト管理」を選択します。

gmo_08

そうすると、サイトIDとパスワードが表示されますので、EC-CUBE側の設定画面のサイトIDパスワードの部分へコピーします。

コピーできたら、「2.ショップ管理画面」に記載されているページへアクセスします。

ショップ管理画面が開けたらメニューより「ショップ管理」を選択します。

gmo_09

そうすると、今度はショップIDとパスワードが表示されますので、EC-CUBE側の設定画面のショップIDパスワードの部分へコピーします。

設定できたら、「有効にする決済方法」で「クレジットカード決済」を選択し、「この内容で登録する」ボタンを押します。

接続情報の設定は、これで完了です。

それでは、実際にクレジットカード決済でテスト購入を行ってみましょう!
と言いたいとこですが、このままではまだ利用できません。EC-CUBEの管理画面にていくつか設定が必要です。

具体的には、「基本情報管理>配送方法設定」画面を開き、クレジット決済を追加した配送業者の編集ボタンを押します。
すると、「取扱支払方法」の項目へ「クレジットカード決済」という項目が追加されていると思いますのでこちらにチェックを入れます。

gmo_10

チェックを入れたら、登録ボタンにより設定を更新します。

次に「基本情報管理>支払い方法設定」を開きます。
そうすると、こちらにも「クレジット決済」の項目が追加されていますので、編集ボタンを押します。

この画面で、決済に関する細かい設定が行えるようになっております。
それでは、以下のように設定してみます。

  • 支払方法 ・・・ 変更不要
  • 手数料 ・・・ 変更不要
  • 利用条件 ・・・ 変更不要
  • 処理区分 ・・・ 仮売上を設定
  • 支払い種別 ・・・ 一括払いにチェック

設定できたら登録ボタンにて設定内容を反映します。
これで、クレジットカード決済でテスト購入を行うための設定は完了です。

では、実際に購入してみましょう。

正しく設定できていれば、お支払方法の設定へ「クレジットカード決済」が追加されます。

gmo_11

無事カード情報入力画面へ遷移しました。

gmo_12

※ちなみにテスト用のカード情報も用意されており、GMO管理画面のドキュメントより確認することができます。

といことで、無事GMOの決済モジュールを導入することができました。

せっかく決済モジュールを導入しましたので、今後クレジット決済に関する語句の説明もできればと思います。

2014年10月10日金曜日

EC-CUBEの定数(パラメータ)設定について

SYSTEM_KDです。

前回の投稿で、次回はGMOの決済モジュール導入と書いたのですが、時間の都合で小ネタにします。

ということで、EC-CUBEの定数(パラメータ)設定(2.11系以降)についてという話になります。

EC-CUBEでパラメータ設定を変える場合、管理画面の「システム設定>パラメータ設定」より変えれると思いますが、この値がどこから取得されているかといいますと、もちろんデータベース上のテーブル「mtb_constants」なのですが、実際に動作するときには、このテーブルからは読み込まれていません。

では、どこから読み込まれているかといいますと、
data/cache/mtb_constants.php
というファイルから取得しています。

ですので、定数を直接変更したいという場合は、こちらをさわることになります。

ですが、このファイルはファイルがある場所から分かるかもしれませんが、キャッシュファイルになりますので、常にそのままではありません。
それこそ、管理画面からパラメータを更新すると、設定内容で書き換わってしまいます。

このままですと、わけがわからないと思いますので、整理しますと以下のような状態になっております。

[パラメータファイルにつてい]
まず、EC-CUBEインストール直後ですが、このタイミングでは、キャッシュフォルダへはパラメータのファイルがない状態になります。

では、キャッシュはどこから作成されるかといいますと、
data/mtb_constants_init.php
ファイルをもとに作成が行われます。

すなわち

1.EC-CUBEが動作開始

2.キャッシュのパラメータファイルを参照にいく

3.キャッシュにパラメータファイルがある場合は、パラメータファイルを読み込む。ファイルがない場合は、「data/mtb_constants_init.php」をキャッシュへコピーし読み込む

といった流れになっております。

ですが、上記とは別系統として、データベースへも定数情報を保持しており(mtb_constants)、管理画面よりパラメータの設定変更を行った場合は、このマスターの内容でキャッシュファイルを作成するといった流れになります。

ですので、カスタマイズにより、新たに定数値(パラメータ)を追加する場合は、「data/mtb_constants_init.php」へ追加すると共に、マスターテーブル「mtb_constants」へも同様に値を追加してやる必要があります。
また、それとともにキャッシュのファイルを削除してやるというのが、無難な変更方法になるかと思います。

2014年10月7日火曜日

導入側からみたEC-CUBE決済(モジュール)

SYSTEM_KDです。

今回は決済(モジュール)についての話。
EC-CUBEで使える決済はかなりの数がありますが、選択肢が多いと逆に選ぶのが大変になってしまいますね。

どの決済が良いかは、店舗や現行のサービスとの兼ね合いによって違ってくると思いますが、そういう視点ではなく、導入のしやすさに絞って考えてみると、ずばり!

EC-CUBE公式のEC-CUBEペイメントもしくは、GMOペイメントが一押しです!
(ちなみに、EC-CUBEペイメントとGMOペイメントのモジュールの中身は同じだったり・・・)

やはり、公式だけあって、決済モジュールとしての機能導入のしやすさも抜群ですね。

基本的に、クレジット決済等を導入するには、色々な手順が必要です。

  1. クレジット決済を導入したい
  2. 決済代行会社の選定と決定
  3. 決済代行会社へ問い合わせて、テスト環境を提供してもらう
  4. EC-CUBEへ決済モジュールを導入しテスト環境でテスト
  5. 本番の決済環境へ接続変更し導入完了

本番環境しかない場合はどうするの?とか、色々とはしょってる部分もありますが、大雑把な流れとしては、この様な形かと思います。

基本的に「4.」の決済モジュールのダウンロードは、オーナーズストアより簡単に行えるかと思います。

ですが、「3.」の部分では、決済代行会社のテスト環境を利用するために、決済代行会社へ申し込みを行い接続情報をもらう必要が有るため、すぐにはテストを開始できません。

(導入する側からしてみると、ちょっと試そうにもハードルが高くなりますね)

ですが、EC-CUBE公式決済モジュールを提供しているGMOさんは、24時間いつでもネットから登録するだけで、テスト環境をすぐに利用することができます!!

こんな感じですね。

gmo

導入目線で考えるとこれは、気軽にテストができて、かなりうれしいですね。

という、訳で導入目線で考えた場合に一番オススメできる決済は、EC-CUBE公式の決済になるかと思います。

完全に個人的な意見ですが、決済モジュールの導入を検討されている方の参考になればと思います。
(ちなみに、テスト環境の申し込みは、こちらから行うことができます)

ということで、せっかくなので次回辺り、実際にどうやってGMOモジュールを導入するのか?という話をやりたいと思います。

2014年10月5日日曜日

EC-CUBEプラグインでテンプレートを変更するサンプル

SYSTEM_KDです。

今回は、久々にプラグインを作成したいと思います。
作成するプラグインは、テンプレート変更プラグインになります。

これまで、テンプレートフックについて簡単に説明させて頂きましたが、やはり実際に動作するものがあった方がわかりやすいと思いますので、簡単なプラグインにはなりますが、作成したいと思います。

まず、プラグインの作成のため、(久々に)以前作成したプラグインのベースを利用したいと思います。
(ソースはこちらのになります)
(上記を作成した際の記事はこちらです)

ちなみに今回のプラグインは「おすすめ商品情報」ブロックのタイトル部分へおすすめ商品情報の最終更新日付を表示してやるといったものになります。

今回は以下の手順で進めたいと思います。

1.ファイル名および設定の整備

2.処理の追加

3.テンプレートの書き換え処理実装

ではさっそく、ダウンロードしてきたプラグインのベース(PluginBase.tar.gz)をどこかへ解凍し、ファイル名の変更と設定の整備を行いたいと思います。

おすすめ商品へ日付を追加するプラグインですので、「RecommendDate」プラグインという名前にしたいと思います。

ということで、「plugin_info.php」と「PluginBase.php」を開いてファイル名を「PluginBase」を「RecommendDate」へ置換します。

続いて、「plugin_info.php」の内容を今回のプラグインにそったものへ書き換えます。

class plugin_info{
/** プラグインコード(必須):プラグインを識別する為キーで、他のプラグインと重複しない一意な値である必要がありま. */
static $PLUGIN_CODE = "RecommendDate";
/** プラグイン名(必須):EC-CUBE上で表示されるプラグイン名. */
static $PLUGIN_NAME = "テンプレートと変更サンプル";
/** クラス名(必須):プラグインのクラス(拡張子は含まない) */
static $CLASS_NAME = "RecommendDate";
/** プラグインバージョン(必須):プラグインのバージョン. */
static $PLUGIN_VERSION = "0.1";
/** 対応バージョン(必須):対応するEC-CUBEバージョン. */
static $COMPLIANT_VERSION = "2.12.0";
/** 作者(必須):プラグイン作者. */
static $AUTHOR = "SYSTEM_KD";
/** 説明(必須):プラグインの説明. */
static $DESCRIPTION = "おすすめ商品情報ブロックのタイトルへ最終更新日時を設定";
/** プラグインURL:プラグイン毎に設定出来るURL(説明ページなど) */
static $PLUGIN_SITE_URL = "http://systemkd.blogspot.jp/";
/** ライセンス */
static $LICENSE = "LGPL";
}

これで、「1.ファイル名および設定の整備」は完了です。

次は処理を追加していきたいと思いますが、その前にEC-CUBEへインストールしておきましょう。

インストールすうるには、次のファイルを「tar.gz」で圧縮してプラグイン用のファイルにします。


  • logo.png
  • plugin_info.php
  • plugin_update.php
  • RecommendDate.php

後は、EC-CUBEの管理画面からインストールするだけです。

rd_02

ちなみに、上の画像で表示される情報は、「plugin_info.php」で設定したものですが、表示する際のデータは「plugin_info.php」から取得しているのではなく、データベースから取得しています。
(インストール時にDBへ格納されている)
どのテーブルに入っているかと言いますと、「dtb_plugin」テーブルになります。

インストールできたら、次へ進みたいと思います。


2.処理の追加

少し脱線しましたが、気を取り直して処理の追加へ進みたいと思います。

処理を追加するソースは、
data/downloads/plugin/RecommendDate/RecommendDate.php
になります。

今回はテンプレートの表示をフックしたプラグインになりますので、処理の介入点(フックポイント)としてテンプレートの表示をフックするように「register」へ処理を追加します。

function register(SC_Helper_Plugin $objHelperPlugin) {
// テンプレートトランスフォーム
$objHelperPlugin->addAction('prefilterTransform', array(&$this, 'prefilterTransform'));
}

ここで1点、定数の設定を変更しておきたいと思います。

変更するファイルは、
data/cache/mtb_constants.php
になります。

この定数の「SMARTY_FORCE_COMPILE_MODE」を「true」に設定します。

/** SMARTYコンパイルモード */
define('SMARTY_FORCE_COMPILE_MODE', true);

詳細な説明は別途行いたいと思いますが、この設定は、プラグインにてテンプレート変更を行う場合は、trueに設定しておいた方が何かと便利なものになります。

(定数の設定場所とかも、phpとcacheとDBがありちょっとややこしいので、そのうちまとめれたらと思います)

次に、実際の処理(おすすめ商品の最終更新日の取得)部分を実装したいと思います。

といっても、たいした処理ではないですが。。

取得処理は、グローバルフックへ実装したいと思いますので、下記のコードを「RecommendDate.php」へ追加します。

function preProcess(LC_Page $objPage) {
// 新着情報の最終更新日時取得
$objQuery =& SC_Query_Ex::getSingletonInstance();
$result = $objQuery->getRow("MAX(update_date) as max_update_date", "dtb_best_products");

// yyyy/mm/dd形式で設定
$this->bp_last_update = date("Y/m/d", strtotime($result['max_update_date']));
}

おすすめ商品が格納されているテーブル「dtb_best_products」から「update_date」の最大値を取得しているだけです。

処理は実装しましたので、今回のキモのテンプレートの変更部分に移ります。


3.テンプレートの書き換え処理実装

さきに、ソースをのせます。

function prefilterTransform(&$source, LC_Page_Ex $objPage, $filename) {
$objTransform = new SC_Helper_Transform($source);
$template_dir = PLUGIN_UPLOAD_REALDIR . 'PluginBase/templates/';
switch($objPage->arrPageLayout['device_type_id']){
case DEVICE_TYPE_MOBILE:
break;
case DEVICE_TYPE_SMARTPHONE:
break;
case DEVICE_TYPE_PC:
break;
case DEVICE_TYPE_ADMIN:
default:
if (strpos($filename, 'bloc/recommend.tpl') !== false) {
$html = "

";
$html .= "(最終更新日:" . $this->bp_last_update . ")

";
$objTransform->select('div#recommend_area h2')->appendChild($html);
}
break;
}
$source = $objTransform->getHTML();
}

実際、変更を行っている部分は「13行目~17行目」の以下の部分になります。
(今回はブロックの表示を変更するので、モバイルでもスマホでもPCでもない、部分に処理を記述しています)

if (strpos($filename, 'bloc/recommend.tpl') !== false) {
$html = "

";
$html .= "(最終更新日:" . $this->bp_last_update . ")

";
$objTransform->select('div#recommend_area h2')->appendChild($html);
}

では、この抽出部分について、順に説明していきます。

1行目ですが、今回はおすすめ商品ブロックのタイトルを変更しようとしていますので、変更を行うテンプレートファイルは「おすすめ商品ブロック」のテンプレートである、「data/Smarty/templates/default/frontparts/bloc/recommend.tpl」になります。
ですので、「bloc/recommend.tpl」の場合にテンプレートの変更処理を行う様な条件を設定しています。

2行目と3行目は、変更する内容(追加する表示内容)を設定しております。
ここで「preProcess」にて取得した、おすすめ商品の最終更新日を設定しています。

4行目ですが、ここがテンプレートの変更部分になります。
selectにて、「おすすめ商品ブロックのタイトル」を指定し、その要素の子として「2行目・3行目」のHTMLを追加しています。

これを実装してやり、ページを表示すると

rd_03

この様な感じで、おすすめ商品情報の右側へ最終更新日時が表示されます。
(とりあえず表示する形なので、ブロックの位置を変えた場合等は綺麗に表示されなくなります)

プラグインで実装しておりますので、試しにEC-CUBEの管理画面よりプラグインを無効化するとこの表示変更は反映されなくなります。

どうでしょうか?表示内容や表示方法によって難易度は変わってきますが、以外に簡単に表示を追加できたのではないでしょうか?

ということで、テンプレートを変更するプラグインのサンプル作成は終了です。
本日の成果物はこちらになります。

EC-CUBEプラグインの基本的な機能について その4

SYSTEM_KDです。
テンプレートをフックして中身を書き換える処理の続きです。

実際にどうやってテンプレートの内容を書き換えるかというと、下記の手順で行うことになります。

1.変更したテンプレートのデバイスを判別

2.変更するテンプレートを特定

3.テンプレート内の変更(追加)箇所を特定

4.テンプレートの書き換え内容を設定

上記をソースで書くと、下記になります。

function prefilterTransform(&$source, LC_Page_Ex $objPage, $filename) {
$objTransform = new SC_Helper_Transform($source);
$template_dir = PLUGIN_UPLOAD_REALDIR . 'PluginBase/templates/';
switch($objPage->arrPageLayout['device_type_id']){
case DEVICE_TYPE_MOBILE:
break;
case DEVICE_TYPE_SMARTPHONE:
break;
case DEVICE_TYPE_PC:
break;
case DEVICE_TYPE_ADMIN:
default:
if (strpos($filename, 'bloc/recommend.tpl') !== false) {
$html = "

";
$html .= "(最終更新日:" . $this->bp_last_update . ")

";
$objTransform->select('div#recommend_area h2')->appendChild($html);
}
break;
}
$source = $objTransform->getHTML();
}

まず、

1.変更したテンプレートのデバイスを判別

ですが、4行目のswitch文になります。
(ここは前回説明した部分になります。)

次に、


2.変更するテンプレートを特定

ですが、これは13行目のif文の部分になります。

この例ですと、「bloc/recommend.tpl」テンプレートを変更するということになります。

表示用のテンプレートが生成されるタイミングで、prefilterTransformが呼ばれますので、その際のファイル名(テンプレート名)が設定されている「$filename」を確認し、変更を行うテンプレートの場合に処理を行うといった形になります。


3.テンプレート内の変更(追加)箇所を特定

これは、16行目の前半部分になります。

「2.」で変更対象のテンプレートを見つけましたが、実際そのテンプレートのどの部分の変更を行うかは、この部分で指定を行います。

この例ですと、$objTransform->select('div#recommend_area h2')の部分にあたります。

対象の場所はJQueryでタグを特定する場合と同じ様に行います。


4.テンプレートの書き換え内容を設定

最後に、テンプレートの書き換え内容を設定する部分ですが、これは16行目の後半部分になります。

この例では、「->appendChild($html)」の部分になります。

上記の内容ですと、「3.」で指定したタグ内の最後へ、「$html」の内容を追加するといった具合になります。

この書き換えの指定方法はいくつかあります。

  • insertBefore
  • insertAfter
  • appendChild
  • replaceElement
  • removeElement

上から、順に

insertBefore = 選択要素の前に追加

insertAfter = 選択要素の後に追加

appendFirst = 選択要素の選択に追加

appendChild = 選択要素の末尾へ追加

replaceElement = 選択要素を置換

removeElement = 選択要素を削除

といったものになっております。


ここらへんは、覚えてしまうのが、手っ取り早いかと思います。

次回は実際にテンプレートを書きける処理を追加した、プラグインを作成してみたいと思います!!

EC-CUBEプラグインの基本的な機能について その3

SYSTEM_KDです。
EC-CUBEプラグインの基本的な機能についてということで、今回は前回の宣言どおり、テンプレートのフックについて、説明できればと思います。
テンプレートのフックをテンプレートの表示をフックして書き換える処理になります。
(呼び方的にはフックというよりもTransformかな?)
フックポイントを設定するので、基本的にはページのフックと同じ様な登録方法になります。
function register(SC_Helper_Plugin $objHelperPlugin) {
    $objHelperPlugin->addAction('LC_Page_Abouts_action_after', array($this, 'abouts_after'));
    $objHelperPlugin->addAction('prefilterTransform', array(&$this, 'prefilterTransform'));
}

ページのフックと、テンプレートのフックを並べるとこんな感じです。
基本的には「SC_Helper_Plugin」の「addAction」で登録してやるかたちで、同じです。

ただ、「クラス名+_action+処理タイミング」の形で指定していた「引数1」の部分が、固定値で、「prefilterTransform」になります。

また、コールバック処理の名称も同様に「prefilterTransform」になります。

そして、コールバックの処理の引数も、ページ処理のフックの際とは異なります。
テンプレートのフックの場合は、
function prefilterTransform(&$source, LC_Page_Ex $objPage, $filename) {
}

この様な形式になります。

上記は、一部抜粋した状態ですが、使う際はこのような形を基本形として利用することになるかと思います。
function prefilterTransform(&$source, LC_Page_Ex $objPage, $filename) {
    $objTransform = new SC_Helper_Transform($source);
    
    switch($objPage->arrPageLayout['device_type_id']){
        case DEVICE_TYPE_MOBILE:
            break;
        case DEVICE_TYPE_SMARTPHONE:
            break;
        case DEVICE_TYPE_PC:
            break;
        case DEVICE_TYPE_ADMIN:
        default:
            break;
    }
    $source = $objTransform->getHTML();
}

順に説明すると、まず2行目はテンプレートのソースを取得しております。

次に、switch文の部分ですが、これはデバイスを判定しており、このデバイスの判定により、どのデバイスのテンプレートを、書き換えるかを分けれるようになっております。

テンプレートの書き換えを行う場合、デバイスの種類に関係なく、どのデバイスに対しても表示を変更する必要があるので、「分岐させる必要はないのでは?」と思われるかもしれませんが、デバイスごとにテンプレートを持っており、表示の仕方も三者三様ですので、デバイスを判定し書き換える上記の形が扱いやすいかと思います。

どの様に分かれているかは、見ればわかるかもしれませんが下記のようになっております。

DEVICE_TYPE_MOBILE = モバイル端末でアクセスされた際

DEVICE_TYPE_SMARTPHONE = スマートフォンでアクセスされた際

DEVICE_TYPE_PC = PCでアクセスされた際

最後の部分は、「DEVICE_TYPE_ADMIN」と「default」にしておりますが、ここは管理画面へのアクセスブロック系の表示となります。

実際どの様にしてテンプレートの書き換えを行うかは、さらに次回「EC-CUBEプラグインの基本的な機能 その4」でまとめたいと思います。

2014年10月2日木曜日

レビューと言うほどではないですが「Windows10」をさわってみた

SYSTEM_KDです。

次期WindowsOS の「Windows10」のテクニカルプレビュー版が公開されたと話題になっておりますが、私も流れにのってWindows10のテクニカルプレビュー版をさわってみました。

と言うもの、特に特殊な登録を追加でしなくても、Microsoft アカウントを持っていれば、このページから誰でもダウンロードすることができます。

誰でもダウンロードできるので、入れない手はない!というノリではあるのですが、実は自宅のPCはWindows7だったり・・・。(一応、8のアップグレード版は購入しているのですが、アップするタイミングを逃してたりします)

まぁ、それは置いておき早速インストールへ進みたいと思います。

(お手軽にインストールするため、VirtualBox へインストールしております)

インストールは、上記サイトより、ダウンロードしてきたISOファイルから行います。
プレビュー版ですので、言語はEnglishしか選択できませんが、キーボードの設定等は、日本語キーボード設定が可能でしたので、日本語キーボードで設定しました。
(キャプチャ撮り忘れる。。)

あとは、しばらく待機。。

w10_01

w10_02

w10_03

w10_04

途中、Microsoft アカウントを入力。
プレビュー版だからか、Microsoft アカウントを入力もしくは、新規作成するしか、先へ進む方法がないようです。
(ISOをダウンロードするには、Microsoft アカウントでログインするからアカウントを持ってないことは無いですが、必須なのは。。製品版では変わるのかな?)

w10_05

そろそろインストール完了

w10_06

そして、インストール完了です!!

w10_08

パッと見は、Windows8.1 ですね。

スタートボタンを押してみる。

w10_09

おぉー。Windows7っぽいけど、タイルがスタートメニューに入ってます

Windows8.1のスタート画面に「ピン留めする」と同様の操作で、スタートメニュー内にピン留めできるようです。
(どんどんピン留めしていくと横スクロールされる状態になりました)

w10_15

また、このスタートメニューは、高さをある程度変えれるようで、マウスでドラックしてやると、伸ばしたり

w10_17

逆に、縮めたり

w10_16

できるようです。

また、タスクバープロパティを表示し

w10_12_2

チェックを切り替える(チェックを外す)と

w10_13_2

じゃじゃん!!

w10_14

Windows8.1状態のスタート画面にできます!
※一度サインアウトが必要な、大掛かりな設定変更ではありますが。
(って一般てきにこの画面が気に入られてなかったんでしたっけ。。)

 

あと、Windows10で追加された機能「仮想デスクトップ」もちょっとさわってみました。
仮想デスクトップは物凄くざっくり説明すると「デスクトップを複数持てる!」といったところでしょうか。
(ざっくりすぎるか。。勘違いされそう)

仮想デスクトップを表示するには、「WIndowsキー + Tab」を押すか、Windowsボタンの横にある四角のボタンを押せば、表示されます。

W10_19
(仮想デスクトップをわかりやすくするため、タスクバーを左へ持って行ってます)

仮想デスクトップを切り替えたかどうかは、パッと見わかりづらいですが、アクティブなデスクトップのタスクと、アクティブでないデスクトップの差は、タスクバーを見れば分かります

アクティブなデスクトップ上のタスクは、四角で囲まれていますが、アクティブでないデスクトップのタスクは、囲みが最小化されたような状態で、端に表示されます。

task
(青枠がアクティブなデスクトップのタスク)
(赤枠がアクティブでないデスクトップのタスク)

また、ウインドウやアプリ等を別の仮想デスクトップ移動させるのも可能な様です。

方法は、仮想デスクトップの一覧を表示し(Windowsキー + Tab)、対象のウインドウを右クリック
すると、移動させるメニューが表示されますので、移動させたい仮想デスクトップを選択します。

W10_21_2

どうも仮想デスクトップが1つの場合は、移動のメニューが表示されないようです。
(ってことで、新規で仮想デスクトップを追加し、そこへ移動ってのができないみたいです。製品版では改善されているといいなー)

表面的なところだけですが、さわってみた感想としましては、特に「えぇー」と思うところはなく、けっこう良いような気がします。(まぁ、現段階では8.1からそんなに大きな変更もないようですが。。)

 

余談

Windowsメニューですが、スタートメニューへピン留めができるのだから、もちろんピン留めを外すこともできます。
ということで、ピン留めを外しまくって、Windows7っぽくしてみました。

W10_22

いや、それだけです。。
なんか、すみません m(_ _)m

以上です!!