@ledsun blog

無味の味は佳境に入らざればすなわち知れず

プログラマ面のいちねんのふりかえり

お仕事

TextAE

長年、開発しているアノテーションエディタです。今年やった大きな作業は3つあります。

  1. jsPlumbを使うのをやめてSVGを直接描画
  2. モバイル端末対応
  3. システムクリップボードの利用

jsPlumbを使うのをやめてSVGを直接描画

f:id:ledsun:20211228224012p:plain
エンティティの間つなぐ曲線

エンティティの間を繋ぐ曲線を描画するのに、jsPlumbというライブラリーを使っていました。 開発初期はどういう使い方をするか明確になっていなかったのと、SVGの使い方を理解するのにコストを考えてライブラリーを採用しました。 長年の開発の結果、用途は「ベジェ曲線を引いて頭に矢印をつけるだけ」と明確になったので、素でSVGを使うように作り直しました。

実装がシンプルになり、線の描画が高速になりました。 以前は、エンティティの描画より線の描画の方が時間がかかっていたのですが、完全に逆転しました。

jsPlumbはエンティティが描画されていないとエラーが起きるので、描画タイミングを工夫していました。 アプリケーションはエンティティを描画する位置を知っているので、本来必要ありませんでした。 ライブラリーという形態である以上、仕方が無い工夫でした。 こういった工夫がなくせました。 ライブラリーがなくなった方がドメインロジック(このエディタにとっては、線の描画の仕方はドメインロジック)に集中できるようになることもあるようです。

また、ライブラリーを介してではできない細かい調整が可能になりました。

f:id:ledsun:20211228224522p:plain
エンティティをホバーすると矢印がわかれる

例えば「エンティティの幅が狭く矢印が重なってしまう場合に、エンティティをホバーしたときだけ矢印をわけて描画する」みたいな機能が実装可能になりました。 このとき、エンティティ側から伸びている棒は、実装上は線の一部です。 見た目の概念と実装がズレているので、エンティティ側に実装を持って行った方が良いのかなあ?というのは、今も悩みどころです。

f:id:ledsun:20211228225510p:plain
二回曲がる曲線

エンティティの左右位置が近すぎる場合に線を二回曲げれるようになりました。 3次ベジェ曲線は二回曲がることは出来ません。 実体は、3次ベジェ曲線を途中でちぎって、そこから2次ベジェ曲線を繋げて、2回曲げています。 さすがにこれをライブラリーにやれというのは無茶苦茶です。 ベジェ曲線はn次関数のグラフです。 どこでちぎれば上手く繋がるのかの概念を理解するのに数2の「三次関数とグラフ」が役に立ちました。 数学って便利ですね。

モバイル端末対応

TexeAEはマウス操作を前提としていました。 モバイル端末でも使えるように対応しました。 一番の問題は選択したエンティティを持つ文字列を長くしたり短くしたりする操作です。 マウス操作では文字列選択の方向がわかります。 具体的はAnchorNodeとFocusNodeを参照しています。 この情報を元に、ユーザーが文字列を長くしたいのか短くしたいのか判断していました。 タッチ操作では、AnchorNodeとFocusNodeはわかるのですが、最後に調整した端がFocusNodeになります。 このため「ユーザーが文字列を長くしたいのか短くしたいのか」はわかりません。

f:id:ledsun:20211228231016p:plain
コンテキストメニューで長くしたいのか短くしたいのか指定する

結局、コンテキストメニューに操作を表示してユーザーが選択する形にしました。 iOSの場合はコンテキストメニューを変更できません。 ツールバーに同様の操作をするボタンを配置しました。

細かい点では、機種の判定でも苦労しました。 当初タッチ機能の有無で判定していたのですが、ノートPCにはタッチ機能を持つ物もあるため上手く判定できませんでした。 結局、機能毎に次のどれが重要なのかを決めるのがよかったです。

  • タッチ機能の有無
  • ウインドウ幅の狭さ
  • OS

例えば、「長くしたいのか短くしたいのか」指定するボタンは「タッチ機能の有無」が重要です。 コントロールバーを折りたたんでハンバーガーメニューを出す機能は「ウインドウ幅の狭さ」が重要です。 iOSAndroidか固有のOSに対して処理をしたい場合は、UserAgentを見てOSを判別するのが重要でした。

システムクリップボードの利用

TexeAEは、もともとエディタ内に閉じたコピーアンドペースト機能があります。 システムクリップボードを使えば、2つのブラウザで起動したエディタ間でコピーアンドペースト出来るようになります。 これは開発中なので、まだ細かいことはわかっていません。

最初、Clipboard APIの仕様とブラウザの実装状況に差異があることに気がついていませんでした。 どういう操作なら実現可能なのか調べるのには苦労しました。 Ctrl + C, Ctrl + Vの操作を変更して、任意のデータをクリップボードに書き込んだり、クリップボードのデータに応じてエディタの内容を更新するのは可能です。 それ以外のユーザーの操作を契機にして、JavaScriptからクリップボードを操作するのは、ブラウザの動作による制約が厳しいです。

Rails アプリケーションのアップデート

Railsアプリケーションを6個アップデートしました。 1つはそれなりに大きかったので、優秀な新入社員の方にメインにやってもらいました。 それなりに大きくて仕様が特殊でわかりにくいアプリケーションでしたが、お客様とうまくコミュニケーションとって仕様を確認しながら進めていました。 残りの小さいアプリケーションは頑張って腕力で対応しました。 完全に記憶を失っていたのですが、すべて過去に自分が触ったことのあるアプリケーションでした。 さわりながら記憶が回復して、仕様がわかったのでそれなりの時間で対応できました。

