EC-CUBEとLINE WORKSの連携

はじめまして！

ざっくり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](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3623010/d17f0dd8-537f-5157-2405-caf3b1f5eed9.png)

このAPIを実行する以前にLINE WORKSのボットでカートインをしたユーザとEC-CUBE上のユーザを紐づける必要があります。今回はWOFFの以下メソッドから取得できる**userId**を利用してセッションとユーザ情報への紐づけを行っています。
```
woff.getProfile()
```
https://developers.worksmobile.com/jp/docs/woff-api#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](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3623010/568adf18-dc4a-95bb-2b0e-79f322916f39.png)

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

:::note warn
この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](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3623010/ea6122b1-ffd7-6a00-1071-3525db4a3550.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新米開発者なので、認識違いが有ればやさしく教えてくださいｗ）