VIVITABLOG

VIVITAで活躍するメンバーの情報発信サイト

タブレット用CADツール「VIVIDESIGNER」の開発

こんにちは、VIVITAのソフトウェアエンジニアのかっしー(@kassy_vvt)です。

本稿では前回の記事でチラッと触れました、弊社が運営するVIVISTOP柏の葉にて提供するタブレット向けCADツール「VIVIDESIGNER」について語らせていただきます。 f:id:kassy_vvt:20180808220756p:plain

開発の始まり

VIVISTOP柏の葉のオープン直前の2016年12月頃、ここにレーザーカッターや3Dプリンターなどの最新機器が導入されるとの情報を得て、タブレットでレーザーカッターをハックできたら面白いかと思い、こっそりと開発をスタートしました。

前回の記事で

もちろんレーザーカッターを使うためなら世には他の製図ツールがあるのでこのツールを使う必然性はありません。しかし

  • イラストレーターなどの高機能ツールは高価
  • PCは十分な台数が無い(タブレットは十分な台数がある)
  • 他のツールの存在を認知した上で、もっととっつき易いツールを開発する余地があると思った

などの理由から開発を決行しました。

と書きましたが、すいません、これは同僚や脳内上司(※念の為、実在しません)を説得するために用意した材料であり、開発当初の本音は「僕が作りたかったから作った」です。幸いなことに弊社の周囲の人は新しいことを始めることに理解のある人ばかりで上記のエクスキューズを披露する場面はありませんでした。

f:id:kassy_vvt:20180808214101p:plain

一番最初のプロトタイプができた時点で社内で披露し、UIデザイナーにデザインを依頼しました。今見返すと味気なさすぎる画面ですが、デザイナーの手が入っていないプロトタイプなんてこんなものです。(たぶん)

f:id:kassy_vvt:20180810114803p:plain

同時期にロボコンを企画していたこともあり、「少なくともロボット製作で頻出の図面が描ければリリースしてもいいだろう」くらいの甘い考えで作っていました。ですので当初から備えていた機能は円、四角形、ハコ、そしてハードコーディングされたギヤの形に線を引く機能のみでした。

レーザーカッターとの連動についてもとりあえずsvgで出力し、サイズや適用できる図形などの詳細は実際にレーザーカッターに読み込ませながらブラックボックス的に挙動を確認して作り込んでいきました。

ある程度できた時点で同僚数人相手に試用してもらい、操作感や機能についてフィードバックをいただきました。

f:id:kassy_vvt:20180810114857p:plain

VIVISTOP柏の葉オープン後

試練

2017年2月にVIVISTOP柏の葉がオープンしました。オープン直後は開発者の僕にとって試練の日々です。最初は子ども相手にアプリの布教活動を行い、ただハコを作る作業に勤しんでいましたが、子どもはあっという間に操作に習熟し、ただのハコで飽き足らずもっといろんなものをレーザーカッターで作りたいと主張してきます。

f:id:kassy_vvt:20180808230845p:plain f:id:kassy_vvt:20180808230449j:plain f:id:kassy_vvt:20180808232109j:plain f:id:kassy_vvt:20180808231810p:plain

まだ「できないことの方が多かった」ため、ここらで本アプリの役目を諦めてしまおうかという弱気な考えも過ぎりましたが、(個人的な意地もありますが)「ツールの内製」を簡単には諦めたくなかったので、なるべく子どもの要望に応えられるよう機能追加をしていきました。

子どもに「1日待って。明日までにそれ描けるようにしておくから」とお願いして待ってもらい、その日の夜に慌てて実装することも多かったです。場合によってはその場でPCを開いてライブコーディングで機能追加したりもしてました。待たせることによる罪悪感が凄まじかったので、この当時の僕は人生史上最速クラスのコーディングスピードだったと思います。(その分雑になってしまった事も否めませんが...)

続投の決定打

f:id:kassy_vvt:20180808233805p:plain

