LINE Messaging API で作ったリッチメニューが表示できない

Question

LINE Messaging APIを利用して、リッチメニューの作成をしております。
使用言語はpython、AWS Lambda　に関数を記載しています。

ご参考：リッチメニューについて

下記のコードをデプロイすると、エラーが出ないかわりに、リッチメニューが表示されません。。

----ソースコード----

import os
import json
import requests

from linebot import (
    LineBotApi, WebhookHandler
)
from linebot.models import (
    MessageEvent, TextMessage, TextSendMessage, ImageMessage, ImageSendMessage,TemplateSendMessage,CarouselTemplate,CarouselColumn,
    PostbackAction,MessageAction,PostbackTemplateAction,URIAction,
    ButtonsTemplate,QuickReply,QuickReplyButton,FlexSendMessage,BubbleContainer,ImageComponent,
    RichMenu, RichMenuArea, RichMenuBounds, RichMenuResponse, RichMenuSize
)

from linebot.exceptions import (
    InvalidSignatureError
)

handler = WebhookHandler(os.getenv('LINE_CHANNEL_SECRET'))
line_bot_api = LineBotApi(os.getenv('LINE_CHANNEL_ACCESS_TOKEN'))


        # RichMenuの作成
        rich_menu_to_create = RichMenu(
            size = RichMenuSize(width=2500, height=843),
            selected = True,
            name = "Nice richmenu",
            chat_bar_text = "Tap here",
            areas = [RichMenuArea(bounds = RichMenuBounds(x = 0, y = 0, width = 2500, height = 843),action = URIAction(label = 'Go to line.me', uri = 'https://line.me'))]
        )
    
        richmenuid = line_bot_api.create_rich_menu(rich_menu = rich_menu_to_create)

        # RichMenu用の画像
        path = r"C:/Users/81909/Desktop/250-min.png"

        # 画像をRichMenuに指定
        with open(path, 'rb') as f:    
            line_bot_api.set_rich_menu_image(richmenuid, "image/png", f)

        # デフォルトのRichMenuに設定する
        line_bot_api.set_default_rich_menu(richmenuid)
    
        

----参考にしたもの----
１．LINE DEVELOPERSのサイト
２．GitHub line
/
line-bot-sdk-python
３．【LINE Messaging API】Pythonでリッチメニューを作成

Answer 1

lambdaでローカルの画像ファイルを直接指定することはできないと思います。
Amazon S3上にホスティングした画像ファイルを指定するならば、https://teratail.com/questions/212667 等を参考にしてはいかがでしょうか。

なお、リッチメニューに指定できる画像ファイルは、下記の制限があります。
https://developers.line.biz/ja/docs/messaging-api/using-rich-menus/#creating-a-rich-menu-using-the-messaging-api

画像フォーマット：JPEGまたはPNG
画像の幅サイズ（ピクセル）：800以上、2500以下
画像の高さサイズ（ピクセル）：250以上
画像のアスペクト比（幅/高さ）：1.45以上
最大ファイルサイズ：1MB

---

他の方法

画像をホスティングしたくない場合は、画像データをbase64エンコードして利用する方法もあります。

img_encode.py

from base64 import b64encode

with open("ローカルの画像イメージのファイルパス", "rb") as f:
    dat = b64encode(f.read())

with open("save.txt", "w") as f:
    f.write(dat.decode())

