そもそも採用する機会自体が減っているものの、定期的な更新作業でたまに必要になるイメージマップ。
これまでは Dreamweaver を起動して、作成していました。

ただ、使用頻度の低下を理由に Adobe Creative Cloud から illustrator / Photoshop だけの単体サブスクリプションに切り替えようかと悩んでいた時期でもあり、自分でツールを作ることにしました。

正月休みの空いた時間にひっそり公開していたのですが、自分と同じように「Dreamweaver をスポット的に利用している」という方がいらっしゃったので、改めて記事にまとめてみます。

使い方

HTML Imagemap Generator：
http://labs.d-s-b.jp/ImagemapGenerator/

上記 URL へアクセスして、ローカルにある画像ファイルをドラッグ＆ドロップします。

次に、右上に表示される任意のツールを選択します。
矩形と円はドラッグ、多角形の場合はクリックでシェイプの頂点を指定後に escape キーを押すと、シェイプが生成されます。

ひと通りシェイプを作成できたら、画像の右側に表示されている HTML ソースをコピーしてご利用ください。

複雑な図形であれば SVG を利用してしまうため、「多角形のアンカーポイントは再編集不可」という簡易的な実装になっています。

やってみて

今回は FileAPI や Fabric.js を利用し、TypeScript の練習を兼ねて作成してみました。

Fabric.js：
http://fabricjs.com/

ブラウザベースでも自分が欲しいと思ったツールを比較的簡単に作れる、よい時代になりましたよね。。。
お陰様で、当初の目的を果たせそうです。