Posted at

LINE Messaging APIのImagemap Messageの分かりやすいデモ【PHP】【Ruby】【Python】

More than 1 year has passed since last update.

Messaging API Imagemap Message

楽しいですね。LINE Bot。LINE Messaging APIのImagemap Message関連の質問をよく受けるので、ブラウザで概念とソースコードが理解できるサービスを作りました。


よくある質問


  • 画像5つも違うサイズで用意しないといけないの?

  • 画像リサイズするのってどうやるの?

  • BaseSizeって何?

  • 座標はどこが(0, 0)?

  • タップしても反応しないんだけど?

  • 画像変えてもキャッシュされてて変わらないんだけど?


作ったもの

Messaging API Imagemap Generator

LINE Messaging API Imagemap Message Generator(Unofficial)

ドラッグでImagemapの送信、表示が出来るためのコードを生成します。言語はPHP、Ruby、Python。

ショッピングサイトのような画像がデフォで入ってます。好きな画像に入れ替えられます。

画像をドラッグするとエリアが作成されアクションの設定ができるように、各設定を弄ると下のコード(PHP、Ruby、Pythonのみ)も座標やアクションを定義したものに変わります。

コードに一枚の画像をリサイズして返す仕組みや、画像をキャッシュさせない仕組みも入ってます。Herokuにアカウントがある人はGithubからデプロイして環境変数に自分のBotのものを入れれば動くはず。


使ってるもの


PHP


  • Silex

  • GD


Ruby


  • Sinatra

  • mini_magick


Python


  • Flask

  • Pillow

ほとんどLINE Bot SDKのサンプルコードからのパクリです。ありがとうございます。


Github

各言語プロジェクトのGithubはこちら


注意

リサイズで出来ますが、静的な画像を用意するのが一番いいのは言うまでもありませんね。