本当はもっと一般的なRailsアプリケーションアップデートの知見がまとめられると良いのですが・・・いまのところ「アプリケーションの仕様による」以上のことが言えない感じです。

ECサイト開発のお手伝い

サービスイン済みのRailsアプリケーションの日々の開発のお手伝いです。 メインは優秀な若手社員がやったので、そのお手伝いをしました。 契約上の都合で、別のプロジェクトに移りましたが、お客様から早く帰って来てほしいとリクエストされるくらい優秀でした。 なかなか大きなアプリケーションだったので、activerecord_umlというGemを使って、モデル間の関連を頑張って理解していました。

PHPアプリケーションの機能追加のお手伝い

色々あって、なぜかPHPアプリケーションの開発のお手伝いをしました。 やはり優秀な新入社員がいて、メインでやってもらいました。 新しい集計機能だったので、性能が出るかわからず「バッチに逃がすか?」とか考えていました。優秀な新入社員は、優秀すぎて、PHPわからんとかいいながら、それなりに大きいデータでも余裕で一秒切る検索性能で実装してくれました。杞憂にしてくれました。

僕は、PHPがあまりわかりません。雰囲気でソースコードは読めるのですが、書いたソースコードのレビューとなると全く手が出ませんでした。 JavaScriptの部分はわかったので、レビューしました。

技術的負債を調べる仕事

契約タイミングのマジックで、人様が作った既存のアプリケーションの技術的負債を調べるという不遜なお仕事をしました。

諸々あったのですが、その中で「AngulaJSからAngularに移行する方法」を調べました。 作っている組織が同じであるのと、移行用の機能が提供されているので「Angularへの移行が妥当」という仮説から調査しました。 結構、頑張って調べたのですが、結論としては「Angularへの移行は別段有利ではない」でした。

AngularJSとAngluarはアーキテクチャが違いすぎるように思います。 漸近的な移行はできます。 しかし、移行中はAngularJSとAngluarのコードが併存します。 つまり、両方出来る人が居ないとメンテし続けられません。 すでにAngularJSに詳しいチームがAngluarを勉強しながら進める強い覚悟がないと難しいなあ・・・という感じです。

例えば、Reactに慣れた人がいるのであれば、AngularJSのソースコードと実際の動作をみながらReactに移行するのとあんまり変わらないなあ・・・と言った印象です。 要はAngularJSだからといってAngluar一択ではなく、今後のメンテナンス要員を確保しやすいフレームワークへの移行で良いんじゃないかなあ?と思いました。

ウィンドウズのインストーラー作り

Install shieldというインストーラーを作るための鉄板ソフトウェアがあります。 ただ、いかんせん値段が高すぎます。 そこでWiX ToolsetというOSSインストーラーを作れるようにする仕事です。

正直、ウインドウズ向けのインストーラーを作る技術って将来性なさ過ぎるじゃないですか、Microsoft Storeがある時代にインストーラーって・・・。 こういう未来がなさそうな技術のお仕事にはおじさんエンジニアの出番です。

もとのインストーラーの機能にもよりますが、300~500万円もあれば大抵はなんとかなりそうな感じです。 Install shieldの値段を考えると、一回外注して移行しちゃうのはありな価格感です。 もしかすると需要はあるのかもしれません。 僕は、かなり条件がよくないと受けられないので、ウインドウズのインストーラー作りに詳しい人は、2022年はワンチャンあるかもしれません。

社内のあれこれ

今年新しくはじめたことは特になかったように思います。 コロナ禍っていうのもあるんだと思うんですが、会社でまったく新しいことをしていないかというとそうでもありません。 会社説明会をやってみたり、研修のカリキュラムを再考したり、そういうことは自分以外の人がやってくれています。

社外活動

Kaigi on Rails _2021_ new - Kaigi on Rails | Doorkeeper でライトニングトーク

発表はこれだけです。 オンラインのリアルタイム発表って5分でも大変だなーって思いました。 たぶん録画の方が楽だったと思います。 当日、あまり感触はなかったです。 後日、見ていたという情報を伝聞で聞くことがありました。 意外と多くの人に見られてたんだなーっと思いました。

Ruby on Rails のSQLキャッシュ(書きかけ)

途中で力尽きちゃって、そのまま公開したものです。 その割にグーグル検索で上位に出てくるので、なんだかな・・・。 なんだかな・・・というのはRailsSQLキャッシュの日本語情報少なすぎだな・・・という感想です。

macOS mojaveでgnu g++でコンパイルできない

PubAnnotaionで使っているライブラリがMac OSコンパイルできなかったときに書いた記事です。 C++周りの知識は適当なので、はまるとなかなかつらいです。

ブラウザ向けモーダルダイアログに使われるヴェールのサイズ指定方法

ダイアログ自作したいなーっと思って途中まで調べた情報を記事にしました。 結局、ダイアログの仕様を決める部分でふわふわしてて、実装に着手していません。

esbuildからUpgradeModuleを起動する

UpgradeModuleというのはAngularJSからAngluarへ移行するために使うツールです。 公式ドキュメントをみても使い方がさっぱりわからなかったので書きました。 もし、今からAngularJSからAngluarへ移行する人が居たら、何か助けになるといいですね。

Rails 4.2 のコントローラーのテストをRails 5.0の機能テストに書き直す

Railsアプリケーションをアップデートするときに、コントローラーのテストを書き直しました。 その手順を記事にしました。 以前から、コントローラーのテストってよくわかんないなーと思っていたので、良い機会でした。