当サイトを最適な状態で閲覧していただくにはブラウザのJavaScriptを有効にしてご利用下さい。
JavaScriptを無効のままご覧いただいた場合には一部機能がご利用頂けない場合や正しい情報を取得できない場合がございます。
承知しました
本サイトではWebサイトのエクスペリエンスを向上させるために、Cookieを使用しています。Cookieはブラウザの設定から無効にできます。本サイトで使用するCookieについては、プライバシーポリシーをご確認ください。

Blog

ブログ

統合

WebhookとSlackでリモートコンテンツエディターを最新の状態に保つ

By Eric Dugre  

人々が自宅で仕事をしているこのような困難な時期に、チームのすべてのメンバーにすべてのニュースを最新の状態に保つことが難しくなっています。人々は電子メールに圧倒され、多くの重要なメッセージが見過ごされて消えてしまう可能性があります。 Slackを使用して、Kontentで公開されたニュースを自動的に投稿した場合はどうなりますか?

この記事では、コンテンツアイテムが公開されたら、Webhookを使用してSlackメッセージを自動的に投稿する方法を紹介します。

チームを最新の状態に保つことの大きな部分はコミュニケーションです。ますます多くの企業が、チームメンバーに更新、会議出席依頼、および休憩室にケーキがあることを通知するためにインスタントメッセージングに依存しています。 Slackは最も人気のあるクライアントの1つであるため、チームのコミュニケーションプラットフォームでKontentのWebhookサポートを活用する方法を紹介したいと思います。

プロセスの定義

プロセスの最初のステップは、統合がどのように見えるかを定義することです。会社やプロジェクトはそれぞれ異なるため、システムを接続する方法はすべて要件によって異なります。私の場合、コンテンツアイテムが公開されたときに、チャンネルにメッセージを投稿したいと思いました。このプロセスは、私のマーケティング担当者が新しいコンテンツの最新情報を入手するのに役立ちます。これは、プロジェクト内でコンテンツを作成および公開している外部の編集者が複数いる場合に特に役立ちます。これが私の機能のワークフローです。

Kentico Kontent

Webhookの作成

ワークフローを定義したら、統合を作成する準備が整いました。 Webhookを使用する場合、コンテンツが更新されたときにKontentが呼び出すことができるサーバーレス関数が必要でした。これは、MVCアプリケーション内のルート/関数、Amazon Lambda関数、Azure関数、または別のプロバイダーの同様の関数である可能性があります。 Azure Functionsにはこのニーズに固有の構成があるため、私のソリューションに適していました。

AzureFunctionsへの統合がどのように機能するかを段階的に見ていきましょう。まず、新しいHttpトリガー関数を作成する必要があります。

Kentico Kontent

構成については、デフォルトのままにします。 Azure Functionsの[関数のURLを取得]リンクをクリックすると、関数のパブリックURLアドレスを確認できます。まもなく必要になります。

Kentico Kontent

KenticoKontentの構成

次のステップは、KenticoKontent内でWebhookを構成することです。プロジェクト設定に移動し、新しいWebhookを作成します。 「配信APIトリガー」セクションで「公開」を選択します。

Kentico Kontent

プロセスの後半でSecret値が必要になることに注意してください。

SlackWebhookの作成

Slackチャネルで、AzureFunctionからのメッセージを投稿するための着信Webhookアプリを追加します。

Kentico Kontent

作成したら、「統合設定」メニューでWebhookURLを見つけることができます。

Kontent統合の追加

すべての設定が完了したら、Azure関数にコードを追加する準備が整いました。まず、いくつかのファイルを作成する必要があります。これを行うには、ファイルビューアを展開します。

Kentico Kontent

次のファイルを追加します。

  • function.proj
  • slackClient.csx

function.projで、Kentico.Kontent.Deliveryへの参照を追加する必要があります。

   netstandard2.0    

このslackClient.csxは、メッセージを送信するためにSlackにPOSTリクエストを実行する単純なクラスです。

using System.Text;using System.Net;using Newtonsoft.Json;using System.Collections.Specialized; //A simple C# class to post messages to a Slack channel//Note: This class uses the Newtonsoft Json.NET serializer available via NuGetpublic class SlackClient{ private readonly Uri _uri; private readonly Encoding _encoding = new UTF8Encoding(); public SlackClient(string urlWithAccessToken) { _uri = new Uri(urlWithAccessToken); } //Post a message using simple strings public string PostMessage(string text, string username = null) { Payload payload = new Payload() { Username = username, Text = text }; string payloadJson = JsonConvert.SerializeObject(payload); using (WebClient client = new WebClient()) { NameValueCollection data = new NameValueCollection(); data['payload'] = payloadJson; var response = client.UploadValues(_uri, 'POST', data); //The response text is usually 'ok' return _encoding.GetString(response); } } public class Payload { [JsonProperty('username')] public string Username { get; set; } [JsonProperty('text')] public string Text { get; set; } }}

