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

近代以降、人は時間にしばられ、あるいは守られながら生活をするようになりました。 ここでそれが良いことだとか悪いことだとか考えるような詮無い事はしません。 今日は、私達の暮らしに欠かせない「時間」を測定する装置について考えていきたいと思います。

つまり時計である

時間を計測する装置、つまるところ「時計」と呼ばれる装置なのですが、 今あるアナログ時計のデザインに私達はあまりにも慣れ親しみすぎてしまいました。 なのでその存在からは一旦離れて、 改めて私達の生活に必要な「時間」を測る装置のデザインについて思いを馳せます。

なんでこんな事を考え始めたのか

VueでSVGベースのコンポーネントを試してみたかったからです。 ハワイの住人は非常に緩やかな時間感覚をもっていて、それは「ハワイアン・タイム」などと呼ばれるそうです。 常日頃時間に追われて生活していると、ふとそういう物に憧れをもつ事があります。 「大雑把な時間感覚で、ゆるく生きていきたい」と。

そこで、大雑把に時間を把握できるデザインの時計を考えてみようと考えました。

作ってみたサンプル達

そしてこちらが作ってみたサンプルです。 実用性等はあまり深く考えずに自由に、4種ばかり作ってみました。

• ArClock

サンプル1 : 比較的普通なそれ

普段目にするアナログ時計にかなり近いデザインです。 異なる点と言えば、針が円弧になり、時間を表す部分が12時間ではなく24時間単位、つまり1日で1周になる所です。

なぜ今あるアナログ時計が24時間ではなく12時間で1週なのかは詳しく調べていないのでわかりませんが、 12時間の方がぱっと見てより精細に時間を知ることが出来るのは確かです。 ですので、より大雑把にする為に24時間にしてみました。

サンプル2 : 波の様なそれ

このサンプルはちょっとお気に入りです。

時間部分のトータルが24時間になっているのはサンプル1と同様ですが、基点が朝の6時になっていて、右端からスタートします。 つまり、右の円弧は6時から18時までの「昼間」を表し、左の円弧は18時から翌6時までの「夜間」を表します。 右から左にしたのは、東から昇って西に沈む太陽をイメージしていたりします。

分と秒も一応なんとなく分かるようにはなっていますが、これは、あまりに動きがないとつまらないので付けたただの飾りです。 昼間/夜間のだいたい何時くらいなのかがわかれば良いというテーマの時計です。

サンプル3 : 週を意識したそれ

もっと大雑把にしてみました。一週を一つの単位として表現してみた時計（？）です。 月曜日を起点として、現在週のどの辺りなのかを大まかにあらわします。 今回作った時計（？）の中で最も動きの無い、面白みのない物となりました。

日曜日を中央に押し込んだ理由は3つあります。 1つ目は、Saturday と Sunday で “S” が続いて見づらいこと、 2つ目は、7だと360を割り切れないこと、 3つ目は、6ならばリボルバーの弾倉っぽくなるのでイメージとして採用してみようと思った次第です。 （しかし、調べたら7発装填のリボルバーも存在する様でした。 ナガンM1895 – Wikipedia ）

この7つの曜日が全て赤く染まる時、我々は月曜日の到来に恐れおののく事でしょう。

サンプル4 : 年を意識したそれ

さらに単位を大きくして、年にしてみました。 年輪をイメージしていますが、輪になってないしひとつの層は別に年じゃないでしょう？というのは野暮な突っ込みです。 むしろゼンマイをイメージしていると言った方が理解を得られるかもしれません。

このゼンマイ状の線は、現在が1年のどの辺りなのかを示しますが、 半径ではなく線分の長さであらわしている為、見た目と実際に感覚としてズレが生じるでしょう。 しかし、年始の一ヶ月よりも年末の一ヶ月の方が短く思えるのはわりと一般的な感覚のように思えます。 そんな錯覚も表現出来てしまう時計であります。

角層の塗りは60秒で終端にたどり着きます。 ちょっとした動きが欲しかったのと、ぐるぐる動いているのが楽しかったので付けてみました。

技術的な話

これらのサンプルは全てインラインSVGで作られていて、 パスは一部の物を除いてほとんど <path> の A コマンドで描画してあります。 動きはほとんど stroke-dash-array と stroke-dash-offset で実装されていて、アニメーションは全て transition です。

