カテゴリ一 AWS サーバーレスブログ開発

2025-01-06 #Amazon Connect #Javascript #React #Next.js

今回はNext.jsアプリケーションにAmazon Connectの標準CCPを埋め込み、かかってきた電話がどのキュー経由でかかってきたか視覚的に確認できるアプリケーションを作成したいと思います。

Next.jsは今盛り上がっているフレームワークなので是非使いたいですよね。

当初私はamazon-connect-streamsのライブラリの影響でNext.jsとは相性が良くないと思っていたのですがNext.jsの勉強も兼ねて試しに作ってみたら動作したのでご紹介をしたいと思います。

※なお、本記事はNext.jsとamazon-connect-streamsの組み合わせが絶対的に安全であるという主張ではないのでもし本番運用を想定している場合は要件が実現できるか必ずPoCをすることを推奨いたします。

※また、本記事では動画も載せますがVercelやその他ホスティングサービス等にデプロイはしておらず動作確認は全てローカルで行いましたのでご注意ください。デプロイ環境によっては動作しないことなども考えられます。

1 Next.js環境を構築
2 フロントエンドコーディング
3 動作確認
4 最後に

Next.js環境を構築

はじめにNext.js環境を構築します。

ちなみに筆者の使用環境は以下です。

Node.js: ^20

TypeScript: ^5

React: ^19

Next: 15.1.3

OS: MacOS

まずはcreate-next-appコマンドを使用します。

