未分類

LINEチャットボットにイメージマップを導入しようとしたら躓いた

投稿日:

以前、LINEのチャットボットづくりに挑戦したときにイメージマップというものを導入しようとしたら、躓きました。

これ、導入方法がわかりにくすぎです...。

 

まず、イメージマップとは、

ということを知ってもらうために、自分が実際に実装したものを見てもらいましょう。

 

「お問い合わせ」というメッセージが来ると、チャットボットは上記のような画像を返し、

画像のタッチした部分のメッセージを返します。

ここでいうと、「ご意見」、「ご質問・ご相談」「その他」

というように問い合わせの種別を選べる感じですね。

 

画像のどの場所を押したら、どう動作するかは、自分で設定できるので、もっと複雑な形でも作成が可能です。

 

 

 

 

導入する上で、難しかったこと

このサイトにたどり着いた人なら、たぶん同じ悩みだと思うのですが、

画像が読み込めない!!ということをずっと悩んでいました。

 

まず、イメージマップを利用するにあたって、ルールが多すぎるんです。

そのルールを見ていきましょう。

1.画像は jpeg もしくは png であること。

2.ファイル名には、拡張子以降を含めないこと。

3.ファイルのサイズは1MBまで。

4.同じ画像を次の横幅で5つ用意すること

(240 , 300 , 460 , 700 , 1040px)

5.画像は一つのフォルダにまとめておくこと。

6.baseURLには、フォルダまでのパスを書くこと。

7.https通信を利用すること。

 

http://www.pre-practice.net/2017/10/line-botimagemap.html 参考

これで面倒くささが伝わったでしょうか。

 

でも実はこれだけではありません。

 

画像をアップロードする場所が大切

画像をどこのサーバにアップロードするかですが、

まず試したのは Google Driveです。

しかし、そんな甘くありません。

次は、Amazon Driveを試してみましたが、ダメ。

今度こそと思い、このブログに利用しているレンタルサーバにアップロードしてみましたが、これもダメでした。

 

 

 

 

 

調べていると、fc2なら成功したという報告が!

早速、会員登録をし、fc2ブログを開設し、ファイルをアップロードしてみます。

そして、baseURLには

https://ドメイン名.web.fc2.com/フォルダ名

と入力してください。

例えば、私の場合は、こう

https://imagemap.web.fc2.com/infomation

すると、やっと成功できました。

 

 

-未分類

Copyright© エンジニアの階段 , 2019 All Rights Reserved Powered by STINGER.