Q&A

LINEBOT(LINE Messaging API)のプレビュー画像「URLからファイルのインポートができませんでした。」

前提・実現したいこと

自社開発のLINEBOTで動画メッセージを送信したい。

発生している問題・エラーメッセージ

プレビュー画像を表示させようとすると、 LINE Bot Designerでは「URLからファイルのインポートができませんでした。」 実際のLINE(デモ用アカウント)では、画像が表示されない(そもそもエラーメッセージが表示されない仕様?)。

該当のソースコード

(関係ないので省略)

試したこと

本番の動画とプレビュー画像でいきなり行うことはせず、まずはテスト用の動画とプレビュー動画で様子を伺おうとした。 アップロードは、HPの制作・保守をしていただいている業者の方に、自社用のサーバーに、していただくことにした。 このときに、テスト用動画は37秒ほどのもの。当初の容量はかなり大きかった。しかし、自社用サーバーにアップロードできる動画の容量は5MBまでということなので、業者の方に圧縮していただいてアップロードしていただいた。 一方のプレビュー画像は、まず自社で動画の一場面をプリントスクリーンで取り、ペイントに貼り付け、PINGで作成した。この時のサイズは横1000px超あったが、容量は1MB未満だった。これを業者の方にJPEGに変換していただいたが、当初はサイズが大きく、最終的には240x215のJPEGとPINGを用意していただいたが、LINE Bot Designerでも実際のLINE(デモ用アカウント)でも、いずれも表示されなかった。 なお、サーバーのURLはhttpsで始まり、後述のとおりテスト用動画が再生されていることから、TLS 1.2以降であると推測できる。 その一方で、サンプルの動画とプレビュー画像で実感を得たく考え、ネット上でサンプルの動画とプレビュー画像を探したが、ほとんど見当たらなかった。どうにかして探し出したプレビュー画像(動画は省略)が次の2つ(URLをそのまま記載するのは問題があるかもしれないので、一部別の文字列に置き換えている)。 ・https://[xxxxxxxxx].jp/240x240.jpg  [xxxxxxxxx]はplaceholdに置き換える。 ・https://i0.wp.com/s3-ap-northeast-1.amazonaws.com/media.gamepedia/[xxxxxxx.xxxxxxxxx].com/wp-content/uploads/sites/4/2018/11/15210933/poke_180713_02.png?fit=784%2C480&ssl=1&resize=240%2C240  [xxxxxxx.xxxxxxxxx]はpokemon.gamepediaに置き換える。 この2つの画像(URL)であれば、LINE Bot Designerでも実際のLINEでも表示された。動画も、サンプルもテスト用動画も再生された。 そこで、自社の画像とサンプルの画像の違いを検討した。プロパティを確認すると、ビットの深さが、自社のは24、サンプルはどちらも8という違いがあった。そこで業者の方に、自社の画像のビットの深さを8に変更して改めて書き出していただいた(拡張子は事情によりPINGとGIF)。しかし、表示されなかった。 そして現在、サンプルのうち後者を、ビットの深さ8のまま・サイズ240・PINGのままで自社用サーバーにアップロードしていただいて、それが表示できるかどうか確認したところ、表示されないことが分かったところである。 以上の経緯から、自社用サーバーに原因があるような気がするが、どこが原因なのかさっぱり分からない。

  • 0
  • 7
  • 3223
  • twitter facebook

AWS(Amazon Web Services)のS3(Simple Storage Service)を使用したところ、 画像・動画ともに表示されるようになりました。 いくつか不安はありますが、これで運用していきたいと考えております。 ご回答誠にありがとうございます。

  • 1

申し訳ございません。 コードに記載の「本番」というのは、「最終的にこの箇所に本番用動画・プレビュー画像のURLを入れるところ」という意味であり、 現在もテスト段階にある状況で「本番」に入れているURLは、テストの動画・プレビュー画像ということです。

一方の「テスト用」というのがサンプルで拾ってきたプレビュー画像です。

https://[xxxxxxxxx].jp/240x240.jpg  [xxxxxxxxx]はplaceholdに置き換える。 ・https://i0.wp.com/s3-ap-northeast-1.amazonaws.com/media.gamepedia/[xxxxxxx.xxxxxxxxx].com/wp-content/uploads/sites/4/2018/11/15210933/poke_180713_02.png?fit=784%2C480&ssl=1&resize=240%2C240  [xxxxxxx.xxxxxxxxx]はpokemon.gamepediaに置き換える。 この2つの画像(URL)であれば、LINE Bot Designerでも実際のLINEでも表示された。動画も、サンプルもテスト用動画も再生された。

と記載した、2番目のURLと同一です。

検証をお願いしたいのは、

https://[xxx.xxxxx].or.jp/images/move/mil&mila240.png  [xxx.xxxxx]はwww.sasgaに置き換える。 ・https://[xxx.xxxxx].or.jp/images/move/mil-mila120-png8.png  [xxx.xxxxx]はwww.sasgaに置き換える。 ・https://[xxx.xxxxx].or.jp/images/move/poke_png8.png  [xxx.xxxxx]はwww.sasgaに置き換える。

です。