これらのファイルを配置すると、 run.csxファイルの関数のコードを更新できます。まず、関数の残りの部分に必要ないくつかの使用法とその他のコードを追加します。

 #r 'Newtonsoft.Json'#load 'slackClient.csx'using Kentico.Kontent.Delivery;using System.Net;using System.Text;using Microsoft.AspNetCore.Mvc;using Newtonsoft.Json;using System.Security.Cryptography;static bool blnValid = false;static bool blnPublish = false;static string slackChannel = 'https://hooks.slack.com/services/[...]';static string previewKey = '';static string projectId = '';static string webhookSecret = '';private static string GenerateHash(string message, string secret){ secret = secret ?? ''; UTF8Encoding SafeUTF8 = new UTF8Encoding(encoderShouldEmitUTF8Identifier: false, throwOnInvalidBytes: true); byte[] keyBytes = SafeUTF8.GetBytes(secret); byte[] messageBytes = SafeUTF8.GetBytes(message); using (HMACSHA256 hmacsha256 = new HMACSHA256(keyBytes)) { byte[] hashmessage = hmacsha256.ComputeHash(messageBytes); return Convert.ToBase64String(hashmessage); }}

slackChannel変数に前のセクションのURLを入力します。以前のWebhookシークレットを追加してから、Kontentの[プロジェクト設定]> [APIキー]ページからプロジェクトIDとプレビューAPIキーを追加します。

今度はメインコードです! Runメソッドでは、最初にWebhookの本体を取得し、署名を検証する必要があります。

 // Get the signature for validationIEnumerable headerValues = req.Headers['X-KC-Signature'];var sig = headerValues.FirstOrDefault();// Get bodystring content;using (Stream receiveStream = req.Body){ using (StreamReader readStream = new StreamReader(receiveStream, Encoding.UTF8)) { content = readStream.ReadToEnd(); }}// Generate a hash using the content and the webhook secretvar hash = GenerateHash(content, webhookSecret);// Verify the notification is validif(sig != hash){ return new HttpResponseMessage(HttpStatusCode.Unauthorized) { ReasonPhrase = 'Signature validation failed' } as IActionResult;}

署名が有効な場合は、JSONを使用して本文を解析し、公開操作であることを確認できます。 Webhook通知は実際には単なる通知であり、実際のアイテムデータは含まれず、コードネームのみが含まれます。したがって、コンテンツアイテムのコードネームでデータをロードPostToSlack

 var settings = new JsonSerializerSettings { NullValueHandling = NullValueHandling.Ignore, MissingMemberHandling = MissingMemberHandling.Ignore };dynamic data = JsonConvert.DeserializeObject(content, settings);if (data == null){ return new HttpResponseMessage(HttpStatusCode.BadRequest) { ReasonPhrase = 'Please pass data properties in the input object' } as IActionResult;}// Make sure it's a valid operationif(data.message.operation.ToString().ToLower() == 'publish'){ List lstCodeNames = new List(); foreach(var item in data.data.items) { lstCodeNames.Add(item.codename.ToString()); } if(lstCodeNames.Count > 0) { await PostToSlack(lstCodeNames, log); } return new HttpResponseMessage(HttpStatusCode.OK) as IActionResult;}return new HttpResponseMessage(HttpStatusCode.NoContent) as IActionResult;

PostToSlackメソッドを作成する必要があります。 SlackClientが使用され、コードネームがループされ、更新されたコンテンツアイテムごとにSlackにメッセージが投稿されます。

 private static async Task PostToSlack(List list, ILogger log){ try { SlackClient slackclient = new SlackClient(slackChannel); IDeliveryClient deliveryclient = DeliveryClientBuilder .WithOptions(builder => builder .WithProjectId(projectId) .UsePreviewApi(previewKey) .Build()) .Build(); foreach(string codename in list) { DeliveryItemResponse response = await deliveryclient.GetItemAsync(codename); if(response != null) { var item = response.Item; var msg = slackclient.PostMessage( username: 'KontentBot', text: 'Content update: '' + item.System.Name ); } else { log.LogInformation($'Item {codename} not found!'); } } } catch (Exception ex) { log.LogInformation(ex.Message.ToString()); }}

Slackメッセージには、ここに「コンテンツの更新:{アイテム名}」が表示されます。実際のコンテンツタイプに基づいて自由に調整し、より価値のある情報を出力してください。

テスト

すべてが整ったので、テストする準備が整いました。 Kentico Kontentを開き、コンテンツアイテムを公開します。

Kentico Kontent

次に、メッセージがSlackチャネルに投稿されたことを確認します。

Kentico Kontent

よくやった!これで、チームが何が起こっているかを常に最新の状態に保つことが容易になります。

前進する

この記事では、会社のSlackチャネルをコンテンツ管理プロセスに統合する方法を紹介しました。この機能は、更新をリアルタイムで配信し、問題をより早く通知することで、チームの生産性を高めるのに役立ちます。あなたとあなたのチームがこのホームオフィス期間をスムーズに乗り越えるのに役立つことを願っています。ここで完全なソースコードを見つけてください:

コードを取得する

Headless CMSの導入をお考えでしょうか?

クラウドとマルチデバイスに最適化されたKentico Kontentをお試しください