SVG Colk Board を作った話

SVG Colk Board

これは何？

Illustrator 上で図をコピーしてテキストエディタにペーストすると、SVGが出力されます。 しかし、そこで出力されるSVGは不要な記述も多く、末尾に付加されている謎文字のおかげで正常に表示されません。

これらをクリーンに最適化する為に作ったのが SVG Colk Board です。

使い方

1. Illustrator上で図をコピーする
2. それを SVG Colk Board 上でペーストする
3. 配置された図を選択すると「SVG」「DataURI」ボタンが表示される
4. 「SVG」「DataURI」のボタンをクリックすると、それぞれ最適化された結果がクリップボードにコピーされる
5. 結果をテキストエディタにペースト

• ペーストした図のデータは localStorage に保存されるので、ブラウザを閉じた後も保持されます
• つまり貼り付けられる図の数は localStorage の容量依存です
• もちろんブラウザをまたいでは保持されません

SVG Colk Board の中身

このアプリケーションは Vue.js で作られています。 そして Vue と共に利用しているのが Vuex と vuex-persistedstate です。

Vuex

ここでは詳しい説明を省きますが、 Vuexとは、中規模以上のアプリケーション開発向けの状態管理ライブラリで、 公式ではこのように説明されています。

Vuex は Vue.js アプリケーションのための 状態管理パターン + ライブラリです。 これは予測可能な方法によってのみ状態の変異を行うというルールを保証し、アプリケーション内の全てのコンポーネントのための集中型のストアとして機能します。
https://vuex.vuejs.org/ja

簡潔に言うと、状態管理にストア（store）という概念を導入する為のライブラリです。 以下、ものすごくざっくりとした説明をします。

Vue.js のコンポーネントは各々が持つ data の値を基にビューを構築・描画し、必要に応じて処理を行います。 store というのはその data に似た振る舞いをしますが、 data が値へのアクセスで直接変更出来るのに対し、 store はセッターのようなメソッドを介してのみ値を変更する事ができ、 それにより値を保護し、変更を集中管理する事ができます。

ざっくりしすぎていてあまりイメージし辛いかと思いますので、下記ページを参考にしてください。

• 状態管理 — Vue.js

先に述べた通り、中規模以上のプロジェクトでなければあまり恩恵にあずかれず、冗長になるだけと感じるかもしれません。 しかし、Vue.js を採用するという事は、ある程度の規模のあるプロジェクトとなる予測が立つとも言えるので、 転ばぬ先の Vuex を問答無用で入れてしまうのも選択肢の一つだと考えられます。

vuex-persistedstate

今回作った様なミニマムなアプリケーションでは正直Vuexは不向きな気がします。 それでもVuexを導入したのは、半分はVuexで習作してみるため、 もう半分はこの vuex-persistedstate を使うためです。

• robinvdvleuten/vuex-persistedstate: Persist Vuex state with localStorage.

vuex-persistedstate は、Vuexのストアの中身（state）をまるっとlocalStorageに保存してくれるプラグインです。 Vuexでストアを書く時にちょっとインポートしてやれば簡単に導入できます。 （下記はREADMEのコードそのままです）

import createPersistedState from "vuex-persistedstate";

const store = new Vuex.Store({
  // ...
  plugins: [createPersistedState()]
});

これで（同じブラウザで見る限りは）ページの状態を永続化できるという寸法です。 なんて便利なんでしょうか！

まとめ

もともとはイラレが吐き出すSVGを最適化する事しか考えてなかったのですが、 ちょうどよいお題だと思って Vuex を使って習作してみたというお話でした。 このアプリで使用している netlify の知見も少しずつたまり始めたので、それはまたいずれ。