){kind=small}
Conversation APIとCloudinaryを使ったチャットログのスクリーンショットと保存
所要時間：1 分
オンライン上でチームメイトと協力し、何か印象的なものを創作・デザインし、それが記憶から消えてしまう前に、そのアイデアを素早く保存する必要がある！
あるいは、あなたがお気に入りの会社のカスタマーサービス・ヘルプエージェントやボットとチャットしていると想像してみてください。あなたの画面上で何が起こっているのか、彼らに正確に見せることができたら便利だと思いませんか？
これらのシナリオに聞き覚えはありませんか？ それならラッキーだ！なぜなら Cloudinary APIを使えば、スクリーンショットをすばやくクラウドにアップロードし、画像に注釈を付けて重要な詳細を記載したり、ファイルをタグ付きフォルダに整理したりすることができます。
Nexmoとの組み合わせ Conversation APIと組み合わせることでと組み合わせることで、Cloudinaryのスクリーンショットをチャット、ビデオ、メッセージングで同僚やカスタマーサービスと素早く共有することができます！
今日、Cloudinary APIと協力して、デスクトップとNexmo会話のチャットログのスクリーンショットを撮り、その画像に会話の重要な文脈の詳細を注釈し、その画像をクラウドに保存して整理し、将来簡単にアクセスできるようにするアプリを作ります！
オープンチャットログ内で、顧客またはエージェントのどちらかが「スクリーンショット」という単語をログに入力すると、スクリーンショットがキャプチャされます。その画像には NexmoカンバセーションAPIその後、Cloudinaryによってタグ付けされ、ポータル内のフォルダにアップロードされます！
Vonage API Account To complete this tutorial, you will need a Vonage API account. If you don’t have one already, you can sign up today and start building with free credit. Once you have an account, you can find your API Key and API Secret at the top of the Vonage API Dashboard.
このチュートリアルは、最近のブログ投稿を発展させたものです。 ページ上のライブチャットアプリを構築する方法.Glitch でリミックスできるコードを追加します。 ここで.
Glitchを使うのではなくローカルで実行したい場合は、以下のリポジトリをクローンしてください。 このリポジトリをクローンして Ngrokを使って ウェブフックサーバーをローカルで実行します。
Ngrok をご存知でない方は、以下のチュートリアルをご参照ください。 チュートリアルをご参照ください。
前のチュートリアルを踏まえて .envファイルにはNexmoの認証情報（APIキー、シークレット、アプリケーションID、プライベートキー、サポートエージェントのユーザーID）がすでに入力されているはずです。そうでない場合は、以下の手順に従ってください。 こちら.
次のサイトに移動します。 クラウドバイナリーにアクセスし、無料アカウントにサインアップする。クラウド名、APIキー、シークレットを保存し、.envファイルに追加します。
CLOUD_NAME="YourCloudName"
CLOUD_API_KEY="1234567890"
CLOUD_API_SECRET="abCdeFghIjkLmnOpqrsTuvWxyZ"あるいは、コンソールのAPIシークレットの下にある環境変数 CLOUDINARY_URLを使うこともできます。
という npm ライブラリをインストールします。 desktop-screenshot.
ファイルの先頭で server.jsファイルの先頭で、この2つを呼び出す：
var cloudinary = require("cloudinary").v2;
var screenshot = require("desktop-screenshot");次に、先ほど追加した認証情報を参照して Cloudinary の設定を行います。 .envファイルに追加しました：
cloudinary.config({
cloud_name: process.env.CLOUD_NAME,
api_key: process.env.CLOUD_API_KEY,
api_secret: process.env.CLOUD_API_SECRET
});ファイル内のハンドラーは server.jsファイル内のハンドラーは "/webhooks/event".このハンドラの中でCloudinary APIを呼び出します。
ユーザがチャットで「スクリーンショット」というテキストを入力すると、デスクトップの画像が撮影されるというシナリオです。スクリーンショットはCloudinaryにアップロードされ、Cloudinaryのポータル内のタグ付きフォルダに整理されます。
ハンドラ内で app.route("/webhooks/event").postハンドラ内では、単純な if statementがそのロジックを開始するために使われます：
if (req.body.body.text == "screenshot") {
screenshot("screenshot.png", function(error, complete) {
if (error) console.log("Screenshot failed", error);
else console.log("Screenshot succeeded");
});
}ここでは、npmライブラリ desktop-screenshotが呼び出され、画像が "screenshot.png "としてローカルに保存される。
次に if statementで、その画像をCloudinaryポータルにアップロードしましょう：
cloudinary.uploader.upload(
"screenshot.png",
{
tags: "screenshot",
overlay: {
font_family: "Arial",
font_size: 50,
text:
"Conversation: " +
req.body.conversation_id +
"Timestamp: " +
req.body.timestamp
}
},
function(error, result) {
console.log(result, error);
}
);参照されたidとタイムスタンプは、NexmoのConversation APIを通じて利用可能になり、アプリケーションとユーザーの履歴にコンテキストとして保存されます。
スクリーンショットファイルは、Cloudinaryにアップロードされる前に、会話IDとタイムスタンプを含むオーバーレイが追加されます。追加されたタグは、ファイルを "screenshot" という特定のフォルダに整理します。
cloudinary files
このチュートリアルでは、CloudinaryとNexmoの使用例をいくつか紹介します。画像や会話にできることは本当にたくさんあります。今日は、デスクトップとNexmo会話のチャットログのスクリーンショットを撮り、その画像に会話の重要な文脈の詳細を注釈し、その画像をクラウドに保存して整理し、将来簡単にアクセスできるようにする方法を説明しました。
Cloudinaryを使えば、画像にもっとたくさんのことができます。トリミングしたり、強調したり、たくさんの画像を1つにコラージュしたりして、画像を操作することができます。ドキュメント ドキュメントどんなクリエイティブなことを思いついたか、私たちと共有してください！
そしてNexmo Conversation APIを使えば、複数のメンバー間のチャット、Voice、Video、メッセージングなど、あらゆるスタイルのコミュニケーションを組み合わせて、1つのコミュニケーション・イベント内にコンテキストを保存することができます。読者の皆様には、Conversation APIを使って、遊び、探求し、創造し、あなたの発明や発見をシェアしていただくことをお勧めします！
この GitHub リポジトリをチェックしてください！
スペシャルサンクステッサ・メロに感謝します。 Cloudinaryに感謝します！