【建築×プログラミング】ポンチ絵作成Webアプリ Ponch （フロントエンド版） |

ポンチ絵を作りたい

以前別のサイトですが、以下のような記事を公開しました。【インストール不要】構造解析でありがちなポンチ絵を書くWebアプリ「Ponch」をつくりました以前作ったときは、サーバー側でポンチ絵を作ってブラウザ側で受け取って表示、という典型的なクライアント・サーバー型のWebアプリ構成でした。最近、チーム内でElmというプログラミング言語を使った勉強会を実施しているので、Elmを使って改めて作り直してみました。プログラミング言語 Elm については、本記事内で語りだすと趣旨がずれそうなので割愛します。個人的な感想としては、「一見難しそうだが極限的にシンプルで美しい言語」という印象です。なお、基本的にWebページの画面部分を作るための言語ですので、Elm単独で私たちがよく取り扱うような複雑な計算プログラムを構成するような種類のものではありません。

新Ponch解説

まずは新たなWebページのURLを示します。 https://www4.kke.co.jp/resp/tool/ponch/Main.html 以前のものに比べて、以下が変わりました。

バックエンド処理がなくなり、静的なHTML+JavaScript（Main.html+Main.js）になった。以前のプログラムではサーバーアプリケーションが必要であったためクラウドサーバーを使っていたが、今回はRESPのWebサイトにファイルを配置するだけで動かせるようになった。
SPA（シングルページアプリケーション）になったため、画面のロードが早くなった。

また、内部の実装としては、以下のような利点がありました。

Elmは制約が大きい代わりに実行時のエラーがほとんど発生しない言語であり、実際に実行時のエラーに悩まされることはほぼなかった
以前はバックエンド側のコードとフロントエンド側のコードを書く必要があったが、ほぼElm言語を書くだけで完成した

構成がすっきりしたおかげで、勉強会の中であまりWeb開発に慣れていないメンバーも含めて一人1つ以上のポンチ絵ページを担当して完成させることができました。慣れていないメンバーが作っても、Elmのルールに乗っかることで安定した品質のページを完成させることができた点も、メリットとして感じました。各ポンチ絵は、SVGというフォーマットで描かれています。これらのポンチ絵は画面キャプチャで取得することもできますが、SVGファイルをダウンロードするようなブラウザ拡張機能もありますので、そういったものを活用するとさらに便利に使えます。

ポンチ絵の例

それぞれのポンチ絵を完全に主観でランク付けしてみました。

質点系モデル

実用度：★★★
こだわり度：★★☆
マニアック度：★☆☆

RESPのユーザーの方々の間ではかなり登場機会の多いであろう、質点系モデルです。オートシェイプで作りつつ、最近の超高層では団子が多すぎてあきらめつつあるケースもあるのではないでしょうか。地面の調整もできるこだわりもうれしいです。

RC矩形断面

実用度：★★☆
こだわり度：★★★
マニアック度：★☆☆

RC矩形断面の描画です。せん断補強筋まで書くのは、自力ではあきらめたくなるところなので、使いたくなるポイントのひとつです。

マクスウェルモデル

実用度：★★☆
こだわり度：★★★
マニアック度：★★★

書かないといけないときには結構厄介なマクスウェルモデルです。特にばねをちょっとずつつないでいくのが面倒です。このアプリの描画では回転まで考慮してくれているというこだわりです。

回転ばね

実用度：★★☆
こだわり度：★☆☆
マニアック度：★★☆

設定項目の少なさなどは手抜きですがオートシェイプで書くのはまぁまぁ大変な回転ばねです。これまでフリーハンドで手の震えを抑えながらマウスで描いていたのは私だけでしょうか。滑らかに見えますが、少しずつ直線で円の半径を膨らましていっているので、プログラマっぽい技法で描かれており見栄えは良いです。

まとめ

今回はRESPから離れて、プログラミング関係の記事でした。興味を持っていただける方がどれだけいるかは心配ですが、最近は建築構造の業界でもプログラミングを駆使する若いエンジニアが増えているように感じますので、記事にしてみました。

採用情報

構造計画研究所 RESPチームでは、いっしょに働いていただけるエンジニアを募集しています。
構造設計・構造解析だけでなく、プログラミング技術を活かして新しいものを生み出したいと思っている方、ぜひご応募ください。

採用HPはこちら→https://www.kke.co.jp/recruit/