Azure×EC-CUBEでお手軽ネットショップ構築

第11回 [開発合宿]EC-CUBEへの動画レビュー投稿機能の実装

この記事を読むのに必要な時間:およそ 3 分

今回開発したものの概要

狙い,目的

EC-CUBEの基本機能であるユーザレビューは星の採点とテキストによるコメント投稿の形式だが,実際に購入したユーザからの使用シーンや商品の状態などを動画で投稿することで,さらなる商品コンテンツの強化が図れると思い,その機能を追加実装しようと考えました。

当初想定された技術的な課題は,さまざまな形式の動画の投稿を許可すると閲覧時に見える見えない問題が生じると懸念されましたが,今回はMicrosoft AzureとEC-CUBEとのコラボ機能開発合宿でもあり,Azureの「メディアサービス」が用意している動画変換機能により,一律でMP4形式の動画へと変換することでこの懸念の解消を目指しました。

使用した技術

  • Microsoft Azureの「Web サイト」からのEC-CUBE導入
  • Microsoft Azureの「ストレージ」
  • Microsoft Azureの「メディア サービス」

今回開発したものの結果

開発した結果

まず,開発結果をご覧ください。

投稿画面より「動画」を投稿できます

投稿画面より「動画」を投稿できます

投稿された「動画」はAzure側でエンコードされ管理画面,または商品詳細ページから閲覧できます

投稿された「動画」はAzure側でエンコードされ管理画面,または商品詳細ページから閲覧できます

ソース一部抜粋

今回動画エンコードする際に,キューのメッセージ追加をEC-CUBEで行いました。以下抜粋です。

// 設定など
define('ENDPOINT_PROTOCOL', 'https');
define('AZURE_BLOB_ACCOUNT_NAME', 'xxxxx');
define('AZURE_BLOB_ACCOUNT_KEY', "xxxxx");

    /**
     * Azure キューメッセージ送信
     */
    function lfSendQueMsg($quename, $msg) {

        // コネクション文字列
        $connectionString = 'DefaultEndpointsProtocol=' . ENDPOINT_PROTOCOL . ';AccountName=' . AZURE_BLOB_ACCOUNT_NAME . ';AccountKey=' . AZURE_BLOB_ACCOUNT_KEY;

        $queueRestProxy = ServicesBuilder::getInstance()->createQueueService($connectionString);
        try {
            // Create message.
            $builder = new ServicesBuilder();
            // ここはbase64エンコードが必要
            $queueRestProxy->createMessage($quename, base64_encode($msg) );
        }
        catch(ServiceException $e){
            // Handle exception based on error codes and messages.
            // Error codes and messages are here: 
            // http://msdn.microsoft.com/en-us/library/windowsazure/dd179446.aspx
            $code = $e->getCode();
            $error_message = $e->getMessage();
            echo $code.": ".$error_message."
"; } }

以下のように使用します。

$this->lfSendQueMsg("myqueue", "Hello World!");

今回の開発のポイント

今回の開発ポイント工夫したところ

EC-CUBEとAzureの連携を考えるにあたり,やり取りをシンプルにしました。動画をエンコードしてもらう際に,EC-CUBEからはキューのメッセージでファイル名を送るだけです。

あとはAzureジョブの方でエンコードを行い,エンコードされたURL・ファイル名を返してもらいました。これにより,今回のAzureジョブはEC-CUBEに特化したものではなく,Azure上で動く他のサイトでも使用することができます。

本サービスの配布・導入に関しては技術的なハードルを下げる意図もあり,EC-CUBEのPlugin機能に対応するようにパッケージ化しました。Azureごとに設定が違うAccountName,AccountKeyにつきましては,プラグイン設定にて設定可能にしました。

Microsoft Azure側の設定は,Azureの管理画面から各種の設定を施しました。

ハマったところ

キューにメッセージを送信する個所でハマりました。次のAzureのドキュメントを参考にコーディングしました。

// Create message.
$builder = new ServicesBuilder();
$queueRestProxy->createMessage("myqueue", "Hello World!");

上記を実行しますと,メッセージは送信されますが,メッセージ本文が空白となります。エラーを見ますと,Base64のエンコーディングが必要でしたので,以下の修正でうまく行きました。

// Create message.
$builder = new ServicesBuilder();
$queueRestProxy->createMessage("myqueue", base64_encode("Hello World!"));

SDKの読み込みについて

EC-CUBEのプラグインで,AzureのPHPのSDKを使用する場合,ちょっと工夫が必要との事を教えていただきました。

以下のSC_ClassAutoloader_Exに,追記してSDKの読み込みを行います。

  • \data\class_extends\SC_ClassAutoloader_Ex.php
public static function autoload($class) {
    $azure_path = DATA_REALDIR . 'downloads/plugin/ReviewMovie/azure-sdk-for-php/WindowsAzure/WindowsAzure.php';
    if (file_exists($azure_path)) {
        require_once($azure_path);
    }
    parent::autoload($class);
}

⁠ReviewMovie」は今回作成したプラグイン名ですので各自の環境によります。今回azure-sdk-for-phpは,プラグインと同じフォルダに格納しました。もし複数のプラグインでこのSDKを使用する場合は,どこか共通の場所へ配置して読み込むとよいと思います。

SDKは以下よりダウンロードしました。

そして,プラグインの先頭に以下の定義も行いました。

use WindowsAzure\Common\ServicesBuilder;
use WindowsAzure\Common\ServiceException;
use WindowsAzure\Queue\Models\CreateQueueOptions;
use WindowsAzure\Queue\Models\CreateMessageOptions;

Azure側からの非同期の情報をEC-CUBEに伝える方法としてEC-CUBEネイティブのAPI活用は開発効率を高めると再認識しました。

今回開発しての感想(尾島)

Microsoft AzureのSDKを読み込むとAzureとの連携が容易になるメリットを感じた一方で,SDKの読み込み方法に関しては若干のハードルを感じました。この点に付いての情報が整っていると,開発効率も高くなり,色々なマッシュアップに挑戦する機会が増えそうです。

EC-CUBE×Azureの組み合わせに関しての感想

今までLAMP環境での導入ばかりだったEC-CUBEですが,思ったよりも簡単にWindows環境に導入できることが実感できて驚きました。また,ECサイトに彩りを添える機能の開発を視野に入れるとMicrosoft AzureのAPI群に大きな可能性を感じました。

今回開発しての感想(沼田)

EC-CUBEとの連携にあたり,AzureのPHPのSDKが用意されていますので,簡単にコーディングできました。キューの作成,キューのメッセージ送信などをEC-CUBEから試しましたが,簡単に連携できました。また,SDKが用意されているので,思ったより連携は簡単でした。

今回は,Azure側で動画のエンコード処理を行いましたが,ストリーミング配信も可能とのことでしたので,色々とメディア配信という観点で模索していきたいと思います。

コメント

コメントの記入