前回に引き続きanntというサービスを作った話です。 part.2 では主に技術面の話について書いていきます。
今回始めてvue.jsを使ったのですが本当に便利です。何が便利かってサイトを構成するパーツを分けて実装できるのが本当に楽でした。 anntはvue-routerを使ってSPAとして作成したのですが、思ったよりぬるぬる動いてこれは良いものだとなりました。 実装していく際にも各ページ毎にComponentとして実装していくので、特にファイルが肥大化することもなく読みやすく作れます。勢いで作ったので一部は肥大化してしまいましたが。
これまでjs周りでjquery以上の何かを使ったことが無かったので、個人用のツール作るときは読みづらい＋肥大化する⇒放置というパターンに陥っていたのですが、適当な粒度でパーツ毎に切り出していけるのでダイアログとか作るのはすごい楽でした。
正直Reactなどの他の仮想DOMライブラリとの違いを把握していませんが、何か新しいWebアプリ作りたいってなったら学習コスト含めてもこの手のライブラリを使っていくのが良いのかなぁと思いました。 個人的に気になるのはこの先どのくらいサポートされるのだろうか...という点です。 なんかしょっちゅう新しいライブラリが出てきているイメージがあるので、徐々に廃れていって突如開発中止になるのは怖いなぁと思います。 まぁでもこれだけ勢いのあるライブラリであればしばらくは心配する必要も無いのでしょうか。
実際にアノテーション作業を行う画面はほとんどcanvasでできています。 作業の大半の時間はここを作るために費やされた気がします。 大変だったのは座標の変換処理とBoundingBoxを作るところでした。
座標の処理を作っている際は発狂していました。 addEventListenerでclickなどのeventの座標を取得⇒canvas上の座標に変換⇒画像上の座標に変換、と言葉にしてしまえば３ステップですが、画像を回転させたりすると変換がどんどん複雑になって沼にハマりました。 本当はこの辺の座標変換の処理を上手く適当なクラスに隠蔽して画像上の座標だけを意識して作業できるようにすれば良かったんですが、気がついたら後戻りできないところにいた気がしたので力づくで成し遂げました。 リファクタリングは今後の課題です。
これまでペイントツールとかで良く使っていたもののはずが、いざ実装してみるとBoundingBoxのことを全然理解していないということに気が付きました。 特に画面外に持っていこうとしたときの処理とか全然作れなくて、結局動いているのかどうか怪しい実装になってしまった気がします。
DropboxはAPIを公開しているのでoauthで認可してもらえれば普通に叩けます。 ドキュメントがしっかりしているのでそこまで苦労はしませんでしたが、APIによって引数の渡し方が違ったりするとこで少し躓きました。 でもドキュメントをしっかり読んでれば回避できたことなので、ドキュメントをしっかり読みましょうという教訓を得ました。 あと作りきった後にSDKが存在していることを知りました。下調べをしっかりしましょうという教訓も得ました。ここに関しては反省しかないです。
firebaseでjavascriptを使いました。 どうしてもクライアント側に持たせたくない処理だけをサーバー側で持つようにしました。 なので全部で500行行ってなかったです。 firebaseは安いし楽だし便利なのですが、個人的にはKey-Value型のやつがよくわからないのでRDBが使いたかったです。それ以外は満足です。
特に書くことも無いのですが、こだわったポイントとしてはプロパティを使って, x, y, width, heightという表記でも, left, top, right, bottomという表記でもどちらでも使えるようになっています。 widthを書き換えればrightの表記も書き換わるので割と便利だと思います。ぜひ使ってみてください。自分の環境でしかテストが出来ていないので動くかが不安ですが。 画像の読み込みだったり表示だったりはopencvでやっているので全部でこちらも500行くらいでした。READMEだったりsetup.py書く時間の方が長かったです。
いろんなライブラリがあって本当に便利な世の中だなぁと思いました。 なので作業する前にちゃんと公式のライブラリが無いか探してドキュメントを読む癖をつけましょう。 お兄さんとの約束です。作り終わった後に必要だったライブラリ見つけると本当に時間を無駄にした感がすごいです。