せっかく Vue で作ったサンプルなので <path>　の d 属性を直接書き換えてアニメーションを、とも思ったのですが、 頂点の数が変わると transition は効かないので他の方法をとりました。

SVGベースのVueコンポーネント

インラインSVGをベースにしたVueコンポーネントを今回試してみましたが、なかなか面白いものです。 <path> の描き方を理解すると大抵の物は描けますし、動的に操作する事も容易です。 例えばデータを渡してグラフを描画するコンポーネント実装などでその実力を大いに発揮しそうです。というか、まさにそういうケースで先日発揮しました。

そういった部品を実装しててふと思い出したのが ActionScript3 で作るFlashコンテンツで、非常に類似しています。 AS3でも受け取ったデータから Graphics クラスで動的に描画をするなどしていましたね。 あんなイメージです。

Netlify

Netflix とよく似ている為よくタイポしてしまいがちな Netlify にデプロイしてみました。

Netlify: All-in-one platform for automating modern web projects.
Build, deploy, and manage modern web projects

このサービスは、GitHub等のリポジトリサービスと連携して、そのリポジトリの指定したブランチにpushするだけでデプロイが完了するというお手軽なWebサーバーです。 それに加えて、様々な機能をご利用いただけます。

• ビルドコマンドをデプロイ前に実行してくれる
• Functions 機能で AWS Lambda にもデプロイできる
• Form 機能でフォームリクエストをハンドリングできる
• Let’s Encrypt によるSSL対応（独自ドメインが必要）

Lambdaと連携出来るので、開発コストはさておき大体の事は実現できそうですね。 今回はビルドコマンドの実行ぐらいしか活用していませんが、機会があればがっつり使ってみたい所存です。

まとめ

色々な時計を作ってみましたが、先に申し上げたとおり、実用出来る代物ではありません。 少なくとも、この国で今の生活をしているかぎりは…。

SVG

SVG（Scalable Vector Graphics）は、Webページ上でベクターグラフィックを扱う為のマークアップ言語です。 ベクターなので拡縮してもビットマップデータのように劣化しないのが特徴で、 アイコンやイラスト・アニメーション等で幅広く活躍できます。

<svg width="40" height="40">
    <path d="M16,22.375L7.116,28.83l3.396-10.438l-8.883-6.458l10.979,0.002L16.002,1.5l3.391,10.434h10.981l-8.886,6.457l3.396,10.439L16,22.375L16,22.375z" fill="black"></path>
</svg>

このコードをHTMLに挿入すると、ベクターで描かれた星印が表示されます。 上で使用されている path の他、rect や circle などを使って様々なグラフィックを描く事が出来ます。

IEではSVGをサポートするのがバージョン9以降な為、 旧来より実装されていた VML（Vector Markup Language）で代用されたりします。

Raphael

http://raphaeljs.com/

Raphael は比較的老舗なべクターグラフィックライブラリで、 SVGライブラリの中ではデファクトスタンダードとの呼び声が高い物です。 SVGが使える環境ならばSVGを使い、そうでない場合はVMLで代用してベクターコンテンツを扱う事ができます。

<div id="canvas"></div>
<script>

// #canvas にキャンバスを生成する
var paper = Raphael("canvas");

// キャンバスに円を描く
var circle = paper.circle(24, 24, 16);
circle.attr({
    "fill": "#c00",
    "stroke-width": 0
});

</script>

Raphael() でキャンバスを生成し、 そのキャンバスに対して circle / rect / path などを使用してグラフィックを描きます。

Raphael で描かれた図形要素には、属性を編集する attr() の他、 各種イベントハンドラを設定する為のメソッド等が実装されています。

// マウスオーバーイベントを設定する
circle.hover(
    function(){
        this.animate({
            "fill": "#00c"
        }, 500);
    },
    function(){
        this.animate({
            "fill": "#c00"
        }, 500);
    }
);

// クリックイベントを設定する
button.click(function(){
    console.log("click");
});

さながら jQuery のSVG版といった感覚で使えます。

Snap.svg

http://snapsvg.io/

Snap.svg はRaphaelの作者が開発し、Adobe からリリースされた生まれて間もないプロジェクトです。 （2013/10/23 に初リリースされています。）

