6
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

EC-CUBEAdvent Calendar 2023

Day 8

EC-CUBEとLINE WORKSの連携

Last updated at Posted at 2023-12-07

はじめまして!

ざっくり20年位システム開発関連のお仕事をさせて頂いております。
公開されている内容をベースにお仕事で経験した事例を皆さまにご紹介できたらと思います。

現在とあるECサイト(BtoB系)の保守開発を担当させて頂いているのですが、
ベースになっているのはEC-CUBE(オープンソースのElectronic Commerce向けコンテンツ管理システム(CMS))のVersion2です。
https://www.ec-cube.net/product/cases/detail.php?id=2994
ECサイト自体は約9年の歴史があり、サービススタートから現在まで大量の機能追加とカスタマイズが行われています。

LINE WORKSとは?

LINEについては説明不要かと思いますが、
業務用に利用出来るビジネス版のLINEがLINE WORKSです。
LINEで使える機能に加えて、様々なビジネスシーンで利用するための管理機能やセキュリティ面での強化がされています。普段使い慣れているLINEと操作性もほぼ同じなので、導入が容易な事もメリットになります。
https://line.worksmobile.com/jp/

対応させて頂いたのは、ECサイトからのLINE WORKSアカウントの登録、
そしてECサイト利用者に向けた専用アプリの提供です。
https://line.worksmobile.com/jp/appdirectory/smart-kaigo/

LINE WORKSでチャットボット機能を利用するには「Bot API」を利用する必要があります。
例えばメッセージの送信には以下を利用する事が出来ます。
https://developers.worksmobile.com/jp/docs/bot-user-message-send
メッセージにはボタン、リスト、カルーセルなど幾つかのテンプレートを使い分ける事が出来ます。(※Flexible Templateというレイアウトをカスタマイズできるメッセージもあります)

LINE WORKS上でユーザーのメッセージを受信して返信するBotを運用する為のサーバー(以下ボットサーバー)を用意する必要があります。

EC-CUBEとLINE WORKSの連携イメージ

単純なメッセージのやり取りをするだけのボットアプリであればここまでで十分ですが、
ECサイトの商品検索や購入機能を備えるにはこのボットサーバーから、
EC-CUBEとAPI経由でやり取りする必要があります。
例えばカートインする場合のイメージとしては以下となります。

カートイン時のAPIのやりとり.png

このAPIを実行する以前にLINE WORKSのボットでカートインをしたユーザとEC-CUBE上のユーザを紐づける必要があります。今回はWOFFの以下メソッドから取得できるuserIdを利用してセッションとユーザ情報への紐づけを行っています。

woff.getProfile()

WOFF(WORKS Front-end Framework わふと発音します)はLINE WORKSがインストールされている環境で利用出来るWeb アプリのプラットフォームです。(使ってみた感じiOS、androidアプリ上で動くWebViewにLINE WORKS専用のSDKが追加されたものというのが分かりやすいでしょうか)
この部分についてはEC-CUBEの基本の仕組みを上手く利用し、設計・開発コストを抑える面でもスムーズに対応出来ました。
EC-CUBE2ではテンプレートを切り替える仕組みがあるので、WOFF用のテンプレートを用意し、ユーザーエージェントによってWOFF用の画面を表示する対応を行いました。SC_SiteView_Ex(PC版)、 SC_SmartphoneView_Ex(スマホ版)、SC_AdminView_Ex(管理画面)に加えて、SC_WoffView_Ex(WOFF版)を追加しています。
※定数にもDEVICE_TYPE_PC、DEVICE_TYPE_SMARTPHONE、DEVICE_TYPE_ADMINに加えて、DEVICE_TYPE_WOFFを追加しました。

以下はログイン用のWOFFからセッションを管理するイメージです。
UserIdを利用してセッション管理する.png

EC-CUBEにはセッション紐付けの仕組みとして、
SC_SessionFactory_UseCookie_Ex や、SC_SessionFactory_UseRequest_Ex というクラスがある
ので、LINE WORKSアプリ用のセッション管理クラスを用意し、LINE WORKSアプリからUserIDを使って認証する時はそちらのクラスを利用するように制御しています。

このUserIDは「LINE WORKSアカウント」に登録したメンバー(LINE WORKSユーザー)毎にユニークになるので、一度ログインしたスマホとは別のスマホでログインするとセッションの紐づけを再度実行し、過去のセッションは利用出来ないようにする等の制御が必要であること、また、UserIDが改ざんされていない事が保証されているか等、セキュリティ面にも注意が必要です。

LINE WORKSではなく、LINEでも同様の仕組みを検討したい場合は
LIFF(LINE Front-end Framework)という同様のWebアプリのプラットフォームも有るので是非参考にしてみてください。
https://developers.line.biz/ja/docs/liff/overview/

LINE WORKSならではの機能

トークルームのメッセージのやり取りだけでECサイトの全ての機能を実装する事は難しいので、どこまでをボット上でやるか、ECサイト(WOFF)上でやるかはECサイトの特性に合わせた設計が必要です。今回ボットアプリを初めて設計しましたが、シンプルだからこそ、工夫の余地があり面白い開発が出来たと思います。

例えば承認依頼を出した後に、却下された受注に関して直接却下理由をトークルーム内で問合せできる機能を作りました。
clipboard-202208160848-8xyr9.png

QRコードを読み取る機能等も追加されているので、商品コードのQRコードなどを読み込ませて直接商品をカートインできる仕組みとかが出来たら楽しそうですよね。
https://developers.worksmobile.com/jp/docs/woff-api#woff-scanqr

国内でも沢山あるネットショップの中にこんなものも有るよというご紹介でした!

弊社ではEC-CUBEの導入開発や、LINE WORKSとの連携等様々なカスタマイズ、ジャンル違いですがXR(AR、MR、VR)の開発も行っております。何かお困りの際はぜひご相談頂ければ幸いです。^^

最後までお読み頂き誠にありがとうございました。

参考:
0から始めるLINE WORKS API
https://qiita.com/mmclsntr/items/3da41a9d03d6dba16290

LINE WORKSで初めてのBot開発!(前編)
https://qiita.com/tokotan/items/f615f4a62219d655436f

WOFFガイド
https://developers.worksmobile.com/jp/docs/woff-guide

LIFF v2 APIリファレンス
https://developers.line.biz/ja/reference/liff/

(※LINE WORKS新米開発者なので、認識違いが有ればやさしく教えてくださいw)

6
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?