なお、非常に細かいことで誠に申し訳ございませんが、テスト動画のURLの記載はお控えください。 弊所は9月30日まで税理士法人という組織形態でおり、その当時に制作した動画をテストに使用しております。現在税理士法人は解散し、個人事務所に組織変更いたしました。税理士法上、税理士法人で業務していると誤認させる広告を出すことを禁止されております。現状、URLそのままの記載をされたことにより誰でも動画が比較的簡単に見られる状態にありますので、なにとぞ、なにとぞお控えください。どうぞよろしくお願いします。

  • 0

お尋ねありがとうございます。 記載内容を振り返り、言語がjsonであることを明記しておりませんでした。 また、GASを利用していることも明記しておりませんでした。 申し訳ございません。

次のようなコードを記述しております。(やはりURLをそのまま記載するのは問題があるかもしれませんので、一部別の文字列に置き換えております。)

UrlFetchApp.fetch(line_endpoint, { 'headers': { 'Content-Type': 'application/json; charset=UTF-8', 'Authorization': 'Bearer ' + CHANNEL_ACCESS_TOKEN, }, 'method': 'post', 'payload': JSON.stringify({ 'replyToken': reply_token, 'messages': [{ "type": "video", "originalContentUrl": "(諸事情により伏せさせていただきます)", // ←本番 [xxx.xxxxx]はwww.sasgaに置き換える。 "previewImageUrl": "https://i0.wp.com/s3-ap-northeast-1.amazonaws.com/media.gamepedia/[xxxxxxx.xxxxxxxxxx].com/wp-content/uploads/sites/4/2018/11/15210933/poke_180713_02.png?fit=784%2C480&ssl=1&resize=240%2C240" //テスト用 [xxxxxxx.xxxxxxxxxx]はpokemon.gamepediaに置き換える // "previewImageUrl": "https://[xxx.xxxxx].or.jp/images/move/mil&mila240.png" // ←本番 [xxx.xxxxx]はwww.sasgaに置き換える。 }, { "type": "template", "altText": strBAltText[stageD], "template": { "type": "buttons", "actions": [ { "type": "message", "label": btn0[stageD], "text": btn0[stageD] }, { "type": "message", "label": btn1[stageD], "text": btn1[stageD] }, { "type": "message", "label": btn2[stageD], "text": btn2[stageD] } ], "title": strBTitle[stageD], "text": strBText[stageD] } }] }) });

なお、本番プレビュー画像のURLにアップしている画像のビットの深さは24です。8はこちらです。 https://[xxx.xxxxx].or.jp/images/move/mil&mila240.png [xxx.xxxxx]はwww.sasgaに置き換える。 ピクセルを120にしたものはこちらです。 https://[xxx.xxxxx].or.jp/images/move/mil-mila120-png8.png [xxx.xxxxx]はwww.sasgaに置き換える。 最後に、自社用サーバーにアップしたサンプル画像はこちらです。 https://[xxx.xxxxx].or.jp/images/move/poke_png8.png [xxx.xxxxx]はwww.sasgaに置き換える。

以上よろしくお願いします。

  • 0

実際に送信したjsonを(可能であれば自社サーバーのoriginalContentUrlとpreviewImageUrlもそのまま) 共有してもらうことはできますか?

  • 0

テスト用と思われるURLで検証してみましたが、問題なく動画メッセージが送信され サムネイル画像の表示、動画の再生が行われました。

Messaging APIからのレスポンスでステータスコード200が返ってきているか、 送信しているjsonの形式は間違っていないか、 originalContentUrl、previewImageUrlのURLが間違っていないか の3点を再度確認してみると良いかと思います。

以下、検証に使ったcurlコマンドです。

curl -v -X POST https://api.line.me/v2/bot/message/push \
-H 'Content-Type: application/json' \
-H 'Authorization: Bearer {channel access token}\
-d '{
    "to": "U4af4980629...",
    "messages": [
        {
            "type": "video",
            "originalContentUrl": "https://",
            "previewImageUrl": "https://"
        }
    ]
}'
  • 0

該当の画像URLで検証したところ確かに再現しました。 画像をそのまま自分のサーバーにアップロードして試したところ問題なく表示されたので ビットの深さではなくアップロードしているサーバーに問題がありそうです。 AWS S3など他のサーバーを使うのが解決がはやいと思われます。

curl に記載していたURL削除しました。

  • 0

お待たせして申し訳ございませんでした。 この度、エックスサーバーにてサーバーを借り、そこに テスト用の動画・プレビュー画像をアップロードしました。 これらは、Webブラウザで表示・再生され、かつLINE Bot Designerでも表示・再生されました。

ところが、LINE(デモアカウント)では、画像の表示どころか、メッセージさえ出現しません。 そこで、サンプル用・テスト用、いろいろ入れ替えて実験しました結果、 エックスサーバー動画自体に問題があると推測しています。

せっかくレンタルしたのですが、エックスサーバーはTLS 1.2以前なのでしょうか。 確認方法が分かりません(LINE Bot Designerでは表示・再生されるというのに)。 おすすめのサーバーはやはりAWS S3なのでしょうか。

現在のコードは次のようなものです。

      'messages': [{
        "type": "video",
        "originalContentUrl": "(省略)", 
        "previewImageUrl": "(省略)"
      },

[xxxxxxxx.xxxx]は「(現在は伏せております)」の置き換えです。 改めまして、どうぞよろしくお願いします。

  • 0
本当によろしいですか? question.vm