最も大きな違いは、snap.svg は SVG をサポートする環境の為だけのもので、 VMLによる古い環境へのサポートは一切しないと宣言している点です。 そうすることで、SVG にあって VML にはないような先進的な機能を利用出来る為です。 また、VML対応を無くす事によりライブラリ自体の軽量化も図れている模様です。

開発者が同じなだけあり、使い方はRaphaelからほぼ変わりません。（これは素晴らしいことです） 試しに Raphael での例と同じ処理をしてみましょう。

<svg id="canvas"></svg>
<script>
    // 対象要素は svg 要素である必要があります
    var paper = Snap("#canvas");
    var circle = paper.circle(24, 24, 16);
    circle.attr({
        "fill": "#c00",
        "stroke-width": 0
    });
    circle.hover(
        function(){
            this.animate({
                "fill": "#00c"
            }, 500);
        },
        function(){
            this.animate({
                "fill": "#c00"
            }, 500);
        }
    );
    circle.click(function(){
        console.log("click");
    });
</script>

Raphael() が Snap() に変わったことと、渡す要素が svg 要素である必要がある事をのぞいて、 間違い探しの問題かと思うほどにほぼ一致しています。

また、Raphael にはなかった機能のひとつとして、「外部SVGリソースのインポート」があります。 外部SVGファイルをAjaxで取得し、その結果をコールバックで展開する事が出来ます。

Snap.load("external.svg", function(f){ ... });

他にもマスキングやパターンのクリッピングなど先鋭的な機能が揃えられています。 公式のチュートリアル ではコードを追いながら使い方を学ぶ事が出来ます。 ここのページャーのアニメーションも気が利いていてかわいいですね。

Raphael がそうであったように、新世代のSVGライブラリのスタンダードになりそうな予感がしますね。

参考資料

• Scalable Vector Graphics – Wikipedia
• SVG | MDN
• W3C SVG Working Group
• Raphaël—JavaScript Library
• Snap.svg – Home

シンプルな例

まずはシンプルな例から。
紙に円を描き、マウスでクリックされた時になんらかの処理を行います。

(function(){
    var paper, myCircle, onClick ;

    /**
     * 紙に円を描きます。
     * myCircleには、Elementオブジェクトが格納されます。
     */
    paper = new Raphael( "paper", 640, 480 );
    myCircle = paper.circle( 100, 100, 32 )
        .attr( { fill : "#345", stroke : "none" } );

    /**
     * Element.click() で
     * マウスクリックイベントのハンドラを設定できます。
     * ハンドラ内のthisはElementオブジェクトです。
     */
    myCircle.click( function(){
        console.log( this.type ); // => "circle"
        alert( "さわんな！" );
    });

})();

Element.click() メソッドの引数に関数を渡すだけなので、とても簡単。

円に限らず、ほとんどのシェイプ描画メソッドはElementオブジェクトを返します。
イベントやアニメーションをいじりたい場合は、
この例での変数「myCircle」のように返り値を格納しておくと良いですね。
勿論、メソッドチェーンで一気に書いてしまう事もできます。

paper.circle( 100, 100, 32 )
    .attr( { fill : "#345", stroke : "none" } )
    .click( function(){
        alert( "さわんな！" );
    });

イベントハンドラの登録解除

設定したイベントハンドラを解除するのは、
そのメソッドに接頭辞「un」をつけたメソッドを使います。
例えばclick() で登録したハンドラの登録解除は、unclick() を使用します。

/**
 * click() で登録
 */
var onClick = function(){ alert("さわんな！"); };
myCircle.click( onClick );

/**
 * unclick() で登録解除
 */
myCircle.unclick( onClick ); // もうさわっても怒られません。

イベントの色々

clickの他にも様々なマウスイベント用のメソッドが用意されています。

おなじみのイベント

まず、これらのおなじみの方々。
恐らく名前を見るだけで、どんな役割なのかすぐに分かることでしょう。

• click （クリック）
• dblclick （ダブルクリック）
• mousedown （マウスダウン）
• mousemove （マウスムーブ）
• mosueout （マウスアウト）
• mouseover （マウスオーバー）
• mouseup （マウスアップ）

タッチ関係のイベント

