Semantic UIを利用して開発

経緯

結構前の開発の話ですが、結構な規模の開発をすることとなりました。その開発メンバーですが、システムを内製で手の内化するというのもあり、内製メンバーも開発することになりました。

しかし、外部への委託がメインの会社だったので、あまり開発が得意ではありませんでした。画面周りが弱くJavascript、cssなどは特に弱かったのです。

そこから教育をがっつりする時間もなかったので、学習コストが少なく、とても有効活用できるSemantic UIというのを利用するようにしました。

ちなみにSemantic UIの開発は止まっているらしくFomantic UI

利用準備

CDNがあるので、以下を記載すれば利用できます。

<script src="https://cdn.jsdelivr.net/npm/jquery@3.3.1/dist/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/fomantic-ui@2.8.8/dist/semantic.min.css">
<script src="https://cdn.jsdelivr.net/npm/fomantic-ui@2.8.8/dist/semantic.min.js"></script>

クラス名で直感的に書ける

Semantic UIはクラス名で直感的にわかるようになっています。

たとえば、以下のように書いたときの結果です。

<div class="ui form">
  <div class="inline fields">
    <div class="eight wide field">
      <label>Name</label>
      <input type="text" placeholder="姓">
    </div>
    <div class="five wide field">
      <input type="text" placeholder="名">
    </div>
    <div class="three wide field">
      <button class="ui blue labeled icon button">
        <i class="save icon"></i>
        Save
      </button>
    </div>
  </div>
</div>

<button class="ui blue labeled icon button">
  <i class="save icon"></i>
  Save
</button>

blueなどで色を指定できます。 iconも色あり今回使ったのは保存のアイコンです。 labeledとつければボタンの前に線が入ってアイコンが付きます。

そしてrightとつけるとアイコンが右に行きます。

<button class="ui blue right labeled icon button">
  <i class="save icon"></i>
  Save
</button>

また、<div class="eight wide field">のところでは16分割してそのうちのどれだけ使うかを指定できます。
サンプル表示では幅が狭いので縦に並んでいます。幅が狭いと勝手に縦に並べてくれます。

サンプルが豊富

Semantic UI(Fomantic UI)のサイトを参照すると、色々とサンプルがありコードをさっとコピーできるようになっています。

正直使うのを決めた理由はこれですね。みんなコピペでガンガン使ってくれました。

ただ、外部の方も使って請負で作成してもらったのですが、色々と言われてて大変でした。

何を言われたかといいますと、「私たちはSemantic UIを使ったことがないので、利用できません。
使わせたいのであれば、仕様をまとめてください」と。

え？？サイト見れば(*‘▽’)？？とマジで思いました・・・。成果物の責任があるとはいえ、それはどうかと思いましたね。

すごい無駄なことなのですが、プロジェクトでよく使うであろうサンプルを Excelにまとめて記載するということをしました・・・

まとめ

Semantic UIは直感的に使いやすく、また、サンプルも豊富です。画面の開発に精通していない人たちでも、比較的学習コストも少なく使えるようになります。

ただ、外部へ請負で出すときは、成果物の責任が請け負う方に行くので、リスクを少なくするために使えないといわれるかもｗｗ使ってもらうのに大変な可能性があるかも。

作成日:2022-03-05　更新日:2022-03-05