ブラウザ上でSynologyDSMのようなウィンドウを作れるvue-Window-managerプラグインの紹介


## 作ったきっかけ

vue-window-managerは、SynologyのDSMのユーザーインターフェースを無料で使えるようにしたいなと思い作りました。DSMは、Synologyのネットワークストレージ製品で使用されるオペレーティングシステムであり、多数のアプリケーションをホストすることができます。Synologyは、DSMのインターフェースを改善するために多くの努力を重ねており、最近はVue.jsを採用するなど、技術的な面でも進化を遂げています。

しかし、SynologyのDSMのようなインターフェースを実装することは、開発者にとって簡単なことではありません。このため、vue-window-managerは、SynologyのDSMのようなインターフェースを簡単に実装できるようにすることを目的としています。これにより、開発者は、自分たちのアプリケーションに高品質のユーザーインターフェースを提供することができます。また、このパッケージはVue 3に対応しているため、最新のVueフレームワークを使用する開発者にとっても便利です。

## パッケージについて

vue-window-managerは、仮想ウィンドウを作成するためのカスタマイズ可能なウィンドウコンポーネントを提供するnpmパッケージです。このパッケージはVue 3と互換性があり、Vueプロジェクトに簡単に統合することができます。

## どんな事ができるのか
vue-window-managerを使用すると、Webページ上に複数のウィンドウを作成できます。これらのウィンドウは、ドラッグ＆ドロップ操作やサイズ変更など、さまざまなカスタマイズオプションを提供します。
![ダウンロード.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/418662/74ffa363-8e2b-f28f-3a43-2ddbb8124abe.gif)

https://bit.ly/3YjsTbB


このパッケージを使用することで、Synology DSMのユーザーインターフェースのような快適なUI体験を実現し、ウェブアプリケーションの魅力を高めることができるはずです。
例えば、下記のように見たことのある様なデスクトップを作成することも可能です。

▼サンプル
https://obadesktop.umaxiaotian.com
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/418662/00229aa7-966b-330d-7c15-3a680db1aff9.png)

## 使い方
1. まず、パッケージをインストールするために、npmを使ってターミナル上で以下のコマンドを実行します。

`npm install vue-window-manager`

このvue-windw-managerのパッケージを使用するには、使用するコンポーネントでインポートし、コンポーネントとして含めます。そして、テンプレートセクションに、必要な属性とともにコンポーネントのタグを追加します。

具体的には、以下の手順にになります。
2.  `<script>`**タグ内で、以下のように`vue-window-manager`というパッケージとCSSをインポートします。

```js
import  vueWindowManager from 'vue-window-manager';
import "vue-window-manager/windows10.css"
```
3.`components`**プロパティに**`vueWindowManager`を追加します。

```js
export default defineComponent({
  components: {
    vueWindowManager
  },
});
```
4.`<template>`タグ内に、以下のように`vueWindowManager`タグを記述します。

```js
<vueWindowManager
      :isActive=true
      :top=0
      :left= 0
      :width= 500
      :height= 500
      :minWidth= 500
      :minHeight= 500
      :isResizing="['r', 'rb', 'b', 'lb', 'l', 'lt', 't', 'rt']"
      :isButtonMaximized= true
      :isButtonMinimized= true
      :isMaximized= false
      :maxWidth= 500
      :maxHeight= 500
      windowId=1
      title="ウィンドウコンポーネントサンプル"
      titleIcon="https://cdn-icons-png.flaticon.com/512/337/337948.png"
      @clickWindow=""
      @clickDestroy=""
      @clickMin=""
>
      <div style="background-color: black;height: 100%;">
     　　<!-- ここにウィンドウ内に表示する要素を追加する -->
      </div>
</vueWindowManager>
```

このように、属性を設定することで、ウィンドウの位置やサイズ、最小・最大化などの動作を指定することができます。また、ウィンドウ内部に表示される要素も、通常のHTMLと同様に指定できます。




## コンポーネントのAPIについて
### **Prop**
| Prop | 型 | 説明 | デフォルト値 |
| --- | --- | --- | --- |
| isActive | Boolean | ウィンドウをアクティブ化するかどうか | false |
| top | Number | ウィンドウの表示位置のY座標 | 0 |
| left | Number | ウィンドウの表示位置のX座標 | 0 |
| width | Number | ウィンドウの幅 | 400 |
| height | Number | ウィンドウの高さ | 400 |
| minWidth | Number | ウィンドウの最小幅 | 200 |
| minHeight | Number | ウィンドウの最小高さ | 200 |
| isResizing | Array | ユーザーによるリサイズの許可方向。 "r", "b", "l", "t", "rt", "rb", "lt", "lb"から選択可能 | ["r", "b", "l", "t", "rt", "rb", "lt", "lb"] |
| isButtonMaximized | Boolean | 最大化ボタンを表示するかどうか | true |
| isButtonMinimized | Boolean | 最小化ボタンを表示するかどうか | true |
| isMaximized | Boolean | ウィンドウが最大化されているかどうか | false |
| maxWidth | Number | ウィンドウの最大幅 | null |
| maxHeight | Number | ウィンドウの最大高さ | null |
| windowId | Number | ウィンドウを一意に識別するためのID | - |
| title | String | ウィンドウのタイトル | "Window" |
| titleIcon | String | ウィンドウのタイトルに表示するアイコンのURL | null |

### **Action**

| Action | 説明 |
| --- | --- |
| clickWindow | ウィンドウがクリックされたときに呼び出される |
| clickDestroy | ウィンドウの×ボタンがクリックされたときに呼び出される |
| clickMin | ウィンドウの最小化ボタンがクリックされたときに呼び出される |


ぜひ使ってみてください！！あと、質問とかなどはGITHUBの方でいただけると嬉しいです
https://github.com/umaxiaotian/Vue-Window-Manager