楽しいですね。LINE Bot。LINE Messaging APIのImagemap Message関連の質問をよく受けるので、ブラウザで概念とソースコードが理解できるサービスを作りました。
よくある質問
- 画像5つも違うサイズで用意しないといけないの？
- 画像リサイズするのってどうやるの？
- BaseSizeって何？
- 座標はどこが(0, 0)？
- タップしても反応しないんだけど？
- 画像変えてもキャッシュされてて変わらないんだけど？
作ったもの
[LINE Messaging API Imagemap Message Generator(Unofficial)](https://imagemap-generator.herokuapp.com/)
ドラッグで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はこちら。
注意
リサイズで出来ますが、静的な画像を用意するのが一番いいのは言うまでもありませんね。