動的なリッチカードを作成するために HTML から画像を作成する方法

RCS ビジネスの中でもパワフルで多彩なタイプのコンテンツです。メッセージはリッチカードです。リッチカードを使用すると、関連する情報をメッセージには画像または動画、タイトル、説明、最大 4 つの返信や操作の候補が表示されます。

スタンドアロンのリッチカードとリッチカードカルーセルは、魅力的なエクスペリエンスをユーザーに提供できますデータが 2 つある限りクーポンや商品などの静止画像を使用する必要があります。では、ユーザーに関する情報に基づいて動的コンテンツを送信する必要がある場合に行われます。たとえば搭乗券などです

このドキュメントでは、HTML を使用してその場で画像を作成する方法と、エージェントが送信するリッチカードに画像を埋め込むことができます。変換方法を確認次に HTML を画像に変換します

HTML から画像へ

HTML は、テキストとメディアの組み合わせをレイアウトするのに最適です。デベロッパーとして搭乗券やデータ送信などの機能をユーザーに送信するプロダクトを使用状況グラフなど、ユーザー固有の情報を使用するツールになるでしょうRCS ビジネスメッセージでは、カードは画像と動画のメディアタイプのみをサポートしているため、動的コンテンツを生成するには、まず HTML を画像に変換されます。

幸い、最新のプログラミング言語のほとんどは、少なくとも基本的な HTML をレンダリングできるウェブページまたはコンポーネントのスクリーンショット（（例: JEditorPane）これを使用して画像を生成できます

ウェブページの画像を撮影するための API も用意されています。たとえば Google の Page Insights API を使用すると、URL からスクリーンショットを自動生成できます。

例:

https://www.googleapis.com/pagespeedonline/v1/runPagespeed?url=https://www.google.com&screenshot=true

以下では、Node.js Express アプリを使用して、ユーザー固有の搭乗券を HTML 形式で変換して画像に変換し、その画像をリッチカードに添付してユーザーに送信します。

動的な搭乗券を作成する

まず、次のような搭乗券を生成する HTML が必要です。説明します。

搭乗券のサンプル

これにはさまざまな方法がありますが、ここでは URL エンドポイントを定義します。 /getTicket?msisdn=+12223334444 という Node.js アプリ。これは、HTML をレンダリングします。 EJS ビューエンジンを使って搭乗券に必要なフィールドを追加します

ユーザーの入力データを取得する getUserTicket という関数があると仮定します。リクエストやリクエストに関する情報を含むチケットオブジェクトを返します。出発時刻、座席、乗車券の種類、出発地。

Express アプリのルーター内で、getTicket エンドポイントを定義し、 getUserTicket 関数を呼び出して、チケットを EJS テンプレートに渡します。

router.get('/getTicket', function(req, res, next) {
    // Get the passed in phone number
    let msisdn = req.body.msisdn;

    // Get the ticket object for this user
    let ticket = getUserTicket(msisdn);

    // Render the ticket in HTML using an EJS template
    res.render('ticket', {ticket: ticket});
});

チケットの EJS テンプレートでは、サンプルの Bonjour を表示するために次の HTML を定義します。鉄道の切符。

<div>
  <div>
    <div class="left"><img width="200" src="/images/bonjour-rail-logo.png" /></div>
    <div class="right muted-text"><%= ticket.dateOfDeparture; %></div>
    <div class="cl"></div>
  </div>
  <div>
    <div class="left highlighted-text-color"><h2><%= ticket.startingLocation.city %></h2><br/><%= ticket.startingLocation.station %></div>
    <div class="right highlighted-text-color"><h2><%= ticket.endingLocation.city %></h2><br/><%= ticket.endingLocation.station %></div>
    <div class="cl"></div>
  </div>

  <div>
    <div class="left">
        <h3>PLATFORM <%= ticket.platform %></h3>
      <div>
        <div class="left">
          <div><h4>DEPART</h4></div>
          <div><%= ticket.departureTime %></div>
        </div>
        <div class="left">
          <div><h4>ARRIVE</h4></div>
          <div><%= ticket.arrivalTime %></div>
        </div>
        <div class="cl"></div>
      </div>
      <div>
        <div class="left">
          <div><h4>TICKET TYPE</h4></div>
          <div><%= ticket.ticketType %></div>
        </div>
        <div class="left">
          <div><h4>SEAT</h4></div>
          <div><%= ticket.seat %></div>
        </div>
        <div class="cl"></div>
      </div>
    </div>
    <div class="right">
      <img src="<%= ticket.qrCode %>" width="170" />
    </div>
    <div class="cl"></div>
  </div>
