){kind=small}
Conversation APIとCloudinaryを使ったチャットログのスクリーンショットと保存
所要時間：1 分
オンライン上でチームメイトと協力し、何か印象的なものを創作・デザインし、それが記憶から消えてしまう前に、そのアイデアを素早く保存する必要がある！
あるいは、あなたがお気に入りの会社のカスタマーサービス・ヘルプエージェントやボットとチャットしていると想像してみてください。あなたの画面上で何が起こっているのか、彼らに正確に見せることができたら便利だと思いませんか？
これらのシナリオに聞き覚えはありませんか？ それならラッキーだ！なぜなら Cloudinary APIを使えば、スクリーンショットをすばやくクラウドにアップロードし、画像に注釈を付けて重要な詳細を記載したり、ファイルをタグ付きフォルダに整理したりすることができます。
Nexmoとの組み合わせ Conversation APIと組み合わせることでと組み合わせることで、Cloudinaryのスクリーンショットをチャット、ビデオ、メッセージングで同僚やカスタマーサービスと素早く共有することができます！
今日、Cloudinary APIと協力して、デスクトップとNexmo会話のチャットログのスクリーンショットを撮り、その画像に会話の重要な文脈の詳細を注釈し、その画像をクラウドに保存して整理し、将来簡単にアクセスできるようにするアプリを作ります！
オープンチャットログ内で、顧客またはエージェントのどちらかが「スクリーンショット」という単語をログに入力すると、スクリーンショットがキャプチャされます。その画像には NexmoカンバセーションAPIその後、Cloudinaryによってタグ付けされ、ポータル内のフォルダにアップロードされます！
このチュートリアルは、最近のブログ投稿を発展させたものです。 ページ上のライブチャットアプリを構築する方法.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に感謝します！