スマートフォン向けの、タッチイベントも実装されています。

• touchcancel （タッチキャンセル）
• touchend （タッチエンド）
• touchmove （タッチムーブ）
• touchstart （タッチスタート）

jQueryのような、hover()

jQuery.hover() は、マウスが入ってきた時と離れていく時のハンドラを
同時に設定する事が出来る便利なメソッドですが、
それとほぼ同じ役割をし、名前も同じ hover() メソッドが用意されています。

Element.hover( f_in, f_out );

f_in (Function) マウスが入ってきた時の処理
f_out (Function) マウスが離れていく時の処理

/**
 * マウスオーバーで塗り色を変えるサンプル。
 */
myCircle.hover(
    function(){
        console.log( "くんな！" );
        this.attr( "fill", "#c00" );
    },
    function(){
        console.log( "にげんな！" );
        this.attr( "fill", "#345" );
    }
);

drag() で要素のドラッグを実装する

Element.drag() を使う事で、要素のドラッグに必要な
マウスダウン時、マウスムーブ時、マウスアップ時のイベントをまとめて設定できます。
ただし、ActionScriptのstartDrag()のように要素の移動まで面倒みてくれるわけではないので、
各イベントハンドラにそれらを実装してあげる必要があります。

Element.drag()

Element.drag( onmove, onstart, onend );

onmove (Function) マウスムーブ時の処理
onstart (Function) ドラッグ開始時の処理（マウスダウン）
onend (Function) ドラッグ終了時の処理（マウスアップ）

これらのコールバックは全て渡される引数が違うので注意が必要です。
特におさえておくべきは、第一引数のonmoveです。

onmove

onmove : function( dx, dy, x, y, event )

dx : ドラッグ開始位置からの相対的座標（x）
dy : ドラッグ開始位置からの相対的座標（y）
x : 現在のx座標
y : 現在のy座標
event : イベントオブジェクト

わざわざ相対的座標を渡しているのは、
マウス座標をそのまま要素のx,y座標に代入してしまうと
予想と違う位置に要素が移動してしまう為。
どの部分をクリックしてドラッグしても、
要素はマウスの右下にぶらさがる形になってしまいますね。

つまり、こんなかんじになるでしょう。

1. onstartでドラッグ前の要素の座標を記録しておく
2. onmoveで、1.で記録した座標と相対的座標をあわせて計算

(function(){
    var paper, myRect;

    paper = new Raphael( "paper", 640, 480 );
    myRect = paper.rect( 100, 100, 32, 32 )
        .attr( { fill : "#345", stroke : "none" } );

    myRect.drag(
        /**
         * マウスムーブ時の処理
         */
        function( dx, dy, x, y, e ){
            /**
             * Element.data() で初期の座標を取り出して
             * dx, dyを加算して移動
             */
            this.attr({
                x : this.data("x") + dx,
                y : this.data("y") + dy
            });
        },
        /**
         * ドラッグ開始時の処理
         */
        function( x, y, e ){
            /**
             * 要素の座標をElement.data()で記録
             */
            this.data( "x", this.attr("x") );
            this.data( "y", this.attr("y") );
            this.attr( "fill", "#c00" );
        },
        /**
         * ドラッグ終了時の処理
         */
        function( e ){
            this.attr( "fill", "#345" );
        }
    );
})();

jQueryのようなdata()が便利

RaphaelのElementオブジェクトには
jQuery.data() と似たような機能が同名のメソッドで実装されていて、
上記のコールバック内で使われているように
情報を保持しておくのに便利です。

// 値の設定
myElement.data( "foo", "bar" );
// 値の取得
console.log( my.Element.data( "foo" ) ); // => bar

デモ

デモをこちらにまとめました。

» はじめてのRaphael(2) : イベント編 via jsFiddle

まとめ

Raphaelは、意外とjQueryのメソッドと共通点があり、
導入にあまり苦労しなさそうで助かります。
描画とイベントが操れれば、簡単なRUIを実現できてしまいますね。

Raphaelとは

RaphaelはSVGで図を描画するためのフレームワークです。
正しくは「Raphaël」と書きますが、
毎度めんどくさいのでRaphaelでいきます。

なにをしてくれるのか