上のimg_encode.pyをローカルのpython環境で実行すると、同じフォルダに「save.txt」というファイルができるので、save.txtをテキストエディタで開いて、中の文字列（全部）をコピーします。
上のimg_encode.pyをローカルのpython環境で実行して、ターミナルに出力された「b'～」から「'」までの文字列をコピーします。
(何行にもわたる乱数みたいな長い文字列ですが全部コピー）
（このコードは画像をbase64エンコードした文字列データを得るために行うものであって、lambdaで実行する必要はありません）

元のlambdaで実行するコードを下記のように修正します。

from linebot import (～)
略
+from base64 import b64decode

handler = WebhookHandler(os.getenv('LINE_CHANNEL_SECRET'))
line_bot_api = LineBotApi(os.getenv('LINE_CHANNEL_ACCESS_TOKEN'))


        # RichMenuの作成
        rich_menu_to_create = RichMenu(
　　　　　　　　　　　略
        )

        richmenuid = line_bot_api.create_rich_menu(rich_menu = rich_menu_to_create)

        # RichMenu用の画像
-       path = r"C:/Users/81909/Desktop/250-min.png"
+       encoded_img = "iVBORw0KGgoAA～～～～"  # コピーした文字列
        # 画像をRichMenuに指定
-       with open(path, 'rb') as f:    
-            line_bot_api.set_rich_menu_image(richmenuid, "image/png", f)
+       # Base64エンコードされた画像データをデコードしたバイト列を指定する。
+       line_bot_api.set_rich_menu_image(richmenuid, "image/png", b64decode(encoded_img))

        # デフォルトのRichMenuに設定する
        line_bot_api.set_default_rich_menu(richmenuid)

Comments

[turbo3681]

とてもご丁寧に解説していただきましてありがとうございました！！
見た瞬間、これならうまくいきそうな感触を得ました・・・が、
結論としてまだリッチメニューの表示にはいたっておりません。

頂いたアドバイスを元にやったこと、疑問に思ったことなどを以下にまとめます。

１．今回リッチメニューに使う画像ファイル
　2500px × 843px　のためサイズは問題なし
　2500/843=2.97　のため画像のアスペクト比は問題なし
　863kb　のためファイルサイズは問題なし

２．画像ファイルのホスティング
　Amazon S3上にホスティングした画像ファイルを指定しましたが、
　同じようにエラー表示は出ず、またリッチメニューの表示もない状態です。

３．新たなimportについて
　こちらはアドバイスいただかないとわからなかった点で、とても助かりました。
　ちなみにfrom base64 import b64decodeだけでなく、from base64 import b64encodeも
　必要ですよね？？（という理解で大丈夫でしょうか）

４．encoded_imgの文字列について
　こちら長文のコードが出たのですが、アドバイス頂いたのとは少し違います。
　これがうまくいかない理由なのかなと思っています・・・
　「b'～」で始まり「'」で終わるとありましたが、
　「単なるアルファベット」で始まり「'」で終わっています。

　こんな感じです。
　「Xq/ufSJ0LS6fSc1omwjPpbQ3AM7K4xiJtnVBaB・・・」で始まり
　「・・・jg7/k+/+P5mASfM/t00hAAAAAElFTkSuQmCC'」で終わっています。

　あと、この文字列をencoded_imgに代入する際は、''で囲う必要はありますでしょうか？
　こんな感じです。
　「'Xq/ufSJ0LS6fSc1omwjPpbQ3AM7K4xiJtnVBaB・・・」から
　「・・・jg7/k+/+P5mASfM/t00hAAAAAElFTkSuQmCC''」まで

[退会済みユーザー]

２．画像ファイルのホスティング
　すみませんが、手元ではAmazon S3の環境がないため、適切なやり方はわかりません。

３．新たなimportについて
ご指摘の通りエンコード用のプログラムにb64encodeをimportする必要がありましたので、修正しました。

４．多分出力テキストが大きすぎてターミナルからあふれてしまったのだと思われます。
エンコード用プログラムについて、ターミナルへの出力ではなく、テキストファイルへの出力に変更しました。
img_encode.pyをローカルで実行するとimg_encode.pyの実行ディレクトリにsave.txtというテキストファイルができるはずなので、その中の文字列をコピーし、lamdaのコード内に記述してください。
（ここでできるテキストファイルの中身はbでは始まっていません。
回答欄記載コードのように、save.txt内の文字列をそのまま引用符で囲んでいただければokだと思います（bで始める必要なし）

[turbo3681]

早速ありがとうございます。
ちょっと試してみたのですが、やはりうまくいきません（今までと同じくエラーもでない状況です）。

参考までに現状のコードを記載しておきます。
ちなみに、richmenuidの取得までは出来ていることは確認済です。

# RichMenuの作成
rich_menu_to_create = RichMenu(
size = RichMenuSize(width=2500, height=843),
selected = True,
name = "Nice richmenu",
chat_bar_text = "Tap here",
areas = [RichMenuArea(bounds = RichMenuBounds(x = 0, y = 0, width = 2500, height = 843),action = URIAction(label = 'Go to line.me', uri = 'https://line.me'))]
)

richmenuid = line_bot_api.create_rich_menu(rich_menu = rich_menu_to_create)

# 画像をRichMenuに指定
encoded_img = "save.txtに記載された文字列"

# Base64エンコードされた画像データをデコードしたバイト列を指定する。
line_bot_api.set_rich_menu_image(richmenuid, "image/png", b64decode(encoded_img))

# デフォルトのRichMenuに設定する
line_bot_api.set_default_rich_menu(richmenuid)

[退会済みユーザー]

手元ではできたのですが、上記が無理だと、基本に戻ってS3経由で画像を表示した方がよいかもしれません。
https://qiita.com/yutake27/items/30ca4bdffd130087b708
等は参考にならないでしょうか。

[turbo3681]

ありがとうございます！
そちらの手元で動いているということは、プログラム自体は間違っていないということですよね。
そういう意味では一安心です。
だとすれば、私のコードがどこかで間違っているということになると思いますが
それが何なのか・・・解決するまでモヤモヤしますね。

ちなみにリンクの記事についてですが、
APIのテストをした結果得られるバイナリデータを
コードに貼り付ける、ことをするためにご提供いただいたものでしょうか？

[turbo3681]

引き続きトライしてみたところ、無事動きました！！！
少しコードを修正して、以下でやってみたところ成功しました。
お忙しいところ、とても親身にアドバイスしていただきまして心から感謝致します。
どうもありがとうございました。

----動いたコード----

# 画像をRichMenuに指定
with open("C:/Users/81909/Desktop/linebot-lecture-src/250-min.png", "rb") as f:
encoded_img = b64encode(f.read())

# Base64エンコードされた画像データをデコードしたバイト列を指定する。
line_bot_api.set_rich_menu_image(richmenuid, "image/png", b64decode(encoded_img))

# デフォルトのRichMenuに設定する
line_bot_api.set_default_rich_menu(richmenuid)