開発実績

オリジナルデザイン機能開発用JavaScriptライブラリ - draggable.js

Webブラウザ上でデザイン作業を可能にするJavaScriptライブラリです。

Webブラウザ上で、PowerPointのように画像やテキストを移動・回転・リサイズして配置できるようになります。ECサイトなどで商品(はがき/年賀状、名刺、Tシャツ、etc.)のオリジナルデザイン機能を実現するのに利用することを想定しています。

機能および特徴

• Webブラウザ上で動作
• 画像やテキストの移動、回転、拡大縮小
• 表示順の前後指定
• Undo/Redo機能(デモページにはありません)
• FlashではなくHTML5により実装しているため、スマートフォンにも対応可能

デモページ

• デモ1

  PCのみ対応したデモ。
  画像、テキストのレイアウトを行えます。背景画像の設定も行えます。

• デモ2

  PC/スマホ(iOS/Android)に対応したデモ。
  スマホ用のWebアプリとして使うことを意識したデモになります。
  ピンチ操作によるズーム等、スマホらしい操作感を実現しています。

canvasへのアクセスにはCreateJSを使用しています。

スマホカバーデザイン機能、ラッピングシートのデザイン機能の実装に使用しました。