Photoruction工事中!

Photoructionの開発ブログです!

建設テックのCEOがコード書いてた頃を思い出して、建設テックならでは(?)のマニアックな便利機能の実装を振り返る

こんにちは!株式会社フォトラクションでCEOをしている中島です。

 

Photoruction Advent Calendar 2021の1日目の記事です。

 

 

普段は色んなところで建設テックについての記事を書いたりしているものの、今回は「開発」がテーマ。

 

ということで、社内で「自分もAdvent Calendar書いてみたい!」と立候補したは良いものの、何を書いたら....と困りながらタイプしています(汗

 

仕事柄コードは全然書かないものの、プログラミング自体はすごく好きで昔からプライベートでアプリを作ったりとか、もう4年も前ですがPhotoructionのリリース前ぐらいまではコード書いてたりしました。

 

せっかくなので、そんな過去も活かしてPhotoructionにあるマニアックで普通のアプリではあんまりやらなさそうな便利機能の実装について書いてみたいと思います。

 

最初から言い訳ですが、もう4年も前の話ですので既にPhotoructionでは使われてなかったり、間違った内容になってしまっているところもあるかと思いますので予めご了承ください!

 

さらに、ただの振り返り記事であり、具体的な実装に関しては忘れてしまったので本記事にコードは一切出てこないです!

 

そんな適当な技術記事(?)ですが、頑張って面白く書くのでぜひ最後まで見てください!

 

 

自由入力とリストを組み合わせたcombo boxフォームの実装

最初にどうしてもPhotoructionにつけたかったけど実装が大変だった思い出の機能がcombo boxです。

 

combo box自体はあんまりWebアプリで見ないですが、WIndwosアプリではよく(?)使われていて、自由入力のフォームとリストを組み合わせたものです。

 

f:id:photoruction_tech_blog:20211129124156p:plain

これです

Photoructionは建設業向けのアプリですが、工事現場では入力する内容が決まっているけど、イレギュラーも多く、その場で自由入力したいこともある項目が多いため、便利に使ってもらうことを考えるとどうしても実装したい機能でした。

 

そこで調べるとjQueryにcombo boxがあることを見つけ、めでたしめでたし....と思ったのですが「入力した文字で検索する機能」と「入力してリストになかったらリストに入れる履歴保存機能」をどうしてもつけたくてそれをやると超大変に。

 

当時このページを参考に検索機能はautocompleteでjQueryの標準でなんとなくいけたのですが、問題は履歴保存機能。

https://jqueryui.com/autocomplete/#combobox

 

保存して出すということは、非同期通信でデータベースから持ってきてフロント部分を変えるのですが、元のソースがjQueryの中にあるので素人に毛が生えたぐらいのエンジニアレベルしかない私からすると大仕事。

 

非同期通信でフロントを更新したはずなのに、内容が書き変わらなかったり、無駄なinitialize関数を連発したりととにかく悪夢かと思うぐらい大変だったのですが、実装した後は出来ないことは何にもないと改めてプログラミングの可能性を感じた実装でありました。

 

dwgやdxfなどCADファイルの変換サーバーの実装

Photoructionには建設業の図面(設計図)を扱う機能があります。

 

ただ、建設業では図面をCADで書くためpdfだけではなくdwgやdxfといった少し特殊なファイルも扱えるようにする必要があったりします。

 

とはいえそんな特殊ファイルを扱えるようなライブラリは当時なかったですし、ゼロから実装はとてもじゃないけど大変でした。

 

そこで選んだのは全て汎用的なフォーマットであるPDFに変換する方針。

大枠はこうです。

 

  1. dwgやdxfファイルをアップロードされたらS3に格納
  2. SQSに変換タスクをキューに入れる。同時にデータベースには変換中のステータスを入れる。
  3. SQSから変換サーバー(EC2)に変換メッセージを送信
  4. 変換サーバーはS3からdwgを取り出しpdfに変換してS3に格納
  5. データベースが変換完了を受け取りUIへフィードバック

f:id:photoruction_tech_blog:20211129124302p:plain

雑ですが絵に描くとこんな感じ

dwgやdxfを変換するライブラリだったり製品は海外製であるものの、世の中にいくつか存在しているためそいつをサーバーで動かして変換してしまおうという感じです。(Photoructionで何を使っているのかは秘密ですが....。)

 

AWSの機能を活用して開発した初めての機能ということもあり、動いた時は「こんなことまでできちゃうんだAWS!」と感動したのをよく覚えています。

 

巨大な画像を高速表示させるタイリング機能の実装

PDFに変換できたから「これでdwgもdxfも怖くない!」という感じではあるのですが、実はPDFをそのまま表示するだけだと不便な点が。

 

dwgなどのCADファイルは実は多数のレイヤーが作られていて、作り方次第ではPDFファイルそのものが非常に重たいケースがあります。

 

私が知っている中で一番重たいやつだと1枚のPDFで500MBみたいなやつもありました....。

 

そのため、これをフロントで表示しようとすると色んな問題点が出てきます。

 

そこでどんなに重たい図面でも高速で表示できるよう、Photoructionではタイリングの技術を用いています。

 

どうゆうことかというと、1枚のPDFからdpiの異なる画像を複数生成してそれらをタイル状に切って、ユーザーが表示させているところの画像だけをロードします。こうすることでPDFではなく画像かつ全てロードしなくても良くなるため、非常に高速で図面を表示することが可能です。

f:id:photoruction_tech_blog:20211129124402p:plain

当時の社内企画資料からの抜粋

Google Mapをはじめとする地図で使われている技術で、フロントはleaflet.jsというライブラリを活用して実装した記憶があります。

https://leafletjs.com/

 

とは言えバックエンドでdpiの異なる画像生成、画像を切ってのタイル生成、さらにはそれらを部分的に読み込む機能など、さまざまな要素が絡むため実装するのに非常に苦労した機能です。

 

動いてるところを見ると簡単そうなのですが、こうした技術の積み重ねが使い勝手の良い魔法のようなアプリケーションを実現しているんだなと実感した瞬間でありました。

 

まとめ

読み返してみると、これほどに役に立たない技術記事をAdvent Calendarの1発目で出して本当に大丈夫なのか...と不安でいっぱいにあります。笑

 

一方でここでの実装経験があるからこそ、テクノロジーが持つ無限の可能性を心から信じることができています。

 

Photoructionにはまだまだマニアックな機能がたくさんあり、そしてこれからも開発を続けていく必要があります。

 

それだけテクノロジーの力を使って解決できる課題が数多く残されているということで、重厚長大な巨大産業をスマートな世界に変えていきたいと思っているエンジニアの方はぜひ一緒に開発しましょう!

※ 冒頭にも書きましたが筆者はもう長いことコーディングには携わっていません....。


株式会社フォトラクションでは一緒に働く仲間を募集しています