つくったもの:画像を手動で分類するやつ

oka
7 min readJan 28, 2021

--

こういうやつ。

機械学習の画像データセットを作るのに使う。 ROI の指定には対応しておらず、画像をラベルごとのディレクトリに分けるだけのやつ。

使った技術

Vue3 と Electron を使って作った。言語は TypeScript。バイナリは Mac 版と Windows 版が GitHub Actions で生成されるようになっている。特に技術について書くことはないが、以下の情報を参考にした。

参考にした情報

↑ Vue3 の検討ポイントが分かりやすく書かれていた。あとから Vue3 にアップデートするのが嫌なので Vue3 を採用したが、 Vuetify など有名なライブラリが使えないのでちょっと早かったかも。また今回は Vue component を従来通りの書き方にしてけど、vue-class-component は分かりやすく書けそうなので今度使ってみたい。

↑ VueCLI + Electron + TypeScript + Yarn の開発環境を作るのにお世話になった。VueRouter の History mode じゃなく Hash mode を使うというのも役に立った。

↑ GitHub Actions を書くのにお世話になった。自分は yarn を使っている、ビルドのところに GH_TOKEN という環境変数を指定する必要があった、Electron の生成物の入る場所が dist_electron になっている、などの理由によりマイナーな変更をしたものはこちら。Electron のビルドのようにけっこう時間がかかるものが自動で動いて、ちゃんと Mac 版と Windows 版のバイナリが生成されるのを見るのは気持ちいい。

↑ 異なる Vue コンポーネント間で変数を共有するのに、依存性の注入 (DI) の仕組みを用いた。うまく動いたが、あまりきれいに書けていない。

↑ Electron のダイアログでファイルやディレクトリを指定して、 Node.js の fs で操作するのに参考にした。

↑ Vue3 には Vue.use はないので createApp のところに書く。

↑ 意味は分からないが Electron のエラーを消すのに役立った。

アフィリエイトコーナー

Vue.js に関しては、猫本を初版が出た当時ジャケ買いした。

今見たら2版が出ている。が、この本は書いてある内容が断片的で正直おすすめできない(絵はかわいい)。

読んだことないけど、同時期に出たこっちの方が同じ価格帯で厚くて良いという噂。

Amazon で見ると掌田さんの本も出ている。この方は色んな言語、フレームワークの本を書かれていて、それがメリット (勘所を押さえている感じ) でもあり、デメリット (細かいところを知るのには向いていない) でもある。自分もどちらかというと色んな技術をつまみ食いするタイプなので、興味にあっている感じがする。個人的には以下の本を持っていて、気に入っている。

Web アプリを学ぶのに Ruby on Rails とか Django などのフルスタックフレームワークから入ると、機能が多すぎて何をしているのかよく分からなくなってしまう。この本は Python の http.server というモジュールから始めて、 format 関数を使ってテンプレートエンジンを説明してから Flask (サーバーサイド)へという流れがわかりやすかった。また Vue と Bootstrap (フロントエンド) や SQLite (データベース) のことも書かれていて、これだけで一通り必要な技術が学べる。SQLAlchemy はこの本で初めて知った。Amazon の評価が低いのは誤植が多すぎるせいで、それがなければもっと高評価のはず。

--

--