</div>

HTML から画像を作成する

搭乗券を作成するための HTML を定義しましたが、画像に変換します。

未加工の HTML とファイルの両方を変換するために利用できるオープンソースの Node.js モジュールは数多くあります。画像に変換できますこの例では、Terraform を使用して node-webshot、これは PhantomJS の光のラッパーです。

PhantomJS は、HTML を画像にレンダリングできるスクリプト可能なヘッドレスブラウザです。 PhantomJS はレンダリングに WebKit を使用するため、複雑なページも画像、CSS、JavaScript です

ノードのウェブショット（npm install --save node-webshot）をインストールした後、変換しています。 HTML からの画像への変換は簡単です。

var webshot = require('node-webshot');
let url = '/getTicket?msisdn=' + msisdn;
let htmlAsImageFileLocation = 'ticket.png';

// Define screenshot options
var options = {
      screenSize: {
            width: 550,
            height: 450
      },
      shotSize: {
            width: 550,
            height: 450
      },
      userAgent: 'Mozilla/5.0 (iPhone; U; CPU iPhone OS 3_2 like Mac OS X; en-us) AppleWebKit/531.21.20 (KHTML, like Gecko) Mobile/7B298g'
    };

// Save html as an image
webshot(url, htmlAsImageFileLocation, options, function(err) {
  // TODO: Upload image to a publicly accessible URL
});

一般公開されている URL へのファイルの保存

ウェブショットで生成された画像を利用するには、一般公開されている URL を入力します。専用のウェブサーバーで画像を生成する場合は、パブリックフォルダに保存しますが、この例では、 Google Cloud Storage に保存します。

次の関数はローカルの画像の場所を取得して、Google にアップロードします。新しく作成されたメディアリンクを返します。

function uploadImage(imageLocation) {
    const {Storage} = require('@google-cloud/storage');

    // Creates a client
    const storage = new Storage();

    // Define the Cloud storage location and filename
    const bucketName = 'sample-image-uploads';
    const yourFileDestination = 'uploaded-image.png';

    // Set the options for the upload to be readable by anyone
    const options = {
        destination: yourFileDestination,
        predefinedAcl: 'publicRead'
    };

    // Return a promise that includes the storage upload
    return new Promise(function(resolve, reject) {
        // Uploads a local file to the bucket
        storage.bucket(bucketName).upload(imageLocation, options)
            .then(results => {
                // Return the image URL
                resolve(results[0].metadata.mediaLink);
            }).catch(error => {
                reject(error);
            });
    });
}

次に、前にコメントした TODO を、次の呼び出しに置き換える必要があります。この uploadImage 関数を使用します。

// Save html as image
webshot(url, htmlAsImageFileLocation, options, function(err) {
      let uploadRequest = uploadImage(filename);

      uploadRequest.then(function(imageUrl) {
         // TODO: Use the imageUrl in a rich card to send to the user
      });
});

画像を含むリッチカードを送信する

もう少しで完了です。最後のステップとして、Terraform で sendBoardingPass(imageUrl, msisdn) 関数（RBM リッチカードを作成します）前の手順で作成した画像を使用し、ユーザーに送信します。

RBM でリッチカードを送信するには、最初のエージェントの例。

function sendBoardingPass(imageUrl, msisdn) {
    let title = 'Here is your boarding pass.';

    let suggestions = [
                {
                    reply: {
                        text: 'See more options',
                        postbackData: 'more_options',
                    }
                },
            ];

    let params = {
        messageText: title,
        msisdn: msisdn,
        imageUrl: imageUrl,
        suggestions: suggestions,
        height: 'TALL',
    };

    // Send the boarding pass
    rbmApiHelper.sendRichCard(params);
}

以下は、最終結果のスクリーンショットです。

リッチカードの動的画像

まとめと概要

リッチカードの汎用性を高める最も簡単な方法は、ダイナミック HTML を使用することです。 HTML を画像に変換します最新のプログラミング言語はライブラリや API を使用してください。必要に応じて画像のサイズ設定を試して、ユースケースに合わせて調整します。このように魅力的なビジュアルを RBM エージェント

ご健闘を祈ります。今後ともよろしくお願いいたします。