• SVGが動かないクラシックなIE環境の為に、VMLでも出力してくれます。
• イベントやアニメーションまわりも簡単に実装できるようになっています。

特に助かるのがVML対応。
旧ブラウザをサポートしなければならないケースには、
ぜひとも導入したいライブラリですね。

極めてシンプルな例

Rraphaelで図を描画する手順は、ざっくりとこんな感じ。

1. まず紙（paper）を用意する
2. その紙に図を描く。
   
   矩形（rect）や円形（circle）等、基本となるシンプルな図形はステンシルが用意されています。
   
   そうでない物は、フリーハンド（path）で描く事ができます。
3. 描かれた図に、色や線種等のスタイルを設定します。

HTML

<div id="my-paper-0"></div>

JavaScript

(function(){
    /**
    * [1] Raphael()でキャンバス（paper）をつくる
    */
    var paper = Raphael( "my-paper-0", 64, 64 );
    /**
    * [2] circle()で円を描画し、
    * [3] attr()で属性を設定する
    */
    paper.circle( 32, 32, 24 )
       .attr( { fill : "#345", stroke : "none" } );
})();

Raphael() は、Paperというオブジェクトを返します。
図の描画は、そのPaperオブジェクトが持つメソッドを通して行う事になります。

基本図形を描いてみる

矩形（rect）、円形（circle）、楕円形（ellipse）等の基本図形は、
Paperのメソッドを使って簡単に描画する事ができます。

円形

/**
 * Paper.circle( x, y, radius );
 */
paper.circle( 32, 32, 24 );

矩形

/**
 * Paper.rect( x, y, width, height, radius );
 */
paper.rect( 8, 8, 48, 48 ); // 普通の矩形
paper.rect( 8, 8, 48, 48, 8 ); // 半径8の角丸矩形

楕円形

/**
 * Paper.ellipse( x, y, horizontalRadius, virticalRadius );
 */
paper.ellipse( 32, 32, 16, 24 );

Pathで自由に描いてみる

イラレ等の「ペンツール」のような感じで自由に図を描く事ができるのが、
Paper.path()メソッドです。 まずはシンプルな三角形で例を示してみましょう。

/**
 * Paper.path( pathString );
 */
paper.path( "M32,8L56,56H8L32,8Z" );

path() の引数には、SVGで定義されているPath要素のコマンドを渡します。
文法は非常にシンプルで、アルファベット一文字で表されるコマンド毎に切り分けられます。
上記コードのコマンドを分解してみると…

1. “M32,8” : 32,8に移動する（MoveTo）
2. “L56,56” : 現在地から56,56まで線を描画する（LineTo）
3. “H8” : x座標8まで水平線を描画する（HorizontalLineTo）
4. “L32,8” : 32,8まで線を描画する（LineTo）
5. “Z” : パスを閉じる

これらを一気に書いて表した感じですね。

コマンド（抜粋）

M (MoveTo)

座標（x,y）に移動します

L (LineTo)

座標（x,y）まで線を描画します

H (HorizontalLineTo)

座標（x）まで水平線を描画します

V（VirticalLineTo)

座標（y）まで垂直線を描画します

C (CurveTo)

複数の座標をコントロールポイントとして引数に受け取り、ベジェ曲線を描画します。

コマンドを大文字で表記すると、座標を絶対位置として扱い、
小文字で表記すると現在地からの相対位置とします。

それぞれのコマンドについては公式ドキュメントか、SVGの仕様書を参考にしましょう。

• Paths – SVG 1.1 (Second Edition)
• Raphaël Reference

もう少し複雑な例

三角形よりももうすこし複雑な例として、
Pathを使って矢印を描画してみます。

paper.path( "M32,8L56,32L48,40L40,32V56H24V32L16,40L8,32L32,8Z" )
    .attr( { fill : "#345", stroke : "none" } );

デモ

デモをこちらにまとめました。
ご参考までに。

• はじめてのRaphael (1) : お絵かき編 via jsFiddle

まとめ

図形を描くのに色々メソッドやコマンドを覚えたりしなければいけませんが、
恐らくSVGを直に書く際にも役に立つ知識なので、無駄にはならないと思います。

さらに複雑なものを描かなければならない時は、
他の楽な方法がありますが、それはまた別の記事で。