Excelシートが憎い。

Excelシートでの書類作業の辛さは言わずもがな。

データベースもどき
アプリもどき
帳票出力
Excelシート上でのコーディング
エビデンス作成
UMLなど

以上のものについて、すべてExcelでの作成経験がある。あの世にもExcelシートを作らされる地獄がきっと存在するだろう。

Excelシートが憎い。Excelの万能性ゆえ、落とし込まなくていいものまで落とし込まれ、地獄を生み出す。みんなExcelなら慣れてるので、その他の選択肢は選ばれない。何度かMarkdownからExcelにコンバートするようなツールを書いたけれど、書式が変われば捨てざるを得ない。結局今もExcelを書き続けている。辛い。

でも待って欲しい。あれほど一括編集をエレガントにこなせるUIが他にあるだろうか（２大エディタに習熟した場合を除く）。図も書ける。式は素人でも使えるが、プログラミングの一形態ですらある。Excelやっぱり凄いよ。こんな凄いものが存在するなんて信じられない。気がつくとExcelのことばかり考えている。Excelのことが本当は好きなのかも知れない。

だから、SVGでExcel風スプレッドシートを自作した。車輪の再発明だ。

f:id:hashrock:20180312013009g:plain

DEMOはこちらから

ロゴも作った。

リポジトリはこちら。

github.com

すでにhandsontableという、実用的なスプレッドシートコンポーネントが存在するため、フルスクラッチで小さく書くのを目標にしている。

下記の通り、コンポーネントは１ファイルの.vueだけで書かれており、Vue以外への依存はない（…と思ったけど、考えたらrebootに依存してた。そのうちどうにかします）。今の所413行。

vue-spreadsheet-lite/SushiGrid.vue at master · anydown/vue-spreadsheet-lite · GitHub

結構頑張って作ったけど、機能不足やバグが多数あったり、そもそもまだコンポーネント単体としてnpmから使えないとか、いろいろな不備がある。まだ実用は出来ないので、ご容赦願いたい。

SVGとVueで難しいコンポーネントを作ろう

SVGとVue.jsの組み合わせが最高なのは下記の記事でも書いたとおり。身の回りでも多くの人がVue.js + SVG遊びに興じているのを観測している。

hashrock.hatenablog.com

もっと多くの人にVueとSVGを使って欲しいので、今回は複雑なものを作る時のTipsも足しておく。

スプレッドシートを作る手順

最初はまずSVGを手書きし、プロトタイピングするのをおすすめする。

ちょっと思い出しながら書いてるけど、初期のコミットは下記のようなコードだった。

<template>
  <svg width=500>
    <rect x=0 y=0 width=100 height=24>
    <text x=0 y=12 width=100 height=24>hoge</text>
    <rect x=100 y=0 width=100 height=24>
    <text x=100 y=12 width=100 height=24>fuga</text>
  </svg>
</template>
<style>
rect{
  fill: white;
  stroke: #999;
}
</style>

vue createで作成されるHello.vueファイルを編集しながら作り始める。
この時点でロジックはまったくない。SVGのrectやtextで作りたいものが出来るのかをまず検証する。
ある程度要素同士にまとまりが見えてきたら、g要素でグルーピングし、transform="translate(x, y)"の形に書き直す。

それから、Vueのdataに配列を入れて、v-forで要素を生成する。

コツは、やはり見た目から先に作り込むこと。特にSVGにはz-indexが無いため、書いた順に重ね合わせされるなどの罠が存在する。自分はDIVなどのHTML要素でコンポーネントを作るときも、まずHTMLタグでモックアップを作ってから、後でロジックを差し込む作り方をするほうが多い。

その場編集（In-place editing）

要素をクリックして、その場で文字列を書き換えられるような仕組みをIn-place editingと呼ぶ。

In-place editingは知る限り下記の３つの方法がある。

contenteditable属性を使う
クリック後、要素の上にテキストフィールドを乗せる
見えないテキストフィールド（opacity=0）を最初からコンポーネント上に置いておき、クリック位置に移動する

今回のスプレッドシートは、任意のタイミングでのキー入力もテキスト入力として扱わないといけないので、３番目の見えないテキストフィールドを採用した。２番目は付箋を作ったときに採用した。

In-place editingを作るときには、特にIMEの取扱に注意が必要で、ラテン語圏のOSSはIMEを上手く扱えていないケースが多い。そもそも入力出来なかったり、変換確定のEnterキーで入力が終了してしまったり。最近は同じくIMEを必要とする中国語圏のユーザがOSSに関わることが多くなったからか、状況は改善している。