ITエンジニア/デザイナ向けにオープンソースを毎日紹介

iPictureはIKEA風に画像にツールチップを表示するJavaScriptライブラリです。

IKEAのカタログアプリを見ると、写真の一部がクリックできるようになっており説明が表示されます。あれに似た効果を実現してくれるのがiPictureです。


サンプルです。お弁当の一部にボタンがついています。クリックすると説明が表示されます。


こんな感じに。クリックすると別タブでおにぎりの作り方が表示されました。


動画も対応。インラインで再生されます。


こちらは洋服。とてもマッチします。


車。動画で機能を説明する…とても良いのではないでしょうか。


こちらはIKEA風。まさにそのままといった感じです。


文字だけの説明もできます。

iPictureは画像に対してJSONデータで表示するツールチップを指定します。画像に対する絶対位置で指定するのですが、ドラッグ&ドロップでコードを生成できるエディタもありますので作成は簡単です。

iPictureはJavaScript製のソフトウェアです。


MOONGIFTはこう見る

画像はテキスト以上に見た目に訴える要素が大きく、見た人に対する強烈な印象を残すことができます。しかしテキストの箇条書きのようにシンプルに絞り込むことはできないので色や要素が多様に紛れ込んで分かりづらくなってしまう印象があります。そのサポートにiPictureが使えそうです。

また、ソフトウェアやWebサービスのヘルプにおいて気になる場所をクリックすればヘルプを表示してくれると言った使い方にも向いています。元画像を編集しないので配置する場所が変わらない限りはそのまま利用し続けられるのがメリットです。

iPicture - Tooltip your images

iPicture - Tooltip your images

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2