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 の知見も少しずつたまり始めたので、それはまたいずれ。

DEMO on JS Bin

HTML

<form action="">
    <textarea name="memopad" id="memopad" cols="30" rows="10"></textarea>
    <fieldset>
        <input type="button" value="SAVE" id="saveButton" />
        <input type="reset" value="CLEAR" id="clearButton" />
    </fieldset>
</form>
<p id="message"></p>

JavaScript

var MemoPad = function(){};
MemoPad.prototype = {

    EVENT_SAVE : "save",
    jq : $(this),

    textarea : null,
    storekey : null,
    time : null,

    create : function( id, time ){
        this.storekey = id;
        this.time = time || 15000;
        this.textarea = $( "#" + id );
        this.textarea.val( localStorage[this.storekey] || "" );
        setInterval( $.proxy(this.save, this), this.time );
        return this;
    },
    save : function(){
        if( localStorage[this.storekey] !== this.textarea.val() ){
            localStorage.setItem( this.storekey, this.textarea.val() );
            this.jq.trigger( this.EVENT_SAVE );
        }
    },
    getValue : function(){
        return String( localStorage[this.storekey] || "" );
    },
    bind : function( evt, func ){
        this.jq.bind( evt, func );
    }
};

localStorageの使い方は以前記事で軽く触れた通り。
HTML5のLocalStorageでToDoリストを制作するチュートリアル

取得/保存は、localStorage.getItem / localStorage.setItem
またはプロパティアクセスで行ないます。

自動保存は、setIntervalでsaveメソッドを定期的に呼び出して実行。
問題のtriggerは、saveメソッドが呼ばれてlocalStorageに値を保存した後に
「save」イベントを送出しています。

var myMemoPad = new MemoPad().create( "memopad" );
myMemoPad.bind( myMemoPad.EVENT_SAVE, function(e){
    $("#message")
    .html( "保存されました - " + String( new Date() ) )
    .hide().fadeIn();<br />
});
$("#saveButton").bind("click", $.proxy( myMemoPad.save, myMemoPad ) );

createはコンストラクタ風のメソッドです。引数にはtextareaのidと、
一応第二引数に自動保存の間隔（ミリ秒）を渡す事もできます。
もっと大きな物を書く場合はオブジェクトで渡してあげたほうが良いですね。

上の例では、MemoPadの「save」イベントに、
保存された時にメッセージとタイムスタンプを表示する関数をリスナとして設定しています。

たかだかこの程度のスクリプトだとこういう書き方は大袈裟な感じがしますが、
もっと複雑怪奇な物を組んでいく時は、
オブジェクト同士の連携がソース上で追いやすくなる気がします。

Download : ImawoIkiru-1.0.crx

簡単な使い方

ダウンロードしたファイルをChromeで開いてください。
※要件をバージョン5以上にしてあります

インストールするとアドレスバー横のツールバーに「イマ」アイコンが出てきます。
それをクリックしてタスクを入力するだけのあまりにもシンプルな作りです。

タスクを右クリックすると削除出来ます。
ゴミ箱なんてものは実装していないので
削除したらもう二度と戻ってきてくれません。あばよ！

タスクの保存にはlocalStorageを使用していますので、
Chrome再起動後も保持されます。
Webサービスとの連携とか高級な事はしていません。
その端末限りのデータとなります。

免責

このツールを如何に使っても構いませんが、
いかなるアクシデントが発生したとしても責任を負いません。

とりあえずChrome拡張を何かしら作ってみようと思って出来た副産物ですので、
更新はあまり考えていませんが、
バグや要望などございましたらTwitterの方に頂ければ！
ギャラリーへの投稿は気が向いたらで…

Quick Tip: Learning About HTML5 Local Storage | Nettuts+

ちなみに先程の記事の「JS Bin」はこのビデオで知りました。
英語ですが、ソースコードを見ているだけでよく分かります。
localStrage、恐ろしく簡単に使えるのですね。
夢が広がります。

格納/取得はsetItem/getItemで簡単に。

localStorage.setItem(‘keyName’, ‘Value you want to store.’); //格納
var hoge = localStorage.getItem(‘keyName’); //取得

プロパティアクセスでもOKです。

localStorage.keyName = ‘Value you want to store.’; //格納
var hoge = localStorage.keyName; //取得
/* または… */
localStorage['keyname'] = ‘Value you want to store.’;
var hoge = localStorage['keyName'];

ウィンドウを閉じてもデータは保持される様で、
つまりはASのSharedObjectみたいな使い方が出来る…のかな？
値はStringじゃないといけないみたいですが。

当セッションだけデータを保持されるsessionStorageなるものもあるそうな。
より詳しくはこちらへ。
【特集】詳解! HTML 5と関連APIの最新動向 – Webアプリ開発編 (7) Web Workers | エンタープライズ | マイコミジャーナル

大変便利なlocalStorageですが、
ローカルのデータを弄るわけで、妙な穴にならなければよいですね。

2010/08/25 :

サンプルコードに加筆修正。