npx create-next-app@latest
What is your project named? nextjs-amazon-connect-custom
Would you like to use TypeScript? Yes
Would you like to use ESLint? No / Yes
Would you like to use Tailwind CSS? No / Yes
Would you like your code inside a `src/` directory? No / Yes
Would you like to use App Router? (recommended) No / Yes
Would you like to use Turbopack for `next dev`? No / Yes
Would you like to customize the import alias (`@/*` by default)? No / Yes
What import alias would you like configured? @/*

npx create-next-app@latest

What is your project named? nextjs-amazon-connect-custom

Would you like to use TypeScript? Yes

Would you like to use ESLint? No / Yes

Would you like to use Tailwind CSS? No / Yes

Would you like your code inside a `src/` directory? No / Yes

Would you like to use App Router? (recommended) No / Yes

Would you like to use Turbopack for `next dev`? No / Yes

Would you like to customize the import alias (`@/*` by default)? No / Yes

What import alias would you like configured? @/*

次にamazon connect streamsライブラリをインストールします。

yarn add amazon-connect-streams

1	yarn add amazon-connect-streams

これで準備完了です。

フロントエンドコーディング

先に本記事で作成したコードはこちらのリポジトリに公開しているので全体のコードを確認したい方はこちらからどうぞ。

また、このコードはクローンして環境変数にAmazon Connectのインスタンスエイリアス名を入力したら実際にローカルで試してみることも可能です。

その際にAmazon Connectのインスタンス設定にて承認済みオリジンのところにlocalhost:3000などローカルサーバーを追加してください。

追加を忘れると動作致しませんのでご注意ください。

今回はPage Router ではなくAppRouterを採用しております。

それでは初期状態のlayout.tsを編集します。

import type { Metadata } from "next";
import { FC } from "react";
import "./globals.css";

export const metadata: Metadata = {
   title: "Create Next App",
   description: "Generated by create next app",
};

const RootLayout: FC<{
   children: React.ReactNode;
}> = ({ children }) => {
   return (
      <html lang="ja">
         <body>
            <main className="w-screen h-screen">{children}</main>
         </body>
      </html>
   );
};

export default RootLayout;

import type { Metadata } from "next";

import { FC } from "react";

import "./globals.css";

export const metadata: Metadata = {

title: "Create Next App",

description: "Generated by create next app",

};

const RootLayout: FC<{

children: React.ReactNode;

}> = ({ children }) => {

return (

<body>

<main className="w-screen h-screen">{children}</main>

</body>

</html>

);

};

export default RootLayout;

このような形ですね。

次にpage.tsxを以下のように設定します。

import CCP from "@/components/ui/CCP";

import { FC } from "react";

const Home: FC = () => {

   return<CCP/>;

};

export default Home;

import CCP from "@/components/ui/CCP";

import { FC } from "react";

const Home: FC = () => {

return<CCP/>;

};

export default Home;

この二つはReact Server Componentsですが次に作成するCCPコンポーネントはClient Componentsになります。

"use client";

import { useRef, useEffect, useState } from "react";

const CCP = ({}) => {
   const ccpContainerEl = useRef<HTMLDivElement>(null);
   const [queue, setQueue] = useState<string | null>(null);

   useEffect(() => {
      require("amazon-connect-streams");
      if (ccpContainerEl.current) {
         connect.core.initCCP(ccpContainerEl.current, {
            ccpUrl: `https://${process.env.NEXT_PUBLIC_AMAZON_CONNECT_INSTANCE_NAME}.my.connect.aws/ccp-v2`,
            loginUrl: `https://${process.env.NEXT_PUBLIC_AMAZON_CONNECT_INSTANCE_NAME}.my.connect.aws/ccp-v2/login`,
            loginPopup: true,
            loginPopupAutoClose: true,
            softphone: {
               allowFramedSoftphone: true,
            },
         });
         connect.agent(async (agent: any) => {
            constagentConf = agent.getConfiguration();
            console.log(agentConf);
            agent.onError((error: any) => {
               console.log(error);
            });
         });
         connect.contact(async (contact: any) => {
            contact.onConnected(() => {
               console.log("connected");
               constqueue = contact.getQueue();
               setQueue(queue.name);
            });
            contact.onEnded(() => {
               console.log("ended");
               setQueue(null);
            });
         });
      }
      return () => {
         connect.core.terminate();
         ccpContainerEl.current = null;
      };
   }, []);

   useEffect(() => {
      console.log(queue);
   }, [queue]);

   return (
      <>
         <divclassName="h-2rem text-center text-2xl text-gray-750">
            Queue: {queue || "非通話状態です"}
         </div>
         <div
            id="ccp-container"
            ref={ccpContainerEl}
            className="h-[calc(100vh-2rem)] w-full"
          />
      </>
    );
};

export default CCP;

"use client";

import { useRef, useEffect, useState } from "react";

const CCP = ({}) => {

const ccpContainerEl = useRef<HTMLDivElement>(null);

const [queue, setQueue] = useState<string | null>(null);

useEffect(() => {

require("amazon-connect-streams");

if (ccpContainerEl.current) {

connect.core.initCCP(ccpContainerEl.current, {

ccpUrl: `https://${process.env.NEXT_PUBLIC_AMAZON_CONNECT_INSTANCE_NAME}.my.connect.aws/ccp-v2`,

loginUrl: `https://${process.env.NEXT_PUBLIC_AMAZON_CONNECT_INSTANCE_NAME}.my.connect.aws/ccp-v2/login`,

loginPopup: true,

loginPopupAutoClose: true,

softphone: {

allowFramedSoftphone: true,

});

connect.agent(async (agent: any) => {

constagentConf = agent.getConfiguration();

console.log(agentConf);

agent.onError((error: any) => {

console.log(error);

});

connect.contact(async (contact: any) => {

contact.onConnected(() => {

console.log("connected");

constqueue = contact.getQueue();

setQueue(queue.name);

});

contact.onEnded(() => {

console.log("ended");

setQueue(null);

});

}

return () => {

connect.core.terminate();

ccpContainerEl.current = null;

};

}, []);

useEffect(() => {

console.log(queue);

}, [queue]);

return (

<divclassName="h-2rem text-center text-2xl text-gray-750">

Queue: {queue || "非通話状態です"}

</div>

<div

id="ccp-container"

ref={ccpContainerEl}

className="h-[calc(100vh-2rem)] w-full"

</>

);

};

export default CCP;

こうですね。

気をつけるべきポイントとしてはuseEffectの中身でamazon-connect-streamsをインポートすることです。

こちらのamazon connect streamsのIssueコメントにてNext.jsを使う場合の注意点が議論されていましたのでそちらを参照いたしました。

これで動作するはずですので動かしてみたいと思います。

動作確認

このように動作いたしました。

今回はQueue名を表示する機能をつけただけですがご覧のようにamazon connect streamsの情報を動的に取得することができたので拡張することができると思います。

また標準CCPを埋め込むだけでなくUIも自前で作成することもできるので標準CCPのUIでは実現できない要件を実装したい場合はお試しください。

最後に

ここまで読んでいただきありがとうございました。

この記事がどなたかの参考になったら幸いでございます。

他にも技術ブログをあげているのでそちらもよろしければ見ていってださい。

私のブログ記事一覧

また、株式会社ギークフィードでは開発エンジニアなどの職種で一緒に働く仲間を募集しています。

弊社に興味を持っていただいたり、会社のことをカジュアルに聞いてみたいという場合でも、ご気軽にフォームからお問い合わせください。その場合はコメント欄に、カジュアルにお話したいです、と記載ください！

採用情報はコチラ

この記事を書いた人
最近の記事

matsura

matsura (全て見る)

【採用情報】一緒に働く仲間を募集しています

2025-01-06 #Amazon Connect #Javascript #React #Next.js

Next.jsでAmazon Connectの標準CCPを埋め込み動的データを取得する方法

Next.js環境を構築

フロントエンドコーディング

動作確認

最後に

【採用情報】一緒に働く仲間を募集しています

エンジニア募集

Asterisk13CLI_チートシート

CentOS7_チートシート

カテゴリー

月別で見る

投稿者から見る

サイト内検索

Next.jsでAmazon Connectの標準CCPを埋め込み動的データを取得する方法

Next.js環境を構築

フロントエンドコーディング

動作確認

最後に

【採用情報】一緒に働く仲間を募集しています

関連投稿

オフィスにかかってきた電話の内容を生成AIにかませて議事録作成を自動化する

AWS Partner Central API for Sellingを使うための準備と疎通確認してみた

NAT GatawayからNAT インスタンスに乗り換えて約95％のコスト削減をしてみた

Amazon Connectで同じ電話番号から何回かかってきたかをカウントしてみた

中級figma教室

Twilio Flex v2.x.x系でLINE連携を実装する方法

エンジニア募集

Asterisk13CLI_チートシート

CentOS7_チートシート

カテゴリー

月別で見る

投稿者から見る

サイト内検索