オープンしてひと月ほど経過したある日、コマ撮りアニメーション作成を嗜む子どもが「アニメ背景用の木を作った」と報告してくれました。その完成度は非常に高く、当初「あー、他所のツール使って作ったんだなー」とか「ここらが潮時かー」くらいに思っていましたが、驚いたことになんとそれは弊アプリで作られていました。

f:id:kassy_vvt:20180808233659j:plain

思わずタブレットの画面を二度見しました。そしてじっくり見ても「どうやってこれを描いたのか」開発者であるはずの僕自身が全くわかりません... 一体どんな手を使ったんだと戸惑うと同時に、自分のツールで自分の想定を大きく超える作品が子どもから生み出されたことにとてつもない喜びを感じたのを鮮明に覚えています。こんな凄い作品が作れるんなら弊アプリに存在価値があるとみなしても良いんじゃないかーという安堵も得ました。

この一件から僕自身が気持ち的に吹っ切れてアプリ開発を推し進めていけるようになった気がします。

進化と挫折のスパイラル

だんだんと自分の中に、「レーザーカッターの作例を、タブレットで簡単に再現できる機能に落とし込む」ことに使命感のようなものが湧いてきます。自身で作例を探したりもしましたが、やはり現場の子どもからの要望が圧倒的に多く、そして熱意が高いので圧倒的にモチベーションが上がります。

ある時期突然ハンドスピナー作成ブームが訪れたときは自由な形状のハンドスピナーを作れるようにするUIを模索する日々が続き、ある時期突然に名札作成ブームが訪れたときにはテキストを埋め込むための機能を開発する日々が続きます。逆に開発者の僕が良かれと思って実装した機能が子どもからこれっぽっちも使われなくて日の目を見ずに消滅していったこともあります。

f:id:kassy_vvt:20180809173738p:plain f:id:kassy_vvt:20180809173555p:plain

f:id:kassy_vvt:20180809173346j:plain f:id:kassy_vvt:20180809174330j:plain

急な機能追加を支えてくれたのはAndroid OSならではの豊富な描画機能やライブラリです。これらを活かした開発に関する知見も溜まってきたので追々こちらのブログ等で技術を公開して社外に還元していけたらと存じます。

f:id:kassy_vvt:20180809174152p:plain f:id:kassy_vvt:20180809173517j:plain f:id:kassy_vvt:20180809222434j:plain

子どもはいつも僕の想像を遥かに超えるとんでもない物を作ろうとします。それに対して応えられたときの達成感は凄まじいです。逆にアプリが子どもの要求を満たせなかったり、さらにはクラッシュして子どもの大事なデータをふっ飛ばしてしまったこともあり、その時は絶望に至るほどの罪悪感を感じます。子どもからお叱りを受けるケースも両手両足では数え切れないほど発生しました。

f:id:kassy_vvt:20180809183946p:plain

今後の展望

VIVISTOPは子ども達にとって最高の創作活動の場であると同時に、我々エンジニアにとって良いユーザーテストの場となってくれました。

アプリに慣れた子と新規入会して初めてアプリに触れる子、それぞれから全く別の知見が得られます。慣れた子はガシガシ機能要望くれる代わりに操作に慣れきっているが故に細かい使い勝手等に不満を言わなくなります。逆に新規の子を観察しているとなかなか上手に使いこなせず「あ、そこは直感的にはそういう操作をしたくなるんだな」と気づきを得られることが多々あります。また、弊社は2018年上期にエストニアで新規のVIVISTOPを立ち上げようとしていますが、そこで現地の子どもの操作を観察しているとまた新たな気付きがあったりします。

こんなに様々なユーザーからのダイレクトなフィードバックを得られる環境はそうそうないものと思います。試練やら挫折やら絶望やらありましたが、今後も鋭意に開発を続けていく所存です。こういう環境でアプリ開発を回していくサイクルを止めてたまるかってんですよ。

f:id:kassy_vvt:20180809181814p:plain

エストニア Latitude59 にて