DolphORCA に BootStrap 5 を導入する

 まだ開発途上だが、DolphORCA という電子カルテがある。

そのバックエンドサーバーはフリーで公開されている。

これだけだと見栄えがしないので、ANN2b 氏がメインで作成したフロントエンドサーバーに BootStrap 5 を導入してみた。

ここら辺はおそらくウェブ系の良い勉強になると思うので、忘備録的にメモ。

BootStarp でレスポンシブデザイン

まず、単純に組み込んでカラムをいじる。

bootstrap はブラウザ画面を12分割して管理しているのだが、今回は 2:4:4:2 の配分比とした。

コードの基本骨格を示すなら、↓のようななる。

<section class="text-black">

      <div class="container py-3">

            <div class="row align-items-center g-4”>

                <div class="col-md-2">・・・</div>

                <div class="col-md-4">・・・</div>

                <div class="col-md-4">・・・</div>

                <div class="col-md-2">・・・</div>

            </div>

         </div>

</div>

これでスピリットデザインが実現できてしまうのは便利としか言いようがない。

4:4 のところに SOA と P を配置すると、こうなる↓

ところで、bootstrap はレスポンシブを意識して設計されている。

ブラウザ幅を狭めていくと、まず、画面上部のメニューがハンバーガーメニューに変化する。

画面右上にメニューに注目。

さらに狭めていくと、レイアウト自体が変化する。

画面の右半分が、下に回り込んでいるのがわかるだろうか？

なお、ハンバーガーメニューは、クリックすると以下のようにメニュー項目が展開される。

BootStrap の良い点は、レスポンシブデザインが少ないコーディング量でお手軽に実現できる点だ。

注意点

ただし、BootStrap は 4 → 5 の変化で微妙に変化があったようで、例えば、今までであれば

data-toggle

だったところが、

data-bs-toggle

のように改変されていた。

ここを修正しておかないと、従来のハンバーガーメニューは正常動作しないのだが、言及された記事は全く見かけなかった。

有名な割にちゃんと使っている人は少ないのかな？

DolphORCA → PHORLIX

ところで、なぜ、DolphORCA の開発が進んだかといえば、医師会の WebORCA （オンプレミス版）のリリースが迫っていたから。

WebORCA 自体は、先日、公開されたが、これで開発に弾みがついたかといえば、そうはならなかった。

むしろ逆。

思っていた感じではなくて、なんか落胆した感じになってしまった。

別に、WebORCA 自体が悪いというわけではなく、ORCA がどんどん進化していっている時期を知っている人が多く、そこと比べると致し方ないかなあ？

確かに、ワクワク感はないですね。

ただ、持て余した熱意は、捌け口を求める。

今回は、それが画像関係に向かった。

具体的には PHORLIX 。

なんで、Metal に着手して１週間かそこらで、こんなの作れちゃうかなあ？